HTML知识点整理2

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