HTML用于描述页面的结构
CSS用于控制页面中元素的样式
JavaScript用于响应用户操作

html基本格式

1.标签

一般成对出现

<head></head>中的内容不显示在页面上

<body></body>中的内容显示在网页内部

自结束标签只有头

1 2	<img> <input>

2. 注释

在网页内容中不显示，但可以在源码中查看

注释不能嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标签名</title>
    <!--title的内容作为搜索后超链接上的文字显示-->
</head>
<body>
    <h1>...</h1>
    <p>...</p>
</body>
</html>

3. 标签的属性

设置标签内容的显示方式

在开始标签中设置
将”第三个“设置红色显示
属性与标签名或2属性间用空格隔开
举个例子，实际开发不建议使用，样式应该在css中设置

1	<h1>这是我的<font color="red" size='5'>第三个</font>网页</h1>

4. 网页的基本结构

html5的声明，写在网页的最开头

1	<!DOCTYPE html>

通过meta标签设置网页的字符集，避免乱码

1	<meta charset="UTF-8">

meta标签用于设置网页中的一些元数据，元数据不给用户看
meta的常用属性

charset–指定网页的字符集
name–指定数据的名称

content–指定数据的内容
eg. keywords 表示网站的关键字，可同时指定多个关键字，之间用,隔开

1	<meta name="keywords" content="网上购物,家电,手机,计算机,服装,国际,海外,居家,母婴,美妆,个护,食品,京东,集运,全球" />

eg. description用于介绍网站，搜索结果后的介绍

1	<meta name="description" content="京东全球版-专业的综合网上购物商城，为您提供..." />

重定向
1
<meta http-equiv="refresh" content="3;url=https://baidu.com">
5. 实体
在html中有些时候不能直接书写一些特殊符号，eg多个连续的空格只显示一个/字母左右的<>会将它识别为标签，无法显示
书写特殊字符的时候需要使用html中的实体

语法：&实体名; &nbsp 空格 &gt 大于号 &lt 小于号
1
2
今天   天气真不错！
ac

6.语义化标签

标题标签–块元素（独占一行）
- 共有h1-h6 六级标题
- 重要性从1-6递减，大小不关注，可以使用css设置
- 一般情况使用h1-h3
- 标题标签都是块元素（在页面中独占一行的元素，还有p标签也是块元素）
hgroup标签

用于为标题分组，可以将一组相关的标题放入到hgroup中

<hgroup>
    <h1>回乡偶书二首</h1>
    <h2>其一</h2>
</hgroup>

em标签–行内元素（不会独占一行）

用于表示语音语调的加重，显示为斜体

1	<p>今天天气<em>真</em>不错！</p>

strong标签–行内元素
表示强调，重要内容，显示为粗体

1	<p>你今天必须<strong>完成作业</strong></p>

q标签–行内元素
表示引用，显示时外侧加引号

1	子曰<q>学而时习之，不亦乐乎</q>

7. 块元素与行内元素

块元素
–在网页中一般通过块元素来对页面进行布局
行内元素
–主要用来包裹文字
一般情况下会在块元素中放行内元素，而不是在行内元素中放块元素，块元素中一般既能放块元素又能放行内元素除了p标签
注：p标签内不能放任何块元素（比如h1）

浏览器在解析网页时，会自动修正网页内不符合规范的内容

比如：

标签写在了根元素的外面

p元素中嵌套了块元素

根元素中出现了处head和body以外的子元素

… …
替换元素（img，audio）
显示的不是书写的内容，而是别路径中的元素所替代

8. 布局标签
header–网页头部（可以有多个）
main–网页主体部分（一个网页只有一个）
footer–网页底部（可以有多个）
nav–网页中的导航
aside–表现为侧边栏
article–表示独立的文章
section–表示一个独立的区块，上面的标签都不能表示时使用

以上都是html5新增的，了解，使用时不常见

div–没有语义，用来表示一个区块，目前主要使用的布局元素
span–行内元素 没有语义，一般用于在网页中选中文字

9.列表

html中有三种列表

有序列表

使用ol标签创建

使用li表示列表项

<ol>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>

无序列表

使用ul标签创建

使用li表示列表项

 <ul>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ul>

定义列表 一般用的不多

使用dl标签创建

使用dt来表示定义的内容

使用dd来对内容进行解释说明

 <dl>
    <dt>结构</dt>
    <dd>结构表示网页的结构</dd>
</dl>

列表间可以互相嵌套

10. 超链接–使用a标签（行内元素）定义

可以从当前页面跳转到其他页面或者当前页面的其他位置
a标签为行内元素，但其中可以嵌套除a自身意外的任何元素
href用于指定跳转路径

<!--href指定的值可以是外部网站的地址，也可以时内部网站的地址-->
<!--href指定的值可以绝对路径也可以是相对路径-->
    <a href="https://www.baidu.com">百度</a>
    <br>
    <a href="list.html">list</a>

相对路径

当跳转到服务器内部页面时使用
相对路径都会使用.或..开头
./（可省略）表示当前文件所在目录
../ 表示当前文件的上级目录
###

target属性

用来指定超链接打开的位置

可选值：
_self：默认值，在当前页面中打开超链接，省略target属性时自动采用此种方法
_blank：在新标签页中打开超链接

<a href="https://www.baidu.com" target="_self">百度本页面</a>
<br>
<a href="https://www.baidu.com" target="_blank">百度新标签页</a>
<br>

回到页面顶部

1	<a href="#">回到顶部</a>

id属性(唯一，不重复的)

–每个标签都可以添加一个id属性
–id属性是元素间的唯一标识，同一个页面中不能出现重复的id
注意id不能以数字开头

1	<a id="bottom" href="#">回到顶部</a>

去页面底部，去到id为bottom的标签处

1	<a href="#bottom">到页面底部</a>

也可以将也去到页面的任意位置，只需将href的值设为**#id值**

超链接的占位

href=”#”
href=”javascript:;”

1 2	<a href="#">这是一个超链接</a> <a href="javascript:;">这是一个超链接</a>

11. 图片标签 –使用img标签（自结束标签）

用于向当前页面引入一个外部图片
img是一个替换元素，介于块和行内元素之间

1	<img src="./img/world.jpg" alt="世界地图">

src属性

用于指定外部图片的路径，相对路径与绝对路径均可

alt属性

用于添加对图片的描述，这个描述默认不会在页面上显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt的值来识别图片

width属性

设置图像的宽度（单位是像素）

height属性

设置图片的高度
当宽度和高度只设置一个时，另一个会等比例缩放
pc端一般不建议修改图片大小
移动端一般会将大图缩小

12.内联框架–iframe标签（一般很少使用）

用于向当前页面中引入一个其他页面，有开始有结束

src属性

指定要引入的网页的路径
可以使用内部网页或外部网页

frameborder属性

指定内联框架的边框，0表示没有，1表示有

1	<iframe src="https://movie.douban.com/" width="800" height="600" frameborder="0"></iframe>

13.音视频播放

音频–audio标签（替换元素）

引入一个外部的音频文件

属性

controls 是否允许用户控制播放
autoplay 自动播放，即使设置了，但大部分网站不会自动给播放
loop 循环播放
src/source 音频文件

1	<audio src="./sources/The Eve.mp3" controls></audio>

1
2
3

<audio controls>
    <source src="./sources/The Eve.mp3">
</audio>

以上两种效果一致
但对于第二种，可添加文字，当无法播放时提示，当可以播放时自动忽略文字；也可添加多个音频文件，优先选择前面的播放，当前面的无法播放再播放后者

<audio controls>
    对不起，您的浏览器不支持播放音频，请升级浏览器！
    <source src="./sources/The Eve.mp3">
</audio>

embed标签–老版本浏览器音视频播放

默认自动播放

1	<embed src="./sources/The Eve.mp3" width="200" height="150" type="audio/mp3 ">

视频–video标签（替换元素）

属性同audio

controls 是否允许用户控制播放
autoplay 自动播放，即使设置了，但大部分网站不会自动给播放
loop 循环播放
src/source 音频文件

14. 表格

使用table标签创建表格
在table中tr表示行，td表示列

<table border="1" width="25%" align="center">    
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
        <td>D2</td>
    </tr>
</table>

colspan 横向合并单元格

1	<td colspan="2">C2</td>

rowspan 纵向合并单元格

长表格

可以将一个表格分成三个部分：
头部 thead
主体 tbody
底部 tfoot
th表示头部的单元格，可以代替td，显示时会加粗居中显示

<table border="1" width="25%">
    <thead>
        <tr>
            <td>日期</td>
            <td>收入</td>
            <td>支出</td>
            <td>合计</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2020.1.1</td>
            <td>500</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>2020.1.1</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>

表格的样式：

width：宽度

1	width: 25%;

border：边框

1	border: 1px black solid;

border-spacing：指定边框之间的距离

1	border-spacing: 0px;

border-collapse：设置边框的合并

1	border-collapse: collapse;

隔行变色

1
2
3

tr:nth-child(odd){   
       background-color: rgb(173, 173, 207);
   }

vertical-align

默认情况下，元素在td中是垂直居中的，可以通过vertical-align设置

1	vertical-align: middle;

text-align：文字的位置设置

1	text-align: center;

可以使用display: table-cell;将元素设置为单元格

.box1{
    width: 300px;
    height: 300px;
    background-color: #bfa;
    /*将元素设置为单元格*/
    display: table-cell;
    vertical-align: middle;
    /*垂直居中显示*/
}
.box2{
    width: 100px;
    height: 100px;
    background-color: orange;
    /*水平居中*/
    margin: auto;
}

15. 表单–form标签

form的属性

action：指定表单要提交的服务器地址
method：选择提交的方式post或get

标签	说明
input标签	对应的标签有text，password，checkbox，radio，submit，reset，file，hidden，image和button，默认为text，可以提交用户名，密码等
select标签	下拉选择框option
textarea标签	文本域

type：指定元素的类型。text，password，checkbox，radio，submit，reset，file，hidden，image和button，默认为text
name：指定表单元素的名称（提交时所对应的key）
value：元素的初始值，radio必须提供
size：指定表单元素的初始宽度，type为text或password时，以字符为单位，其他type以像素为单位
maxlength：type为text或password时，输入的最大字符数
checked：type为radio或checkbox时，是否被选中
autocomplete：自动补全功能
- autocomplete=”off”，关闭自动补全
readonly：将表单项设为只读数据会提交
disabled：将表单项设为禁用数据不会提交
autofocus：自动获取焦点，及自动选中
类型分类：

文本框：

1 2	<input type="text"> <input type="text" name="username">

提交按钮：

type指定类型

value指定显示文字

注意：数据要提交到服务器，必须为元素指定一个name属性，数据提交后网址后会加上相应的信息

1	<input type="submit" value="确定">

密码框：

1	<input type="password" name="passward">

单选按钮

必须指定name，checked表示默认选择

1 2	<input type="radio" name="gender" value="男" checked> <input type="radio" name="gender" value="女">

多选框

1
2
3

<input type="checkbox" value="1" name="category">
<input type="checkbox" value="2" name="category">
<input type="checkbox" value="3" name="category" checked>

下拉列表

<select name="status">                                        
    <option value="student">学生</option>
    <option value="teacher">教师</option>
    <option value="worker">工作人员</option>
</select>

普通的按钮

点击后没有任何效果，可以通过js设置点击效果

1	<input type="button" value="按钮">

重置按钮

1	<input type="reset">

button格式的按钮

可以在里面添加一些其他的标签

1
2
3

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

email

会自动检查提交的内容，必须包含@才能成功提交

1	<input type="email">

html基本格式

1.标签

2. 注释

3. 标签的属性

4. 网页的基本结构

5. 实体

6.语义化标签

7. 块元素与行内元素

8. 布局标签

9.列表

10. 超链接–使用a标签（行内元素）定义

相对路径

target属性

id属性(唯一，不重复的)

超链接的占位

11. 图片标签 –使用img标签（自结束标签）

src属性

alt属性

width属性

height属性

12.内联框架–iframe标签（一般很少使用）

src属性

frameborder属性

13.音视频播放

音频–audio标签（替换元素）

embed标签–老版本浏览器音视频播放

视频–video标签（替换元素）

14. 表格

长表格

15. 表单–form标签