您的位置：首页 > Web前端 > HTML

html常用标签

2016-09-17 11:09 218 查看
[TOC]

html的文件结构

<html>
<head>...</head>
<body>...</body>
</html>

head

head部分主要有：
<title>、<script>、 <style>、<link>、 <meta>


title

title标签是网页的标题信息



body

body部分主要有：
<h1>、<p>、<a>、<img>
等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

hx

<hx>
标签是标题标签，表示文章标题（x=1-6）

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>




p

作用：p标签是段落标签

语法：
<p>段落文本</p>


em/strong

作用：强调文字，默认em是斜体，strong是粗体，都可以用css调整

用法：
<em>强调文本</em>


用法：
<strong>强调文本</strong>


span

作用：span标签为文字单独设置样式（通过css）

用法：
<span>单独处理文本</span>


q

作用：q标签是引用标签，引用的文字会自动加上引号

用法：
<q>引用文本</q>


blockquote

作用：长引用标签，默认做法是缩进

用法：
<blockquote>引用文本</blockquote>


br

作用：换行 ( break )

用法：
<br />


nbsp

作用：空格，你在html里面输入的空格最后都会被解析成1个空格，所以需要多个空格的使用可以用nbsp（Non-breaking space）你也可以记忆为nb(牛逼) sp (space空格)

用法：
 


hr

作用：分隔线 ( horizontal )

用法：
<hr>


code

作用：代码，防止浏览器误认为是要执行代码，而没显示代码。加了标签浏览器就不会执行了，而是像文本一样显示出来

用法：
<code>代码语言</code>


pre

作用：在处理多段预览文字或代码时使用（保证显示的格式，不需要
<br />
或
 
控制格式）

用法：
<pre>语言代码段</pre>


ul-li

作用：无序列表显示

用法：

<ul>
<li>新闻1</li>
<li>新闻2</li>
......
</ul>

效果：



ol-li

作用：有序列表显示

用法：

<ol>
<li>新闻1</li>
<li>新闻2</li>
......
</ol>

效果：



div

作用：划分（division ），可以根据逻辑组成把页面划分成不同部分，然后通过css对不同部分进行装饰。（就像屋内的房间划分一样）

用法：
<div>…</div>




table

作用，产生一个表格

用法：主要是
table、tbody、tr、th、td
四元素的使用

<table>
表示一个表格

<tbody>
表示这个表格内容是一个整体（一次显示而不是多次加载）

<tr>
表示一行

<td>
表示一个单元格

<th>
表示表头

注意：默认是不代框的，如果加框可以用css样式

<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
</tbody>
</table>




caption

作用：表格标题

summary

作用：表格

a

作用1：实现超链接

用法：
<a  href="目标网址"  title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a>


target
属性表示是在当前窗口还是新窗口打开，
_blank
表示新窗口，还有
_self
自身窗口，
_top
顶部框架,
_parent
父框架。

作用2：链接Email地址



<a href="mailto: hk2291976@hotmail.com ? cc=abc@hotmail.com ; bb@hotmail.com & subject=主题 & body =邮件内容 ">发送邮件</a>

img

作用：插入图片

语法：
<img src="图片地址" title="鼠标滑过显示文字" alt="下载失败时的替换文本" title = "提示文本">


form

作用：表单数据，用于和用户交互

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


传送方式：
POST
,
GET


label

作用：显示文本和关联控件

语法：
<label for="关联名字">显示文本</label>


注意：用
for
属性可以关联控件，有些像单选多选框这类不易点击的，可以用label关联

<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<br />
</form>

这样就可以点击“男”或“女”触发点击单选的功能



input

作用：根据type类型

用法：
<input type="类型">显示文本</input


type类型：

text
: 文本类型

password
: 密码类型

radio
：name="name"name属性相同的单选框

checkbox
：复选框

file
: 选择文件

botton
：按钮（定义onclik触发消息）

submit
：提交数据

reset
: 重置数据

H5中还加入了例如
datatime,date,color,tel,range,number……
等类型

详细信息

注意：在H5中，可以用
placeholder
属性作为占位符，可以实现提示信息，值可以通过value设置和取得。



textarea

作用：文本域，支持多段文本

用法：
<textarea  rows="行数" cols="列数">文本</textarea>


注：属性可以通过css修改
weight
和
height
更改

select-option

作用：选择框，节约空间

用法：
<option value='提交值' selected="selected">显示值</option>


其中：
selected="selected"
表示选中

<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>




注意：下拉框可以多选，
select
启用属性
multiple="multiple"
,然后在选择的时候，按
ctrl
（mac上
command
），就可以多选

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航