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）；