HTML学习总结
一、什么是HTML
HTML是超文本标记语言（HyperText Markup Language）的缩写。HTML不是编程语言，而是属于一种定义内容结构的标记语言。使用HTML语言来制作web页面。
二、HTML文档结构分析
创立一个新的html文件，整个HTML是由一个个元素组成，我们可以观察到html文档的大致结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
其中对html文档结构分析
<html></html>:<html>元素，包裹了整个完整的页面，其他元素都是嵌套在这里面。
<head></head>:<head>元素，其中所存放的元素即为不在网页面上显示的内容，例如关键字和页面描述，CSS样式，字符集声明等等。
<body></body>:<body>元素，其中包含了在网页面上出现的所有内容。
<meta charset="UTF-8">:表明html文档使用UTF-8字符集编码。
<title>Document</title>:设置页面标题，出现在浏览器标签上。
<meta name="viewport" content="width=device-width, initial-scale=1.0">:指定页面的图标，出现在浏览器标签上。
三、HTML常用标签
1、标题
HTML提供了从大到小6级标题，分别是：<h1> to <h6>,定义 HTML 标题，可以改变标题的大小。其中<h1>为一级标题，用于页面的主标题，其次为二级标题<h2>，以此类推。
2、段落
<p></p>:定义段落，将所要展示出来的文字在<p></p>中写入。例如：
<p>我在这里显示！</p>
其中，在HTML语言中还存在注释以及一些空元素,<br>定义简单的折行,换行；<hr>定义水平线。
<p>我在这里显示！</p>
<!-- 水平分割线 -->
<hr>
3、超链接
例如：
<a href="https://www.baidu.com/" target="_blank">百度</a>
其中我们可以看到，这是一个百度的超链接，其中href为即将跳转去的地址URL（Uniform Resorce Locator)，target属性为_blank即表明将在新的页面打开超链接（在默认情况下为_self即在当前页面下打开超链接。
锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
例如：
<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...
4、图片
在页面插入一张图片的方法如下：
<img src=" " alt=" " width=" " height=" ">
其中src属性指明图片的存储路径，显示图片的文件位置URL；alt属性当获取图片出现问题时显示的文字（占位符）；width和height属性可以设置图片的高宽度（一般不可取）。
文件路径：
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
相对路径：.表示当前目录，..表示上一级目录
5、表格
使用<table>标签可以表示表格，例如：
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
其中<tr></tr>表示为一行，<td></td>表示为表格中的单元，<th></th>表示表头的单元
6、列表
列表可以分为有序列表和无序列表，其中无序列表用<ul></ul>标签，默认使用实心圆点作为标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。有序列表用<ol></ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
无序列表（默认标志）：
<ul>
<li>zhangsan</li>
<li>lisi</li>
<li>wangwu</li>
</ul>
无序列表（实心方块为标志）：
<ul type="square">
<li>zhangsan</li>
<li>lisi</li>
<li>wangwu</li>
</ul>
有序列表（默认标志）：
<ol>
<li>zhangsan</li>
<li>lisi</li>
<li>wangwu</li>
</ol>
有序列表（罗马字母i为标志）：
<ol type="i">
<li>zhangsan</li>
<li>lisi</li>
<li>wangwu</li>
</ol>
7、表单
当网站需要获取我们的一些信息时，我们就需要使用表单（form）来让用户填写或选择。
<form>
</form>
在<form></form>中写入所需要的表单内容。
8、区块元素和内联元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如<h1>, <pre>, <ul>, <table>，<div> 等。内联元素相反，他们总是一个接一个进行显示，不会新起一行。如:<span>, <input>, <td>, <a>, <img>等。
9、特殊字符
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
扫一扫
1911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
