本文全面介绍了HTML的基础知识，包括HTML的定义、结构标准、语法、格式标签、文本标签、图像标签、超链接、表格、框架及表单等内容，是初学者入门HTML的理想指南。
1.认识HTML
HTML（Hyper text markup language）：超文本标记语言，表示页面的信息的符号标记语言。
- HTML 使用标记语言描述Web页面的结构
- HTML 元素是HTML页面的构建块
- HTML 元素通过标签tag表示
- HTML 标签是“标题”、“段落”，“表格”等内容的一部分
- 浏览器不显示HTML标签，但是使用它们来渲染页面内容
2.HTML结构标准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
- <!DOCTYPE html> 声明文档类型
- <html> 根标签
- <head> 头标签
- <title> 标题标签
- <body> 主体标签
3.HTML语法
HTML标记及其属性
- HTML文档保存格式：.html .htm .xhtml
- 标记和被标记内容构建出HTML文档格式
<标记>内容</标记>
- 标记的属性：用来控制内容（图像、文本）如何显示
格式：<标记 属性=属性值>内容</标记>
<body bgcolor="red">内容</body>
文档注释
<!--这是注释内容-->
实体字符
| 结果 | 描述 | 实体名称 | 实体数字 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于 | < | < |
| > | 大于 | > | > |
| & | &的记号符号 | & | & |
| " | 双引号 | " | " |
| ’ | 单引号 | ' | ' |
| ¢ | 分 | ¢ | ¢ |
| £ | 英磅 | £ | £ |
| ¥ | 元 | ¥ | ¥ |
| € | 欧元 | € | € |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
注意：实体名称是区分大小写的
4.HTML格式标签
HTML段落标签
| 标签 | 描述 |
|---|---|
| <p> | 定义一个段落 |
| <br> | 插入一个水平线 |
| <pre> | 定义预格式化的文本 |
- <br>：强制换行标记 （单标记）
<p>这是<br>段落<br>使用br换行</p>
- <p>：段落标记（下例古诗将显示在一行）
<p>在HTML中空格和换行被忽略:</p>
<p>
白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。
</p>
- <pre>：预处理格式化标记，元素中的文本以固定宽度字体显示，并且保留空格和换行符。
<pre>
白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。
</pre>
HTML列表标签
| 标签 | 描述 |
|---|---|
| < ul > | 定义一个无序列表 |
| <ol > | 定义一个有序列表 |
| < li > | 定义一个列表项 |
| < dl > | 定义描述列表 |
| < dd > | 在描述列表中定义一个术语 |
- <li>：列表项目标记
<li>列表内容</li>
- <ul>：无序列表
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
- <ol>：有序列表
<ol type="1">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ol>标签的type属性,定义列表项标记的类型
| 类型 | 描述 |
|---|---|
| type=“1” | 列表项将用数字编号（默认值） |
| type=“A” | 列表项将编号用大写字母 |
| type=“a” | 列表项将用小写字母编号 |
| type=“I” | 列表项将编号用大写罗马数字 |
| type=“i” | 列表项将用小写罗马数字编号 |
- <dl>：定义描述列表
<dt>：在描述列表中定义一个术语
<dd>：描述描述列表中的术语
<dl>
<dt>咖啡</dt>
<dd>- 一种黑热饮料</dd>
<dt>牛奶</dt>
<dd>- 一种白冷饮料</dd>
</dl>
HTML块级元素标签
| 标签 | 描述 |
|---|---|
| < div> | 定义文档中的一个部分（块级元素） |
| < span> | 定义文档中的一个片段（内联元素） |
- <div>：定义文档中的一个部分（块级元素）
<div style="background-color:black;color:white;padding:20px;">
<h2>北京</h2>
<p>
是中国共产党中央委员会、中华人民共和国中央人民政府和全国人民代表大会的办公所在地，中国中部战区司令部驻地。
</p>
<p>
2019年北京市实现地区生产总值22968.6亿元，比2018年增长6.9%。
</p>
</div>
- <span>：通常用作一些文本的容器
<h1>我的<span style="color:red">重要</span>标题</h1>
5.HTML文本标签
HTML标题标签
从<h1>到<h6>依次定义重要到不重要标题
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
<hr>：用来划分不同的专题，通常显示为一条水平线（单标记）
<h1>这是标题 1</h1>
<p>这是段落.</p>
<hr>
<h2>这是标题 2</h2>
<p>这是段落 </p>
<hr>
<h2>这是标题 2</h2>
<p>这是段落.</p>
HTML文本格式化标签
| < b> | 定义粗体文本 |
| < em> | 定义强调文本 |
| < i> | 定义斜体 |
| < small> | 定义较小的文本 |
| < strong> | 定义重要的文本 |
| < sub> | 定义小标文本 |
| < sup> | 定义上标文本 |
| < ins> | 定义插入的文本 |
| < del> | 定义删除文字 |
| < mark> | 定义标记/突出显示的文本 |
- <b>：定义粗体文本，没有任何额外的重要性
<b>加粗文本内容.</b>
- <strong>：定义粗文本，增加语义的强调
<strong>加粗文本.</strong>
- <i>：定义斜体文本，没有任何额外的重要性
<i>斜体文本.</i>
- <em>：定义强调文本，增加语义重要性
<em>强调文本.</em>
注意：浏览器显示<strong> 和 <b>相同, <em> 和<i>相同 。 然而，有些标签的含义是有区别的: <b> 和 <i> 粗体和斜体文本, 但是 <strong> 和 <em> 意味着文本是“重要的”
- <small>：定义了小文字
<h2>HTML <small>Small</small> 格式</h2>
- <mark>：定义标记或突出文本
<h2>HTML <mark>标记</mark> 格式</h2>
- <del>：定义了删除（移除）文字
<p>我喜欢的颜色是 <del>蓝色</del> 红色.</p>
- <ins>：定义了插入文本（添加）
<p>我喜欢的 <ins>颜色</ins> 是红色.</p>
- <sub>：定义下标文本
<p>这是一个 <sub>下标</sub> 文本.</p>
- <sup>：定义上标文本
<p>这是一个 <sup>上标</sup> 文本.</p>
- <cite>：定义了一个作品的标题，通常会用斜体显示
<p>HTML cite 元素定义一个作品的标题</p>
<p>通常用斜体来显示.</p>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> 作者 Edvard Munch. 画于 1893.</p>
6.HTML图像标签
通过使用<img>标签进行定义 （单标签）
<img src="url" width="值" height="值" border="值" alt="图片">
通过src属性指定图像的URL（网址）
alt属性提供了一种图像的替换文字，如果用户因为某些原因不能查看它，它会显示alt属性的值。
7.HTML超链接
使用<a>标签定义超链接
基本语法：
<a href="url" target="打开方式" name="网页锚点名称">连接文字</a>
<a href="url" target="打开方式" name="网页锚点名称"><img src="url"></a>
例：
<a href="http://www.baidu.com" target="_blank">百度</a>
target属性值：
- _blank：在新窗口或选项卡中打开链接文档
- _self：打开链接文件在同一窗口/标签，因为它被点击（这是默认的）
- _parent：在父框架中打开链接文档
- _top：在当前窗口中打开链接文档
8.HTML表格
HTML表格标签
| 标签 | 描述 |
|---|---|
| < table> | 定义表格 |
| < th> | 定义表中的头单元格 |
| < tr> | 定义表中的一行 |
| < td> | 定义表中的单元格 |
| < caption> | 定义一个表格标题 |
例：
<table style="width:100%">
<caption>班级成员</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
</tr>
</table>
9.HTML框架
使用 <iframe>标签来定义一个行内框架
基本语法：
<iframe src="URL"></iframe>
iframe可以作为一个链接的目标框架。
target 链接的属性必须是指iframe的name属性：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">百度</a></p>
10.HTML表单
HTML 表单元素
| 标签 | 描述 |
|---|---|
| <form> | 定义了用户输入HTML表单 |
| <input> | 定义一个输入控件 |
| <textarea> | 定义一个多行输入控件（文本区） |
| <label> | 定义了一个标签为<input>元素 |
| <fieldset> | 分组表单中的相关元素 |
| <select> | 定义一个下拉表单 |
| <optgroup> | 在下拉表中定义一组相关选项 |
| <option> | 定义一个下拉列表中的选项 |
| <button> | 定义一个可点击的按钮 |
- <form>：定义用于收集用户输入的表单
<form>form 元素</form>
- <input>：定义一个输入控件
| 标签 | 描述 |
|---|---|
| <input type=“text”> | 定义一个单行文本输入字段 |
| <input type=“radio”> | 定义单选按钮（用于选择许多选项之一) |
| <input type=“submit”> | 定义提交按钮(提交表单） |
<form>
名字:<br>
<input type="text" name="name">
<br>
性别:<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female">
提交<br>
<input type="submit" value="Submit">
</form>
- <select>：定义一个下拉列表
- <option>：定义可选择的选项
<form>
<select name="fruit">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option selected value="orange">橙子</option>
<option value="mango">芒果</option>
</select>
<br><br>
<input type="submit">
</form>
- <textarea>：定义多行输入字段（文本区域）
<form>
<textarea name="message" rows="10" cols="30">定义多行输入字段</textarea>
<br>
<input type="submit">
</form>
- <button>：定义了一个可点击的按钮
<button type="button" onclick="alert('Hello World!')">click me!</button>
HTML表单输入类型
- <input type=“text”>：定义一行文本输入字段
<form>
名字:<br>
<input type="text" name="name">
<br>
</form>
- <input type=“password”>：定义一个密码字段
<form>
用户名:<br>
<input type="text" name="userid">
<br>
密码:<br>
<input type="password" name="psw">
</form>
- <input type=“submit”>：定义将表单数据提交给表单处理程序的按钮
<form>
<input type="submit" value="Submit">
</form>
- <input type=“reset”>：定义重置按钮，将所有表单值重置为默认值
<form>
名字:<br>
<input type="text" name="name">
<br>
性别:<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female">
提交<br>
<input type="submit" value="Submit">
<input type="reset">
</form>
- <input type=“radio”>：定义一个单选按钮
<form>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="submit">
</form>
- <input type=“checkbox”>：定义了一个复选框
<form>
<input type="checkbox" name="fruit1" value="lemon">柠檬
<br>
<input type="checkbox" name="fruit2" value="mango">芒果
<br><br>
<input type="submit">
</form>
- <input type=“number”>：定义一个数字输入字段
<form>
数量 (1到5之间):
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
不是很常用的输入类型
- <input type=“date”>：用于包含日期的输入字段
- <input type=“color”>：用于包含颜色的输入字段
- <input type=“range”>：用于输入字段，该字段应包含范围内的值
- <input type=“month”>：允许用户选择一个月和一年
- <input type=“week”>：允许用户选择一个星期和一年
- <input type=“time”>：允许用户选择时间（没有时区）
- <input type=“datetime-local”>：指定没有时区的日期和时间输入字段
- <input type=“search”>：用于搜索字段（搜索字段的行为像常规文本字段）
- <input type=“tel”>：用于包含电话号码的输入字段（电话型目前只在Safari 8支持）
- <input type=“url”>：用于包含URL地址的输入字段
扫一扫
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
