HTML5学习简记

HTML定义

标签

HTML基本骨架

常见标签

标题标签

段落标签

换行与水平线标签

文本格式化标签

图像标签

绝对路径与相对路径

超链接标签

音频与视频标签

列表标签

无序列表

有序列表

定义列表

表格标签

表格结构标签

合并单元格

表单标签

input标签

input标签占位文本

真正实现单选功能

上传多个文件

下拉菜单标签

文本域标签

label标签

button标签编辑

无语义的布局标签

div标签

span标签

字符实体

HTML定义

HTML是一种超文本标记语言，超文本即我们在网页中看到的链接，标记指的是语言中的标签

HTML基本骨架

其中,HTML标签代表整个网页，head标签代表网页的头，它里面存放给浏览器看的内容，比如CSS，body代表网页的主体，用于存放给用户看的信息

这里也可以看出标签之间的关系共有两种：兄弟关系、父子关系

常见标签

标题标签

标题标签有6种，标签名为h1~h6

标签显示效果为

文字加粗
字号逐渐变小
独占一行

段落标签

标签名为p（双标签）

显示特点：

独占一行
段落之间存在间隙

换行与水平线标签

换行：<br>单标签
水平线：<hr>单标签

文本格式化标签

作用：为文本添加特殊格式，用于突出重点，例如加粗、倾斜、下划线、删除线等

图像标签

标签名：img

标签属性src用于指定图像的位置

除src属性外，img标签还有以下属性

这里的width属性与height属性在改变时浏览器会自动等比例调整，这两个属性了解即可

绝对路径与相对路径

绝对路径：在windows系统中是从磁盘开始的路径，在其他系统可能是从根目录开始的路径（统一使用/即可）

相对路径：从当前文件所在位置开始的路径

超链接标签

标签名：a

属性href用于指定跳转地址

如上图所示，target属性指定为_blank可以使得页面跳转是开启一个新页面而不是覆盖当前页面

在开发中如果暂时不清楚跳转地址的话可以将href属性值定位#

音频与视频标签

音频标签名：audio

值得说明的是，这里因为属性值与属性名一样所以可以简写为属性名即可

视频标签名video

列表标签

无序列表

标签：ul嵌套li，ul是无序列表，li是列表条目

注意ul标签里只能包裹li标签

但是li标签里可以包裹任意标签

有序列表

标签：ol嵌套li，ol是有序列表，li是列表条目

定义列表

定义列表通常用于一个网页的底部，如下图所示

标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情

表格标签

table标签属性border-collapse
- 默认属性值separate
- 属性值collapse可以使得table标签与th标签td标签的边框合并

表格结构标签

作用：使用表格结构标签把内容划分区域，使得表格结构更加清晰，语义更清晰

注意这些标签是对浏览器说明的，只是加强语义

且编写table标签后F12查看发现table下自带tbody标签，是因为在编写页面没写<tbody>时，浏览器会直接帮我们创建这些标签所对应的对象。隐式的<tbody>会把头<thead>、脚<tfoot>全部包含进去。

合并单元格

注意不能跨结构标签进行合并单元格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
            </tr>
        </tfoot>

    </table>
</body>

</html>

表单标签

作用：收集用户信息

标签名：form标签

在form标签里统一管理相关标签

使用场景：

登陆页面
注册页面
搜索页面

input标签

  <input required type="text">
//required属性表示该标签内容 非空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文本框:<input type="text">
    <br><br>
    密码框:<input type="password">
    <br><br>
    单选框:<input type="radio">
    <br><br>
    多选框:<input type="checkbox">
    <br><br>
    文件上传:<input type="file">
</body>
</html>

这里的文本框默认得到焦点后会拥有一个边框样式outline

如果想要删除该默认样式使用outline:none即可

input标签占位文本

即input标签中的placeholder属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文本框:<input type="text" placeholder="请输入用户名">
    <br><br>
    密码框:<input type="password" placeholder="请输入密码">
</body>
</html>

真正实现单选功能

注意这里的checked属性在多选框中同样适用

上传多个文件

在原先的input标签中添加属性multiple即可一次上传多个文件

下拉菜单标签

标签：select嵌套option，select标签是下拉菜单整体，option是下拉菜单的每一项

其中selected属性是用于选定默认选择哪一项

文本域标签

作用：多行输入文本的表单控件

标签：textarea

如果不希望文本域的宽度与高度可以被用户改变的话，可以添加resize: none

label标签

作用：增大点击范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="radio" id="man" name="gender"><label for="man">男</label>
    <label><input type="radio" name="gender">女</label>
</body>
</html>

button标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" placeholder="请输入你的内容">
        <br><br>
        <input type="password" placeholder="请输入密码">
        <br>
        <button type="button">普通按钮</button>
        <button type="reset">重置</button>
        <button type="submit">提交</button>
    </form>
    
</body>
</html>