40.HTML5：语义化标签

着互联网技术的发展，网页内容变得越来越丰富。HTML5 作为标记语言的最新标准，不仅提供了更多的功能，还引入了一系列语义化标签。这些标签使得网页内容的结构更加清晰，有助于搜索引擎优化（SEO），并提高了网站的可访问性。

语义化标签的优势

语义化标签通过提供更具描述性的元素名称，使得文档内容的结构更加明确。这样做有几个明显的优势：

提高可读性：代码的可读性得到提升，其他开发者（或未来的你）可以快速理解页面结构。
SEO 优化：搜索引擎能够更好地解析网页内容，提高网页在搜索结果中的排名。
支持无障碍访问：语义化标签有助于屏幕阅读器正确解读网页内容，使网站对视障用户更加友好。

语义化标签实例

下面，我们将通过几个例子来展示如何使用HTML5的语义化标签来构建网页。

示例1：文章结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 语义化标签示例</title>
</head>
<body>

<article>
    <header>
        <h1>HTML5 的新特性</h1>
        <p>发布日期：2023-12-17</p>
        <p>作者：张三</p>
    </header>
    <section>
        <h2>引入了新的语义化标签</h2>
        <p>HTML5 定义了一系列新的元素，用于更好地描述文档的不同部分...</p>
    </section>
    <section>
        <h2>表单控件的增强</h2>
        <p>HTML5 提供了更多的表单控件，如 date、time、email 等...</p>
    </section>
    <footer>
        <p>版权所有 ? 2023 张三</p>
    </footer>
</article>

</body>
</html>

在这个示例中，我们使用了<article>、<header>、<section>和<footer>等标签来构建一个文章的基本结构，使得文章的主体、标题、各个章节和尾注的语义更加明确。

示例2：导航菜单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>导航菜单示例</title>
    <style>
        /* 重置ul和li的默认样式 */
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            background-color: #333;
            text-align: center;
        }
        
        nav ul li {
            display: inline-block;
        }
        
        /* 设置链接的基本样式 */
        nav ul li a {
            display: block;
            padding: 10px 20px;
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
        
        /* 鼠标悬停时的样式 */
        nav ul li a:hover {
            background-color: #555;
        }
    </style>
</head>
<body>

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系我们</a></li>
        <li><a href="#about">关于我们</a></li>
    </ul>
</nav>

</body>
</html>

使用<nav>标签定义导航链接集合，这有助于搜索引擎和辅助技术确定页面中的导航部分。

在这个示例中，做了以下几点样式设置：

移除了ul和li的默认样式（比如列表前面的小圆点），并给导航栏设置了一个深色背景。
将li元素设置为inline-block，使其水平排列。
为链接（a标签）设置了基本的样式，包括背景色、字体颜色、内边距等，以及鼠标悬停时的背景色变化。

示例3：侧边栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>侧边栏示例</title>
    <style>
        /* 设置侧边栏的基本样式 */
        aside {
            width: 250px; /* 侧边栏宽度 */
            padding: 20px; /* 内边距 */
            background-color: #f4f4f4; /* 背景色 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            position: fixed; /* 固定位置 */
            top: 0; /* 顶部对齐 */
            left: 0; /* 左侧对齐 */
            height: 100%; /* 高度100% */
        }

        /* 设置标题的样式 */
        aside h2 {
            color: #333; /* 字体颜色 */
            margin-bottom: 20px; /* 与下方内容的间距 */
        }

        /* 重置列表的默认样式，并设置列表项样式 */
        aside ul {
            list-style: none; /* 移除列表项的默认样式 */
            padding: 0; /* 移除默认内边距 */
            margin: 0; /* 移除默认外边距 */
        }

        aside ul li {
            margin-bottom: 10px; /* 列表项之间的间距 */
        }

        /* 设置链接的基本样式 */
        aside ul li a {
            text-decoration: none; /* 移除下划线 */
            color: #333; /* 字体颜色 */
            font-weight: bold; /* 字体加粗 */
        }

        /* 鼠标悬停时的样式 */
        aside ul li a:hover {
            color: #007bff; /* 鼠标悬停时的字体颜色 */
        }
    </style>
</head>
<body>

<aside>
    <h2>相关文章</h2>
    <ul>
        <li><a href="#">HTML5 基础</a></li>
        <li><a href="#">CSS3 新特性</a></li>
        <li><a href="#">JavaScript 高级程序设计</a></li>
    </ul>
</aside>

</body>
</html>

<aside>标签通常用于包含页面主内容之外的内容，如侧边栏，它可以包含相关链接、广告、站点地图等。

示例4：页脚信息

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页脚信息示例</title>
</head>
<body>

<footer>
    <p>联系方式：example@example.com</p>
    <p>地址：中国某地某街道123号</p>
    <p>版权所有 ? 2023 HTML5前端工程师</p>
</footer>

</body>
</html>

<footer>标签定义了文档或节的页脚，通常包含作者信息、版权信息、联系信息等。

示例5：主要内容区域

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>主要内容区域示例</title>
</head>
<body>

<main>
    <article>
        <h1>HTML5 语义化标签</h1>
        <p>HTML5 提供了许多新的元素，用于更清晰地描述你的内容...</p>
    </article>
    <article>
        <h1>HTML5 表单特性</h1>
        <p>HTML5 为表单输入提供了多种新的类型，如 color、date 等...</p>
    </article>
</main>

</body>
</html>

<main>标签用于指定文档的主要内容，它应该是文档中最重要的内容区域，通常不包括那些在整个站点中重复出现的内容（如导航链接）。

通过上述示例，我们可以看到HTML5语义化标签如何使网页结构更加清晰，并为搜索引擎优化和可访问性提供了支持。随着技术的发展，我们有责任编写更高质量的代码，不仅为了自己，也为了创建一个更好的网络环境。

Low了，网页居然还用这么老掉牙的特效！弄个粗体字，下划线就是突出重点了？真是一股浓浓的乡村风扑面而来；弄个图在页面飘来飘去就是动画效果了，你要这么认为的话那我只能保持沉默了。在HTML5占领着整个互联网之时，想透过网页抓住所有人的眼球，因循守旧是行不通的。因此，有你不能不知道的HTML常用代码。只有熟悉掌握了常用的HTML代码，你才能在编写网页的时候做到行云流水，用处处流露着细腻和创意的动效细节打动所有人。

在这里还是要说一下我自己建的前端JavaScript学习交流群：574462090，不管你是小白还是大牛，小编我都挺欢迎，小白嘛，多问点问题也就学好了，不定期分享干货，包括最新的2017年前端学习资料，欢迎初学和进阶中的小伙伴。

html代码大全：结构性定义

文件类型<HTML></HTML> （放在档案的开头与结尾）

文件主题<TITLE></TITLE> （必须放在「文头」区块内）

文头<HEAD></HEAD> （描述性资料，像是「主题」）

文体<BODY></BODY> （文件本体）

标题<H?></H?> （从1到6，有六层选择）

标题的对齐 <H?ALIGN=LEFT|CENTER|RIGHT></H?>

区分<DIV></DIV>

区分的对齐 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文区块<BLOCKQUOTE></BLOCKQUOTE> （通常会内缩）

强调<EM></EM> （通常会以斜体显示）

特别强调<STRONG></STRONG> （通常会以加粗显示）

引文<CITE></CITE> （通常会以斜体显示）

码<CODE></CODE> （显示原始码之用）

样本<SAMP></SAMP>

键盘输入<KBD></KBD>

变数<VAR></VAR>

定义<DFN></DFN> （有些浏览器不提供）

地址 <ADDRESS></ADDRESS>

大字<BIG></BIG>

小字<SMALL></SMALL>

与外观相关的标签（作者自订的表现方式）

加粗<B></B>

斜体<I></I>

底线<U></U> （尚有些浏览器不提供）

删除线<S></S> （尚有些浏览器不提供）

下标<SUB></SUB>

上标<SUP></SUP>

打字机体<TT></TT> （用单空格字型显示）

预定格式<PRE></PRE> （保留文件中空格的大小）

预定格式的宽度<PRE WIDTH=?></PRE>（以字元计算）

向中看齐<CENTER></CENTER> （文字与图片都可以）

闪耀<BLINK></BLINK> （有史以来最被嘲弄的标签）

字体大小 <FONTSIZE=?></FONT>（从1到7）

改变字体大小 <FONTSIZE=+|-?></FONT>

基本字体大小 <BASEFONTSIZE=?> （从1到7; 内定为3）

字体颜色 <FONTCOLOR="#$$"></FONT>（$$为颜色代码）

html代码大全：修改页面的实用性HTML代码

1)贴图：<img src="图片地址">

2)加入连接：<a href="所要连接的相关地址">写上你想写的字</a>

3)在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>

4)移动字体(走马灯)：<marquee>写上你想写的字</marquee>

5)字体加粗：<b>写上你想写的字</b>

6)字体斜体：<i>写上你想写的字</i>

7)字体下划线: <u>写上你想写的字</u>

8)字体删除线: <s>写上你想写的字</s>

9)字体加大: <big>写上你想写的字</big>

10)字体控制大小：<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大，h5最小)

11)更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间

12)消除连接的下划线：<a href="相关地址" style="text-decoration:none">写上你想写的字</a>

13)贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>

14)贴flash: <embed src="flash地址" width="宽度" height="高度">

15)贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>

16)换行：<br>

17)段落：<p>段落</p>

18)原始文字样式：<pre>正文</pre>

19)换帖子背景：<body background="背景图片地址">

20)固定帖子背景不随滚动条滚动：<body background="背景图片地址" body

bgproperties=fixed>

21)定制帖子背景颜色：<body bgcolor="#value">(value值见10)

22)帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>

23)贴网页：<iframe. src="相关地址" width="宽度" height="高度"></iframe>

html代码大全：常常会遇到的问题

点击关闭窗口

<a href="javascript.:top.window.close();">点击关闭窗口</a>！

请问如何去掉主页右面的滚动条？

如何做到让一个网页自动关闭.

<html>

<head>

</object>

</head>

<body >

这个窗口会在10秒过后自动关闭,而且不会出现提示. </body>

如何在不刷新页面的情况下刷新css?

<style>

button{ color:#000000;}

</style>

<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>点击按钮直接修改style标签里button选择符使按钮改为　　红色</button>

请问如何让网页自动刷新？

在head部记入<META. HTTP-EQUIV="Refresh" c>其中20为20秒后自动刷新，你可以更改为任意值。

如何让页面自动刷新？

方法一，用refresh

HTML 代码片段如下:

<head>

</head>

5表示刷新时间

[Ctrl+A 全部选择提示:你可先修改部分代码，再按运行]

方法二，使用setTimeout控制

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

</SCRIPT>

如何让超链接没有下划线

在源代码中的<HEAD>…</HEAD>之间输入如下代码：

a { text-decoration: none}

--> </style>

请问如何去掉IE的上下滚动条？

</body>

怎样才能把RealPlayer文件在网页做一个试听连接？

如何用html实现浏览器上后退按钮的功能？

或者

html代码大全：你不一定知道的技巧

16. ncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键

　　<table borderncontextmenu=return(false)><td>no</table> 可用于Table

17. <body nselectstart="return false"> 取消选取、防止复制

18.onpaste="return false" 不准粘贴

19.oncopy="return false;" ncut="return false;" 防止复制

20. <link rel="Shortcut Icon"href="favicon.ico"> IE地址栏前换成自己的图标

21. <link rel="Bookmark"href="favicon.ico"> 可以在收藏夹中显示出你的图标

22. <inputstyle="ime-mode:disabled"> 关闭输入法

23. 永远都会带着框架

if (window==top)top.location.href="frames.htm"; //frames.htm为框架网页

// --></script>

24. 防止被人frame.

<SCRIPT. LANGUAGE=JAVASCRIPT><!--

if (top.location !=self.location)top.location=self.location;

// --></SCRIPT>

25. 网页将不能被另存为

26. 查看网页源代码

<input type=button value=查看网页源代码

onclick="window.location="view-source:"+"http://www.pconline.com.cn"">

27.删除时确认

28.屏蔽功能键Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift键!");//可以换成ALT　CTRL

}

document.onkeydown=look;

</script>

29. 网页不会被缓存

<META. HTTP-EQUIV="pragma" CONTENT="no-cache">

<META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">

<META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

或者<META. HTTP-EQUIV="expires"CONTENT="0">

30.怎样让表单没有凹凸感？

或 <input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>

31.不要滚动条?

让竖条没有:

</body>

让横条没有:

</body>

两个都去掉？更简单了

</body>

32.怎样去掉图片链接点击后，图片周围的虚线？

33.电子邮件处理提交表单

<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">

</form>

34.在打开的子窗口刷新父窗口的代码里如何写？

window.opener.location.reload()

35.如何设定打开页面的大小

打开页面的位置<bodynload="top.moveBy(300,200);">

36.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

<STYLE>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

37. 检查一段字符串是否全由数字组成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

38. 获得一个窗口的大小

document.body.clientWidth; document.body.clientHeight

39. 怎么判断是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");

else alert("全是字符");

40.TEXTAREA自适应文字行数的多少

</textarea>

41. 日期减去天数等于第二个日期

function cc(dd,dadd)

{

//可以加上错误处理

var a=new Date(dd)

a=a.valueOf()

a=a - dadd * 24 * 60 * 60 * 1000

a=new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")

} cc("12/23/2002",2)

</script>

42. 选择了哪一个Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio"value="style" checked>Style.

<INPUT name="radio1" type="radio"value="barcode">Barcode

</BODY></HTML>

43.脚本永不出错

<SCRIPT. LANGUAGE="JavaScript">

</SCRIPT>

44.ENTER键可以让光标移到下一个输入框

文末再提两点建议吧：

刚学前端JavaScript的时候，一定不要追求速成，编程不比其他传统行业，可以快速的上手，他需要一定的代码量积累起来，不然你追求速成很可能会车毁人亡。
这个文章到这里就说完了，想要前端学习资料的进我的群自助领取，已经上传到群文件里了：574462090，欢迎初学和进阶中的小伙伴。

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘前端根据地’关注后回复‘给我资料’可以领取一套完整的学习视频

用html标签使用介绍

本文主要记录常用的html标签使用说明，用起来的时候偶尔查查。

常用html标签列表

标签	英文全拼	作用	特点
?<html></html>??	html	网页的根标签	所有的标签都要写在这一对根标签里面
??<head></head>??	head	网页的头标签	包括完档的属性和信息
??<body></body>??	body	网页的主题	包含文档的所有内容
??<div></div>??	division	定义一个区域	浏览器通常会在??<div>??前后放置一个换行符
??<!-- 注释 -->??	-	注释	单标签
??<br>或<br/>??	break	换行	单标签，不会在其前后创建空白行
??<hr>或<hr/>??	horizontal rule	添加水平线	单标签
??<img src="">??	image	添加图片	单标签
??<embed src="">??	embed	嵌入外部应用	单标签
??<meta>??	meta	提供有关页面的元信息	单标签，??<meta>???标签通常位于??<head>??区域内
??<link>??	link	定义文档与外部资源的关系	单标签，??<link>???标签只能存在于??<head>??区域内，不过它可出现任何次数。
??<p></p>??	paragraph	定义段落	自动在其前后创建空白行
??<h1> to <h6>??	Header 1 to Header 6	定义标题	h1在一个页面里只能出现一次
??<strong></strong>??	strong	文本加粗	加粗标记该文本
??<b></b>??	bold	文本加粗	加粗显示文本，不推荐使用
??<em></em>??	emphasize	文本倾斜	倾斜标记文本
??<i></i>??	italic	文本倾斜	倾斜显示文本，不推荐使用
??<del></del>??	delete	文本添加删除线	-
??<s></s>??	strike	文本添加删除线	不推荐使用
??<ins></ins>??	insert	文本添加下划线	-
??<u></u>??	underline	文本添加下划线	不推荐使用
??<a href="">填写内容</a>??	anchor	添加超链接	最好使用CSS来改变链接的样式
??<ul></ul>??	unordered list	定义无序列表	通常与??<li>??标签一起使用
??<ol></ol>??	ordered list	定义有序列表	通常与??<li>??标签一起使用
??<li></li>??	list item	创建列表项	可与各种列表定义标签一起使用
??<dl></dl>??	definition list	定义描述列表	通常与??<dt>???和??<dd>??一起使用
??<dt></dt>??	definition term	定义条目	定义描述列表的项目
??<dd></dd>??	definition description	定义描述	对描述列表中的项目进行描述
??<table></table>??	table	定义HTML表格	尽可能通过样式改变表格外观
??<tr></tr>??	table row	定义表格的行	一个??<tr>???标签包含一个或多个??<th>???或??<td>??标签
??<th></th>??	table headline	定义表格每一列的标题	该标签的文本通常呈现为粗体且居中
??<td></td>??	table data	定义表格中的单元格数据	该标签的文本呈现为普通且左对齐
??<caption>表格标题</caption>??	caption	定义整个表格的标题	??<caption>???标签必须直接放在??<table>??标签后
??<input type="">??	input	定义输入控件	输入字段可通过多种方式改变，取决于type属性
??select??	select	定义下拉列表	??<select>???中的??<option>??标签定义了列表中的可用选项
??<option></option>??	option	定义下拉列表中的可用项	??<option>??标签不可自由定义宽高
??<optgroup></optgroup>??	options group	定义选项组	??<optgroup>??标签用于把相关的选项组合在一起
??<textarea></textarea>??	textarea	定义多行的文本输入控件	文本的默认字体是等宽字体
??<form></form>??	form	定义表单	??<form>??可以包含多个元素
??<fieldset></fieldset>??	field set	定义围绕表单中元素的边框	??<legend>???为??<fieldset>??定义标题
??<legend></legend>??	legend	为??<fieldset>??定义标题	??<legend>??通过css设定样式
??<progress></progress>??	progress	定义运行中的任务进度	??<progress>???是HTML5中的新标签，??<progress>??标签不适合用来表示度量衡
??<meter></meter>??	meter	度量衡	??<meter>???是HTML5的新标签，??<meter>??标签不适合用来表示进度条
??<audio></audio>??	audio	添加音频	??<audio>??标签是HTML5的新标签
??<video></video>??	video	添加视频	??<video>??标签是HTML5的新标签
??<source>??	source	定义媒介资源	??<source>??标签是HTML5中的新标签

常用标签使用说明

常用写法：??<img src="" alt="" title=""width="" height=""??>
src：图片的来源（必写属性）
alt：图像不显示时的替代文本
title：鼠标在移动到元素上的文本提示
width/height：图片宽高，没有定义宽高的时候，图片按照百分之百比例显示，更改图片的宽度或者高度，图片等比例缩放

普通用法

常用写法：??<a href="" title="" target="">填写内容</a>??
href：去往的路径（必写属性）
title：鼠标在移动到元素上的文本提示
target：规定在何处打开路径

_blank：新页面打开
_parent：在父窗口中打开链接
_self：当前页面跳转（默认值）
_top：在当前窗体打开链接，并替换当前的整个窗体

当href的值为javascript：void(0); 或 javascript：; ，表示超链接不做任何事情，不做任何跳转
当href的值为#，表示超链接为空链接，点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接，自动跳转到我们设置锚点的位置，类似于word的目录导航。建立锚点的元素必须要有id或name属性，最好两个都有。这里只跳转本页面元素，其他页面跳转自行搜索。
具体做法如下：

给目标元素设置id值，如??<p id="id1"></p>??
设置锚点超链接，锚点的超链接路径一定包含"#"，后面紧跟元素的id或者name，如??<a href="#id1"></a>??

示例如下。为了显示效果，通过使用lorem自动生成随机文本（具体使用方法搜索，一般直接输入就行），lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

常用写法： ??<meta charset="UTF-8">??
charset：定义文档的字符编码

ASCII/ANSI/Unicode：英语
GBK：亚洲通用字符集
GB2312：中文简体
Big5：台澳港繁体
UTF-8：世界通用字符集

name

关键字

常用写法： ??<meta name="keywords" content="">??
描述：告诉搜索引擎网页的关键字，尽量将重要的关键词放在前面

网页描述

常用写法： ??<meta name="keywords" content="">??
描述：告诉搜索引擎网页的主要内容

作者

常用写法： ??<meta name="author" content="">??
描述：告诉搜索引擎网页的作者

文件检索

常用写法： ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
描述：有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。
content: 文件检索方式

all：文件将被检索，且页面上的链接可以被查询（默认值）
none：文件将不被检索，且页面上的链接不可以被查询
index：文件将被检索；
noindex：文件将不被检索，但页面上的链接可以被查询
follow：页面上的链接可以被查询
nofollow：文件将不被检索，页面上的链接可以被查询

网页自动跳转

常用写法： ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
描述：网页5秒后自动跳转到谷歌主页
url：为空则刷新本页
常用写法：
描述：规定当前文档与被链接文档/资源之间的关系
rel：定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写（必写属性）
type：规定被链接文档的类型
href：链接的文件路径
示例：

链接外部样式表：??<link rel="stylesheet" type="text/css" href="a.css">??
设置网页icon图标：??<link rel="icon" href="a.ico">??

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记，我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

常用写法：??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
width：表格宽度
height：表格高度
border：边框宽度
cellspacing：单元格间距
cellpadding：内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

常用写法：??<td colspan=“” rowspan=“”></td>??
描述：告诉表格该单元格可以横跨colspan列，纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于??<input>??不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

常用写法：??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
type：规定输入字段的类型
name：输入框的名字
maxlength：输入文本长度
readonly：输入框是否只读
disabled：输入框是否未激活
value：输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

常用写法：??<input type="password" name="">??
type：规定输入字段的类型
name：输入框的名字
密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

常用写法：??<input type="radio" name="" checked="checked">??
type：规定输入字段的类型
name：输入框的名字
checked：设定该输入框被预先选定
想要多个单选框只能有一个被选中，设置所有单选框的name值相同即可实现

示例一，两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

??<select>??

常用写法：??<select multiple=""></select>??
multiple：当该属性为true时，可选择多个选项。

??<optgroup>??

常用写法：??<optgroup label=""></optgroup>??
label：设定选项组的描述。

??<option>??

常用写法：??<option value="" selected="">选项值</option>??
value：定义送往服务器的选项值。
selected：当该属性为true时，该选项被默认选择。

示例一，单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二，带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

常用写法：??<input type="checkbox" checked="">??
type：规定输入字段的类型
checked：设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

常用写法：??<textarea cols="" rows="" placeholder=""></textarea>??
cols：控制可见文本的列数
rows：控制可见文本的行数
placeholder：提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

常用写法：??<input type="file" accept=""/>??
accept：规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一，普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

与

??<progress>???与??<meter>??主要区别和用法见??HTML5 progress和meter控件??

??<progress>??

常用写法：??<progress value="" max=""></progress>??
value：规定进程的当前值
max：规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

??<meter>??

常用写法：??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
value：规定度量的当前值
max：规定被界定为高的值的范围
min：规定被界定为低的值的范围
low：规定被界定为低的值的范围
high：规定被界定为高的值的范围
optimum：规定度量的最优值
具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

??<audio>??

常用写法：??<audio src="" controls autoplay loop></audio>??
src：规定音频文件的url
controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
autoplay：如果出现该属性，自动播放音频
loop：如果出现该属性，循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

??<video>??

常用写法：??<video src="" width="" height="" poster="" controls autoplay loop></video>??
src：规定视频文件的url
width：设置视频播放器的宽度（pixels）
height：设置视频播放器的高度（pixels）
poster：设置视频未播放时展示的画面
controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
autoplay：如果出现该属性，自动播放音频
loop：如果出现该属性，循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

??<source>??

常用写法：??<source src="" type="">??
src：规定媒体文件的url
type：规定媒体文件的类型
因为不同浏览器支持的媒体格式不同，当添加媒体文件时，需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件，然后使用source 标签，让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

??HTML特殊字符编码对照表??

参考

??HTML基础??
??HTML 参考手册??
HTML中标签对应的英文
meter标签改变颜色规则
HTML5 progress和meter控件

在线咨询

上一篇：javascript中typeof的总结
下一篇：编程技巧：Jquery实时验证，指定长度的「正整数」

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

40.HTML5：语义化标签

语义化标签的优势

语义化标签实例

示例1：文章结构

示例2：导航菜单

示例3：侧边栏

示例4：页脚信息

示例5：主要内容区域

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘前端根据地’关注后回复‘给我资料’可以领取一套完整的学习视频

用html标签使用介绍

常用html标签列表

常用标签使用说明

列表

表格

与

多媒体资源

特殊字符

参考

您的项目需求