HTML基础标签

时间 2019-12-05

标签 html 基础标签栏目 HTML 繁體版

原文原文链接

1、 HTML 语言html

1.1 什么是 HTML 语言（ HTML 概述）web

英文全称： Hyper Text Markup Language
中文全称：超文本标记语言
HTML 语言是制做网页的最基本语言，而且只能经过 web 浏览器显示出来。浏览器

1.2 HTML 文档结构框架

HTML 文档通常由两部分组成：
1. 文档所要表达的内容信息（文字、图片等）；
2. 一系列的 HTML 标签；布局

1.3 HTML 标签
1.3.1 什么是 HTML 标签
1. HTML 标签是用 <> 所括住的指令，主要分为：
单标签： < 起始标签 />搜索引擎

如：<br/>
双标签： < 起始标签 ></ 结束标签 >
如：<div></div>
2. 一般使用的是双标签。有一个起始标签就对应有一个结束标签。标签内容写在起始标签和结束标签之间。
如：<div> 标签内容 </div>
3. 在元素的起始标签中，还能够包含 “ 属性 ” 来设置元素的其余特性。一个标签能够有多个属性 , 每一个属性之间用空格隔开。
如：<div 属性名 =" 属性值 "></div>
例如：
<div class="wrap" id="wrap"></div>
4. 每一对双标签之间能够嵌套，但不能交叉。
如：编码

正确：
<div>
<p></p>
</div>
错误：
<div>
<p>
</div>
</p>
1.4 编码器
1.4.1 WebStorm 源码主体标签含义
<!DOCTYPE> ：
是一个声明不是 HTML 标签；它是用来告诉 web 浏览器要使用哪一个 HTML 版原本对页面进行编写。spa

<html> ：
<html>是文档标识符，它是成对出现的，首标签<html>和尾标签</html>分别位于 HTML 文档的最前面和最后面，明确地表示文档是以超文本标识语
言（ html) 编写的。该标签不带有任何的属性。
<head> ：
<head>标签用于定义文档的头部，它是全部头部元素的容器。<head> 中的元素能够引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<meta> ：
<meta>标签位于文档的头部，用于定义文件信息，对网页文件进行说明。其中name属性主要用于描述网页，与之对应的属性值为content，content中
的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<body> ：
<body>标签用于定义文档的主体，即在浏览器上看到的网页内容。orm

1.5 HTML 标签的使用
1. HTML 注释
注释内容可插入文本中任何位置，其内容不在网页中显示，只在源码文档中供开发者备注使用。
　　　　　　 方法适用于文档主体部分
　　　　　　// 注释内容
　　　　　　/* 注释内容 */ 方法适用于文档引用标签部分
2. 特殊字符
在 HTML 代码中直接输入一些特殊字符是没有效果的，须要用专有的代码标记。
　　　　　　  
　　　　　　< 
　　　　　　> 
　　　　　　© 
　　　　　　® 
　　　　　　& 
　　　　　　 
3. div 块标签
<div> 这是一个 div 块，一般用于布局 </div>
4. 正文标题标签
　　　　　　<h1>heading</h1>
　　　　　　<h2>heading</h2>
　　　　　　<h3>heading</h3>
　　　　　　<h4>heading</h4>
　　　　　　<h5>heading</h5>
　　　　　　<h6>heading</h6>
注意：只有 h1~h6 六个标签，没有 h7...
5. 文本节标签
　　　　　　<span> 这是一个文本节 </span>
6. 强调标签
　　　　　　<strong> 增强语气 </strong>
7. 图片标签
　　　　　　<img src=" 图片地址 "/>
8. 段落标签
　　　　　　<p> 这是一个段落 </p>
9. 超级连接标签
　　　　　　<a href=" 连接地址 "> 超连接，打开新窗口 </a>
10. 文本域
　　　　　　<textarea> 文本内容 </textarea>
11. 无序列表标签
　　　　　　<ul>
　　　　　　　　<li> 第一个 </li>
　　　　　　　　<li> 第二个 </li>
　　　　　　　　<li> 第三个 </li>
　　　　　　</ul>
12. 有序列表标签
　　　　　　<ol>
　　　　　　　　<li> 第一个 </li>
　　　　　　　　<li> 第二个 </li>
　　　　　　　　<li> 第三个 </li>
　　　　　　</ol>
13. 自定义列表
　　　　　　<dl>
　　　　　　　　<dt> 自定义列表项 </dt>
　　　　　　　　<dd> 自定义列表项的定义 </dd>
　　　　　　</dl>
14. table 表格
　　　　　<table>
　　　　　　<tr>
　　　　　　　　<td> 娱乐项目 </td>
　　　　　　　　<td> 项目支出 </td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td> 聚餐 </td>
　　　　　　　　<td>200 元 </td>
　　　　　　</tr>
　　　　　</table>
15. form 表单
<form>
表单输入控件
</form>
16. 控制标签
<label> 控制标签，平时无效果，用做标记使用 </label>
17. 表单输入控件
<input type="text"> 
<input type="password"> 
<input type="radio"> 
<input type="button" value=" 点击 "> 
<input type="checkbox"> 
<input type="submit"> 
<input type="reset"> 
<input type="file"> 
button 和 submit 的区别：
button 就是一个普通按钮，没有任何功能。而 submit 在用户点击后会自动提交 form 表单。
18. 下拉列表
<select>
　　<option> 川菜 </option>
　　<option> 粤菜 </option>
　　<option> 北方菜 </option>
　　<option> 上海菜 </option>
　　<option> 西餐 </option>
　　<option> 泰国菜 </option>
</select>
19. 内联框架
<iframe src=" 须要显示的网页连接地址 "></iframe>htm