HTML零基础⼊门教程（详细）
1 什么是HTML
HTML 是⽤来描述⽹页的⼀种语⾔。HTML 是⼀种在 Web 上使⽤的通⽤标记语⾔。HTML 允许你格式化⽂本，添加图⽚，创建链接、输⼊表单、框架和表格等等，并可将之存为⽂本⽂件，浏览器即可读取和显⽰。
HTML 指的是超⽂本标记语⾔: HyperText Markup Language
HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔
标记语⾔是⼀套标记标签 (markup tag)
HTML 使⽤标记标签来描述⽹页
HTML ⽂档包含了HTML 标签及⽂本内容
HTML⽂档也叫做 web 页⾯
2 ⼊门实例
新建⼀个test.html⽂件，内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<h1>我的第⼀个标题</h1>
<p>我的第⼀个段落。</p>
</body>
</html>
其中：
<!DOCTYPE html> 声明为 HTML5 ⽂档
<html> 元素是 HTML 页⾯的根元素
<head> 元素包含了⽂档的元（meta）数据，如 <meta charset="utf-8"> 定义⽹页编码格式为 utf-8（由于在⼤部分浏览器中直接输出中⽂会出现乱码，所以要在头部将字符声明为UTF-8）
<title> 元素描述了⽂档的标题
<body> 元素包含了可见的页⾯内容
<h1> 元素定义⼀个⼤标题
<p> 元素定义⼀个段落
保存后运⾏，即可在浏览器中打开如下界⾯
3 各部分详解
3.1 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
3.2 段落
HTML 段落是通过标签 <p> 来定义的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<p>这是⼀个段落。</p>
<p>这是⼀个段落。</p>
<p>这是⼀个段落。</p>
</body>
</html>
html ul标签3.3 链接
HTML 链接是通过标签 <a> 来定义的
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<a href="blog.csdn/zong596568821xp">这是⼀个链接使⽤了 href 属性</a>
</body>
</html>
3.4 图像
HTML 图像是通过标签 <img> 来定义的。注意： 图像的名称和尺⼨是以属性的形式提供的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<img src="zongxp.jpg" width="640" height="640" />
</body>
</html>
3.5 表格
表格由 <table> 标签来定义。每个表格均有若⼲⾏（由 <tr> 标签定义），每⾏被分割为若⼲单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含⽂本、图⽚、列表、段落、表单、⽔平线、表格等等。表格的表头使⽤<th> 标签进⾏定义。如果不定义边框属性，表格将不显⽰边框。有时这很有⽤，但是⼤多数时候，我们希望显⽰边框。使⽤边框属性来显⽰⼀个带有边框的表格：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
4 速查列表
4.1 基本⽂档
<title>⽂档标题</title>
</head>
<body>
可见⽂本...
</body>
</html>
4.2 基本标签
<h1>最⼤的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最⼩的标题</h6>
<p>这是⼀个段落。</p>
<br> （换⾏）
<hr> （⽔平线）
<!-- 这是注释 -->
4.3 ⽂本格式化
<b>粗体⽂本</b>
<code>计算机代码</code>
<em>强调⽂本</em>
<i>斜体⽂本</i>
<kbd>键盘输⼊</kbd>
<pre>预格式化⽂本</pre>
<small>更⼩的⽂本</small>
<strong>重要的⽂本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （⽂字⽅向）
<blockquote> （从另⼀个源引⽤的部分）
<cite> （⼯作的名称）
<del> （删除的⽂本）
<ins> （插⼊的⽂本）
<sub> （下标⽂本）
<sup> （上标⽂本）
4.4 链接
普通的链接：<a href="ample/">链接⽂本</a>
图像链接： <a href="ample/"><img src="URL" alt="替换⽂本"></a>邮件链接： <a href="mailto:webmaster@example">发送e-mail</a>
书签：
<a id="tips">提⽰部分</a>
<a href="#tips">跳到提⽰部分</a>
4.5 图⽚
<img src="URL" alt="替换⽂本" height="42" width="42">
4.6 样式/区块
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>⽂档中的块级元素</div>
<span>⽂档中的内联元素</span>
4.7 ⽆序列表
<ul>
<li>项⽬</li>
<li>项⽬</li>
</ul>
4.8 有序列表
<ol>
<li>第⼀项</li>
<li>第⼆项</li>
</ol>
4.9 定义列表
<dl>
<dt>项⽬ 1</dt>
<dd>描述项⽬ 1</dd>
<dt>项⽬ 2</dt>
<dd>描述项⽬ 2</dd>
</dl>
4.10 表格
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
4.11 框架
<iframe src="demo_iframe.htm"></iframe> 4.12 表单
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论