HTML | HTML语言 | HTML基础 | HTML语言基础

前言

一、HTML语言介绍

二、管理系统介绍

三、字符集及引用介绍

四、HTML中的元素

块级元素

行级元素

表单元素

特别功能

五、相对路径和绝对路径

六、字符实体

---

前言

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

---

一、HTML语言介绍

HTML是Hyper Text Markup Language的缩写，称为超文本标记语言。

HTML是负责描述页面的语义、CSS是负责描述页面的样式、Js是负责描述页面的动态效果。

代码中一定要有注释、缩进、语义等，且必须拥有嵌套关系。

<!-- Head - Start -->
<div name="Head" id="Head">
    <!-- Head-Logo - Start -->
    <div name="Head-Logo" id="Head-Logo">
        <!-- Head-Logo Context -->
    </div>
    <!-- Head-Logo - End -->
</div>
<!-- Head - End -->

二、管理系统介绍

管理系统介绍

简称	全称	语义
ERP	Enterprise Resource Planning	企业资源计划
CRM	Customer Relationship Management	客户管理
CMS	Content Management System	内容管理

三、字符集及引用介绍

字符集

名称	语义	代码
UTF-8	有各个国家的标准语言，保存的文件大。	<!-- UTF-8 字符集编码 --> <meta charset="utf-8" />
GB2312	只用于中文和少数外语、符号，保存的文件小。	<!-- GB2312 字符集编码 --> <meta charset="gb2312" />
引用图标文件	引用图标文件	<link rel="shortcut icon" href="favicon.ico" />/*引用网站图标文件，其中rel中的值为网站关键字*/
引用样式表	引用样式表	<link rel="stylesheet" href="../../index.css" />/*引用样式表文件*/
其他编码字符集参考请点击

四、HTML中的元素

块级元素

霸占一行，不与其他元素并列，可以设置宽高。不设置宽高，则继承父级元素的宽高。

块级元素

名称	语义	代码
<div>... ...</div>	区域 name、id属性用于标记或定位	<!-- 区域 --> <div name="name" id="id"> <!-- 区域内容或块级元素或行级元素 --> </div>
<p>... ...</p>	段落	<!-- 段落 --> <p>段落内文本</p>
<h1>... ...</h1>	一级标题	<!-- 一级标题 --> <h1>一级标题内容</h1>
<h2>... ...</h2>	二级标题	<!-- 二级标题 --> <h2>二级标题内容</h2>
<h3>... ...</h3>	三级标题	<!-- 三级标题 --> <h3>三级标题内容</h3>
<h4>... ...</h4>	四级标题	<!-- 四级标题 --> <h4>四级标题内容</h4>
<h5>... ...</h5>	五级标题	<!-- 五级标题 --> <h5>五级标题内容</h5>
<h6>... ...</h6>	六级标题	<!-- 六级标题 --> <h6>六级标题内容</h6>
<ul>... ...</ul>	无序列表 li标签不能单独存在，只能被包裹在ul和ol中	<!-- 无序列表 --> <ul> <!-- 列表内容或行级元素 --> <li>列表内容或行级元素</li> <li>列表内容或行级元素</li> </ul>
<ol>... ...</ol>	有序列表 li标签不能单独存在，只能被包裹在ul和ol中	<!-- 有序列表 --> <ol> <!-- 列表内容或行级元素 --> <li>列表内容或行级元素</li> <li>列表内容或行级元素</li> </ol>
<dl>... ...</dl>	自定义列表 dt、dd标签不能单独存在，只能被包裹在dl中	<!-- 自定义列表 --> <dl> <!--列表内容或行级元素 --> <dt>列表内容或行级元素</dt> <dd>列表内容或行级元素</dd> </dl>
<table>... ...</table>	表格	<!-- 表格 --> <table> <!-- 表格标题 --> <caption>表格标题内容</caption> <!-- 表格表头 --> <thead> <!-- 表头的行 --> <tr> <!-- 表头的列 --> <th>表格的内容</th> <th>表格的内容</th> </tr> </thead> <!-- 表格内容 --> <tbody> <!-- 内容的行 --> <tr> <!-- 内容的列 --> <th>表格的内容</th> <th>表格的内容</th> </tr> </tbody> <!-- 表格表尾 --> <tfoot> <!-- 表尾的行 --> <tr> <!-- 表尾的列 --> <th>表格的内容</th> <th>表格的内容</th> </tr> </tfoot> </table>

行级元素

与其他行级元素并排，不可以设置宽高，默认为字体大小。

行级元素

名称	语义	代码
<span>... ...</span>	范围	<!-- 范围 --> <span>标签内容</span>
<a>... ...</a>	超链接 target表示为新标签页打开此链接 锚点用name属性或id属性获取	<!-- 超链接 --> <a href="链接地址" name="名称" id="名称" title="鼠标悬停内容" target="_blank">链接文字</a> <!-- 页面内锚点 --> <a href="#名称">页面内锚点</a> <!-- 页面外锚点 --> <a href="链接地址#名称">页面外锚点</a>
<img />	图片 alt表示图片的描述文本，在图片加载失败的情况下提示该文本	<!-- 图片 --> <img src="图片地址" alt="描述/替换文本" />

表单元素

表单元素

名称	语义	代码
<form>... ...</form>	表单 method提交方式只能为GET或POST	<!-- 表单 --> <form action="提交地址" method="GET/POST"> <!-- 表单元素或块级元素或行级元素 --> </form>
<input type="text" />	文本框 在表单下生效 获取到的值是字符串类型	<!-- 表单 --> <form action="提交地址" method="GET/POST"> <!-- 文本框 --> <input type="text" value="默认值" /> </form>
<input type="password" />	密码框 在表单下生效 获取到的值是字符串类型	<!-- 表单 --> <form action="提交地址" method="GET/POST"> <!-- 密码框 --> <input type="password" /> </form>
<input type="radio" />	单选按钮 在表单下生效 通过name属性进行组合	<!-- 表单 --> <form action="提交地址" method="GET/POST"> <!-- 单选按钮 --> <input type="radio" name="sex" />男 <input type="radio" name="sex" />女 </form>
<input type="checkbox" />	复选框 在表单下生效 通过name属性进行组合	<!-- 表单 --> <form action="提交地址" method="GET/POST"> <!-- 复选框 --> <input type="checkbox" name="hobby" />学习 <input type="checkbox" name="hobby" />电影 <input type="checkbox" name="hobby" />游戏 </form>
<input type="button" />	按钮	<!-- 表单 --> <form action="提交地址" method="GET/POST"> <!-- 按钮 --> <input type="button" value="确定" /> </form>
<input type="submit" />	提交	<!-- 表单 --> <form action="提交地址" method="GET/POST"> <!-- 提交 --> <input type="submit" value="提交" /> </form>
<input type="reset" />	重置	<!-- 表单 --> <form action="提交地址" method="GET/POST"> <!-- 重置 --> <input type="reset" value="重置" /> </form>
<select>... ...</select>	下拉列表 value属性的值用于后台应用 获取到的值是字符串类型	<!-- 下拉列表 --> <select name="city" id="china_city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select>
<textarea>... ...</textarea>	多行文本域 rows属性表示多少行  cols属性表示多少列 获取到的值是字符串类型	<!-- 多行文本域 --> <textarea rows="3" cols="20"> <!-- 多行文本域内容 --> </textarea>

特别功能

特别功能

名称	代码
页面内锚链接	<!-- 超链接 --> <a href="链接地址" name="名称" id="名称" title="鼠标悬停内容" target="_blank">链接文字</a> <!-- 页面内锚点 --> <a href="#名称">页面内锚点</a>
页面外锚链接	<!-- 超链接 --> <a href="链接地址" name="名称" id="名称" title="鼠标悬停内容" target="_blank">链接文字</a> <!-- 页面外锚点 --> <a href="链接地址#名称">页面外锚点</a>
单选按钮单击文字选中 通过label的for属性绑定单选按钮的id属性	<!-- 表单 --> <form action="提交地址" method="GET/POST"> <!-- 单选按钮 --> <input type="radio" name="sex" id="nan" /> <label for="nan">男</label> <input type="radio" name="sex" id="nv" /> <label for="nv">女</label> </form>
复选框单击文字选中 通过label的for属性绑定单选按钮的id属性	<!-- 表单 --> <form action="提交地址" method="GET/POST"> <!-- 复选框 --> <input type="checkbox" name="hobby" id="xuexi" /> <label for="xuexi">学习</label> <input type="checkbox" name="hobby" id="dianying" /> <label for="dianying">电影</label> <input type="checkbox" name="hobby" id="youxi" /> <label for="youxi">游戏</label> </form>
盒子模型	宽width、高height、内边距padding、边框border、外边距margin组成。

五、相对路径和绝对路径

相对路径和绝对路径

相对路径 和 绝对路径	名称	语义	代码
相对路径	../	表示上一级	<!-- 图片的相对路径 --> <img src="../iphone.png" alt="iphone图片" />
相对路径	../../	表示上一级的上一级	<!-- 图片的相对路径 --> <img src="../../iphone.png" alt="iphone图片" />
绝对路径	price/iphone.png	表示上一级	<!-- 图片的绝对路径 --> <img src="price/iphone.png" alt="iphone图片" />
绝对路径	price/logo/logo.png	表示上一级的上一级	<!-- 图片的绝对路径 --> <img src="price/logo/logo.png" alt="logo图片" />

六、字符实体

字符实体

显示结果	语义	代码	编号代码
	空格	 	 
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
“	引号	&quot;	&#34;
‘	撇号	&apos;	&#39;
¥	元	&yen;	&#165;
©	版权	&copy;	&#169;
®	注册商标	&reg;	&#174;
™	商标	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;
其他字符实体参考请点击