HTML学习总结
一、HTML是什么？
HTML是用于创建网页的标准标记语言，可用于格式化文本、添加图片、创建链接、输入表单、框架和表格等，将之存为文本文件，浏览器即可读取和显示。
HTML不是一门编程语言，而是一种用于定义内容结构的标记语言
HTML文档包含了网页的主要内容
HTML利用标签/元素来描述网页
二、HTML文档结构
HTML文档所有内容都包含在<html></html>标签中，<html>元素包含了整个HTML页面的内容，是一个根目录，其他所有元素都嵌套其中
<html>元素包含的内容分为头部（<head>元素）和主体部分（<body>元素）
<head>元素包含的内容不会在HTML页面显示，<body>元素中包含的内容将会在HTML页面显示
<head>元素包含<meta>元素、<title>元素、<link>元素
<meta charset=“utf-8”>元素主要用来声明HTML文档使用的字符编码
<title>元素里记录的是文档的标题
<link>元素主要用来链接，引入一些外部文件，比如css样式表（xxx.css）或HTML页面的图标（xxx.ico）
<body>元素包含能在浏览器中显示的所有内容和框架，比如文字、图片、音视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这里是标题</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<h1>这里是一级标题</h1>
<p>文本内容</p>
</body>
</html>
三、HTML常用元素
1.标题
HTML标题分为6级，其中h1标题最大，h6标题最小
标题字体的大小从<h1>到<h6>依次减小
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>第一级标题（MAX）</h1>
<h2>第二级标题</h2>
<h3>第三级标题</h3>
<h4>第四级标题</h4>
<h5>第五级标题</h5>
<h6>第六级标题（MIN）</h6>
</body>
</html>
标题的作用
1.作为内容标题
2.呈现文档结构和内容
3.方便用户通过标题快速浏览页面
4.搜索引擎利用标题来索引页面的内容
5不能为了实现粗体或大号的文本而使用标题
2.文本
<p>元素
在HTML中，通常用<p>元素来定义段落，比如在html上写一篇文章，就可以用<p>元素来定义文章的各个段落，用<p>元素定义段落之后，段落与段落之间就会有一定的间隔。
<pre>元素
<pre>元素可以定义预格式化的文本，<pre>元素中定义的多个空格，换行等，在html中会原样输出，即<pre>元素中是什么样，html中就是什么样。
特殊符号，符号实体
在HTML中，有一些特殊符号是预留的，不能直接显示，因为浏览器会把他们误认为是标签，这时需要使用符号实体来表示这些符号。
<p>在HTML中，通常用 <p> 元素来定义段落，用 <p> 元素定义段落之后，段落与段落之间就会有一定的间隔。</p>
<p>
在HTML中，通常用 <p> 元素来定义段落， 元素定义段落之后，段落与段落之间就会有一定的间隔。
</p>
<pre>
<pre> 元素可以定义预格式化的文本，
<pre> 元素中定义的多个空格，换行等，
在html中会原样输出，即 <pre> 元素
中是什么样，html中就是什么样。
<pre> 元素可以定义预格式化的文本，
<pre> 元素中定义的多个空格，换行等，
在html中会原样输出，即 <pre> 元素
中是什么样，html中就是什么样。
<pre> 元素可以定义预格式化的文本，
<pre> 元素中定义的多个空格，换行等，
在html中会原样输出，即 <pre> 元素
中是什么样，html中就是什么样。
</pre>
3.空元素
空元素指没有内容的HTML元素
空元素只有开始标签，没有结束标签，空元素以开始标签的结束而结束
以下是常用的空元素
| 元素 | 功能 |
|---|---|
| <hr> | 水平分割线 |
| <br> | 换行符 |
| <input> | 输入框 |
| <img> | 图片 |
<div>
<img src="https://dpic.tiankong.com/53/hg/QJ8537482520.jpg?x-oss-process=style/794ws" alt="some_text" width="100" height="100"><hr>
《山居秋暝》<br>王维<br>空山新雨后，天气晚来秋。<br>明月松间照，清泉石上流<br>竹喧归浣女，莲动下渔舟<br>随意春芳歇，王孙自可留</div>
4、区块元素
大多数HTML元素都被定义为块级元素和内联元素
块级元素
块级元素在浏览器中显示时，通常会以新行来开始或结束
常用的块级元素：<div>,<h1>,<p>,<ul>>等
内联元素
内联元素在浏览器中显示时，通常不会以新行开始
常用的内联元素：<span>,<a>,<img>等
5、超链接
<a>元素用来设置超链接
（1）超链接语法
<a href="https://cn.bing.com/" target="_blank">必应搜索\</a>//超链接
<a href="#id">锚点\</a>//锚点
（2）超链接的作用
超链接可以跳转到其他页面或页面的某一个位置（锚点)
在上述超链接语法中“必应搜索“这几个文本文字就是超链接在页面中显示出来的部分，点击”必应搜索“这几个文字就可以进行链接跳转，
超链接可以是文本文字，也可以是图片，按钮等，只需要将”必应搜索“这几个文字替换成相应的图片或者按钮就可以了，点击图片或者按钮，同样可以实现跳转
（3）超链接元素<a>常用属性
①href属性
href属性的值就是被链接文档的地址（URL)
②target属性
target属性可以用来设置跳转的页面在哪里显示
target属性的常用值
_self： target属性的默认值，在当前页面打开被链接文档
_blank： 在新窗口中打开被链接文档
_parent： 在父框架集中打开被链接文档
_top： 在整个窗口中打开被链接文档
（4）锚点
锚点也称为书签，通过设置锚点，用户可以实现在页面中自由跳转，提高用户体验
设置锚点的方法：对某元素设置一个id属性，该id属性就是一个锚点，
设置锚点时，需要在超链接<a>的href属性的值，即超链接地址前加上一个#
6、图片
<img>元素的作用是用来载入图片
（1）<img>语法
<img src="url" alt="some_text" width="200" height="200">
（2）<img>语法说明及常用属性
①src属性
src属性为源属性，src是source的缩写，该属性的值是图片的URL地址，使用<img>元素载入图片是，src属性必不可少
②alt属性
alt属性的值是当图片无法加载出来时显示的文字，alt属性的值可以自定义
在浏览器中，当该图片无法显示时，浏览器将会在该图片的位置显示出alt属性中的值，alt属性中的值也被称为占位符。
③width属性
width属性可以设置图片在页面中显示的宽度
④height属性
height属性可以设置图片在页面中显示高度
7、音频，视频
（1）<video>元素
<video>元素定义视频，比如电影或其他视频流
<video src="https://www.runoob.com/try/demo_source/movie.ogg" controls="controls">
</video>
①src属性
在<video>元素中，提供了src属性来指定视频文件的路径（URL)，此外，<video>元素还可以通过<source>元素来提供视频资源
②元素
<video> 元素支持多个<source> 元素。
每一个<source> 元素为<video> 元素提供一个视频资源，不同的<source> 元素可以链接不同的视频资源，还可以利用type属性设置资源的 MIME 类型，兼容不同的浏览器解码支持。浏览器将使用第一个可识别的格式
③controls属性
<video>元素还提供了controls属性，controls属性提供了播放暂停，音量控件和进度条来控制视频播放
④width属性和height属性
同时<video>还提供了width属性和height属性来控制视频的宽度和高度，如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变，设置width属性和height属性更有利于页面布局
（2）<audio>元素
<audio>元素定义音频，比如音乐或其他声音流
<audio src="https://www.w3school.com.cn/i/horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
①src属性
在<audio>元素中，提供了src属性来指定音频文件的路径（URL)，此外，<video>元素还可以通过<source>元素来提供音频资源
②元素
<audio>元素也支持多个 <source> 元素。
<source> 元素为<audio>元素提供音频资源，<source> 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式
③controls属性
<audio>元素中，提供了controls属性来控制音频的播放暂停，音量控件和进度条等控件来控制音频的播放
（3）<source>元素
<source> 标签为媒体元素（比如<video> 和<audio>）定义媒体资源。
①src属性
src属性用来指定资源文件的路径（URL)
②type属性
type属性用来设置资源的MIME类型，即浏览器将用那种方式来解码文件
8、下拉框（单选/多选）
（1）<select>元素
<select>元素用来创建下拉列表，并用<option>元素来定义下拉列表中的可用选项
（2）<option>元素
<option>元素用来定义下拉列表中的一个选项
（3）单选/多选
如果下拉框想要设置多选，需要对<select>元素添加一个multiple属性，multiple属性是一个布尔属性，没有multiple属性，下拉框就是单选
利用这种方式来设置多选，在进行多选的时候需要，在windows电脑上需要按住Ctrl键来进行多选，在mac电脑上，需要按住command键来进行多选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>select</title>
</head>
<body>
<select multiple>
<option value="1">第一项</option>
<option value="2">第二项</option>
<option value="3">第三项</option>
<option value="4">第四项</option>
<option value="5">第五项</option>
</select>
</body>
</html>
9、有序列表，无序列表
<ul>元素
<ul>标签创建无序列表，无序列表使用粗体圆点来进行标记
<ol>元素
<ol>标签创建有序列表，有序列表使用数字进行标记
<li>元素
<li>标签创建列表项目，无序列表和有序列表均使用
- 标签来创建各自的列表项目
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无序/有序列表</title> </head> <body> <ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> <ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol> </html>10、表单
<form>元素
<form>标签用于创建供用户输入的 HTML 表单，在<form>标签中，可以包含一个或多个表单元素。比如：<input>,<button>,<select>,<option>,<label>等。
<label>标签定义一个标签，用来显示标签内容
<input>元素定义一个输入框，可以用来输入信息
<select>元素用来创建下拉列表，并用<option>元素来定义下拉列表中的可用选项
<option>元素用来定义下拉列表中的一个选项
<button>标签定义一个按钮，在该按钮内可以放置文本或图像，而使用<input>元素创建的按钮则不能。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <form> <label>姓名：</label> <input><br> <label>性别：</label> <select> <option>男</option> <option>女</option> </select><br> <button>提交</button> </form> </body> </html>11、表格
与定义表格相关的元素有<table>,<tr>,<th>,<td>
表格由 <table> 标签来定义
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）
表格第一行通常用来设置表头，表头由<th>标签定义，表头在大多数浏览器中会加粗居中显示
字母 td 指表格数据（table data），即数据单元格的内容
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
如果仅仅只是这样的话，整个表格是没有边框的，可以通过<table>元素的border属性或CSS级联样式表为表格设置边框
border属性会给每个单元格设置边框，同时也会为整个表格设置一个边框，通过修改border属性的值可以改变整个表格的边框大小，但是无法改变每个单元格的边框大小，每个单元格的边框大小默认为1px，当border属性值为0时，表格没有边框
虽然border属性可以为表格设置边框，但是用CSS级联样式表来设置表格边框更好。
<table> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> <tr> <td>A11</td> <td>A12</td> <td>A13</td> </tr> <tr> <td>A21</td> <td>A22</td> <td>A23</td> </tr> </table>第一列 第二列 第三列 A11 A12 A13 A21 A22 A23
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
