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设置的是当前可见行数,如果内容的行数超过这个值,则会出现垂直滚动条