简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML常用标签
Blogger Information
Blog 6
fans 0
comment 0
visits 4135
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML常用标签
若水的博客
Original
715 people have browsed it

一、结构标签

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 个字符。    


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！