博客列表 >HTML常用标签

HTML常用标签

若水的博客
若水的博客原创
2018年05月27日 19:27:40714浏览

一、结构标签

1. <html></html>称为根标签,所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。

头部元素有:

<title></title>

<script></script>

<style></style>

<link></link>

<meta></meta>

3. 在<body>和</body>标签之间的内容是网页的主要内容。

二、文本格式化标签

1、字体

<b></b>          粗体
<big></big>      大字体
<em></em>        强调字
<i></i>          斜体
<small></small>  小字体
<strong></strong>加重语气
<br/>    换行
< pre>....< /pre>    按照代码格式进行输出

2、文本

align 定义水平对齐方式

align="center"    居中对齐内容。

align="left"    左对齐内容。

align="right"    右对齐内容。

align="justify"    对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。

style="font-family:verdana"

style 定义文档定义样式信息

style="font-family:verdana"    font-family:定义字体

style="font-family:arial;color:red;font-size:20px;"     color:red;定义字体,颜色,ont-size:字体大小

例:

<h1 align="center">This is heading 1</h1>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>


三、超连接

<a></a>

<a href="http://www.php.cn">php中文网</a>  定义一个  href=用来定义连接地址

<a href="http://www.php.cn">  <img src="图片路径"></a>  定义一个图片的超链接

target="_blank"    新建窗口打开超链接

title="提示内容"    给超链接添加提示

书签功能应用

<a href="#c1">点击按钮</a>

<a name="#c1">跳转目的地</a>


四、表格

<table>            表示表格

    <tr>                行

    <td></td>     列

    </tr>               行结束

</table>

标签:< th>表头< /th>:设置表头

标签:< caption>标题< /caption>:设置表的标题

属性:cellpadding="..."设置单元格边距

属性:bgcolor="..."设置表格背景颜色

属性:background="..." 以某张图片作为表格背景

属性:border="1"        边框大小

<table>    定义表格    

<caption>    定义表格标题。    

<th>    定义表格的表头。    

<tr>    定义表格的行。    

<td>    定义表格单元。    

<thead>    定义表格的页眉。    

<tbody>    定义表格的主体。    

<tfoot>    定义表格的页脚。    

<col>    定义用于表格列的属性。    

<colgroup>    定义表格列的组。   


五、图片

1、背景图片

例子: <body background="./qwe.gif">

background                                  可以在body中添加背景图片

<img src="路径加文件名">            插入图片

2、插入图片和图片属性

align    加入图片属性

例子:<img src="./julizi.png" align="left" >

bottom    align的默认值 图片居于文字下方

middle    文字居于图片中间

top    图片居于文字并排右边

right,left    相对字体的左或右

3、调整图片尺寸

例子:<img src="图片路径"   width="80" height="80">

width=""       宽度

height=""    高度

4、创建图像映象(选择一个点击区域)

例子:

<map name="lizi">
<area shape="rect" coords="50,10,100,60" href="http://baidu.com" target="_blank">
</map>

< map></ map>    创建映像

< area>    用来创建超连接区域

<area>属性包涵:

shape    属性值有:rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。

coords    coords属性对于矩形而言,coords有4个值,分别用逗号隔开,表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标,这里获取坐标的方式,就用截图工具帮忙就好。

href    连接到指定的地址

六、列表

sybe              决定起始数字或者样式

<li><li>        列表内容

<ol></ol>    有序列表

<ul></ul>    无序列表

<dl></dl>      自定义列表    <dt></dt>    自定义列表标题    <dd></dd>自定义列表内容


七、表单

<form   method="传送方式"   action="服务器文件"></form>

1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method : 数据传送的方式(get/post)。

 get以明文的方式通过UTL提交数据,数据在url中可以看到,提交的数据最多不超过2KB,安全性低但效率要比post高,适合提交数据量不大安全性不高的数据,比如:搜索,查询功能post将用户提交的信息封装在HTML HEADER内,适合提交数据量大,安全性高的用户信息,比如:注册,修改,上传等功能


八、文本输入框,密码输入框

<form>

   <input type="text/password" name="名称" value="文本" />

</form>

1、type:

   当type="text"时,输入框为文本输入框;    显示具体内容

   当type="password"时, 输入框为密码输入框。隐藏输入内容

2、name:为文本框命名,以备后台程序ASP 、PHP使用。

3、value:为文本输入框设置默认值。(一般起到提示作用)

九、文本域

例子:

<form  method="post" action="save.php">
   <label>联系我们</label>
   <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

2、cols :多行输入域的列数。

3、rows :多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

十、单选框、复选框

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

   当 type="radio" 时,控件为单选框

   当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序PHP使用)

3、name:为控件命名,以备后台程序 ASP、PHP 使用

4、checked:当设置 checked="checked" 时,该选项被默认选中

<form action="save.php" method="post" >
 <label>性别:</label>
 <label>男</label>
 <input type="radio" value="1" name="sex" />
 <label>女</label>
 <input type="radio" value="2" name="sex" />
 </br>
 你的爱好是:
 <input type="checkbox" name="tiaowu" value="跳舞">跳舞
 <input type="checkbox" name="paobu" value="跑步">跑步
 <input type="checkbox" name="dianyin" value="电影">电影
</form>

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“sex”,这样同一组的单选按钮才可以起到单选的作用。

十一、下拉列表、提交按钮

例子:

<form action="save.php" method="post" >
 <label>爱好:</label>
 <select>
 <option value='看书'>看书</option>
 <option value='旅游' selected="selected">旅游</option>
 <option value='运动'>运动</option>
 <option value='购物'>购物</option>
 </select>
</form>

 <select> </select> 表明下拉列表

<option value="向服务器提交值">显示内容</option>

1、value=“提交值”    向服务提交值

2、selected="selected":

设置selected="selected"属性,则该选项就被默认选中。

3、multiple="multiple"    下拉列表选择内容

例:

 <select multiple="multiple">
        <option value="哎呀妈呀,贼帅了!"selected>哎呀妈呀,贼帅了!</option>
        <option value="xxxx">xxxx</option>
        ....
    </select>

4、提交按钮

提交按钮

<input   type="submit"   value="提交">

type:只有当type值设置为submit时,按钮才有提交作用

value:按钮上显示的文字

重置按钮

<input type="reset" value="重置">

type:只有当type值设置为reset时,按钮才有重置作用

5、from表单中的label标签

<label for="控件id名称">

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同


type:值

button    定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。    

checkbox    定义复选框。    

file    定义输入字段和 "浏览"按钮,供文件上传。    

hidden    定义隐藏的输入字段。    

image    定义图像形式的提交按钮。    

password    定义密码字段。该字段中的字符被掩码。    

radio    定义单选按钮。    

reset    定义重置按钮。重置按钮会清除表单中的所有数据。    

submit    定义提交按钮。提交按钮会把表单数据发送到服务器。    

text    定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。    


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议