目录
HTML属性
成对标签：<标签名字 属性1 属性2 属性3 ……>内容</标签名字>
单标签：<标签名字 属性1 属性2 属性3 ……>内容
基本结构
<!DOCTYPE>
<html lang="en"> <!--lang表示页面的语言 英文：en 中文：zh-->
<head>
<meta charset="UTF-8"> <!-网页编码方式为utf-8 -->
<title>标题</title>
</head>
<body>
</body>
</html>
头部内的标签
<base> 定义了页面链接标签的默认链接地址。
<link> 定义了一个文档和外部资源之间的关系。
<meta> 定义了HTML文档中的元数据。
<script> 定义了客户端的脚本文件。
<style> 定义了HTML文档的样式文件。
水平线
<hr/>
align 对齐方式(水平线)
size粗细(水平线)
width 宽度(水平线)
color 颜色(水平线)
标题标签
<h1 align=””>这是一级标题</h1> <!-align可为：left right center -->
<h6>这是六级标题</h6>
文本标签
水平线：<hr> 换行：<br>
<b>粗体文本</b> <strong>粗体（语义化强调）</strong>
<i>斜体文本</i> <em>斜体（语义化强调）</em>
<sub>下标</sub> <sup>上标</sup>
<del>加删除线</del> <ins>加下划线</ins>
<abbr>首字母缩写语</abbr>
<blockquote>大面积的文本引用</blockquote> <q>小面积的文本引用</q>
<address>用于修饰文字信息</address> <cite>用于修饰文字信息</cite>
<code>计算机代码</code>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<bdo>文字方向</bdo>
段落标签
<p>这是一个段落</p>
链接标签
<a href = "链接页面地址" target=”链接打开的方式”>链接对象</a>
| 属性 | 值 |
|---|---|
| href | URL |
| target | _blank（在新的窗口打开链接） |
| _parent（在当前框架的上一层打开链接） | |
| _self（在当前窗口打开链接，默认方式） | |
| _top（在顶层框架中打开链接） | |
| framename（用于AJAX） |
图像标签
<img src="图像的URL" >
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图片的地址 |
| alt | 文本 | 图片显示不出来时的提示文字 |
| title | 文本 | 鼠标移动到图片上的提示文字 |
| width | 像素（XHTML不支持页面百分比） | 设置图片的宽度 |
| height | 像素（XHTML不支持页面百分比） | 设置图片的高度 |
| border | 数字 | 设置图片边框的宽度 |
| vspace | 像素 | 设置图片顶部和底部的空白（垂直边距） |
| hspace | 像素 | 设置图片左侧和右侧的空白(水平边距) |
| align | left | 将图片对齐到左边 |
| right | 将图片对齐到右边 | |
| top | 将图片的顶端和文本的第一行文字对齐，其他文字位于图片下方 | |
| middle | 将图片的水平中线和文本的第一行文字对齐，其他文字位于图片下方 | |
| bottom | 将图片的底部和文本的第一行文字对齐，其他文字位于图片的下方 |
无序列表
<ul>
<li>列表项</li>
</ul>
| 属性取值 | 显示效果 |
|---|---|
| disc(默认值) | 实心圆（●） |
| circle | 空心圆(○) |
| square | 实心正方形(■) |
有序列表
<ol>
<li>列表项</li>
</ol>
有序列表type属性取值表：
| 属性取值 | 显示效果 |
|---|---|
| 1（默认值） | 数字(1、2、3……) |
| a | 小写英文字母(a、b、c……) |
| A | 大写英文字母(A、B、C……) |
| i | 小写罗马数字(i、ii、iii……) |
| I | 大写罗马数字(I、II、III……) |
分组标签（多数情况下需要配合CSS样式）：
<div>具体内容</div>
/*占用面积为一行
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
*/
<span>具体内容</span>
表格标签
<table> <tr> <td>三个标签缺一不可
<table>
<caption>表格的标题</capption>
<tr>
<th>表头一</th>
<th>表头二</th> <!-表头是th，文字会自动加粗 -->
<th>表头三</th>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
<td>单元格三</td>
</tr>
</table>
< table >内属性
边框（没有border说明无边框）：border="1px"
单元格内容与单元格边框之间的空白间距（默认为1px）：cellpadding="px"
单元格与单元格边框之间的空白间距（默认为2px）：cellspacing="px"
< td >内属性
| 属性名 | 含义 | 属性值 |
|---|---|---|
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置单元格内容的水平对齐方式 | left(左对齐)、enter(居中对齐)、right（右对齐） |
| valign | 设置单元格内容的垂直对齐方式 | baseline（基线对齐）、top（上对齐）、middle（居中对齐）、bottom（下对齐） |
表格语义化
<thead> <tbody> <tfoot>
作用：使网页内容更好地被搜索引擎理解
<thead></thead>标签：定义表格的头部，位于<table></table>标签中，一般包含网页的logo和导航等头部信息
<tfoot></tfoot>标签：定义表格的页脚，位于<table></table>标签中
<thead></thea>之后一般包含网页底部的企业信息等
<tbody></tbody>标签：用于定义表格的主体，位于<table></table>标签中。<tfoot></tfoot>标签之后，一般包含网页中除头部和底部以外的其他内容
合并行与列：
合并行 <td>标签的rowspan=” ”
合并列 <td>标签的clospan=” ”
表单
表单元素
| 表单元素 | 含义 |
|---|---|
| < input> | 表单输入框（可定义多种表单项） |
| < textarea> | 定义多行文本框 |
| < select> | 定义一个下拉列表(必须包含列表项) |
| < label> | 定义表单辅助项 |
表单域：用来容纳表单控件和提示信息
< form>
<form>标签中的所有内容都会被提交给服务器
< form>标签属性：
action：指定接收并处理表达数据的服务器的URL地址
method：定义表单数据的提交方式，有get和post，get保密性差，提交的数据会显示在浏览器的地址栏中，且有数据量的限制；post的保密性好，而且无数据量的限制
enctype：定义表单数据的提交内容形式，常用的有application/x-www-form-urlencoded（默认） 和 multipart/form-data两种方式。提交内容可以是网页中的文本，也可以是图片或视频等非文本的内容。
target：定义提交地址的打开方式，跟< a>标签 中的target属性一样
< input>标签的type属性：
| 表单元素 | 含义 |
|---|---|
| text | 单行文本框 |
| password | 密码文本框，框中的字符会被用星号或实心圆加密显示 |
| radio | 单选框 |
| checkbox | 复选框 |
| button | 按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| hidden | 隐藏域 |
| image | 图像形式的按钮 |
| file | 文件上传按钮 |
radio和checkbox中，name属性用来实现单选或者多选属性
button，submit，reset中，value用来给定按钮上文本的内容
<form> <!--单击button会弹出“hello”-->
<input type=”button” value=”普通按钮” onClick=”alert(‘hello’)”>
</form>
<form action=”data.php”> <!--单击提交按钮，会把value=“男”提交给data.php这个后台服务器-->
<input type=”hidden” name=”gender” value=”男”>
<input type=”submit” value=”提交按钮”>
</form>
Image
用来设置图像格式的按钮，src属性引入图像地址，目的是submit的默认样式
file
用来设置文件上传的按钮，标签的method属性必须设置成post，enctype属性必须设置成multipart/form-data
< input>标签的其他属性：
| 属性 | 属性值 | 含义 |
|---|---|---|
| name | 自定义 | 元素的名称 |
| value | 自定义 | 元素的值 |
| maxlength | 正整数 | 元素允许输入的最多字符数 |
| disabled | disabled | 第一次加载页面时禁用该元素（显示为灰色） |
| readonly | readonly | 元素内容为只读（不能修改编辑） |
| checked | checked | 定义选择元素默认被选中的项 |
disabled、readonly属性
disabled属性规定输入内容是禁用的，被禁用的元素是不可用和不可单击的。readonly属性规定输入内容为只读（不能修改，但是能获取当前只读的内容）。
checked属性与<input type="checkbox">或<input type="radio">配合使用。
< textarea>标签
多行文本框
< select>标签
<select>标签配合<option>标签使用
< select>标签属性
multiple属性支持“Ctrl+鼠标左键”进行多选操作
selected属性是设置在<option>标签上的
<select>标签中使用<optgroup>标签进行分组项操作，把相关的选项组合在一起。<optgroup>标签的label属性来设置分组项的标题。
< label>标签
用来辅助表单元素，可以更好的提高用户体验，当鼠标单击到文字上也能选中单选框
性别：<input type=”radio” name =“gender” id=”man”>
<label for=”man”>男</label>
<input type=”radio” name=”gender” id=”woman”>
<label for=”woman”>女</label>
扫一扫
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
