form表单标签
form表单标签，只要应用在登录、注册页面，能够使input转为按钮之后的功能生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<input type="password" placeholder="请输入密码"><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
</html>表格标签
- table标签：声明表格。
- tr标签：表格的每一行。table row
- th标签：表头。table head
- td标签：单元格。table date cell
表格涉及的属性：
table标签：
- border：设置表格的外边界（外边框）的宽度。
- cellspacing：设置单元格与单元格以及单元格和边框的间距。
- width：设置整体表格的宽度（每一列单元格的宽度会自动调整比例）。
- height：设置整体表格的高度（每一行单元格的高度会自动调整比例）。
- bordercolor：设置边框的颜色。
- bgcolor：设置背景颜色。
- align：调整文字的水平位置（左对齐：left、右对齐：right、居中对齐：center）。
- border-collapse: collapse; 为表格设置合并边框模型
tr标签：
- bgcolor：设置背景颜色。
- align：调整文字的水平位置（左对齐：left、右对齐：right、居中对齐：center）。
- valign：调整文字的垂直位置（顶部：top、底部：bottom、中间：middle）。
- height：设置一行的高度。
- width：设置一行的宽度。
td标签：
- width：设置单元格的宽度（本列其他单元格宽度的大小随之改变）。
- height：设置单元格的高度（本行其他单元格高度的大小随之改变）。
- align：调整文字的水平位置（左对齐：left、右对齐：right、居中对齐：center）。
- valign：调整文字的垂直位置（顶部：top、底部：bottom、中间：middle）。
- colspan：列合并。
- rowspan：行合并。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<!-- 第二行 -->
<tr>
<td>张三</td>
<td>男</td>
</tr>
<!-- 第三行 -->
<tr>
<td>李四</td>
<td>女</td>
</tr>
</table>
<!-- 构造一个五行八列的表格 -->
<table bordercolor = "black" cellspcing = "0" border = "1">
<tr align="center">
<td colspan="8">简历</td>
</tr>
<tr align="center">
<td rowspan="5" width="15">个人信息</td>
<td>姓名</td>
<td width = "60"></td>
<td>性别</td>
<td width = "60"></td>
<td>出生日期</td>
<td width = "60"></td>
<td rowspan="4">
<img src="./img/1.jpg" alt="" width="60px" height="100px">
</td>
</tr>
<tr align="center">
<td>民族</td>
<td></td>
<td>籍贯</td>
<td></td>
<td>政治面貌</td>
<td></td>
</tr>
<tr align="center">
<td>身高</td>
<td></td>
<td>体重</td>
<td></td>
<td>身体状况</td>
<td></td>
</tr>
<tr align="center">
<td>联系电话</td>
<td></td>
<td>邮箱</td>
<td></td>
<td>现所在地</td>
<td></td>
</tr>
<tr>
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>div标签
div标签：无语义标签（盒子标签），一般把一个范围中涉及到的所有的标签会放到一起。div是调整页面布局前的最后一个标签。
css样式
CSS：层叠样式表。
css代码写到哪儿：
- 内部样式表：将style标签放到head标签或者body标签中。
- 内联样式：可以把样式直接作为一个标签的属性，写入到标签中，使用style属性。
- 外部样式：有一个后缀名为css的文件专门用来存放css代码，只需要在html代码中使用link标签引入即可。
link标签的语法：
- 如果rel为icon，表示给页面设置图标，type为image/图片格式，表示引入图片。
rel=“icon” type=“image/图片格式” href=“图片的链接或路径”。 - rel为stylesheet，表示给页面引入样式表，type固定为text/css。
rel=“stylesheet” type=“text/css” href=“css文件的链接或路径”。
css样式：
语法：
选择器{
属性:属性值;
属性:属性值;
属性:属性值;
…
}
说明：
- 选择器：通过标签来选择被修改的内容或者通过属性（id属性、class属性）选择被修改的内容。
- {}:固定语法（内部样式和外部样式）。
- 内部样式和外部样式:修改内容的样式使用：属性:属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 内部样式 -->
<style>
h1{
color: black;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="./css/04-html-style样式.css">
</head>
<!-- 内联样式 -->
<body style="background-color: bisque;">
<h1>这是h1标签</h1>
</body>
</html>04-html-style样式.css
/* css注释 */
h1{
text-align: center;
}css选择器
css选择器的分类：
- 通配选择器： * 能改变所有标签的样式。
- 标签选择器： 标签名 不加限定条件，能够修改页面中所有某标签。
- id选择器： #id属性值。
- class选择器： .class属性值。
一般在页面标签中会添加id属性和class属性，其对应的属性值一般都是独一无二的。
同一类数据使用一个属性值，通过调用id属性值和class属性值变相的等于调用对应的标签。 - 父子选择器： 父标签 > 子标签 ， 被修改样式的是子标签。
- 后代选择器： 祖先标签 后代标签 ，被修改样式的是后代标签。
- 兄弟选择器： 长兄~弟弟。
- 相邻兄弟选择器：刘关张：刘+关 关+张。
- nth-child选择器： a:nth-child(数字)。
a:nth-child(3)：找每一级下的第三个标签，并且这个标签是a标签（html下标从1开始）。
css边框样式和文字样式
css边框常用属性：
- border：边框粗细、样式(单实线：solid、double：双实线、dashed：虚线、dotted：点)、颜色；
- border-top：上边框。
- border-bottom：下边框。
- border-left：左边框。
- border-right：右边框。
上述四点等价于border。
- border-radius：num1{num2 num3 num4}
- num1：表示将图形的四角统一改为一个弧度。
- num1 num2：num1表示图形的左上角和右下角，num2表示图形的左下角和右上角。
- num1 num2 num3：num1表示图形的左上角，num2表示图形的左下角和右上角，num3表示图形的右下角。
- num1 num2 num3 num4：左上、右上、右下、左下。
css文字常用属性：
- color：修改文字颜色。
- font-size：字体尺寸。
- font-family：字体。
- text-align：位置（left、right、center）。
- text-decoration:在文字的上方、下方或中间添加一条横线（underline、overline、line-throught）。
颜色的表示方法：
- 颜色可用英文表示。
- 可以用三原色的数字等级表示。color: rgb（0,0,0）。
颜色：三原色:红、绿、蓝：每种颜色有0-255，一个256个等级。 - 可以使用颜色的#+十六进制符号表示。color: #000;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 所有组合器可以组合使用 */
/* 标签选择器 */
/* div{
border: 1px dashed green;
width: 100px;
height: 100px;
}*/
/* 将body标签的子标签中的第一个div标签修改样式 */
body > div:nth-child(1){
border: 1px dashed green;
width: 100px;
height: 100px;
border-radius: 50% 20% 40% 0%;
}
#one{
border-top: 1px solid darkcyan;
width: 100px;
height: 150px;
background-color: aqua;
}
.one{
border: 1px solid cyan;
border-radius: 100%;
width: 150px;
height: 250px;
background-color: gray;
}
p{
color: pink;
/* color: rgb(red, green, blue); */
/* color: #000; */
font-size: 50px;
text-align: center;
font-family: 'Courier New';
text-decoration: line-through;
}
</style>
</head>
<body>
<div></div>
<div id="one"></div>
<div class="one">
<div id="one"></div>
</div>
<p>今日干啥</p>
<ul>
<li>上课</li>
<li>上课</li>
<li>上课</li>
<li>上课</li>
</ul>
</body>
</html>通配符选择器
语法：
*{}
HTML标签存在一个叫做外边距和内边距的两个边距。
通配符选择器一般就是用来去除标签边距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
/* 外边距 */
margin: 0;
padding: 0;
}
div{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div></div><br>
<div></div><br>
<div></div><br>
</body>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
