第一章 HTML的初识
一、HTML的基本结构
<!DOCTYPE html>
<!--声明文档类型为HTML文件。
文档声明。注意：文档声明在HTML文档中必不可少！且必须放在文档第一行。
-->
<html>
<head>
<!--meta标签：
1.charset属性：单独使用。设置文档字符集编码格式。
》>写法：<meta charset="UTF-8">。
》>常见的中文编码格式：
GB-2312:国标码，简体中文
GBK:扩展国编码，简体中文
UTF-8：万国码，unicote码，基本兼容各国语言
2.http-equiv属性：需配合content属性使用。主要声明浏览器如何解释编译文
》> 写法：<meta http-equiv="属性值" content="属性值详细内容">
》>常用属性值：content-Type HTML4.0之前的文档内容编码声明
refresh 网页刷新 set-cookie设置浏览器cookie缓存。
3.name属性：需配合content属性使用。主要给搜索引擎提供必要信息。
》>写法：<meta name="属性值" content="属性值详细内容">
》>重要属性值：autor 作者，声名网站作者，常用公司网址表示
keywords 网站关键字，多个关键字用英文逗号分隔
description 网页描述，搜索引擎显示title下描述的内容
*http-equiv和name属性，必须与content属性配合使用。 前两者只是用于声明即将修改哪些
属性值，而实际的属性值内容，在content中描述 。
-->
<!--作者-->
<meta name="autor" content="" />
<!--网页关键字-->
<meta name="keywords" content="html5,网页，Web前端开发" />
<!--描述-->
<meta name="description" content="这是我在杰瑞教育开发的第一个网页" />
<meta charset="UTF-8">
<!--HTML4.0之前的写法：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-->
<!--link标签：
1.作用：用于为网页连接各种文件。
2.常用属性：
rel：用于表明被连接文件与当前文件的关系。此处选icon，标明被链接图片是当前网页的icon图标。
type：标明被链接文件是什么类型。可以省略。
href：表明链接文件的地址。
-->
<link rel="icon" type="image/x-icon" href="">
<title>我的第一个网页</title>
<!--title：网页的标签，即网页选项卡上的名字。-->
</head>
<body>
</body>
</html>
二、常见的块级标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见的块级标签</title>
</head>
<body>
<!--【常见的块级标签】
标题标签<h1></h1>……<h6></h6>：默认加粗，h1最大，h6最小。
水平线<hr/>
段落<p></p>
换行<br/>
引用<blockquote></blockquote >
预格式<pre></pre>
-->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
<!--<hr/> : 水平线标签-->
<hr />
<!--<p></p>:段落标签-->
<!--<br/>: 换行标签-->
<p>p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，<br />这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字</p>
<p>p标签是段落标签，<br />这里是第二段文字</p>
<!--引用标签，cite属性，表明引用的来源，一般表明引用网址。浏览器默认显示为首行缩进。-->
<blockquote cite="">
横 眉冷对千夫指，俯首甘为孺子牛。
</blockquote>
<!--<pre></pre>:预格式标签
浏览器默认显示样式：1、显示为等宽字体 2、代码中的换行、空格等元素可在浏览器直接显示。
-->
<pre>哈哈哈哈哈哈哈哈
啊哈哈哈哈哈哈啊哈
</pre>
<!--预格式<pre></pre>标签-->
<pre>1
2
3
4
5
</pre>
<!--
有序列表：<ol></ol> order list
列表项：<li>可以有N多个</li>
-->
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<!--
无序列表：<ul></ul> unorder list
列表项：<li>可以有N多个</li>
-->
<ul>
<li>无序第一项</li>
<li>无序第二项</li>
<li>无序第三项</li>
</ul>
<!--
定义描述列表：<dl></dl>
列表标题：<dt>一般只有一项</dt>浏览器显示时， 标题顶格显示
列表描述项：<dd>可以有N多项</dd> 描述项相对标题进行缩进显示
-->
<dl>
<dt>这是定义列表的标题</dt>
<dd>描述项1</dd>
<dd>描述项2</dd>
<dd>描述项3</dd>
</dl>
<!--
组合标签：<figure></figure> 用于显示图片及图片标题
两个子标签：<img /> 图片
<figcaption></figcaption> 图片的标题
浏览器显示效果为：图片与标题上下排列，且整体向后缩进一个单位。
-->
<figure>
<img src="" />
<!--src表示图片的路径-->
<figcaption>这是图片标题</figcaption>
</figure>
<!--
分区标签：<div></div>：
常配合css，为网站中最常用的分区标签，很重要！！！常用于网页布局使用
-->
<div style="width: 100%; height: 100px; background-color: red;">
这是div里边的文字
<h1>这是div的标题</h1>
</div>
</body>
</html>
三、常见的行级标签
<!DOCTYPE html>
<html>
<head>
<a name="top"></a>
<meta charset="UTF-8">
<title>行级标签</title>
</head>
<body>
<!-- [常见的行级标签]
span（文本）
img（图片）
em（强调）
strong（强调）
q（短引用）
a（超链接）
i（倾斜）
b（加粗）
small（缩小字体）
-->
<!--span（文本）：无实际意义，用于包裹某部分文字，修改特定样式-->
<span style="color: blue; font-size: 36px;">大家好</span>，
我是<span style="color: red; font-size: 36px;">Span</span>中的文字
<br />
<!--em（强调）-->
<em>我被em标签强调了</em>
<br />
<!--strong（强调）-->
<strong>我被strong标签强调了</strong>
<!--i（倾斜）-->
<i>我被i标签倾斜了！！</i>
<br />
<!--b（加粗）-->
<b>我被b标签加粗了！！！！</b>
<br />
<!--
【Strong、em、b、i 标签的区别】
1、Strong和em都表示强调，Strong显示为粗体，em显示为倾斜。而且strong强调程度要大于em，
strong和em标签均可多层嵌套，表示强调程度的递增。
2、2、Strong和b都能加粗，em和i都能倾斜。但是，Strong和em多了一层强调的语义。HTML5要求
开发者尽可能实现代码的语义化。
-->
<!--q（短引用）：显示为文字用""引起来。 有cite属性-->
<q cite="">这是短引用标签q中的文字</q>
<br />
<!--small（缩小字体）big（增大字体）
small标签和big标签可以多层嵌套，直到字号达到上限或下限为止，但是在最新的规范中，small和big标
签不被提倡使用。提倡使用style="font-size：11px；"css样式替代。
-->
<small><small>我被small缩小了一号。</small></small><br />
<big>我被big标签放大了</big>
<br />
<br />
<!--img（图片）
1、src：表示图片引用路径。
src常见路径地址的写法：
# ① 相对路径：以当前文件为准，去寻找图片地址。
a、与当前文件处于同一层的图片，直接写图片名
b、图片在当前文件下一层：文件夹名/图片名，如 img/shouye.png
c、图片在当前文件上一层：图片名，如
使用相对路径时，图片所能放的最外层只能放到网站根目录（图片必须在项目文件夹中）
② 绝对路径：写法：<img src="盘符：/文件夹/图片。后缀名">。但是，严禁使用！！！
③ 网络链接：网络上的图片链接。但是，一般不使用。但是图片在别人服务器，不可控，不建议使用。
2、height="" width="" 图片的宽度高度。可以用css样式（style="width: ; height: ;"）代替
3、title:图片标题。当鼠标指上后显示的文字。
4、alt:当图片无法加载的时候，显示的文字。
5、align：设置图片周围文字相对于图片的位置。top， center ，bottom
-->
<img src="" height="100px" width="100px" title="鼠标指上时显示的文字"
alt="当图片没有加载成功时显示的文字" align="center"/>
<br />
<!--a标签：超链接
属性：
1、href：超链接跳转的地址。可以写网络连接，或本地HTML文件的相对路径，确定方式同img的src路径。
2、target：设置超链接打开窗口的位置。_self 自身页面打开（默认） _blank 新页面打开。
3、title：鼠标指上后显示的文字
4、rel：表明即将跳转的页面，以当前页面的关系。
rel="prev" 即将跳转的页面，是当前页面的前一篇文章
rel="next" 即将跳转的页面，是当前页面的后一篇文章
【记住】rel="icon" 被链接图片是当前文档的图标 rel="stylesheet" 被链接文档是当前文档的样式表
rel="prefetch" 预加载。在当前文档加载完成后，利用空余时间，预加载即将链接的文档
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60061.shtml
