HTML常用标签

HTML常用标签

整体说明

• 关于属性的注意事项：

  1. 属性必须写在开始标签名后：< p align=“center”>< /p >
  2. 属性之间不分先后顺序，用空格隔开
  3. 属性采用键值对格式，一个属性必然有一个值

• 特殊字符：

  字符	描述	字符代码
  	空格符	 
  <	小于号	&lt;
  >	大于号	&gt;
  &	和	&amp;

可以用一句话概括的基础标签

标签	语义	概括
< html >< /html >	定义一个网页文档	html标签是页面中最大的标签，其他标签都被包含其中。所以称为根标签
< head >< /head >	头部	文档头部标签，它是所有头部元素的容器。在< head > 中必须设置title
< title >< /title >	网页标题	现实在浏览器窗口的标题栏
< body >< /body >	网页主体	页面的内容都包含在body中（比如文本、超链接、图像、表格和列表等等。）
< p >< /p >	段落	将文字分为若干个段落，会根据浏览器窗口大小自动换行，并且段落之间会有空隙
< br />	换行	强制换行(单标签)
< strong >< /strong >或< b >< /b >	文本加粗	文本加粗
< em >< /em >或< i >< /i >	文本倾斜	文本倾斜
< del >< /del >或< s >< /s >	文本删除线	文本删除线
< ins >< /ins >或< u >< /u >	文本下划线	文本下划线
< div >< /div >	无	大盒子，< div >独占一行，是用来布局的。
< span >< /span >	无	一行可以放多个span，也用于布局。

需要详细介绍的基础标签

① < img src="图片URL" >：引入图片(单标签)

• 概述
  < img >是引入图片标签，它有一个必须的属性src，该属性确定引入图片的具体地址路径。该地址可以是绝对路径、相对路径和网络路径

• img标签格式

  <img src="images/1.jpg "/>
  

• 路径

  • 相对路径：图片相对于当前html文档的路径。

  路径切换符	描述
  /	进入下级目录
  . ./	进入上级目录

  • 绝对路径：带盘符的路径，本地电脑中的图片。d:\360sd\1.jpg

  • 网络路径：http://www.dks.kd/images/logo.jpg

• img属性

  属性	属性值	描述
  src	图片路径	必须属性
  alt	文本	替换文本，图片不能显示时展现的文本
  title	文本	提示文本，鼠标放在图片上显示的文字
  width	像素/百分比	设置图片宽度
  height	像素/百分比	设置图片高度
  border	像素	设置图片边框粗细

②< a herf="跳转目标">< /a >：超链接

• 概述
  为文字或图片添加超链接，从而跳转到其他页面。

• a标签格式

  <a herf="http://html/one.htnl" target="_blank" >点击跳转首页</a >
  

• 属性

  属性	描述
  herf	用于指向跳转的目标页面 (必须属性)
  target	设置目标页面的窗口打开方式

• 链接种类

  1. 外部链接：< a herf=“http://www.baidu.com”>百度< /a >
  2. 内部链接：< a herf=“html/gsjj.html” target="_blank">公司简介< /a >
  3. 空链接：< a herf="#">发展规划< /a >
  4. 下载链接：herf 链接到的是压缩包或者文件，会下载这个文件
  5. 锚点链接：< a herf="#grjj" target="_self" >个人简介< /a >
     ①.设置超链接herf值为锚点链接(#xxx)
     ②.设置跳转目标标签id值(id=“xxx”)；

③< table >< /table >：表格

• 概述
  table定义一个表格框架，tr定义表格中的一行，td定义行中的一个单元格。表格可用于数据展示页面布局等。

• tatle格式

  <table border="" cellspacing="0" cellpadding="5">
  	<tr>
  		<th>Header</th><th>Header</th><th>Header</th>
  	</tr>
  	<tr>
  		<td>Data</td><td>Data</td><td>Data</td>
  	</tr>
  </table>
  

• 配套标签
  <table></table>：表格框架
  <tr></tr>：定义表格框架的一行
  <td></td>：定义一行中的一个单元格
  <th></th>：表头，和td相比进行加粗居中

  <thead></thead>：表格头部区域（划分表格结构）
  <tbody></tbody>：表格主体区域（划分表格结构）

• <table>属性(通过css设置)

  属性	值	描述
  border	像素	设置边框粗细，默认无边框
  align	left、right、center	设置表格对其方式
  cellpadding	像素	设置单元格内容与单元格左边框的距离，默认1xp
  cellspacing	像素	设置单元格之间的距离，默认2xp
  width	像素/百分比	设置表格宽度

• 合并单元格
  合并同行单元格：colspan=“合并单元格个数”
  合并同列单元格：rowspan=“合并单元格个数”

  1. 确定合并同行还是同列
  2. 找到目标单元格，添加合并属性=“合并单元格数量”。例：< td colspan=“2” ></td>
  3. 删除多余单元格

④<ul></ul>：列表

• 概述
  列表特点是整齐、有序，用于布局自由方便
• ul无序列表格式

  <ul>
  	<li>yi</li>
  	<li>yi</li>
  	<li>yi</li>
  </ul>
  

• 列表分类
  无序列表：<ul></ul>
  有序列表：<ol></ol>
  自定义列表：<dl></dl>

  <dl>
  	<dt>名词1</dt>
  	<dd>名词1解释1</dd>
  	<dd>名词1解释2</dd>
  	<dd>名词1解释3</dd>
  	<dt>名词2</dt>
  	<dd>名词2解释1</dd>
  	<dd>名词2解释2</dd>
  	<dd>名词2解释3</dd>
  </dl>
  

• 配套标签
  列表项：列表中的一项，包含着列表标签中。<li></li>
• 注意
  列表中只能嵌套<li>标签，<li>中可以放任意元素。

⑤<form></form>：表单

• 概述
  表单用于收集用户数据，例如注册、问卷等。一个表单由表单域、表单元素和提示信息组成。
• form格式

  <form >
  	用户名：<input type="text" name="useName" /><br>
  	密码：<input type="password" name="password" />
  </form>
  

• <form>重点属性

  属性	值	描述
  action	URL地址	用于指定接收并处理表单数据的服务器程序的URL地址
  method	get/post	用于设置表单数据的提交方式。
  name	任意名称	用于为表单命名，以区分同页面的多个表单

• 配套标签
  <form></form>：定义一个表单域
  <input>：输入表单元素
  <select></select>：下拉表单元素
  <textarea></textarea>：文本域表单元素

<input/>：输入表单元素 (单标签)

• 概述
  input输入，给用户提供输入。该标签根据 必须属性type 值的不同可以实现不同的输入类型。

• input属性

  属性	值	描述
  type	查看	设置输入元素类型
  name	自定义	定义该元素名称
  value	自定义	根据输入或设置该元素的值
  checked	checked	设置该元素默认选中
  maxlength	正整数	规定输入字段的字符长度

  1.单/复选框name值需相同
  2.每个表单元素都有name和value
  3.checked主要用于设置但复选框默认选中状态

• type属性值

  属性值	描述
  button	定义可点击的按钮 （value值可设置按钮文字）
  checkbox	定义复选框
  file	定义输入字段和浏览按钮，提供文件上传
  hidden	定义隐藏的输入字段
  image	定义图像形式的提交按钮
  password	定义密码输入字段
  radio	定义单选框
  reset	定义重置按钮
  submit	定义提交按钮（value值可设置按钮文字）
  text	定义单行输入字段，默认宽度20字符

<lable></lable>：配合<input>使用

• 概述
  为input标签添加一个绑定，使lable标签体中的内容点击后聚焦、跳转或选中对应表单上的元素，从而增加用户体验
• 格式

  <form >
  	<label for="usename">用户名：</label>
  	<input type="text" name="usename" id="usename"  />
  </form>
  

  理解：和锚点链接有些类似，设置钩子，钩到指定的位置。for的值对应相关元素的id的值即可。

<select>：下拉表单元素

• 概述
  提供一个下拉选项栏，让用户多选一。
• 格式

  <form >
  籍贯：
  	<select name="jiguan">
  		<option value ="上海">上海</option>
  		<option selected="selected" value ="北京">北京</option>
  		<option value ="广州">广州</option>
  		<option value ="杭州">杭州</option>
  	</select>
  </form>
  

• 配套标签
  <option></option>：下拉选项栏的选项标签

<textarea></textarea>

• 概述
  提供一个多行文本域。
• 格式

  <form >
  	日志：
  	<textarea rows="5" cols="25">
  	</textarea>
  </form>
  

  提示： rows行数，cols每行字符数。