第2章HTML语言基础
1、HTM L文档结构
<!DO CTYPE html>
<ht ml>
<head>
</he ad>
<body>
</bo dy>
</html>
第一个HTML示例
<!DOCTY PE ht ml>
<html>
<hea d>
<m eta c harse t = "utf-8">
<t itle>我的第一个网页</t itle>
</he ad>
<body>
<p>H ello，World！</p>
</bo dy>
</html>
其中：
<!DO CTYPE html>声明
<title>与</t itle>之间的网页的标题，出现在标题栏中
<me ta ch arset = "u tf-8">声明网页所使用的字符编码为u tf-8。
<htm l>与</html>之间的文本描述网页
<head>与</h ead>之间的是网页的开头部分，描述一些网页相关的信息。
<body>与</bo dy>之间的是网页的主体部分，为可见的页面内容
<p>与</p>之间的文本被显示为段落
2、为文档类型声明
<!DO CTYPE html>为文档类型声明。<!DOCT YPE>声明位于文档中的最前面的位置，处于 <h tml>标签之前。此标签可告知浏览器文档使用哪种 HTML或 XH TML 规范。
H TML 4.01 和 XHTM L 1.0都有三种文档类型：Stric t、Tra nsiti onal以及 Fr amese t。
H TML 4.01 严格型：
<!DOCT YPE H TML P UBLIC "-
//W3C//DTD H TML 4.01//EN" "http://www.w3.o rg/TR/html4/str ict.d td">
HTML 4.01过渡型：
<!DO CTYPE HTML PUBL IC "-//W3C//DTD HTML 4.01
Tran sitio nal//EN" "http://www.w3.o rg/TR/html4/loo se.dt d">
XHTML 1.0严格型：
<!DOC TYPEhtmlPUBLI C "-//W3C//DTDXHTML 1.0Stric t//EN"
"ht tp://www.w3.org/TR/x html1/DTD/xhtml1-str ict.d td">
XHTM L 1.0过渡型：
<!DO CTYPE html PUBL IC "-//W3C//DTD XHTM L 1.0
Tran sitio nal//EN" "http://www.w3.o rg/TR/xhtm l1/DT D/xht ml1-t ransi tiona l.dtd"> H TML 5：
html网页设计参考文献<!D OCTYP E htm l>
3、HTML标签
H TML 文档和 HT ML 元素是通过H TML 标签进行标记的
HTM L 标签由开始标签和结束标签组成
开始标签是被括号包围的元素名
结束标签是被括号包围的斜杠和元素名
某些 HT ML 元素没有结束标签，比如<br>
4、HT ML 标题
HTML标题是通过 <h1> - <h6> 等标签进行定义的。
如：
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
5、HTML段落<p>
HTML段落是通过 <p>标签进行定义的。
如：
<p>这是一段文字。</p>
<p>这是另一段文字。</p>
6、属性 titl e
规定元素的额外信息（可在工具提示中显示）
如：<p ti tle="这是一个诗人，最近很忙">杜甫</p>
7、换行标签<br>
8、特殊字符
空格 ;
< 小于号<
> 大于号&g t;
&and符号&
" 双引号&q uot;
' 撇号&apo s;
版权&co py;
×乘号×
÷除号&di vide;
∫积分号&in t;
πpi π
‰千分号 &p ermil; ‰
spad e &sp ades;
c lub ♣
he art &heart s;
d iamon d &di ams;
例：<h2><; ∫ &sp ades; &clu bs; &heart s; &d iams; π >;</h2>
9、注释 <!-- -->
注释不会被浏览器显示出来。
10、<pre>标签
p re 元素可定义预格式化的文本。被包围在 pre元素中的文本通常会保留空格和换行符。
<pre>标签的一个常见应用就是用来表示计算机的源代码。
例：
<pr e>
in t mai n()
{
co ut << "Hel lo, W orld!" <<endl;
}
</pre>
11、<ins>标签和<del>标签
<i ns> 标签定义已经被插入文档中的文本。
<del> 标签定义文档中已被删除的文本。
<d el> 标签和<in s> 标签配合使用，来描述文档中的更新和修正。
大多数浏览器会改写为删除文本和下划线文本。
例：<p>春风又<del>过</del><ins>绿</i ns>江南岸</p>
12、文字字体格式 <b> <i><smal l> <e m> <s trong>
<b>定义粗体文本。<b> 标签用于强调某些文本。
<i> 定义斜体文本。
<sma ll> 标签将旁注呈现为小型文本。
<e m> 定义强调文本。
<str ong>定义更强烈的强调文本。
一般浏览器会把em元素呈现为斜体字，而将stro ng元素呈现为粗体。
13、上标和下标 <sub> <su p>
<s ub> 定义下标文本。
<su p> 定义上标文本。
例：
<h1>H<sub>2</sub>O</h1>
<h1>E = mc<s up>2</sup></h1>
14、注音 <r uby><rt>
<rub y> 标签定义 ru by 注释（中文注音或字符）。
<rt>标签定义字符（中文注音或字符）的解释或发音。
<ruby>标签是H TML 5中的新标签。
<r uby>和 <rt> 标签一同使用，例：
<ru by>
雷小园<rt>le i xia o yua n</rt>
</r uby>
15、引用 <bl ockqu ote>和 <q>
<bl ockqu ote>定义长的引用。浏览器呈现为一段缩进文本。
<q> 定义短的引用。浏览器呈现为引号。
例：
<p>
网页设计要学习的内容为：
<blo ckquo te>HT ML、CS S、Jav ascri pt... </bl ockqu ote>
</p>
<p>
网页设计要学习的内容为：
<q>HTML、CSS、J avasc ript... </q>
</p>
16、突出显示文本<mark>
<mar k> 定义有记号的文本。<ma rk> 标签是 HT ML 5中的新标签。
例：<p>学习网页设计，主要就是学习<mark>HTML</mar k>、<m ark>C SS</m ark>和<mark>Java scrip t</ma rk>。</p>
17、水平线 <hr>
18、有序列表 <ol> <li>
<ol>定义有序列表。
<li> 定义列表的项目。
例：
<ol>
<li>《H TML5+CSS3网页布局和样式精粹》</li>
<l i>《HT ML+CS S网页设计与布局从入门到精通》</li>
<li>《锋利的jQu ery》</li>
<l i>《《H TML 5与 CSS 3权威指南》》</li>
</ol>
对ol元素，有一下2个属性
s tart属性，规定起始数字。如start = "5"。
ty pe属性，属性值为：1、a、A、i、I，表示序号的样式，在H TML5中取消了这个属性
例：
<oltype="a" s tart=3>
<li>《HTML5+CSS3网页布局和样式精粹》</li>
<li>《HTML+CSS网页设计与布局从入门到精通》</l i>
<li>《锋利的j Query》</li>
<li>《HTML5与 CS S 3权威指南》</li>
</ol>
HTML5新增的属性reve rsed，表示序号反转，即按降序显示序号。
19、无序列表 <ul> <li>
<ul>定义无序列表。
例：
<ul>
<li>《HTML5+CSS3网页布局和样式精粹》</li>
<li>《H TML+C SS网页设计与布局从入门到精通》</li>
<li>《锋利的jQ uery》</li>
<li>《H TML 5与 CSS 3权威指南》</l i>
</ul>
u l元素的t ype属性，值为：d isc、s quare、circ le，在H TML5中取消了这个属性
20、定义列表 <dl> <dt> <dd>
<dl> 标签定义一个定义列表。
<dl> 标签用于结合 <dt>（定义列表中的项目）和 <d d> （描述列表中的项目）。例：
<dl>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论