HTML标签

1、单标签

◆注释标签 ctrl+/

<!-- 注释 -->

◆ 换行标签

第一行<br/>第二行

第一行
第二行

◆ 水平线标签

<hr />

---

2、双标签

◆ 段落标签

特点：上下自动生成空白行。<br>换行不会生成空白行。

<p>文本内容文本内容，文本内容文本内容。</p>

文本内容文本内容，文本内容文本内容。

◆标题标签

h1-h6 取值到h6
h1 在一个页面里只能出现一次。

<h1>你好你好你好</h1>
<h2>你好你好你好</h2>
<h3>你好你好你好</h3>
<h4>你好你好你好</h4>
<h5>你好你好你好</h5>
<h6>你好你好你好</h6>

◆文本标签

<font>文本内容</font>

<font size="6" color="red">文本内容</font>

文本内容

◆文本格式化标签

文本加粗标签<strong></strong><b></b>工作里尽量使用strong
文本倾斜标签<em></em><i></i>工作里尽量使用em
删除线标签<del></del><s></s>工作里尽量使用del
下划线标签<ins></ins><u></u>工作里尽量使用ins
更有语义化

<strong>内容</strong>    <b>内容</b>
<em>内容</em>            <i>内容</i>
<del>内容                </del><s>内容</s>
<ins>内容                </ins><u>内容</u>

内容 内容
内容内容
内容内容
内容内容

◆图片标签

<img src="a.jpg" alt="西湖" title="风景" width="500" height="300" />

src 图片的来源 必写属性
alt 替换文本 图片不显示的时候显示的文字
title 提示文本 鼠标放到图片上显示的文字
width 图片宽度
height 图片高度
图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

3、路径

3.1 相对路径

文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。

<img src="a.jpg" alt="西湖" title="风景" />

◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称

<img src="img/a.jpg" alt="西湖" title="风景" />

◆图片（html）在文件的上一级目录里，…+/+图片（html）名称

<img src="../a.jpg" alt="西湖" title="风景" />

◆图片在文件的上一级的其他目录里，…/文件夹名称/图片名称

<img src="../img02/a.jpg" alt="西湖" title="风景" />

★总结：找到下一级目录（文件夹）的图片（文件）用 /
跳出当前目录使用…/

3.2 绝对路径

<img src="F:\Sublime Text 3\img02\a.jpg" alt="西湖" title="风景" />

4、超链接

<a href="" title="图片标签" target="_self"></a>

href 去往的路径（跳转的页面） 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）
Target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）

5、锚链接

5.1锚链接

1.先定义一个锚点
2.超链接到锚点

<p id="sd">锚点</p>
<a href="#sd">回到锚点</a>

5.2空链

不知道链接到那个页面的时候，用空链

<a href="#">空链</a>

5.3压缩文件下载

不推荐使用

<a href="../../01.rar">压缩包</a>

5.4超链接优化写法

７.4让所有的超链接都在新窗口打开

<base target="_blank"> 

6、特殊字符

7、列表

7.1无序列表

<ul type="circle">
	<li>服装</li>
	<li>玩具</li>
</ul>

type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈

7.2有序列表

<ol  type="1" start="3">
	<li>服装</li>
	<li>玩具</li>
</ol>

type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置

7.3自定义列表

<dl>
 	<dt>小标题</dt>    
  	<dd>解释标题</dd>   
  	<dd>解释标题</dd>   
</dl>

8、音乐标签

<embed src="1.mp3" hidden="true">

src设置音乐路径
hidden隐播放按钮true隐藏 false显示

9、文字滚动

<marquee behavior="scroll" direction="left" > 文字一 文字二 </marquee>

height设置高度 width设置宽度 bgcolor设置背景颜色
behavior 滚动方式： alternate两端之间来回滚动；scroll滚动到另一端,会重复； slide滚动到另一端,不会重复
direction 设置滚动的方向： down 向下滚动；left:向左滚动； right 向右滚动；up 向上滚动
loop:设置滚动次数，-1直滚下去

10、表格

<table border="1" width="500" height="300" cellspacing="0" cellpadding="10" align="content" bgcolor="yellow">
	<tr align="content">
		<td>张三</td>
		<td>18</td>
		<td>男</td>
	</tr>
	<tr>
		<td>张三</td>
		<td>18</td>
		<td>男</td>
	</tr>
</table>

属性：
border=”1” 边框
width=”500” 宽度
height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ，tr或者td内容居中。
bgcolor=”red” 背景颜色。

10.1表格的标准结构

<table>
	<thead>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tfoot>
</table>

10.2表头和单元格合并

表头 <caption></caption>
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格

<table border="1" width="500" height="300" align="left">
	<caption>表头</caption>
	<tr>
		<td colspan="2">张三,18</td>
		<!-- <td>18</td> -->
		<td rowspan="3">男</td>
	</tr>
	<tr>
		<td>张三</td>
		<td>18</td>
		<!-- <td>男</td> -->
	</tr>
	<tr>
		<td>张三</td>
		<td>18</td>
		<!-- <td>男</td> -->
	</tr>
</table>

10.3表格标题、边框颜色、内容垂直对齐

标题的文字自动加粗水平居中对齐

	<th>
		<td>张三</td>
		<td>18</td>
		<td>男</td>
	</th>

边框颜色

bordercolor="red"

内容垂直对齐方式
valign=”top middle bottom”

<td valign="bottom">张三</td>

11、表单

表单域

<form action="#" method="get">
	
</form>

属性：action:处理信息
Method=”get post”
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。

文本输入框

<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="张三">

maxlength=“6” 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled=“disabled” 输入框未激活状态
name=“username” 输入框的名称
value="" 将输入框的内容传给处理文件

密码输入框

<input type="password" name="psd">

文本输入框的所有属性对密码输入框都有效。

单选框

<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender" >女

只有将name的值设置相同的时候，才能实现单选效果。
checked=”checked” 设置默认选择项。

下拉列表

	<select multiple="multiple">
		<option>北京</option>
		<option selected="selected">河北</option>
		<option>山东</option>
	</select>

属性：
multiple=”multiple” 将下拉列表设置为多选项
selected=”selected” 设置默认选中项目

	<select>
		<optgroup label="北京市">
			<option>朝阳区</option>
			<option>大兴区</option>
			<option>海淀区</option>
		</optgroup>
	</select>

<optgroup></optgroup> 对下拉列表进行分组。
Label="" 分组名称。

多选框

	<input type="checkbox" checked="checked">足球
	<input type="checkbox" checked="checked">篮球
	<input type="checkbox" >排球

checked=”checked” 设置默认选中项

多行文本框

<textarea cols="100" rows="10"></textarea>

cols 控制输入字符的长度。
rows 控制输入的行数

文件上传控件

<input type="file" >

文件提交按钮

<input type="submit" >

可以实现信息提交功能

普通按钮

<input type="button" value="普通按钮">

不能提交信息，配合JS使用。

图片按钮

<input type="image" src="按钮.jpg">

图片按钮可实现信息提交功能

重置按钮

<input type="reset" >

将信息重置到默认状态

表单信息分组

<form action="#" method="get">
	<fieldset>
		<legend>用户登录</legend>
		用户：<input type="text" name="username"><br>
		密码：<input type="password" name="psd">
	</fieldset>
</form>

<fieldset></fieldset> 对表单信息分组
<legend></legend> 表单信息分组名称

html5补充表单控件

12、标签语义化

好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

-标签语义化意义：
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护

1：尽可能少的使用无语义的标签div和span；

2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3：不要使用纯样式标签，如：b、font、u等，改用css设置。

4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；