网页内容标签

在编程过程中也会有一些特殊个数的标签

1.图片标签

图片的引用：

引用处	引用方法
网页小图标	<link rel = “icon”herf ="#" >（herf内接图片地址）
网页正文	<img src = “图片地址.格式” alt = " ">
背景图	background-image:url:(" ")

图片有三种格式：

• jpeg / jpg :有损压缩，适合大图，压缩比例好
• png :无损压缩，支持透明压缩，最大限度还原图片清晰度。适合小图
• gif :有损压缩，支持透明压缩和动态效果

注意：图片引入时，格式必须正确，否则引入错误

2.链接

<a herf = “#”>链接内容</a>
链接标签的target属性：（网页跳转方式）

1. _self : 当前页面打开链接，默认效果
2. _blank : 新的窗口打开链接

3.滚动标签

<marquee></marquee>:将被包裹的内容以规定的方式滚动

标签属性：

behavior:滚动方式：

• slide：滚动一次停止
• scroll：循环滚动（默认）
• alternate：来回交替滚动
  direction:滚动弄方向：
• down：向下
• up：向上
• right：向右
• left：向左

4.表格

用table标签将内容按格式包裹起来，所包裹的内容便可转换为表格形式输出在页面上

具体框架为：

<table>
	<caption>表格的标题</caption>	
	<tr>			tr表示一行单元格
		<td></td>	td表示一个单元格，重复输出td可在该单元行内书除多个单元格
		<td></td>
	</tr>
</table>

table标签的属性：

• 表格的水平对齐方式：align = “left居左，center居中，right居右”
• 表格的垂直对齐方式:valign = “top居上,middle居中,bottom居下”
• 表格的边框：border
• 表格内框线间距：cell spacing
• 表格内容与边框距离：cell padding
• 单元格合并(将多个单元格合并为一个)：
  1. 水平合并：colspan
  2. 垂直合并：rowspan

列表中可给单元格及单元行设置宽高、字体颜色、背景色等

5.列表

• 有序列表

以<ol>标签包裹的列表列表以数字标示，每一个<li>标签为一个选项，具体内容嵌套在<li>标签内

<ol>
	<li></li>
	<li></li>
</ol>

• 无序列表

以<ol>标签包裹的列表列表以数字标示，每一个<li>标签为一个选项

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

• 自定义列表

以<dl>标签包裹的列表列表以数字标示，每一个子项中对应两个标签，分别为：<dt><dt>，其中嵌套子项的标题，<dd></dd>，其中嵌套对应的内容

<dl>
	<dt>标题</dt>
	<dd>具体内容</dd>
</dl>

6.表单（<input/>标签）

表单存在于浏览器中，用于收集用户信息，搜集完成后添加到服务器

表单控件

• 单行文本：<input type = “text”>
• 密 码 框 ：<input type = “password”>
• 单选按钮：<input type = “radio”>
• 多选按钮：<input type = “checkbox”>
• 上传文件：<input type = “file”>
• 提交按钮：<input type = “submit”>
• 重置按钮：<input type = “reset”>
• 单击按钮：<input type = “button”>
  以下为H5新增的表单控件
• 电话号码：<input type = “tel”>
• 数值选择：<input type = “range”:step:每次移动增量 min:最小值 max:最大值 value：初始位置>
• 邮箱：<input type = “email”>
• 搜索：<input type = “search”>
• 网址：<input type = “url”>
• 数字：<input type = “number”>
• 颜色：<input type = “color”>
• 日期：<input type = “date”>
• 事件：<input type = “time”>
• 月份：<input type = “week”>
• 周：<input type = “month”>
  特殊的表单控件：
  下拉列表：

	<select>
		<option></option>
		<option></option>
	</select>

多行文本输入框：<textarea></textarea>
<label>文本内容<label>：包裹住内容时，点击内容也可以选中选框

表单属性：

• type:每个input标签都必须有的属性，默认为text
• value：该标签被选中后的默认值
• size：标签的长度
• maxlength:最多输入的字符数
• name:此的别名
• disabled:禁用该表单（背景变灰）
• readonly:规定只读，不可更改
• required：规定该表单为必填项
• placeholder：提示信息
• formaction：自定义按钮提交地址
• formmethod：自定义提交方式
  以下为h5新增的表单属性
• autocomplete:是否保存用户输入值（取消提示信息）
• autofocus：指定表单在网页刷新时获取输入焦点（网页刷新时默认选中）
• pattern：正则验证
• novalidate：提交后重新加载页面
• formnovalidate:提交表单时按钮不会执行验证过程（覆盖form元素的novalidate属性）

本文均属个人理解