1.认识HTML

一、基础认知

目标：认识网页组成和五大浏览器，明确Web标准的构成，使用HTML骨架搭建一个网页。

1.1 认识网页

（1）网页由哪些部分组成？
答：文字、图片、音频、视频、超链接
（2）咱们程序员的代码是通过什么软件转换成网页的？
答：浏览器

1.2.1 五大浏览器

浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌（Chrome）、Safari浏览器、欧朋浏览器（Opera）

1.2.2 渲染引擎

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
注意点：渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的

1.3.1 为什么需要Web标准？

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

1.3.2 Web标准的构成

Web标准中分成三个构成：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

2.1.1HTML的概念

HTML中文译为：超文本标记语言

2.2.2HTML页面固定结构

HTML骨架结构由哪些标签组成？
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>

2.3.1 为什么使用VS Code?

前端开发神器---速度快、体积小、插件多、完全免费
开发工具有很多：Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder

2.3.2 VS Code创建网页的步骤

（1）双击打开VS Code软件
（2）将代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上
！+ 回车 HTML骨架
快捷键：Alt+B 打开默认浏览器

3.1.1 什么是注释？

问题：程序员在代码中添加的注释，是为了给谁看的？
答：下次的阅读代码者（自己或者其他程序员）
注释的快捷键：
在VS Code中：ctrl+/ (再按一次取消注释)

3.2.1 HTML标签的结构

1.标签的结构图：

<strong>文字要加粗</strong>
开头标签包裹的内容结束标签

2.结构说明

（1）标签<、>、/、英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母成为标签名
（2）常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
（3）少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
（需要确定开始位置、结束位置，一般是双标签；不需要确定开始位置、结束位置的为单标签）

3.4.1HTML标签与标签之间的关系可分为：

（1）父子关系（嵌套关系）

<head>
    <title></title>
</head>

（2）兄弟关系（并列关系）

<head></head>
<body></body>

二、HTML标签学习

目标：学习HTML排版、媒体、链接等基础标签，完成基础网页的开发

1、排版标签

1.1.1标题标签

1.代码：h系列标签

<h1>1级标签<h1>
<h2>2级标签<h2>
<h3>3级标签<h3>
<h4>4级标签<h4>
<h5>5级标签<h5>
<h6>6级标签<h6>
选中三个1 先选中1，ctrl+d两次

2.语义：1-6级标题，重要程度依次递减

3.特点：

文字都有加粗
文字都有变大，并且从h1 $\rightarrow$ h6文字逐渐减小
独占一行

1.2.1段落标签

场景：在新闻和文章的页面中，用于分段显示
代码：<p>我是一段文字</p>
语义：段落
特点：

段落之间存在间隙
独占一行
ps:如果出现这种，查看-自动换行

1.3.1 换行标签

场景：让文字强制换行显示
代码：<br>
语义：换行
特点：

单标签
让文字强制换行

1.4.1 水平线标签

场景：分割不同主题内容的水平线
代码：<hr>
语义：主题的分割转换
特点：

单标签
在页面中心显示一条水平线

2.1文本格式化标签的介绍

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

语义：突出重要性的强调语境（单词这组标签）

3、媒体标签

3.1.1 图片标签介绍

代码：<img src=" " alt=" "> （src=" "标签属性，src属性名，" "属性值）
场景：在页面中显示图片
特点：单标签；img标签需要展示对应的效果，需要借助标签的属性进行设置

3.1.2 属性注意点：

1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分
路径：./是当前文件夹，可加可不加
3.1.3 图片标签的alt属性
属性名:alt
属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本

 <img src="cat.gif" alt="这是一只猫">

3.1.4 图片标签的title属性
属性名：title
属性值：提示文本
当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

<img src="cat.gif" alt="这是一只猫" title="这是title文字，鼠标悬停的时候显示">

3.1.5 图片标签的width和height属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：
如果只设置width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当图片可能会变形

 <!-- width和height属性只需要给出一个值，另一个等比例缩放，好处是图片不会变形 -->
    <img src="cat.gif" alt="这是一只猫" title="这是title文字，鼠标悬停的时候显示" width="200">

3.2.1 路径的介绍

场景：页面需要加载图片，需要先找到对应的图片
路径可分为：

（1）绝对路径

绝对路径指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：盘符开头：D：\day01\images\1.jpg
完整的网络地址：https://mini.eastday.com/nsa/n230412150949254.html?qid=02034

（2）相对路径（常用）

概念普及：
当前文件：当前的html网页
目标文件：要找到的图片
相对路径：从当前文件开始出发找目标文件的过程
相对路径的分类：
(1)同级目录

<img src="cat.gif" alt="">
<img src="./cat.gif" alt="">

(2)下级目录

 <img src="img/dog.gif" alt="">

(3)上级目录
1.先出当前文件夹，到上级目录 $\rightarrow$ ../
2.此时看到目标文件直接喊她 $\rightarrow$ 直接写上目标文件

<img src="../cat.jpg" alt="">

3.3.1 音频标签的介绍

代码：<audio src=" " controls></audio>
场景：在页面中插入音频
常见属性：

属性名	功能
src	音频路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意点：音频标签目前支持三种格式：MP3、Wav、Ogg

<audio src="../rescours/day01/01-案例/images/music.mp3" controls autoplay loop></audio>

3.4.1 视频标签
代码：<vedio src="./video.mp4" controls></video>
场景：在页面中插入视频
常见属性：

属性名	功能
src	视频路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop	循环播放

注意点：视频标签目前支持三种格式：MP4、WebM、Ogg

4、链接标签

4.1 链接标签

代码：<a href="./目标网址.html">超链接</a>（目标网址不确定，通常用#占位）
称呼：a标签、超链接、锚链接
场景：点击之后，从一个网页跳转到另一个网页
特点：双标签，内部可以包裹内容；
如果需要a标签点击之后去指定页面，需要设置a标签的href属性

4.2链接标签的target属性

属性名：target
属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

index.html首页面

5、列表标签

目标：能够使用无序列表、有序列表、自定义列表标签，实现网页中列表结构的搭建

5.1 无序标签

场景：在网页中表示一组无顺序之分的列表，如：新闻列表
标签组成：

标签名	说明
ul	表示无序列的整体，用于包裹li标签
li	表示无序列的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示圆点标识
注意点：
ul标签中只允许包含li标签
li标签可以包含任意内容

<ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

运行结果：

5.2 有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜
标签组成：

标签名	说明
ol	表示有序列表的整体，用于包裹标签
li	表示有序列表的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示序号标识
注意点：
ol标签中只允许包含li标签
li标签可以包含任意内容

<ol>
        <li>张三：100</li>
        <li>李四：99</li>
</ol>

运行结果：

5.3自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现
标签组成：

标签名	说明
dl	显示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对性主题的每一项内容

显示特点：dd前会默认显示缩进效果
注意点：
dl标签只允许包含dt/dd标签
dt/dd标签可以包含任意内容

 <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>

运行结果：

6、表格标签

目标：能够使用表格相关标签和属性，实现网页中表格结构的搭建

6.1 表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签：

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

表格相关属性
场景：设置表格基本展示效果

6.2常见相关属性：

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

注意：实际开发时针对样式效果推荐用CSS设置

    <!-- table 包含 tr,tr 包含 td -->
    <table border="1" width="500" height="300">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真漂亮</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </table>

运行结果：

6.3表格标题和表头单元格标签

场景：在单元格中表示整体大标题和一列小标题
其他标签：

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

注意点：caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100分</td>
            <td>真棒，第一名</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99分</td>
            <td>真棒，第二名</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </table>

运行结果：

6.4 表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。
结构标签：

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

注意点：表格结构标签内部用于包裹tr标签
表格的结构标签可以省略

6.5 合并单元格

场景：将水平或垂直多个单元格合并成一个单元格
跨行合并（垂直合并成一个）
跨列合并（水平合并成一个）
合并单元格步骤：
1.明确合并哪几个单元格
2.通过左上原则，确定保留谁删除谁

上下合并 $\rightarrow$ 只保留最上的，删除其他
左右合并 $\rightarrow$ 只保留最左的，删除其他

3、给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多行的单元格水平合并

注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
       <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
       </thead>
       <tbody>
            <tr>
                <td>张三</td>
                <td rowspan="2">100分</td>
                <td>真棒，第一名</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>真棒，第二名</td>
            </tr>
       </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
            </tr>
        </tfoot>
    </table>

运行结果：

7、表单标签

目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

7.1 input系列标签的基本介绍

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input

input标签可以通过type属性值的不同，展示不同效果

type属性值：

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

<!-- 写什么 就显示什么 -->
    文本框：<input type="text">
    <br>
    <!-- 书写的内容就会变成点点显示 -->
    密码框：<input type="password">
    <br>
    单选框：<input type="radio">
    <br>
    多选框：<input type="checkbox">
    <br>
    上传文件：<input type="file">

运行结果：

7.2 input系列标签-文本框

场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：

属性名	说明
placeholder	占位符，提示用户输入内容的文本

    <input type="text" placeholder="请输入用户名">
    <br>
    <input type="password" placeholder="请输入密码">

运行结果：

7.3 input系列标签-单选框

场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：

属性名	说明
name	分组，有相同name属性值的单选框为一组，一组中同时只能由一个被选中
checked	默认选中

注意点：name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中

 性别：<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女

运行结果：

7.4input系列标签-文件选择

场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性：

属性名	说明
multiple	多文件选择

7.5 input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件
type属性值：

标签名	type属性值	说明
input	submit	提交按钮，点击之后提交数据给后端服务器
input	reset	重置按钮，点击之后恢复表单默认值
input	button	普通按钮，默认无功能，之后配合js添加功能

注意点：如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可
使用form标签之后，重置标签才有作用
value=" " 可以在按钮上显示文字

<form action="">
        用户名：<input type="text">
        <br>
        <br>
        密码：<input type="password">
        <br>
        <br>
        <input type="submit" value="免费注册">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>

运行结果：

7.6 buttom按钮标签

场景：在网页中显示用户点击的按钮
标签名：buttom
type属性值（同input的按钮系列）：

标签名	type属性值	说明
buttom	submit	提交按钮，点击之后提交数据给后端服务器
buttom	reset	重置按钮，点击之后恢复表单默认值
buttom	buttom	普通按钮，默认无功能，之后配合js添加功能

注意点：谷歌浏览器中buttom默认是提交按钮
buttom标签是双标签，更便于包裹其他内容：文字、图片等

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

7.6select下拉菜单标签

场景：在网页中提供多个选项的下拉菜单表单控件
标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

常见属性：
selected:下拉菜单的默认选中（不设置就默认选中第一个option）

    <select>
        <option>北京</option>
        <option selected>上海</option>
        <option>深圳</option>
        <option>广州</option>
    </select>

7.7 textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：

cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数

注意点：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐使用CSS设置

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

7.8 label标签

场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法：
方法一：（1）使用label标签把内容（如：文本）包裹起来
（2）在表单标签上添加id属性
（3）在label标签的for属性中设置对应的id属性值
方法二：（1）直接使用label标签把内容（如：文本）和表单标签一起包裹起来
（2）需要把label标签的for属性删除即可

    性别：
    <input type="radio" name="sex" id="nan" checked><label for="nan">男</label>
    <label><input type="radio" name="sex">女</label>

8、语义化标签

目标：能够认识开发中常用的没有语义布局标签（div、span）和有语义的布局标签

8.1 没有语义的布局标签-div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签

div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

<body>
    普通文字
    <div>这是div标签</div>
    <div>这是div标签</div>
    <span>这是span标签</span>
    <span>这是span标签</span>
</body>

运行结果：

8.2 有语义的布局标签（移动端手机网页制作）

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签：

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

注意：以上标签显示特点和div一致，但是比div多了不同的语义

8.3 字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替换
结构：&英文;
常见字符实体：

显示结果	描述	实体名称
	空格

综合案例1学生信息表：

<body>
    <table border="1" width="500" height="300">
        <caption><h3>优秀学生信息表格</h3></caption>
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年二班</td>
            </tr>
            <tr>
                <td>赵四</td>
                <td>120</td>
                <td>三年三班</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>评语</td>
                <td colspan="3">你们都很优秀</td>
            </tr>
        </tfoot>
    </table>
</body>

运行结果：

综合案例2表单：

<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form>
        昵称：
        <input type="text" placeholder="请输入昵称">
        <br>
        <br>
        性别：
        <label><input type="radio" name="sex">男</label>
        <label><input type="radio" name="sex">女</label>
        <br>
        <br>
        所在城市：
        <select>
            <option>上海</option>
            <option>北京</option>
            <option>深圳</option>
            <option>广州</option>
        </select>
        <br>
        <br>
        婚姻状况：
        <label><input type="radio" name="marry">未婚</label>
        <label><input type="radio" name="marry">已婚</label>
        <label><input type="radio" name="marry">保密</label>
        <br>
        <br>
        喜欢的类型：
        <label><input type="checkbox" checked>可爱</label>
        <label><input type="checkbox" checked>性感</label>
        <label><input type="checkbox">御姐</label>
        <label><input type="checkbox">萝莉</label>
        <label><input type="checkbox">小鲜肉</label>
        <label><input type="checkbox">大叔</label>
        <br>
        <br>
        个人介绍：
        <br>
        <textarea cols="60" rows="10"></textarea>
        <br>
        <br>
        <h3>我承诺</h3>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <input type="checkbox">我同意所有条款
        <br>
        <br>
        <input type="submit" value="免费注册">
        <button type="reset">重置</button>
    </form>
</body>

运行结果：

最后编辑于：2023.04.20 14:37:03

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,590评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,808评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,151评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,779评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,773评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,656评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,022评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,678评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,038评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,756评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,411评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,005评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,973评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,053评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,495评论 2赞 343

1.认识HTML

一、基础认知

1.1 认识网页

1.2.1 五大浏览器

1.2.2 渲染引擎

1.3.1 为什么需要Web标准？

1.3.2 Web标准的构成

2.1.1HTML的概念

2.2.2HTML页面固定结构

2.3.1 为什么使用VS Code?

2.3.2 VS Code创建网页的步骤

3.1.1 什么是注释？

3.2.1 HTML标签的结构

1.标签的结构图：

2.结构说明

3.4.1HTML标签与标签之间的关系可分为：

（1）父子关系（嵌套关系）

（2）兄弟关系（并列关系）

二、HTML标签学习

1、排版标签

1.1.1标题标签

1.代码：h系列标签

2.语义：1-6级标题，重要程度依次递减

3.特点：

1.2.1段落标签

1.3.1 换行标签

1.4.1 水平线标签

2.1文本格式化标签的介绍

3、媒体标签

3.1.1 图片标签介绍

3.1.2 属性注意点：

3.2.1 路径的介绍

（1）绝对路径

（2）相对路径（常用）

3.3.1 音频标签的介绍

4、链接标签

4.1 链接标签

4.2链接标签的target属性

5、列表标签

5.1 无序标签

5.2 有序列表

5.3自定义列表

6、表格标签

6.1 表格的基本标签

6.2常见相关属性：

6.3表格标题和表头单元格标签

6.4 表格的结构标签

6.5 合并单元格

7、表单标签

7.1 input系列标签的基本介绍

7.2 input系列标签-文本框

7.3 input系列标签-单选框

7.4input系列标签-文件选择

7.5 input系列标签-按钮

7.6 buttom按钮标签

7.6select下拉菜单标签

7.7 textarea文本域标签

7.8 label标签

8、语义化标签

8.1 没有语义的布局标签-div和span

8.2 有语义的布局标签（移动端 手机网页制作）

8.3 字符实体

推荐阅读更多精彩内容

8.2 有语义的布局标签（移动端手机网页制作）