HTML5的常用的标签

时间：2022-01-26 00:05:52

HTML5对比HTML4新增了很多元素，也删除了部分元素(可以用css样式表方式替代)所以我只列出HTML5最常用的几个标签。

head标签中：

<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;">碰见老版的浏览器如ie6，将这段代码加上则兼容它

<meta name="keyword" content="富强，*，文明，和谐">这是一个关键字标签，设置页面关键字可以帮助搜索引擎对该页面进行查找和分类，它可以提高搜索几率。有多个关键字可以用逗号隔开。

<meta name="description" content="关于*核心价值观的网站">这是一个页面主题的描述，也是为了方便搜索引擎的查找。

<meta name="其他" content="其他的描述">通用格式。

<meta http-equiv="refresh" content="5">refresh表示刷新，content表示刷新的时间间隔。

<meta http-equiv="refresh" content="5";url="www.baidu.com">refresh表示刷新，content表示刷新的时间间隔，url表示刷新后即将跳转的地址。

<title>我是一个HTML页面<title/>这是一个标题标签，当你打开多个页面时可以清楚的知道你打开页面内容的标题。或者在打开收藏夹中收藏的页面可以一眼看中你想要打开的那个页面。

body标签中：

<a href="www.baidu.com">我是百度搜索的地址链接</a>　　这是一个超链接标签，使浏览者从一个页面跳转到另一个页面

<a href="文件名">我是一个文件</a>　　这是一个超链接标签，使浏览者从一个页面跳转到一个文件（如果链接在同一级目录下则输入文件名称，要链接到上一级先输入"../"再输入目录名、文件名，要链接到下一级先输入目录名再输入文件名）

<a href="#当前文件的某个id">我将跳转到</a>　　a标签当锚使用，id不允许重复

<a href="文件名" target="目标窗口的打开方式">我是一个文件</a>　　target为_blank则在新的窗口打开

<p>段落文字</p>段落标记标签（块级标签），开启一个段落，特点：（段落和段落间有换行标记）

<br/>　　换行标记，特点：（强制换行）

<h1></h1>　　标题标签（块级标签），标题1-6分别对应6种不一样的标题，且依次减小。特点：（加大加粗）

<span></span>　　行内标签，特点：（白板，可以加入css样式以改变文本的样式）

<div></dic>　　区隔标签（块级标签）表示一块可显示的HTML的区域，用于设置字、图片、表格等摆放位置

列表/表格：

无序列表-ul

<ul type="">　　type取（disc为实心圆）,type取（circle为空心圆）,type取（square实心方块）

　　<li>第一项</li>

　　<li>第二项</li>

　　<li>第三项</li>

</ul>
有序列表ol

<ol tyoe="" start="">　　type取（1为数字1234）type取（a为字母abcd）type取（A为字母ABCD）type取（i为罗马数字i，ii，iii）type取（I为数字I,II,III）,start表示从哪个数值开始如果你不想从1开始的话。

　　<li>第一项</li>

　　<li>第二项</li>

　　<li>第三项</li>

</ol>
定义列表dl

<dl>

　　<dt>第一项</dt>

　　　　<dd>我的名字<dd>　　dd具有缩进作用

</dl>

table表格

<table border="1">　　表格标记,border="1"（创建边框）

　　<thead>

　　　　<tr>　　行标记

　　　　　　<th>我是第一行的表头</th>　　表头（加粗显示）

　　　　　　<th>我是第二行的表头</th>

　　　　</tr>

　　</thead>

　　<tbody>

　　　　<tr>

　　　　　　<td>我是第二行第一个单元格</td>　　单元格标记

　　　　　　<td>我是第二行第二个单元格</td>

　　　　</tr>

　　　　<tr>

　　　　　　<td>我是第三行第一个单元格</td>

　　　　　　<td>我是第三行第二个单元格</td>

　　　　</tr>

　　</tbody>

</table>

#colspan="1"  向右合并一个单元格

#rowspan="1"  向下合并一个单元格

　　在HTML中，<form></form>标签对用来创建一个表单，即定义表单的开始和结束位置，真正处理表单的数据脚本或程序在action属性里，这个值可以是程序或脚本的一个完整的url

语法：

<form action="程序或脚本的一个完整的url" method="传输的形式" name="方便后台查找该表单"> #传输的形式有post、get（get比post快，get数据会附加在url上传递而post是和url分开传递的）

　　表单控件

</form>

input控件

<input type="text" name="文字字段的名称，不能包含特殊字符" size="文本框在页面中显示的长度" maxlength="文本框中最多可输入的字符数" value="定义文本框中的默认值"/>　　text属性用来设定在表单的文本域中输入任何文本、数字、字母

<input type="password" name=""...../>　　password属性使输入到该文本域中的文字均以****或圆点显示。

<input type="radio" value="单选按钮的取值" name="单选按钮的名称" checked="checked"/>    单选按钮，以一个圆框显示。checked属性表示这一单选按钮被默认选中。

<input type="checkbox" value="复选框的取值" name="复选框的名称" checked="checked"/>    复选框。

<input type="button" value="按钮的取值" name="按钮的名称" onclick="处理程序"/>    普通按钮，value设置按钮的文字  #onclick="window.close()"

<input type="submit" value="按钮的取值" name="按钮名"/>    提交按钮，并不需要onclick，单击该按钮可以实现表单内容的提交，value设置按钮的文字。

<input type="reset" value="按钮的取值" name=""/>    重置按钮，可以清除表单的内容，恢复到默认值。value设置按钮的文字。

image控件

<input type="image" src="图像地址" name="图像名称" alt="" title=""/>　　添加图片

file控件

<input type="file" name=""/>　　上传文件，依赖form表单的一个属性 enctype="multipart/form-data"
菜单/列表控件

<select name="下拉菜单的名称">

　　#<optgroup label="">分组显示

    <option value="列表项目" name="菜单和列表名称" multiple="列表项目多选" size="显示列表数目" selected="selected'>  </option>

    <option value="列表项目">  </option>

    <option value="列表项目">  </option>

</select>

多行文本输入框

<textarea name="" value="文本域默认值" rows="文本域行数" cols="文本域列数">内容</textarea>

其中能给后台提交数据的只有form标签和textarea标签

HTML标签汇总：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list

HTML符号汇总：https://blog.csdn.net/Iversons/article/details/78996776

相关文章