HTML5标签整理

最新推荐文章于 2024-09-30 21:15:00 发布

weixin_33894640

最新推荐文章于 2024-09-30 21:15:00 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fangyunchen/p/10309237.html

HTML标签

结果在WPS里，无法粘贴过来

简单标签

<br>	换行
<hr>	水平线
<div>	节(一个框框包裹,自动换行)
<span>	节(不换行)

文字标签

<b>	粗体文字
<i>	斜体文字
<em>	强调文字
<strong>	粗体文字
<small>	小号字体文字
<sup>	上标文字
<sub>	下标文字
<bdo>	文本显示方向 <bdo dir=”ltr”>从左向右排列</bdo> <bdo dir=”rtl”>从右向左排列</bdo>

①代码示例：

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<b>你好</b><br>

<strong>你好</strong>

</body>

</html>

结果如下：

②代码示例

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<bdo dir="ltr">从左向右排列</bdo>

<br>

<bdo dir="rtl">从右向左排列</bdo>

</body>

</html>

结果如下：

链接标签

示例代码：

target属性值：

_self	自身窗口打开
_blank	新窗口打开
_top	顶层窗口打开
_parent	父窗口打开

列表标签

<ul>无序列表

<ol>有序列表

有序列表属性：

start	1/A	从第n个开始
type	1	用数字标明序号
	A/a	用字母标明序号
	I/i	用罗马字母标明序号

示例代码：

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<ul>

  <li>语文</li>

  <li>数学</li>

  <li>外语</li>

  <li>物理</li>

</ul>

<hr>

<ol start="3" type="A">

  <li>语文</li>

  <li>数学</li>

  <li>外语</li>

  <li>物理</li>

</ul>

</body>

</html>

结果如下：

图片标签

示例代码：

表格标签

<table>的子标签：

<caption>	表格标题
<thead>	表格头
<tfoot>	表格尾
<tr>	行
<td>	格

<table>的border属性可以设置边框，学css 时再研究不迟。

示例代码：

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<table border="1">

  <caption>XXX统计表</caption>

  <thead>

    <tr>

      <td>姓名</td>

      <td>学号</td>

      <td>年龄</td>

    <tr>

  </thead>

  <tr>

     <td>小明</td>

     <td>123456</td>

     <td>20</td>

   <tr>

  <tr>

     <td>小华</td>

     <td>654321</td>

     <td>19</td>

   <tr>

  <tr>

     <td>小明</td>

     <td>147258</td>

     <td>20</td>

   <tr>

  <tfoot>

    <tr>

     <td colspan="3">@2019.1.21版权归沉沉影视所有</td>

    <tr>

  </tfoot>

</table>

</body>

</html>

结果如下：

<td>的属性：

属性	作用	示例
colspan	合并列	colspan=”3”
rowspan	合并行	rowspan=”2”

①示例代码：

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<table border="2">

  <tr>

     <td colspan="2">TD1和TD2</td>

     <td>TD3</td>

  </tr>

  <tr>

     <td>TD4</td>

     <td colspan="2">TD5和TD6</td>

  </tr>

  <tr>

     <td colspan="3">TD7和TD8和TD9</td>

  </tr>

</table>

</body>

</html>

结果如下：

②示例代码：

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<table border="2">

  <tr>

     <td rowspan="2">TD1,TD4</td>

     <td colspan="2">TD2和TD3</td>

  </tr>

  <tr>

     <td>TD5</td>

     <td>TD6</td>

  </tr>

<tr>

     <td>TD7</td>

     <td>TD8</td>

     <td>TD9</td>

  </tr>

</table>

</body>

</html>

结果如下：

特殊属性

①contentEditable:是否可编辑。

可编辑：<div contentEditable=”true”>

②hidden：隐藏标签

隐藏：<div hidden=”true”>

③spellcheek：检测是否为空提示，true或false

文档结构标签

<article>文章标签子标签：

<header>	标题 <hgroup>组织多个标题
<footer>	脚注
<section>	段落，对页面内容分块
<nar>	导航条
<aside>	边栏
<mark>	标记

示例代码：

<html>

<meta?http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<article>

  <header>文章标题</header>

  <section><mark>这是第一段</mark>这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段

      这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段

      这是第一段这是第一段这是第一段这是第一段这是第一段

      这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段

   </section>

  <section><mark>这是第二段</mark>这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段

      这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段

      这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段

  </section>

  <section><mark>这是第三段</mark>这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段

      这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段

      这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段

      这是第三段这是第三段这是第三段

  </section>

  <footer>所有解释权归沉沉影视所有@2019.01.23</footer>

  <aside>

      <h2>页面导航</h2>

     <nar><a href="">返回首页</a></nar>

     <nar><a href="">关于我们</a></nar>

  </aside>

 

</article>

</body>

</html>

结果如下：

特殊标签

标签	属性	介绍
<meter> （计数仪表）	value	当前值
	max	最大值
	min	最小值
	high	指定范围最大值
	low	指定范围最小值
<progress> (进度条)	max	最大值
<progress> (进度条)	value	当前值

表单标签

<from>标签属性

action	请求
method	提交方式
enctype	字符集
name	唯一名称
target	打开URL的方式

<input>标签属性

属性	属性值	介绍
checked	checked	被选中
disabled	disabled	禁止选中
maxlength		最大字符数
readonly	readonly	不允许用户修改
type	text	单行文本域
	password	密码框
	hidden	隐藏域
	radio	单选框
	checkbox	多选框
	color	颜色选择器
	data	日期选择器
	time	时间选择器
	datetime	UTC日期时间选择器
	week	第几周文本框
	month	月份选择器
	email	邮箱
	tel	电话
	url	链接地址
	number	数字
	range	拖动条
	file	文件上传域
	image	图像域
	submit	提交按钮
	button	无操作按钮
	reset	重置表单按钮
autofocus	autofocus	自动获取焦点
placeholder	提示文字	Input框提示信息
formaction	action值	可以设置多个按钮用来提交表单，一个formaction的值对应一个action
required	required	必填，否则提示
pattern	正则表达式	输入内容必须符合正则表达式

示例代码：

<html>

<meta?http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<form>

  <input name="uaer" type="text" placeholder="请输入用户名"><br>

  <input name="pass" type="password"  autofocus="autofocus"  placeholder="请输入密码"><br>

  <input name="login" type="submit" value="登入" formaction="login"><br>

  <input name="reg" type="submit" value="注册" formaction="regist"><br>

</from>

</body>

</html>

结果如下：

下拉菜单

<select>的子标签<option>的属性

属性	属性值	介绍
disabled	disabled	禁止选择
selected	selected	选中状态
multiple	multiple	允许多选
size		显示多个列表项

文本域

<textarea>属性

clis	文本域宽度
rows	文本域高度

多媒体标签

①音频标签示例：

<audio src=”” controls=”controls”>您的浏览器不支持audio元素</audio>

如果浏览器不支持就提示：您的浏览器不支持audio元素

②视频标签示例：

<video src=”” controls=”controls”>您的浏览器不支持video元素</video>

如果浏览器不支持就提示：您的浏览器不支持video元素

audio和video标签属性：

属性	属性值	介绍	audio	video
autoplay	autoplay	自动播放	支持	支持
controls	controls	显示播放控制条	支持	支持
loop	loop	循环播放	支持	支持
preload	auto	预加载	支持	支持
	metadata	只预加载字节、第一帧、播放列表、持续时间	支持	支持
	none	不加载	支持	支持
poster	图片地址	封面		支持
width		视频宽度		支持
height		视频高度		支持