HTML

1 开发文档

W3C 官网: https://html.spec.whatwg.org/multipage/

W3Cscholl：https://www.w3cschool.cn/htmltags/

MDN: https://developer.mozilla.org/zh-CN/docs/Web/HTML

2 排版标签

3 文本标签

4 图片

4.1 img 标签

总结：

1. alt 设置图片替代文字，当图片无法正常显示，显示alt中的文字
2. 如果单独设置宽度或者高度，另一个方向根据比例自动计算。同时设置宽高容易导致图片拉伸失真。

4.2 常见的图片格式

jpg / jpeg
png
gif
bmp
webp
...

4.3 base64 图片

1. 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
2. 原理：把图片进行 base64 编码，形成一串文本。
3. 如何生成：靠一些工具或网站。
4. 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
5. 使用场景：一些较小的图片，或者需要和网页一起加载的图片。

base64编码工具： https://tool.chinaz.com/tools/imgtobase/

5 相对路径和绝对路径

当前文件： html代码所在的文件

目标文件： 被引用的文件

5.1 绝对路径

网络绝对路径： 目标文字在万维网上的绝对地址，如 https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png，前端开发主要使用网络绝对路径。

本地绝对路径： 目标文字在计算上的绝对地址, 如 D:\Library\SH230320\Day02_HTML\课堂案例\02-图片标签\铭哥工作照.jpg，后端开发主要使用本地绝对路径。

5.2 相对路径

./      当前目录（当前文件所在的目录）， ./可以省略
        如果目标文件在同级或者下级
        
../     上级目录（当前文件的上级目录）
        如果目标文件在上级或者先进入上级再访问所在目录
        
../../  上上级
../../../ 上上上级

5.3 HTML 中使用路径的场景

1. img 标签引入图片
2. 超链接设置目标文件
3. video 标签引入视频
4. audio 标签引入音频
5. iframe 标签引入各种类型的文件
6. link 标签关联 css 文件
7. script 标签引入 js 文件
...

6 超链接和锚点

6.1 a 标签

总结：

target 属性设置目标文件在哪个窗口打开，默认值是 _self,表示本窗口打开；可以设置为 _blank, 表示新窗口打开

6.2 超链接

① 目标文件是网页

<a href="https://www.163.com/news/article/I0ELH95T000189FH.html">一篇新闻</a> <br>
<a href="../03-相对路径练习/pages/index.html">相对路径练习</a>

② 目标文件是网页以外的其他类型文件

<a href="./resouces/小乐老师的业余生活.jpg">[图片]小乐老师的业余生活</a> <br>
<a href="./resouces/如何30岁之前走上人生巅峰.pdf">[pdf]如何30岁之前走上人生巅峰</a> <br>
<a href="./resouces/小乐老师的性福生活.mp4">[视频]小乐老师的性福生活</a> <br>
<a href="./resouces/如何拥有百亿资产.docx">[word文件]如何拥有百亿资产</a> <br>
<a href="./resouces/小乐老师的私房照片.7z">[压缩文件]小乐老师的私房照片</a>

目标文件分为两种：
浏览器能够打开： 点击超链接，浏览器直接打开，如网页文件、图片文件、视频文件、pdf文件等
浏览器无法打开： 点击超链接，直接下载

③ 超链接唤起指定应用

<a href="tel:10086">打电话</a> <br>
<a href="sms:10010">发短信</a> <br>
<a href="mailto:fuming@atguigu.cn">发邮件</a>

④ href 的值是空的点击刷新

<a href="">刷新</a>

6.3 锚点

① 如何设置锚点

给标签设置一个ID属性，该标签就成为一个锚点，ID的属性值就是锚点的名字

<div id="锚点名"></div>
<p id="锚点名"></p>
<hr id="锚点名">

② 如何跳转到锚点（通过超链接跳转到锚点）

<!-- 跳转到本页面的锚点 -->
<a href="#锚点名"></a>

<!-- 跳转到其他页面的锚点 -->
<a href="页面地址#锚点名"></a>

<!-- 跳转到页面顶部 -->
<a href="#"></a>

6 列表

6.1 无序列表

文字无序列表：
<ul>
      <li>HTML 超文本标记语言</li>
      <li>CSS 层叠样式表</li>
      <li>JavaScript 浏览器端脚本语言</li>
</ul>
​
超链接无序列表：
<ul>
     <li>
         <a href="#">感悟习近平主席俄罗斯之行的“历史逻辑”</a>
     </li>
     <li>
         <a href="#">携手向未来！习近平谈构建人类命运共同体</a>
     </li>
     <li>
         <a href="#">镜观·领航｜命运与共 携手建设更加美好的世界</a>
     </li>
     <li>
         <a href="#">总台“中国式现代化与世界新机遇”阿联酋专场研讨会在阿布扎比成功举办</a>
     </li>
</ul>
​
嵌套无序列表：
 <ul>
     <li>
         <a href="#">首页</a>
     </li>
     <li>
         <a href="#">论坛</a>
     </li>
     <li>
         <a href="#">关于我们</a>
         <ul>
             <li>
                 <a href="#">联系我们</a>
             </li>
             <li>
                 <a href="#">加入我们</a>
             </li>
             <li>
                 <a href="#">举报我们</a>
             </li>
         </ul>
     </li>
     <li>
         <a href="#">商城</a>
     </li>
     <li>
         <a href="#">博客</a>
     </li>
</ul>

无序列表可以用于表示一组相关的内容，如新闻列表、文章列表、商品列表、导航 等

6.2 有序列表

<ol>
    <li>高小乐</li>
    <li>比尔盖茨</li>
    <li>巴菲特</li>
    <li>索罗斯</li>
    <li>马云</li>
</ol>

有序列表可以用于排序类的列表，如排行榜等。

6.3 定义列表

<!-- 
    一个dt对应一个dd
-->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>浏览器端脚本语言</dd>
</dl>
​
<!-- 
    一个dt对应多个dd 
-->
<dl>
    <dt>如何掌握一个HTML标签？</dt>
    <dd>该标签的语义功能</dd>
    <dd>该标签的属性以及属性值如何设置</dd>
    <dd>该标签是单标签还是双标签</dd>
</dl>

6.4 列表标签总结

注意：

li 必须被 ul 或者 ol 直接包裹!

7 表格标签

7.1 表格的结构

table
    caption
    thead
        tr
            td/th
            ....
        tr
        ...
    tbody
        tr
            td/th
            ...
        tr
        ...
    tfoot
        tr
            td/th
            ...
        tr
        ...

<table border="1">
    <!-- 表格标题 -->
    <caption>用户信息表</caption>
    <!-- 表格头 -->
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
            <th>地址</th>
        </tr>
    </thead>
    <!-- 表格体 -->
    <tbody>
        <tr>
            <td>1</td>
            <td>曹操</td>
            <td>男</td>
            <td>13378652389</td>
            <td>上海市松江区</td>
        </tr>
        <tr>
            <td>2</td>
            <td>刘备</td>
            <td>男</td>
            <td>13378652388</td>
            <td>上海市浦东区</td>
        </tr>
        <tr>
            <td>3</td>
            <td>高小乐</td>
            <td>男</td>
            <td>13378652387</td>
            <td>上海市松江区</td>
        </tr>
        <tr>
            <td>4</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>13378652386</td>
            <td>上海市黄浦区</td>
        </tr>
    </tbody>
    <!-- 表格脚 -->
    <tfoot></tfoot>
</table>

7.2 表格整体样式设置

给 table 标签设置如下属性：

width：  设置宽度
height:  设置高度
cellspacing： 设置单元格之间的间距
cellpadding： 设置单元格内补白（边框与内容的间距）
border： 设置边框边框

7.3 设置单元格宽高

给 td、th 设置 width 和 height 属性：

给 td、th 设置 width 相当于设置列宽
给 td、th 设置 height 相当于设置行高 

给 tr 和 td 设置 height 有什么区别：

给 th、td 设置height，实际行高会在设置的高度的基础上加上上下的 cellpadding
给 tr 设置 height 就是总行高

7.4 设置单元格中内容对齐方式

设置单元格内容横向对齐方式：

给 thead、tbody、tfoot 设置 align 属性，属性的值： left、right、center，所包裹的单元格都会生效
给 tr 设置 align 属性，属性的值： left、right、center，所包裹的单元格都会生效
给 td、th 设置 align 属性，属性的值： left、right、center，本单元格会生效

设置单元格内容纵向对齐方式：

给 thead、tbody、tfoot 设置 valign 属性，属性的值： top、bottom、middle，所包裹的单元格都会生效
给 tr 设置 valign 属性，属性的值： top、bottom、middle，所包裹的单元格都会生效
给td、th 设置 valign 属性，属性的值： top、bottom、middle，本单元格会生效

7.5 单元格跨行和跨列（重要）

给 td、th 设置属性：

rowspan： 设置所跨行数
colspan： 设置所跨列数

7.6 表格标签总结

8 表单

8.1 表单总体设置

<form action="http://www.baidu.com/s" target="_blank">
     <input type="text" name="wd">
     <button>搜索</button>
</form>

8.2 表单控件

① 文本输入框

<input type="text"> <br>

<!-- type 属性的默认值就是 text -->
<input> <br>

<!-- maxlength 可以限制最大输入长度 -->
<input type="text" maxlength="10">

② 密码输入框

<input type="password"> <br>
<input type="password" maxlength="6">

③ 单选框

 <input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" checked>其他

1. 多个单选框要实现单选效果，需要设置相同的 name 属性值
2. 设置 checked 属性可以实现默认选中，该属性不需要值 

④ 复选框

<input type="checkbox">唱
<input type="checkbox">跳
<input type="checkbox" checked>RAP
<input type="checkbox">打篮球
<input type="checkbox" checked>敲代码

设置 checked 属性可以实现默认选中，该属性不需要值 

⑤ 提交按钮

<input type="submit">
<input type="submit" value="免费注册">
<button type="submit">提交</button>
<button>登录</button>

⑥ 重置按钮

<input type="reset">
<button type="reset">重置</button>

⑦ 普通按钮

<input type="button" value="普通按钮01">
<button type="button">普通按钮02</button>

⑧ 文本域

<textarea rows="10" cols="60"></textarea>

rows 设置默认显示的行数，影响高度
cols 设置默认显示的列数，影响宽度

⑨ 下拉选项

<select>
    <option>江苏省</option>
    <option>安徽省</option>
    <option>河南省</option>
    <option selected>新疆维吾尔自治区</option>
    <option>内蒙古自治区</option>
    <option>广西壮族自治区</option>
</select>

默认选中的是第一个选项，可以使用 selected 设置默认选项

8.3 表单控件的属性

① name 属性

1. name 用于给表单控件设置标识，与后端对应
2. 多个单选框要实现单选效果需要设置相同的 name
3. 下拉选项需要将 name 设置到 select 上
4. 提交按钮、重置按钮、普通按钮不要设置 name 属性

② value 属性

1. 文本输入框、密码输入框，value 可以设置默认显示的内容
2. 单选框、复选框，value 设置真正提交的数据
3. input 实现的提交按钮、重置按钮、普通按钮，value 设置按钮上的文字
4. button 和 textarea 不需要 value
5. 下拉选项option可以使用value设置真正提交的数据，如果没有设置value，双标签中的文字作为提交的数据

③ disabled 属性

1. 表单控件设置 disabled 属性将变为不可用
2. disabled 属性不需要值
3. select 设置disable 属性整个下拉选项不可用；option 设置 disabled 属性该选项不可选。

9 表单

9.1 label 标签的使用

<!-- 使用label关联描述文字和输入框 -->
<label for="usernameInp">用户名：</label>
<input type="text" id="usernameInp">
​
<!-- 使用label关联选择框 单选框、复选框 -->
<label>
    <input type="radio" name="gender">男
</label>
<label>
    <input type="radio" name="gender">女
</label>

9.2 fieldset 和 legend 标签（了解）

<form>
    <fieldset>
        <legend>标题内容</legend>
        各种表单控件...
    </fieldset>
</form>

9.3 表单标签总结

input 标签的 type 属性值有 text、password、radio、checkbox、submit、reset、button， 默认值 text
button 标签的 type 属性值有 submit、reset、button，默认值 submit

10 内联框架标签

11 HTML 字符实体

字符实体，请参照：https://www.w3cschool.cn/htmltags/html-symbols.html

12 HTML 全局属性

全局属性指所有的标签都具有的属性，有如下全局属性：

id      唯一标识，可以用作锚点名、可以用作css选择器
name    设置名称标识，对于表单控件用处较大
class   设置类名，用于css选择器
style   用于直接设置css样式
title   设置提示文字，鼠标悬浮在元素上会显示
lang    设置语言，英文：en; 中文：zh-CN

语言参考代码：https://www.w3school.com.cn/tags/html_ref_language_codes.asp

13 meta 元信息

<!-- 字符集编码 -->
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
​
<!-- 网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
​
<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">
​
<!-- 设置完美视口 -->
<meta name="viewport" content=" width=device-width, initial-scale=1.0">
​
<!-- 设置网页刷新，每隔3秒刷新一次 -->
<!-- <meta http-equiv="refresh" content="3"> -->
<!-- 设置网页刷新，10秒后定时跳转。支付宝支付后，10秒跳转 -->
<meta http-equiv="refresh" content="10,url=http://www.atguigu.com">
<title>Document</title>

附录 VsCode 的使用

使用方式

整个目录拖进vsode
在vscode里面新建文件和目录

相关设置

自动保存：  设置 -> Auto Save
字体大小：  设置 -> Font Size
目录结构缩进距离： 设置 ->  Tree: Indent
合并单个目录结构： 设置 ->  Compact Folders  去掉前面的√
颜色主题
文件图标主题

快捷键

代码自动格式化： alt + shift + f
复制当前行到下一行： 连续按 ctrl+c ctrl+v

Emmet 快捷键

!
标签名+tab

更多Emmet快捷键： https://docs.emmet.io/abbreviations/syntax/

设置语言为zh-CN
设置 -> Emmet: Variables 点击添加项 选择 lang 值 zh-CN

常用扩展

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
open in browser
Live Server
Chinese Lorem