网页分成3个部分：
- 结构：HTML
- 样式：CSS
- 行为：JavaScript
HTML
超文本标记语言，用来表述网页，可通过HTML格式化文本，添加图片，创建链接，输入表单，框架和表格等；浏览器可以读取和显示.html文件
1、什么是HTML
- 不是一种编程语言，而是一种编辑语言
- 标记语言是一套标记标签
- HTML使用标记标签来描述网页和内容
- HTML文档包含了HTML标签和文本内容
- HTML文档也叫web页面
2、 HTML文本文件结构
- < !DOCTYPE html> :声明文档类型为html5
- < html>xxx< /html>：根元素（根标签），所有网页的内容都写在根标签中。
- < head>xxx< /head>：根标签的子标签，网页的头部，head标签中的内容不在网页中显示。
例如：网页的标题< title>xxx< /title>，< meta>标签设置的网页中的元数据。 - < body>xxx< /body>：根标签的子标签，网页的主体，网页中所有可见内容都写在body标签中。
3、示例解释
<!--定义文档类型为html5-->
<!DOCTYPE html>
<!--设置网页语言属性lang的值为中文，英文为en -->
<html lang="zh">
<head>
<!--设置网页中元数据编码属性charset的值为UTF-8 -->
<meta charset="UTF-8">
<!--设置网页的标题为Document，在网页的标题栏显示 -->
<title>Document</title>
</head>
<body>
<!--h1表示 一级标题-->
<h1>学习<h1>
<!--p表示一个段落， 表示一个空格实体，相当于空格的转义字符-->
<p>好好 学习</p>
<!--自结束标签，有两种写法
自结束标签只有一个开始标签，没有匹配的结束标签
-->
<input>
<input />
</body>
</html>
4、实体–转义字符
一些情况下需要在HTML文件中写入一些特殊字符，比如：多个连续的空格；字母两侧的大于号和小于号。多个连续的空格会被浏览器解析为一个空格，而a< b >c这种，大于小于的符号会被解析为标签的括号。
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）。
实体的语法：&实体的名字;
空格
> 大于号
< 小于号
© 版权符号
eg：
<p>今天 天气真不错！</p>
<p>a<b>c</p>
5、meta标签
meta标签主要用于设置网页中的一些元数据，元数据不是给用户看的，而是告诉浏览器该如何显示：
5.1 meta标签常用属性：
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
http-equiv 将网页进行重定向
- name = “keywords”
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开。
将具体的关键字作为content属性的值。搜索引擎会根据用户搜索的关键字找到含有此关键字的所有网页。
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
- name = “description”
description 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中。
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
- http-equiv
http-equiv用于将网页进行重定向
<!--打开网页3s后，自动跳转到url指定的网页-->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
- title
title标签的内容会作为搜索结果的超链接上的文字显示。
6、语义化标签
在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。
先来介绍两个概念：
-
块元素（block element）：在页面中独占一行的元素，在网页中一般通过块元素来对页面进行布局。
-
行内元素（inline element）: 在页面中不会独占一行的元素，行内元素主要用来包裹文字。
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素。 块元素中基本上什么都能放。 p元素中不能放任何的块元素
6.1 常用语义化标签
-
标题标签：块元素
h1 ~ h6 一共有六级标题 从h1~h6重要性递减，h1最重要，h6最不重要 h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1 一般情况下标题标签只会使用到h1 ~ h3，h4~h6很少用
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 标题分组标签–hgroup标签：
可以将一组相关的标题同时放入到hgroup
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
- 段落标签–p标签：块元素
p标签表示页面中的一个段落
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
- em标签：inline element
表示语音语调的加重(斜体)
<p>今天天气<em>真</em>不错！</p>
- strong标签：inline element
表示强调(加粗)
<p>你今天必须要<strong>完成作业</strong>！</p>
- blockquote标签：块元素
表示一个长引用，长引用部分自动换行缩进。
鲁迅说：
<!-- blockquote 表示一个长引用 -->
<blockquote>
这句话我是从来没有说过的！
</blockquote>
- q标签：行内元素
表示一个短引用，短引用不会换行，直接跟在前面内容的后面。
<!-- q表示一个短引用 -->
子曰<q>学而时习之，乐呵乐呵！</q>
- br标签：
br标签表示页面中的换行
今天天气真不错
<br>
是吗？
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
... ...
6.2 布局标签
<body>
<header>表示网页的头部</header>
<main>表示网页的主体部分(一个页面中只会有一个main)</main>
<footer>表示网页的底部</footer>
<nav>表示网页中的导航</nav>
<aside>和主体相关的其他内容（侧边栏）</aside>
<article>表示一个独立的文章</article>
<section>表示一个独立的区块，上边的标签都不能表示时使用section</section>
<div>没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素</div>
<span>行内元素，没有任何的语义，一般用于在网页中组合行内元素</span>
</body>
7、列表
在html中也可以创建列表，列表之间可以互相嵌套，html列表一共有三种：
- 有序列表
有序列表，使用ol标签来创建，使用li表示列表项 。
- 无序列表
无序列表，使用ul标签来创建无序列表，使用li表示列表项。
- 定义列表
定义列表，使用dl标签来创建一个定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明。
- 列表的嵌套
<!-- 无序列表 -->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
<!-- 列表的嵌套-->
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</li>
</ul>
8、超链接–行内元素
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。使用 a 标签来定义超链接。
8.1 超链接到其他页面
-
a标签的href属性–指定跳转的目标路径
href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
超链接a是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。
写内部页面地址时，默认在当前页面所在路径下查找：./ 表示当前页面所在路径，…/表示当页面所在路径的上一级路径。
<a href="https://www.baidu.com">超链接</a>
<br><br>
<a href="07.列表.html">超链接2</a>
-
a标签的target属性–指定超链接打开的位置
target指定超链接打开的位置（是占用当前页面的位置打开 or 新页面打开）
可选值：
- _self 默认值，在当前页面中打开超链接
- _blank，在一个新的页面中打开超链接
超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。
<!--点击“超链接”，跳转到百度 -->
<a href="https://www.baidu.com">超链接</a>
<br><br>
<!--点击“超链接2”，跳转到本地页面：07.列表.html -->
<a href="07.列表.html">超链接2</a>
8.2 超链接到当前页面其他位置
-
href="#"，点击超链接以后转到当前页面的顶部的位置，将#作为超链接的路径的占位符使用;
-
href="#bottom"，点击超链接以后转到当前页面的底部的位置;
-
href = #目标元素的id属性值，跳转到页面的指定位置;
-
id属性（唯一不重复的）
- 每一个标签都可以添加一个id属性;
- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性 ; -
href=“javascript:;” ，点击这个超链接什么也不会发生 ；
<!--点击“超链接”，跳转到跳转到本地页面：07.列表.html，并在一个新页面中打开目标页面 -->
<a href="07.列表.html" target="_blank">超链接</a>
<br><br>
<a href="#bottom">去底部</a>
br><br>
<a href="#p3">去第三个自然段</a>
<br><br>
<!-- 使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 -->
<a href="javascript:;">这是一个新的超链接</a>
<p ></p>
<p ></p>
<p id="p3"></p>
<p ></p>
9、引入图片标签img–是一个自结束标签
图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片，img标签是一个自结束标签。img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）。
-
img元素属性：
src属性：指定的是外部图片的路径（路径规则和超链接是一样的）； alt属性：图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示；搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录； width属性： 图片的宽度 (单位是像素) height属性：图片的高度 - 宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
一般情况在pc端，不建议修改图片的大小，改小浪费内存，改大显示不清晰，需要多大的图片就裁多大；但是在移动端，经常需要对图片进行缩放（大图缩小）。
- 图片的格式
jpeg(jpg)、 gif、png、 webp、 base64 (通过base64编码将图片转为字符，通过字符形式引入。)
<img src = "https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠" width="200">
10、内联框架–iframe标签
iframe标签用于在当前页面中引入其他页面，属性值为：
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
<body>
<!--
内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
width 指定引入页面的宽度
height 指定引入页面的高度
frameborder 指定内联框架的边框
-->
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
</body>
11、引入音视频标签–audio和video
11.1 引入外部音频文件–audio标签
audio 标签用来向页面中引入一个外部的音频文件，音视频文件引入时，默认情况下不允许用户自己控制播放停止。
audio 标签的属性：
src：指定音频文件路径
controls 是否允许用户控制播放，没有属性值，添加该属性表示允许用户控制；
autoplay 音频文件是否自动播放，没有属性值，添加该属性表示音乐在打开页面时会自动播放；
- 但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放，没有属性值，添加该属性表示循环播放；
<!--使用 src指定音频文件路径 -->
<audio src=="./source/audio.mp3" controls autoplay loop></audio>
<!--使用source标签指定音频文件路径 -->
<audio controls>
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<!-- embed标签适用所有浏览器 -->
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
对于同种类型的音频文件，浏览器只加载第一个。
11.2 引入外部视频文件–video标签
使用video标签来向网页中引入一个视频：
- 使用方式和audio基本上是一样的
还可使用内联框架引入一个外部网页上的视频.
<!--使用 src指定文件路径 -->
<video src=="./source/audio.mp3" controls autoplay loop></video>
<!--使用source标签指定文件路径 -->
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
12、表格–table标签
在现实生活中，我们经常需要使用表格来表示一些格式化数据：课程表、人名单、成绩单…；同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格。
12.1 简单表格
在table中tr表示表格中的一行： ；
td表示一个单元格：A1
<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
-
table的常用属性
align：枚举属性，指示表在文档中的对其位置，属性值有left，right，center。 border：和样式相关（CSS），表格边框值 width： 和样式相关（CSS），表格的宽度； bgcolor： 和样式相关（CSS），表格的背景颜色； -
td的属性
colspan：指示横向的合并单元格列数。默认值是1； rowspan：指示纵向的合并单元格列数。默认值是1；
<body>
<table border="1" width='50%' align="center">
<!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<!-- rowspan 纵向的合并单元格 ，即合并第2行和第三行的第四列-->
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<!--
colspan 横向的合并单元格
-->
<td colspan="2">C4</td>
</tr>
</table>
</body>
12.2 长表格
可将一个表格分为三部分：
- 头部(thread)、 主体(tbody)、 底部(tfoot)；
- th 表示头部的单元格
<table>
<!-- 表格的头部 -->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<!-- 表格的主体 -->
<tbody>
<tr>
<td>2020.8.31</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2020.8.31</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2020.8.31</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2020.8.31</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<!-- 表格的底部 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
13、表单–form标签
在现实生活中表单用于提交数据，在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器，使用form标签来创建一个表单。
- form标签的属性
action属性：指定表单要提交的服务器的 URL； - input标签（行内元素-自结束标签）： 元素用于为表单创建交互式控件，以便接受来自用户的数据；可以使用各种类型的输入数据。
输入元素的type属性：
date,email,text,file,image,month,number,password,submit,url......
注意：数据要提交到服务器中，必须要为元素指定一个name属性值。
<form action = "target.html">
<!-- 文本框
注意：数据要提交到服务器中，必须要为元素指定一个name属性值
-->
文本框 <input type="text" name="username">
<br><br>
<!-- 密码框 -->
密码框 <input type="password" name="password">
<br><br>
<!--单选按钮
- 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中
-->
单选按钮 <input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
<!-- 多选框 -->
多选框 <input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<br><br>
<!-- 下拉列表 -->
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<br><br>
<!-- 提交按钮 -->
<input type="submit" value="注册">
input标签的其他属性:
autocomplete="off" 关闭自动补全
readonly 将表单项设置为只读,数据会提交
disabled 将表单项设置为禁用,数据不会提交
autofocus 设置表单项自动获取焦点.
<form action="target.html">
<input type="text" name="username" value="hello" readonly>
<br><br>
<input type="text" name="username" autofocus>
<br><br>
<input type="text" name="b">
<br><br>
<!-- 两种实现button的方式 -->
<input type="submit" >
<input type="reset">
<input type="button" value="按钮">
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
