HTML是创建网页的标准语言，它是一种标记语言，包含标签和文本。本文介绍了HTML的基本概念，如标签的使用、注释规则、文档结构、属性规范、以及常见元素如标题、段落、链接、图片的使用。同时，提到了浏览器如何解析HTML，以及对SEO友好的元素如meta标签和title标签的使用。
HTML 中文叫做超文本标记语言（英语：HyperText Markup Language)，简称HTML
是一种用于创建网页的标准语言，自己可以使用HTML来创立自己的WEB站点，HTML运行在浏览器，由浏览器来解析。
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的原（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。`在这里插入代码片
HTML是标记语言不是编程语言，标记语言是一套标记标签 (markup tag)，使用标记标签来描述网页，HTML包含了标签及文本，HTML文档也叫web页面。
HTML标记标签通常被称为HTML标签（HTML tag），HTML tag是由尖号包围的关键词，<html>，HTML tag通常是成对出现的，<b>和</b>，第一个是开始标签，第二个是结束标签，也被称为开放标签和闭合标签。<标签>内容</标签>
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。浏览器不是直接显示的HTML标签，但标签来决定如何展现HTML页面的内容给用户 。
HTML规范
HTML不区分大小写，但是我们一般都使用小写
HTML中注释不能嵌套
HTML标签必须结构完整，要么成对出现，要么自结束标签
HTML中写语法出现不符合规范的内容浏览器都会为你自动修正，但有些情况会修正错误
HTML标签可以嵌套，但不能交叉嵌套
HTML标签中的属性必须有值，且必须加引号（双引号单引号都行）
HTMl结构
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<p>这是另一个段落。</p>
</body>
<!DOCTYPE> doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。
不同版本的不同的<!DOCTYPE>
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk”>。
<html> html根标签，一个页面中只有只一个根标签，网页中所有内容都应该写到html根标签
<head >标签用于定义文档头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。该标签中的内容，不会在网页中直接显示，他用来帮助浏览器解析页面
<meta name="description" content=“学习html java">
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30”>
做请求重定向
<meta http-equiv=“refresh” content=“秒数”;rul="目标路径” />
<title>我的 HTML 的第一页定义HTML文档标题，title网页的标题标签，默认会显示在浏览器的标题栏中，搜索引擎检索页面时，会首先检索title标签中的内容它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎的排名。
<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。
`<link rel="shortcut icon" href="图片url">`
要将<link>标签放入<head>里。
<header> 标签用于定义文档的页眉（介绍信息）。
标题（Heading）是通过<h1> - <h6> 标签来定义的.(<h1> 是最大的标题 <h6>是最小的标题),浏览器会自动地在标题的前后添加空行,浏览器检索完文档标题（title）会马上检索h1标题，标题影响着浏览器搜索排行。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
段落是通过标签 <p> 来定义的.
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
链接是通过标签 <a> 来定义的.
<a href="http://www.baidu.com">这是一个链接</a>
图片标签：使用<img />标签来向网页中引入一个外部图片，img标签也是一个自结束标签
属性：
`<img src=“1.jpg” alt=“这是一张图片” width=“100px” height=“100px” />`
src:设置外部图片路径。相对路径，是指对于当前网页所在目录位置。’…/‘返回上一级目录，”文件名/1.jpg”下一级目录
alt:图片不能显示时对图片的描述，搜索引擎通过alt属性来识别不同的图片，如果不写alt搜索引擎不会对img中的图片进行收录
width:修改图片宽度，一般用px作为单位
height:修改图片高度，一般用px作为单位
宽度高度如果设置一个，另一个会等比例调整大小。一般开发中除了自适应页面，不建议设置width和heigh
图片格式：
jpg：支持颜色比较多，图片可以压缩，但不支持透明。一般用来保存照片等颜色丰富的图片
gif：支持颜色少，只支持简单透明，支持动态图。图片颜色单一或动态图时可以使用gif
png：支持颜色多，支持复杂透明。显示颜色复杂的透明图片
使用原则：
效果不一致，使用最好的
效果一致，使用最小的
<br> 用来换行 (<br>，是自结束标签，没有关闭标签的空元素,<br/>关闭空元素的正确方法) <br> 在所有浏览器中都是有效的，但使用<br /> 其实是更长远的保障。
<hr> 标签在 HTML 页面中创建水平线。
<!-- 注释 -->注释是插入HTML代码中,在浏览器中不会显示，注释不能嵌套
<b>这个文本是加粗的</b>
<strong>这个文本是加粗的有语义</strong>
<big>这个文本字体放大</big>
<em>这个文本是斜体的有语义</em>
<i>这个文本是斜体的</i>
<small>这个文本是缩小的</small>
<sub>下标</sub>
<sup>上标</sup>
<q>块引用 添加双引号</q>
<del> 标记删除文本</del>
<ins>插入文本</ins>!
<pre>预格式标签，会将代码的格式保存，不会忽略空格</pre>
<code>表示代码标签</code>
实体：在HTML中，一些如< >这种特殊字符是不能直接使用，需要使用一些特殊的符号来表示这些特殊的字符，这些特殊字符我们称为实体（转义字符串）
&实体的名字;
< <
> >
空格
版权符号 ©
无序列表，默认使用粗体原点
<ul>
<li>1</li>
<li>2</li>
</ul>
有序列表，使用数字标记
<ol>
<li>1</li>
<li>2</li>
</ol>
自定义列表
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
浏览器显示如下：
Coffee
- black hot drink
Milk - white cold drink\
内联框架：<iframe src=“intex.html”></iframe>
使用内联框架引入一个外部的页面
src:指向一个外部页面的路径，可以使用相对路径
width：宽度
height：高度
name：可以为内联框架指定一个name属性
现实开发中不推荐使用内联框架，因为内联框架的内容不会被搜索引擎检索
<abbr title="holle">H</abbr>；<acronym title="hello word">W</acronym>
某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
仅对于 IE 5 中的 acronym 元素有效。对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效
<bdo dir="rtl">。drow olleh</bdo>
改变文字的方向。开始结束需要加
超链接：从一个页面跳转到另一个页面
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接
<a href="//www.baidu.com/">本文本</a> 是一个指向万维网上的页面的链接。
<a href="https://www.baidu.com/" target="_blank">访问百度!</a> 】将 target 属性设置为"_blank", 链接将在新窗口打开。可以设置内联框架的name值，链接在指定在内联框架中打开
<a id="tips">有用的提示部分</a>
<a href="https://wwwbaidu.com/html/html-links.html#tips">访问有用的提示部分</a>
```html
<a href="//www.baidu.com">
<img border="10" src="图片" alt="HTML 教程" width="32" height="32"></a></p>
创建图片链接
<a href="//www.baidu.com">
<img border="0" src="图片" alt="HTML 教程" width="32" height="32"></a>
无边框的图片链接
#号默认回到顶部
<a href="#1"> <a id="1">
跳转到指定位置
<a href="//www.baidu.com/" target="_top">点击这里!</a>
跳出框架
发送电子邮件链接：
<a href="mailto:xxxxxxxxxx@qq.com?Subject=Hello%20again" target="_top">发送邮件</a>
发送密件抄送：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
定义页面中所有链接默认的链接目标地址:
<base href="//www.runoob.com/images/" target="_blank">
_
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
修改页面段落标题背景颜色
`<p style="color:blue;margin-left:20px;">这是一个段落。</p>`
改变段落的颜色和左外边距
<h2 style="background-color:red;">这是一个标题</h2>
改变标题背景颜色
<p style="background-color:green;">这是一个段落。</p>
改变段落背景颜色
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用标签。
<h1 style="text-align:center;">居中对齐的标题</h1> text-align
（文字对齐）属性指定文本的水平与垂直对齐方式
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<kbd>键盘输入</kbd>
<tt>打字机文本</tt>
<samp>计算机代码样本</samp>
<var>计算机变量</var>
这些标签常用于显示计算机/编程代码。
扫一扫
8186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
