零基础学Html（三）

一.html标签语义化的好处

定义：根据页面内容的结构，选择合适的标签。如：标题用h1~h6，段落标签用p等

        可以理解成合理的标签做合理的事

好处：

1.在没有css的情况下，页面也能呈现出很好的内容结构

2.语义化是代码更具可读性，便于团队的开发和维护

3.语义化有利于用户体验

4.语义化有利于SEO优化（搜索引擎优化）

二.html标签的扩展 

    &lt;  小于号或者显示标记 <br>

    &gt;  大于号或者显示标记 <br>

    &amp;   &可用于显示其它特殊字符 <br>

    &reg;  已注册符号 <br>

    &copy;  版权符号 <br>

    &trade;   商标 <br>

    小&nbsp;明    不断行的空白

三.列表

1.无语列表

语法:ul>li

应用场景：新闻列表，导航，商品列表等

2.有序列表

语法：ol>li

应用场景：用于排行榜，有序的轮播点等

3. 自定义列表

语法：dl>dt+dd

dt:项目名称

dd：对项目名称的描述

四.表格

表格：起初用于网页布局的，现在用于展示批量的数据以及报表等

语法：

table：定义表格

thead，tbody，tfoot：分别表示头部，主体以及脚注

tr：定义行

th/td：定义单元格（th表示表头中的单元格，td表示普通单元格）

caption：定义表格的标题，在表格最上方水平居中的位置

th单元格中的文本家族并居中，而td单元格的文本居左没有加粗

thead和tfoot一般只能有一个，tbody可以有多个

 table标签上的属性：

border：边框

width：表格的宽

height：表格的高

cellspcing：控制单元格与单元格之间的间隙

cellpadding：单元格内容到边框之间的间隙

基本结构：table>tr>td/th

特点：单元格没有设置宽高，也没有内容，他的宽高会平均分配

           单元格没有设置宽高，内容越多，分配的空间越大

 单元格上的属性：

width：单元格的宽度

height：单元格的高度

特点：给同一行的单元格设置高，会取他们之间最大的高

           给同一行的单元格设置宽，会取他们之间最大的宽

colspan：跨列合并

rowspan：跨行合并

合并的口诀：跨行用rowspan，跨列用colspan，不管跨行还是跨列，操作的都是单元格

五.表单

作用：用于收录用户的信息

form定义表单，叫做表单域，里面包含着表单元素

form标签是上的属性：

        action：表单提交的路径，如果不写，默认提交到当前页面

        method：表单提交的方式：get（默认）/post

常见的表单元素：

  <form action="" method="GET">
        <label for="">信息提示标签</label><br>
        <input type="text" name="" id="" value="文本框"><br>
        <input type="password" value="密码框"><br>
        <input type="radio" value="单选按钮"><br>
        <input type="checkbox" name="" id="" value="复选框"><br>
        <input type="file" value="文件上传按钮"><br>
        <input type="submit" value="提交按钮"><br>
        <input type="reset" value="重置按钮"><br>
        <input type="button" value="普通按钮"><br>
        <input type="image" value="自定义图像按钮"><br>
        <textarea name="" id="" cols="30" rows="10" >文本域</textarea><br>
        <select name="" id="" value="下拉框">
            <option value="">选择的内容</option>
        </select>
    </form>

表单上的属性：

name：用于提交到服务器的表单数据的标识

value：页面加载为input元素设置的初始值

checked：用于单选和复选按钮，页面加载时处于选中状态

selected：应用于下拉菜单，页面加载时处于第一个被展示的

disabled：规定禁用input元素，致残

readplay：规定制度（不能修改内容）

maxlength：规定输入字段允许的最大长度