码迷,mamicode.com
首页 > Web开发 > 详细

HTML常用标签

时间:2019-02-21 15:36:48      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:比例   idt   top   img   content   单列   输入   block   label   

1、布局标签

div标签定义文档中的分区或节(division/section),可以把文档分割为独立的、不同的部分,主要用于布局。

aside标签的内容可用作文章的侧栏,<span style="color: #ff0000;">html5新增标签</span>

header标签定义页面的头部(介绍信息),<span style="color: #ff0000;">html5新增标签</span>

section标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分,<span style="color: #ff0000;">html5新增标签</span>

footer 标签定义文档或节的页脚,通常包含文档的作者、版权信息、使用条款链接、联系信息等等,<span style="color: #ff0000;">html5新增标签</span>

article标签规定文章独立的其他内容,比如:标题、内容、评论,<span style="color: #ff0000;">html5新增标签</span>

2、文本标签

 

h1-h6标签可定义标题

 

p标签定义段落

 

b/strong标签加粗

 

em标签来表示强调的文本,斜体

 

strong标签表示重要文本

 

u标签下划线

 

s标签删除线

 

br标签表示回车换行

 

hr标签表示水平线

 

span标签被用来组合文档中的行内元素。

 

blockquote标签表示块引用

 

pre标签可定义预格式化的文本,保持原有格式的一种标签。

 

sub标签下标,

 

sup>标签上标

 

 表示一个空格

 

?表示版权符

3、a标签定义超链接,指定页面间的跳转。链接可以指向外部链接或者页面内部id锚点,可以在当前页面打开,新开窗口。

 

<a href="指向的链接地址或者网址#ID" target="_blank|_self|_top|_parent">百度</a>

4、视图标签

img标签主要在网页中插入图像,可以定义图片替换文本、显示宽度和高度、是否带边框,建议等比例设置,否则图像会变形。

 

<img src="图片地址" alt="替换文本,图片打不开的时候显示" width="图片宽度" height="高度" border="0" />

 

audio标签定义声音,比如音乐或其他音频流。<span style="color: #ff0000;">html5新增标签</span>

 

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

 

video标签定义视频,比如电影片段或其他视频流。<span style="color: #ff0000;">html5新增标签</span>

 

<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

5、序列化标签

 

ulli无序列表标签

 

<ul>

 

<li>HTML</li>

 

<li>JS</li>

 

<li>PHP</li>

 

</ul>

 

olli有序列表标签,可以使用type属性规定有序列表符号的类型。按数字有序排列,为默认值,(1234);按小写字母有序排列,(abcd);按字母大写有序排列,(ABCD)。按小写罗马字母有序,(i, ii, iii, iv);按小写罗马字母有序,(I, II, III, IV)。

 

<ol>

 

<li>HTML</li>

 

<li>JS</li>

 

<li>PHP</li>

 

</ol>

6、表格标签

table标签和tr标签,th标签和td标签,合并单元格。

<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">

<tr>

<th>标题</th>

<th>标题</th>

</tr>

<tr>

<!-- 合并横向单元格 -->

<td colspan="2" nowrap="nowrap">&nbsp;</td>

</tr>

<tr>

<td></td>

<!-- 合并纵向单元格 -->

<td rowspan="2"> </td>

</tr>

<tr>

<td height="16"> </td>

</tr>

</table>

7、表单标签

form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码,需要提交的表单一定要放在form标签内。

<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>

input标签用于搜集用户信息

<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />

密码,输入的字符会被掩码(显示为星号或原点)

<input name="pwd" type="password" maxlength="5" size="100" value="" />

文件类型的表单,上传文件时,form表单一定要设置为enctype="multipart/form-data"

<input type="file" name="file" />

隐藏表单

<input type="hidden" name="country" value="China" />

提交

<input type="submit" name="Submit" value="提交" disabled="disabled" />

重置

<input type="reset" name="Submit2" value="重置" />

radio单选

<input name="sex" type="radio" value="1" />

<input name="sex" type="radio" value="2" checked="checked" />

checkbox多选

<input name="skill" type="checkbox" value="1" checked="checked" />PHP

<input name="skill" type="checkbox" value="2" />前端

<input name="skill" type="checkbox" value="2" />数据库

<span style="color: #ff0000;">注:checked="checked"可以简写成checked</span>

label标签为input元素定义标注,如果您点击label元素文本,就会触发此input控件。

textarea标签,设置文本区内的可见行数和宽度

<textarea name="content" cols="30" rows="10">大段文本输入框</textarea>

button标签定义一个按钮

提交按钮

<button type="submit" value="提交">提交</button>

重置按钮

<button type="reset" value="重置">重置</button>

select标签和option标签下拉列表

单选菜单列表框

<select name="user">

<option value="1">ray</option>

<option value="2" selected="selected">raykaeso</option>

</select>

多选列表下拉框,shift加鼠标单击,可以连续选择多个选择,CTRL+鼠标点击,可以点击多个。

<select name="user" size="10" multiple="multiple">

<option value="1">AAAA</option>

<option value="2" selected="selected">ray</option>

<option value="3">raykaeso</option>

</select>

 

HTML常用标签

标签:比例   idt   top   img   content   单列   输入   block   label   

原文地址:https://www.cnblogs.com/1500418882qqcom/p/10412768.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!