学习html总结（一）
学习html总结（一）
一、什么是HTML
HTML是HyperText Markup Language的缩写，翻译成中文是超文本标记语言，用于网页的创建。
二、HTML的基本结构
主要包括<！DOCTYPE html>文档类型、<head>头部和<body>主体三部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
三、HTML的头部
1、meta标签
1.1charset 设置文档的字符集编码格式
<meta charset="UTF-8">
常见的几种字符集编码格式：
a.UTF-8 ：万国码（最常用）。
b.GB-2312 ：国标码。
c.GBK ：扩展的国标码。
1.2name 将该网页的信息写给搜索引擎看
<meta name="keywords" content="这是搜索网页的关键字"/>
<meta name="description" content="这是网页的介绍"/>
第一行是网页的关键字，用于搜索该网页。第二行是网页的介绍。
常用的name属性值有：author（作者）keywords（关键字）description（网页描述）。
2、title标签——网页的标题
<title>这是网页的标题</title>
四、HTML的主体
1、标签的分类：块级标签和行级标签
1.1块级标签：显示为块状，前后隔一行（自动换行）
a.标题标签 <h1>到<h6>，h1最大，h6最小。
<h1>111111111111</h1> <h2>111111111111</h2> <h3>111111111111</h3> <hr /> <!--水平线--> <h4>111111111111</h4> <h5>111111111111</h5> <h6>111111111111</h6> <hr />
<pre>这是预格式标签
可以换行</pre>
<!--预格式标签，可以保留代码的排版格式-->
f.<blockquote></blockquote>引用标签
g.有序列表ol和无序列表ul
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
h.定义描述列表dl
<dl>
<dt>定义列表标题</dt>
<dd>描述项第一项</dd>
<dd>描述项第二项</dd>
</dl>
i.分区标签
<div></div> 可以包裹任何标签，也可以被包裹进任何标签。
<span style="color: red;font-size: 33px;">姜浩是我大哥</span>
<!--color 字体颜色 font-size 字体大小 background-color 背景颜色 font-weight 加粗-->
<em>表示为强调，字体倾斜</em>
<strong>表示强调，字体加粗</strong>
<i>表示切斜，没有强调效果</i>
<b>表示加粗，没有强调效果</b>
<q>表示短引用，自带双引号</q>
<small>字体比正常字体小一号，可以多重嵌套</small>
<big>字体大一号</big>
<s>表为倾斜</cite>
<code>表示计算机代码，但不会保留格式，需要配合示有误文本，删除线</s>
<cite>表示引用，浏览器表示pre标签使用</code>
<bdo dir="ltr">表示文本方向，ltr：从左往右 rtl:从右往左</bdo>
X<sup>2</sup>
<!--sup：上标文本 sub：下标文本-->
<!--版权符号 空格-->
© © 空格
<u>这是下划线标签</u>
<mark>高亮或标记文本 浏览器显示为黄色背景</mark>
b.超链接 <a href="" target=""></a>
<a href="https://www.baidu.com/" target="_blank" title="打开百度">表示超链接</a>
<!--href表示跳转的地址；
target表示页面打开的位置：self自身页面打开（默认），blank新页面打开；
title表示超链接的标题，也就是鼠标指上去显示的东西-->
<a href="练习.html#bottom">打开超链接</a>
<!--相对路径的三种情况：
如果在同一文件夹，直接写“文件名.后缀”
如果在下一层文件夹，写“文件夹名/文件名.后缀”
如果在上层文件夹，写“../文件夹名/文件名.后缀” ..的意思是上一层文件夹，类似后退-->
c.锚链接
自身页面锚链接：先定义锚点<a name=name1>、设置超链接跳转到锚点<a href="#name1">
页面间锚链接：先在另一个页面设置锚点<a name=name2></a>，然后在本页面跳转链接，<a href="链接地址#name2">
d.功能性连接：mailto 用于给指定邮箱发送邮件 http file ftp
<a href="mailto：j.com" target="_self">点击就送</a>
