HTML概述

HTML

一、概念

HTML中文名叫：超文本标记语言，它是一种用于创建网页的标准标记语言。

二、HTML常用标签

1、文本标签

1.1、标题标签

h1-h6：字体逐渐缩小

		<h1>一级标题</h1>
		<h2>二级</h2>
		<h3>三级</h3>
		<h4>四级</h4>
		<h5>五级</h5>
		<h6>六级</h6>

1.2、段落标签

<p>好好学习，天天向上</p>

1.3、换行标签

<br />强制换行

1.4、水平线标签

<hr />分割内容

1.5、范围标签

一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。

<span></span>

---

2、图片标签

2.1、基本属性

插入图片

<img src="img/2.jpg" />

2.2、设置图片的热点区域

<img src="2.jpg" usemap="#myMap" />
<map name="#myMap">
	<area shape="形状名称" coords="坐标（多个值用逗号隔开）" href="点击该范围的时候跳转的目标URL"     
	title="鼠标悬浮在该区域的时候的提示文字" />

shape有3种取值：circle-圆形，rect-矩形，poly-多边形。

---

3、列表标签

3、无序列表

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

3.2、有序列表

<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ol>

---

4、定义描述标签

<dl>
	<dt>热销产品</dt>
	<dd>产品名称：小熊饼干</dd>
	<dd>价格：23</dd>
</dl>

dl-dt-dd：定义描述标签，一般用在图文混编的场合。
dl：只能盛放dt和dd标签，不推荐盛放其他内容。
dt：一般用来盛放图片或标题。
dd：一般用来补充对dt的描述与说明。

---

5、布局标签 层div

一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。

<div></div>

6、标签分类

html标签可以分为块状元素和行级元素两类。
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。PS:区分的简单方法：是否独占一行。

块状元素和行内元素的区别：

• 块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素会排列到同一行里，其宽度随元素的内容变化而变化。

• 块级元素可以设置宽高；行内元素设置宽高无效.

• 块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。（此处的属性稍后介绍）

我们上面已经讲过的标签中归类一下：
属于块状元素的：

• 标题标签 h1-h6,
• 段落标签 p ,
• 水平线标签 hr,
• 有序列表标签 ol–li，
• 无序列表标签 ul–li，
• 定义描述标签 dl-dt-dd，
• 容器标签 div：

属于行级元素的：

• 范围标签：span
• 图像标签：img

---

7、超链接

a：超链接
作用1：跳转到其他资源
属性：href=“目标资源路径” ，路径推荐相对路径。
·········target=“打开资源的位置” 默认值：__self：在当前页打开；__blank：在新页面打开资源

<a href="" target="_self"></a>

锚链接：

<!--
	作用2：锚链接
			步骤：1、目标位置定义锚点<a name="锚点名称"></a>
				 2、超链接的href属性使用锚点<a href="#锚点名称" target="_self">锚链接</a>
-->

8、表格标签

8.1、规则表格

<!--table：定义表格 
		常用属性：height：高度
				 width：宽度
				 border：边框
				 cellpadding：内容与单元格之间的距离
				 cellspacing：单元格与单元格之间的距离				 
-->
<table border="1" cellpadding="0" cellspacing="0"width="90%" height="200px">
<tr>
	<th></th><!--定义表头单元格-->
</tr>
<tr>
	<td></td><!--定义非表头单元格-->
</tr>
</table>
<!--
	单元格标签thhetd中的常用属性：
		colspan：合并列 使用时删除其他被占用位置的单元格
		rowspan：合并行 同上
		类似Excel中的合并单元格
-->

9、表单★

<!--
	form;用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
		常用属性：action：指定提交数据的URL
		method：指定提交方式，一共7种，以下两种比较常用
			get:
				1.请求参数会在地址栏中显示，会封装到请求行中
				2.请求参数大小是有限制的
				3.不太安全
			post：1.请求参数不会在地址栏中显示。会封装在请求体中
				2.请求参数的大小没有限制
				3.较为安全
			enctype：表单中有上传的文件的时候必备该属性，且取值为multipart/form-data		
-->
<form action="dest.html" method="get" enctype="multipart/form-data"></form>

表单项元素中的一些属性：

• id:元素的唯一表示，不重复
• name:表单项元素的名称，很重要–提交数据到- 服务器之后，服务器获取数据通过该名称
• value:表单项元素的值，服务器获取数据通过
• name获取到的就是value
• type:表示表单项元素的呈现形式
• class:表示样式名称
• readonly:表示只读，用户只能看不能改
• disabled：表示禁用，该元素不能改而且背景是灰色

---

9.1、文本框

<input tyoe="text" id="userName" name="userName" placeholder="请输入用户名" />

9.2、密码框

<!--required：表示用户必须填写此内容，如果没有填写，提交表单的时候会失败并给出提示-->
<input type="password" id="password" name="passwordd" required />

9.3、单选按钮

<!--
	单选按钮：type="radio"
		单选按钮成组出现，name相同表示一组
		value：服务器通过name获取到的值就是value
		checked：表示默认选中；值可以忽略，直接写一个属性名，也可以谢checked="checked"
-->
<input type="radio" name="statu" value="1" />已婚
<input type="radio" name="statu" value="0" checked/>未婚

9.4、复选框

<input type="checkbox" name="hobby" value="swim" />游泳
<input type="checkbox" name="hobby" value="NBA" />NBA
<input type="checkbox" name="hobby" value="movie" />电影

9.5、文件域

<!--
	文件域：文件上传type="file"
		表单中如果有文件上传，表单中最好有enctype="multipart/form-data"
		multiple属性：表示可以同时上传多个文件
-->
<input type="file" name="headImg" multiple="multiple" />

9.6、日期

<!--
	日期：
		type="date" 表示年月日
		type="dayetime-local" 表示既有年月日又有时间
-->
<input type="date" name="day" />

9.7、隐藏域

<!--
	隐藏域：type="hidden" 页面上看不到任何效果
		作用：隐藏一些用户不需要但是程序员需要的值
-->
<input type="hidden" name="userId" value="1001" />

9.8、下拉列表框

<!--
	下拉列表框：select中写name
		option：select中的所有选项
			其中value表示下拉列表中被选中的项的对应值
			其中selected表示默认选中
-->
<select name="month">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>

9.9、文本域

<!--
	textarea：文本域
		cols：指定列数，每一行有多少个字符
		rows：默认多少行
		readonly：表示只读，内容不可修改
		disabled：表示不可用，央视呈现灰色
-->
<textarea rows="15" cols="50" readonly="readonly" disabled="disabled">
	文本域
</textarea>

9.10、按钮

<input type="submit" value="注册" id="regBtn" /><!--提交按钮-->
<input type="image" value="图片路径" id="regBtn2" /><!--图片按钮-->
<input type="resrt" value="重置" id="reset" /><!--重置按钮-->
<input type="button" value="普通按钮" id="btn" /><!--普通按钮-->

button标签可以与input实现的按钮相互替换

---

三、框架

<!-- 
	iframe：定义内嵌框架
		常用属性：src="URL"：该URL指向不同的网页
				 frameborder：定义iframe表示是否显示边框
				 iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性
-->
<iframe name="content" src="相对路径" width="100%" height="200"></iframe>

四、常用的标签组合

• div-ul-li/div-ol-li：常用于导航布局
• div-dl-dt-dd:常用于图文混编布局
• div-form:常用于表单布局
• div-table:常用于局部规则数据展示布局

五、总结

转移符号：
&nbsp；:转义为空格
&lt；：转义为小于号
&le；：转义为小于等于号
&gt；：转义为大于号
&ge；：转义为大于等于号
&copy；：转义为版权符号