form表单标签
form表单标签,主要应用在登录、注册页面
能够使input转为按钮之后的功能生效
<form>
<input type="password" placeholder="请输入密码"><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
表格标签
table标签：声明表格
tr标签：表格的每一行 table row
th标签：表头 table head
td标签：单元格 table date cell
<table>
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<!-- 第二行 -->
<tr>
<td>张三</td>
<td>男</td>
</tr>
<!-- 第三行 -->
<tr>
<td>李四</td>
<td>未知</td>
</tr>
</table>
表格涉及的属性
table标签：border - 设置表格的外边界（外边框）的宽度
cellspacing - 设置单元格和单元格以及单元格和边框的间距。
width - 设置整体表格的宽度（每一列的宽度会自动调整比例）
height - 设置整体表格的高度（每一列的高度会自动调整比例）
bordercolor - 设置边框的颜色
bgcolor - 设置背景颜色
aligh - 调整表格水平位置（左对齐：left、右对齐：right、居中对齐：center)
tr标签：bgcolor - 设置背景颜色
aligh - 调整文字水平位置（左对齐：left、右对齐：right、居中对齐：center)
valign - 调整文字垂直位置（顶部：top、底部：bottom、中间：middle)
height - 修改一行的高度
td标签：width - 修改单元格的宽度
height - 修改单元格的宽度（本行其他单元格宽度自动缩小或增大，本列单元格的宽度也随之增大或减小）
aligh - 调整文字水平位置（左对齐：left、右对齐：right、居中对齐：center)
valign - 调整文字垂直位置（顶部：top、底部：bottom、中间：middle)
<table bordercolor="pink" cellspacing="1" border="1">
<tr>
<td colspan="8" align="center">简历</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/管理员.jpg" alt="" width="60px" height="60px">
<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 align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
div
div标签：无语意标签。
div：一般把一个范围中涉及到的所有的标签会放在一起
div是调整页面布局前的最后一个标签。
CSS样式
CSS:层叠样式表
- CSS代码写到哪：
1.内部样式表:可以将style标签放到head标签或者body标签内。
2.内联样式：可以把样式直接作为一个标签的属性，写入到标签中，使用style属性
3.外部样式：有一个后缀名为.css的文件专门用来存放CSS代码
只需要在html代码中使用link标签将css文件引入即可
-
link标签语法：
1.如果rel为icon，表示给页面标签页设置图标，type为image/图片格式,表示引入xxx格式的图片 rel="icon" type="image/图片格式（png、jpg）" href="图片的链接和路径" 2.rel为icon，表示给页面引入样式表，type固定为text/css rel="stylesheet" type="text/css" href="css文件的链接或路径" -
css代码注释使用 /* 此处写注释 */
-
CSS样式如何写？
语法：
选择器{
属性:属性值;
属性:属性值;
属性:属性值;
}
说明：
1.选择器：通过标签来选择被修改的内容或者通过属性（id属性、class属性）选择被修改的内容
2.{}：固定语法（内部样式、外部样式）
3.内部样式、外部样式、内联样式：修改内容的样式使用 属性:属性值;<title></title> <!-- 内部样式 --> <style> /* 这是CSS注释 */ h1{ color: white; } </style> <!-- 外部样式 --> <link rel="stylesheet" type="text/css" href="css/html_style.css"/> </head> <!-- 内联样式 --> <body style="background-color:red;"> <h1>这里是h1标签</h1> </body>
CSS选择器
-
通配符选择器： * ->能改变所有标签的样式
-
标签选择器： 标签名 ->不加限定条件，能够修改页面中所有某标签。
-
id选择器：
-
class选择器:
一般在页面标签中会添加id属性和class属性，其对应的属性值一般都是独一无二的或者
同一类数据使用一个属性值；通过调用id属性值和class属性值变相的调用对应的标签。
id选择器：#id属性值;
class选择器：.class属性值 -
父子选择器：父标签 > 子标签 ：被修改样式的为子标签
-
后代选择器：祖先标签 后代标签 ：被修改样式的为后代标签
-
兄弟选择器：长兄 ~ 弟弟
-
相邻兄弟选择器：刘关张：刘 + 关 关 + 张
-
nth-child选择器：a:nth-child(3) ->找每一级下的第三个标签，并且这个标签是a标签（html下标从1开始）
所有选择器可以组合使用
CSS边框样式和文字样式
CSS边框常用属性：
-
border：边框粗细、边框的样式(solid单实线 double双实线 dashed虚线 dotted点)、边框颜色；
div{ border: 1px dotted red; width: 100px; height: 100px; } -
border-redius:num1(num2 num3 num4)
num1 - 表示将图形（存在四个角）的四个角统一改为一个弧度。
num1 num2 - num1:表示图形的左上角和右下角，num2表示图形的右上角和左下角。
num1 num2 num3 - num1表示左上角，num2:右上角和左下角，num3 右下角
num1 num2 num3 num4 - 左上、右上、右下、左下
border-radius: 100% 50%;
-
border-top
border-bottom
border-left
border-right
等价于border/* 将body标签的子标签中第一个div标签改为某样式 */ body > div:nth-child(1){ /* border: 1px dotted red; */ border-top: 1px dotted red; border-bottom: 1px dashed blue; border-left: 1px solid pink; border-right: 5px double green; width: 100px; height: 100px; border-radius: 100% 50%; } </style> </head> <body> <div></div> <div id="one"></div> <div class="one"> <div id="one"></div> </div>
CSS文字常用属性 ：
color：修改文字颜色
font-size：字体尺寸
font-family:字体
text-align:位置(left、right、center)
text-decoration:在文字的下方或上方或中间添加一条横线（underline、overline、line-throught）
颜色：三原色：红、绿、蓝：每种颜色有0-255，一共256个等级。
1.颜色可以用英语单词表示。
2.可以使用三原色的数字等级表示 rgb(0,0,0)或者rgba(0,0,0,透明度)
3.可以使用颜色的 # + 十六进制表示
#one{
border-top: 5px solid yellowgreen;
width: 100px;
height: 200px;
background-color: red;
}
.one{
width: 150px;
height: 150px;
border:3px double blue;
border-radius: 100%;
}
p{
/* color:red; */
/* color: #FF0000; */
/* color:RGB(255,0,0);*/
color:RGBA(255,0,0,0.5);
text-align: center;
font-size: 50px;
text-decoration: line-through;
}
</style>
</head>
<body>
<div></div>
<div id="one"></div>
<div class="one">
<div id="one"></div>
</div>
<p><b>今日安排</b></p>
<ul>
<li>上课</li>
<li>上课</li>
<li>上课</li>
<li>上课</li>
</ul>
</body>
通配符选择器
HTML标签存在一个叫做外边距和内边距的两个边框
通配符选择器一般就是用来去除标签边距。
<style>
*{
/* 外边距 */
margin:0;
/* 内边距 */
padding: 0;
}
div{
width: 50px;
height: 50px;
background-color: green;
}
</style>
扫一扫
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
