html常用标签
一、页面的头部标记
1.标题标记<title>
用于给网页命名，当设置这个属性之后，我们能直观的在浏览器上看到网页的名字。
2.元信息标记<meta>
meta标签的属性
http-equiv 类似http的头部协议，以键值对的形式出现，“键”由http-equiv设置项目，“值”由content属性设置
name 以键值对的形式出现，“键”由name设置项目，“值”由content属性设置
content根据http-equiv和name来设置对应的值
字符编码的设置
语法：<mate http-equiv="content-type" content="text/html;charset=字符集">
常见字符集是GB2132,表示为国际汉字码，在实际应用中也常常使用utf-8编码
刷新页面
语法：<mate http-equiv="refresh" content="刷新时间">
设置为refresh(刷新)，content用于设置刷新时间，单位是秒。
页面跳转
语法：<meta http-equiv="refresh" content="刷新时间;url=目的地址">
设置为refresh（刷新），content用于设置刷新时间，单位是秒，在刷新的时候跳转到目的地址所在的页面
设置关键字
语法：<meta name="keywords" content="关键字1;关键字2;关键字3;...">
keywords表示“关键字”设置项目，content用于设置具体的关键字，但是在实际情况中，如果输入太多的关键字，可能会在网页搜索的时候被忽略，所以在设置关键字时要注意在这方面的精简。
设定页面描述信息
语法：<meta name="discription" content="页面描述语言">
discription表示“描述”设置项目，content用于设置具体的描述语言
3.<link>
4.<style>
5.<script>
二、页面的主体标记<body>
封装页面的主体内容，使用<body>可以设置页面正文颜色与背景颜色，页面背景图片，页面边距，网页链接颜色（未访问的连接颜色，正在访问的连接颜色，已经访问过的连接颜色）等。
1.文字与段落标记
文字标记：
文字内容
普通文字可以直接通过键盘键入或拷贝的方式进行输入到<body>标签中
空格在<body>标签中，不论我们键入多少个空格，在网页显示时都默认显示一个空格，所以为了在浏览器中显示多个空格，可以使用空格对应的一个字符代码
语法：
除了空格还有许多特殊文字无法直接输入，也可以通过使用对应的字符实体来表示
在网页中有一些内容我们只希望给编程的人员看到，不想它在浏览器中显示出来可以使用注释
语法：<!-- 注释内容 -->
文字字体
默认情况下，中文网页中的文字是以黑色，宋体，3号字的效果来显示的。可以用<font>来更改文字的显示效果
语法：<font size="" color="" face="">
size设置文字大小，color设置文字颜色，face设置文字字体
2.标题字标记
语法：<h1~6 align="对齐方式"></h1~6>
给文字添加标题语义，数字越大，字体越大。可以再其中设置文字对其方式，默认是左对齐。
3.文字的装饰标记
使用较少
4.段落标记
语法：<p>段落内容</p>
<p>段落内容
<p>的双标记会与上下文产生一空行的间距，单标记只会与上文产生一空行的间距，可设置对其方式
5.换行标记
语法：<br/>
给一段文字强制性换行，两个连续的<br/>相当于<p>的单标记
6.预格式化标记
语法：<pre></pre>
让文字与原来设置好的效果一样，可以将空格保留下来
7.居中标记
语法：<center></center>
让文字居中
8.缩排标记
语法：<blockquot>缩进文字</blockquot>
让文字产生一定的缩进
9.水平线标记
语法：<hr/>
单标记，在标记处产生一条水平线，可以进行宽度，高度，水平对其方式，阴影效果，颜色进行设置
10.列表标记
将相关内容按照整齐划一的方式排列
11.有序列表
语法：<ol>
<li>列表内容</li>
...
</ol>
默认情况下，有序列表的前导符是阿拉伯数字，可以通过type设置改变前导符
12.无序列表
项目列表：
语法：<ul>
<li>列表内容</li>
...
</ul>
默认情况下，无序列表的前导符是实心圆点，可以通过type设置改变前导符
定义列表:
语法：<dl>
<dt>名词</dt>
<dd>解释</dd>
...
</dl>
对名词进行解释，是一种具有两个层次的列表，名词为层次一，解释为层次二
13.嵌套列表
指一个列表项的定义中嵌套了另一个列表的定义
14.图片标记
插入图片
语法：<img src="">
src表示插入图片的路径，一般使用相对路径
设置图片大小
语法：<img src="" height="" width="">
通过高宽来设置图片的大小
设置图片与周围对象的边距
语法：<img src="" hspace="" vspace="">
通过设置图片与周围对象的水平距离和垂直距离来设置边距
设置图片提示文本
语法：<img src="" alt="">
在图片还未加载好或无法加载时，对图片进行解释说明
设置图片的对齐方式
语法：<img src="" align="">
设置图片与周围对象的对齐方式
设置图片的边框
语法：<img src="" border="">
给图片设置边框
三、超链接
超链接标记
语法：<a href="目标端点">源端点</a>
源端点可以是文字，也可以是图片，鼠标点击以后跳转到目标端点处
超链接目标端口
默认情况下在当前窗口打开，有时为了某种目的，希望超链接页面在其他窗口，如新开一个窗口中打开，此时在我们创建超链接时就必须修改它的目标窗口，目标窗口的修改可以通过target来进行修改
超链接的连接路径
绝对路径
相对路径
超链接的类型
根据目标短点的内容
内部链接
在同一个网站内部，不同网页的链接，通常使用相对路径
外部链接
在不同的网站中，通常使用绝对路径
书签链接
目标端点为网页中的某个书签的链接
步骤：1.创建书签
语法：<a name="书签名"></a>
<a>标记中的内容可有可无，书签名不能有空格
2.创建书签链接
语法:<a href="#书签名">源端点</a>
脚本链接
指使用脚本作链接目标端点的链接，通过脚本可以实现HTML语言实现不了的功能
文件下载链接
创建文件下载，只要在链接地址处输入文件路径即可，当用户点击链接时，浏览器会自动判断文件类型，做出不同情况的处理
根据原端点的内容
文本链接
源端点为文本的链接
图像链接
源端点为图片的链接
图像映射
一幅图片中的多个链接
语法：<img src="img_url" usemap="#map_name">
<map name="map_name">
<area shape="rect" coords="x1,y1,x2,y2" href="链接地址1">
<area shape="circle" coords="x,y,r" href="链接地址2">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3..." href="链接地址3">
...
</map>
rect表示矩形，circle表示圆形，poly表示多边形
四、表格
语法：<table>
<tr>
<th></th>
<td></td>
...
</tr>
...
</table>
使用<th>创建表头
在表格标记<table>中可以设置表格宽度width，高度height，边框线border，对齐方式align，背景颜色bgcolor，背景图片background，表格标题caption，单元格间距cellspacing和边距cellpadding等表格属性
在<tr>标记中可以设置对齐方式align，行单元格背景颜色bgcolor，行边框颜色bordercolor，单元格的垂直对齐方式valign
在<td><th>标记中可以设置以上各种属性及单元格跨行操作rowspan，单元格跨列操作colspan
五、表单
表单标记<form>
语法：<form name="" method="" action="">
...
</form>
还有onsubmit(用于指定处理表单的脚本函数)，enctype(设置MIME类型，默认值为application/x-www-form-urlencoded。需要上传文件到服务器时，应将该属性设置为multipart/form-data
get与post的区别
输入标记<input>
设置表单元素 文本text，按钮button，密码password，单选框radio，复选框checkbox,文件file，隐藏hidden，提交按钮submit，重置函数reset，图像域image
选择列表标记<select>
列表：
语法：<select name="列表名称" size="显示的选项数目" multiple="multiple">
<option value="选项值" selected="selected">选项一</option>
...
</select>
multiple设置列表中的项目可多选
下拉列表
一次只能选择一个列表选项，且一次稚嫩显示一个列表选项的选择列表
语法：<select name="列表名称" >
<option value="选项值" >选项一</option>
...
</select>
文本域标记<textarea>
语法：<textarea name="文本区域名称" rows="行数" cols="字符数">
...
</textarea>
rows设置的是当前可见行数，如果内容的行数超过这个值，则会出现垂直滚动条
扫一扫
2493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
