HTML知识点整理2
1.html头部内容
meta属性
//编码
<meta charset='UTF-8'>
//关键字
<meta name='keywork' content='给网页打标签，用于搜索引擎的检索'>
//网页描述
<meta name= 'description' content='描述网页信息，和keyword差不多，检索时权重低点'>
//重定向
<meta http-equiv='refresh' content ='5; https://lalabao.github.io/'>//5秒后页面跳转到指定网址link关键字
//链接外部样式表
<link rel = 'stylesheet' href='1.css'>
//设置icon图标
<link rel='icon' href='2.ico'>2.表格
是对网页重构的有益补充
结构：
<!--结构-->
<table >
<!-- 行1 -->
<tr >
<!-- 列1 -->
<td >111</td>
<!-- 列2 -->
<td>2222</td>
</tr>
<!-- 行2 -->
<tr>
<td>333</td>
<td>444</td>
</tr>
</table>
<!----------------------------------------------------------->
<table border="1px" cellpadding="10px" cellspacing="10px" align="center">
<!--属性-->
<caption>我是表头</caption>
<tr>
<!-- 列1 -->
<th>name</th>
<!-- 列2 -->
<th>age</th>
</tr>
<!-- 行1 -->
<tr >
<!-- 列1 -->
<td rowspan="2">111</td>
<!-- 列2 -->
<td>2222</td>
</tr>
<!-- 行2 -->
<tr>
<!-- <td>333</td> -->
<td>444</td>
</tr>
<!-- 行3 -->
<tr>
<td colspan="2">555</td>
<!-- <td>666</td> -->
</tr>
<!-- tr：标题-->
<!-- border：给表格加边框 -->
<!-- cellpadding :内容到边框的距离 -->
<!-- cellspacing :边框到边框的距离 -->
<!-- align : left/right/center 表格居屏幕左/右/中 -->
<!-- caption 表头 -->
<!-- colspan跨列 -->
<!-- row跨行 -->
</table>3.表单
作用：收集用户输入的信息，并提交给后端
组成：
<!-- 表单域 -->
<!--action：将信息提交到哪个文件如理，method：提交方式 get/post-->
<form action="1.php" method="get"></form>
<!-- 提示信息 -->
<label for="username">用户名:</label>
<!-- readonly：只读，disabled：未激活 -->
<input type="text" value="" placeholder="请输入用户名" id ='username' maxlength="6" readonly="" disabled="">
<!-- 单选框：name需相同 -->
<!-- checked:默认选中 -->
<input type="radio" value="" name="gender">male
<input type="radio" value="" name="gender" checked="">female
<!-- 复选框 -->
<input type="checkbox" >骑马
<input type="checkbox" checked="">摔跤
<input type="checkbox" checked="">射箭
<!-- 下拉列表 -->
<!-- multiple:可以多选 -->
city:<select name="city" id="city" multiple="">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<!-- 多行文本 -->
<!-- Cols 控制输入字符的长度。 -->
<!-- Rows 控制输入的行数 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="file">
<input type="submit">
<input type="reset">
<input type="button" value="button">
<input type="image" src="pic.jpg">
<!--
fieldset 对表单信息分组
legend 表单信息分组名称 -->
<fieldset>
<legend>name</legend>
</fieldset>
4.标签语义化
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
标签语义化意义：
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护
1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；