JavaWeb——HTML、CSS
目录
1.概述
HTML：HTML是超文本标记语言（HyperTextMarkupLanguage）的缩写。它用于创建和设计网页的结构和内容。通过HTML，开发者可以在网页中嵌入文本、图像、链接、表格等元素。HTML是一种标记语言，使用标签（tags）来定义不同类型的元素。
CSS:CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。
2.HTML
a.HTML结构标签
<html>
<head>
<title>网页链接标题</title>
</head>
<body>
</body>
</html>注意：
1.HTML标签不区分大小写
2.HTML标签属性值单双引号都可以
3.HTML语法松散
b.图片标签
<img src="" width="" height="">src:图片资源路径
width:宽度（px,像素；%,百分比）
height:宽度（px,像素；%,百分比）
绝对路径：
绝对磁盘路径：从盘符开始的路径。在Windows系统中，它以磁盘名称（如C:或D:）开头，具体的文件或文件夹名称做结尾。。例如：D:\bbbb
绝对网络路径：在网页或网络应用中，以完整的URL形式给出的路径。它包括了协议（如http://或https://）、域名、端口号（如有）以及具体的文件或资源路径。通过绝对网络路径，可以直接访问到网络上指定的资源或页面。例如：https://n.sinaimg.cn/finance/120/w1920h600/20241105/117e-3d720875b6d1c0bde866aad611e620be.jpg
相对路径：
相对当前目录：系统当前目录到文件所在目录的路径。例如：./img/1.jpg
注意：./可以省略
相对上一级目录：相对于当前目录的上一级目录。例如：../img/1.jpg
c.标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>运行结果:
d.水平线标签
<hr>e.布局标签
<div></div>注意：
1.一行只显示一个
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
<span></span>注意：
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
f.超链接标签
<a href="" target=""></a>href:指定资源访问地url
target:指定在何处打开资源链接
-self:默认值，在当前页面打开
-blank:在空白页面打开
e.视频标签
<video src="" controls="controls" width="" ></video>src:规定视频的url
controls:显示播放控件
width:播放器的宽度
f.音频标签
<audio src="" controls="controls"></audio>src:规定音频的url
controls:显示播放控件
e.换行标签
<br>f.段落标签
<p></p>g.加粗标签
<strong></strong><b></b>h.表格
1.声明表格
<table border="" cellspacing="" width="" >
</table>border:表的边框
cellspacing:单元格之间空白大小
width:表的大小
2.表行
<tr></tr>3.普通表格
<td></td>4.加粗表格
<th></th>案例：
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- 表边框大小、表单元格空白大小、设置表的大小 -->
<table border="1px" width="900px" cellspacing="0">
<!-- 第一行 -->
<tr>
<th>序号</th>
<th>品牌Logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<!-- 第二行 -->
<tr>
<td>1</td>
<td><img src="./img/huawei.jpg" ></td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<!-- 第三行 -->
<tr>
<td>2</td>
<td><img src="./img/alibaba.jpg" ></td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>
</html>运行结果：
i.表单标签
1.声明表单
<form action="" method="">
</form>action:表单提交的url,如果不指定，默认提交到当前页面
method:表单的提交方式，默认为get
get:在url后面拼接表单数据，比如，?username=天天&password=13456，url长度有限
post:在消息体（请求体）中传递的，参数大小无限制
2. 表单
<input type="" name="">type:表单输入形式
name:表单名称
type:
3.下拉列表
<select name="">
<option value=""></option>
</select>name:列表提交内容名称
value:列表选取项提交的值
案例：
<html>
<head>
<title>Document</title>
</head>
<body>
<form action="" method="post">
<select name="学历">
<option value="">>----------请选择----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select>
</form>
</body>
</html>运行结果：
4.文本域
<textarea name="" cols="" rows=""></textarea>name:列表提交内容名称
cols:指定了文本区域的可见宽度
rows:指定了文本区域的可见行数
案例：
<html>
<head>
<title>Document</title>
</head>
<body>
<form action="" method="post">
描述：<textarea name="描述" cols="30" rows="10" ></textarea>
</form>
</body>
</html>运行结果：
3.CSS
a.引入方式
行内样式：写在标签的style属性中（不推荐）
<h1 style="color: brown;">一级标题</h1>内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
<style>
h1{/*标签 */
color: brown;/*属性名：属性值*/
}
</style>外嵌样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）
<link rel="stylesheet" href="./CSS/news.css">
<!-- 文档与被链接文档之间的关系 引入CSS文件的路径 -->b.颜色
关键字:预定义的颜色名，例如：red、green
rag表示法：红绿蓝三原色，每项取值范围：0~255,例如：rag(0,0,0)
十六进制表示法：#开头，将数字转换为十六进制表示，例如：#000000、#ccc
c.选择器
元素选择器
元素名称{
属性名：属性值
}
id选择器
1.设置id值
id=""
2.定义id选择器
#id属性值{
属性名：属性值
}
类选择器
1.设置class的值
class=""
2. 定义class选择器
.class属性值{
属性名：属性值
}
优先级：id选择器>类选择器>元素选择器
d.盒子模型
盒子模型：盒子模型是由内容区域（content）、内边区域（padding）、边框区域（border）、外边距区域（margin）组成，页面中的所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包括在一个矩形区域内，通过盒子的视角更方便的进行布局
原文地址：https://blog.csdn.net/l_tian_tian_/article/details/143724483
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！