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

HTML5标签整理

时间:2019-01-23 17:22:12      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:font   mit   xxx   pat   targe   高度   mail   controls   语文   

 

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>

  

结果如下:

 

链接标签

示例代码:

<a href=”www.baidu.com” target=””>我是链接</a>

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>

  

结果如下:

 

图片标签

示例代码:

<img src=”图片地址” alt=”提示信息” height=”图片高度” width=”图片宽度”/>

 

表格标签

<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:检测是否为空提示,truefalse

文档结构标签

<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

最大值

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元素

audiovideo标签属性:

属性

属性值

介绍

audio

video

autoplay

autoplay

自动播放

支持

支持

controls

controls

显示播放控制条

支持

支持

loop

loop

循环播放

支持

支持

 

preload

auto

预加载

支持

支持

metadata

只预加载字节、第一帧、播放列表、持续时间

支持

支持

none

不加载

支持

支持

poster

图片地址

封面

 

支持

width

 

视频宽度

 

支持

height

 

视频高度

 

支持

 

HTML5标签整理

标签:font   mit   xxx   pat   targe   高度   mail   controls   语文   

原文地址:https://www.cnblogs.com/fangyunchen/p/10309237.html

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