前端学习之HTML-2

目录

一、链接标签

二、列表标签

1.无序列表

2.有序列表

3.自定义列表

三、表格标签 

1.基本标签 

2.常见相关属性

3.表格标题和表头单元格标签 

4.表格的结构标签

5.合并单元格

四、表单标签（登录 注册 搜索） 

1.input系列标签

①type属性

②占位符

③单选框

④文件选择

⑤按钮

2.button按钮标签 

3.select下拉菜单标签 

4.textarea文本域标签 

5.label标签（点文字也可以选择） 

五、语义化标签 

1.没有语义的布局标签 

2.有语义的布局标签（了解）

六、字符实体 

---

一、链接标签

<a href="./百度网页.html">跳转到百度</a>

注：开发初期不知道跳转地址时，href的值写#（空链接）

target属性：1. _self：默认值，在当前窗口跳转（覆盖原网页）

                    2._blank：在新窗口中跳转（保留原网页）

二、列表标签

1.无序列表

ul：表示无序列表的整体，用于包裹li标签

li：表示无序列表的每一项，用于包含每一行的内容

注：

        ul标签只允许包含li标签

        li标签可以包含任意内容

2.有序列表

ol：表示有序列表的整体，用于包裹li标签

li：表示有序列表的每一项，用于包含每一行的内容

注：

        ol标签只允许包含li标签

        li标签可以包含任意内容

3.自定义列表

dl：表示自定义列表的整体，用于包裹dt/dd标签

dt：表示自定义标签的主题

dd：表示自定义标签的针对主题的每一项内容

注：

        dd前会默认缩进

        dl标签中只允许包含dt/dd标签

        dt/dd标签可包含任意内容

三、表格标签 

1.基本标签 

<table>
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>100分</td>
        <td>真棒</td>
    </tr>
</table>

table：表格整体，可用于包裹多个tr

tr：表格每行，可用于包裹td

td：表格单元格，可用于包裹内容

嵌套关系：table>tr>td

2.常见相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

3.表格标题和表头单元格标签 

标签名	名称	说明
caption	表格大标题	默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，常用于表格第一行，默认内部文字加粗居中显示

 注：caption标签书写在table标签内部

        th标签书写在tr标签内部（用于替换td标签）

4.表格的结构标签

thead：表格头部

tbody：表格主体

tfoot：表格底部

注：表格结构标签内部用于包裹tr标签

       可以省略

5.合并单元格

跨行合并

跨列合并

1.明确合并哪几个单元格

2.左上原则

        上下合并：只保留最上面的，删除其他

        左右合并：只保留最左面的，删除其他

3.给保留的单元格设置：

        rowspan=跨行合并单元格个数

        colspan=跨列合并单元格个数

注：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并

四、表单标签（登录 注册 搜索） 

1.input系列标签

①type属性

 

<input type="text">

注：默认不换行 

②占位符

<input placeholder="在这里写提示语">

③单选框

type属性值：radio

name：分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中

checked：默认选中

④文件选择

type属性值：file

multiple：多文件选择

⑤按钮

 

2.button按钮标签 

3.select下拉菜单标签 

标签组成：

        select：下拉菜单的整体

        option：下拉菜单的每一项

selected：下拉菜单的默认选中 

4.textarea文本域标签 

cols：规定了文本域内可见宽度

rows：规定了文本域内可见行数 

注：右下角可以拖拽改变大小

5.label标签（点文字也可以选择） 

方法1：

1.使用label标签把内容包裹起来 

2.在表单标签中添加id属性

3.在label标签的for属性中设置对应的id属性值

方法2：

1.直接使用label标签把内容和表单标签一起包裹起来

2.需要把label标签的for属性删除即可

五、语义化标签 

1.没有语义的布局标签 

div标签：独占一行

span标签 

2.有语义的布局标签（了解）

 

六、字符实体 

  空格：