基础篇
HTML文件结构 页面属性标记 常用页面元素标记 表格 表单
1
2.1 HTML文件结构
标记及属性 HTML文件结构
2
① 标记及属性
文件结构
标记：为了使所要显示的内容达到一定的效果，在内容中加入 的特定标识。
<标记>受标记影响的内容</标记>
每个标记都用“<”（小于号）和“>”（大于号）围住。 注意：“<”、“>”与标记之间不能留有空格或其他非标记字符 在标记前加 “/”是结束标记 标记字母不区分大小写 对同一段要标记的内容，可以使用多个标记来共同作用，各 个标记间的顺序是任意的。
用 签hgroup包<住h2，>和HT其ML他文5<章/h元2数> 据一起放入header标 </hgroup>
nav元素
• nav元素代表页面的导航链接区域。用于定义页面的主要
导航部分。
• 规范上说nav只能用在<页na面v>主要导航部分上。页脚区域中
的链接列表，虽然指<向u不l>同网站的不同区域，譬如服务
<section>
<article></article>
<article></article>
</section>
<aside></aside>
<footer></footer>
</body>
</html>
8
header元素
• header 元素代表“网页”或“section”的页眉。
– 通常包含h1-h6元素或hg<rohuepa，d作e为r>整个页面或者一个内容块的 标题。也可以包裹一节的<h目g录ro部u分p，> 一个搜索框，一个nav， 或者任何相关logo。 <h1>网站标题</h1>
hgroup元素
• hgroup元素代表“网页”或“section”的标题，当元 素有多个层级时，该元素可以将h1到h6元素放在其内， 譬如文章的主标题和副标题的组合
• hgroup使<用h注gr意o：up>
• 如果只需要一个h1-h6标签就不用hgroup
• 如果有连<续h多1>个这h1是-h6一标签篇就介用绍hgHroTuMpL 5语义化标 • 如果有连签续多和个更标简题洁和的其他结文构章<数/h据1，> h1-h6标签就
<body>…<body>：网页的正文。
5
常用的头部标记
常用的头部标记内容 <Title ></title>
•<title>Title of the document</title> <link></link>
•<link rel="stylesheet" href="style.css" /> <meta> </meta>
• 整个页面没有限制head<ehr元1>素网的站个副数标，可题以</拥h有1>多个， • 可 he以ad为er使每用个注内意容：块增加<一/h个ghreoaudper>元素
– 可以是“网页”或任意“<se/chtioena”d的er头>部部分；
– 没有个数限制。 – 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
Html 5页面一般框架
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>HTML5 Demo</title>
<body>
<header><h1></h1><h2></h2></header>
<nav><ul><li></li><li></li></ul></nav>
•<meta charset="utf-8">
Html 5页面一般框架
• 便于维护和修改,对搜索引擎更友好,预留扩展,无障碍 浏览功能
• 分区级语义元素
– Article – Aside – figure figcaption – footer – header – hgroup – nav – section
• section通常还带标<题ar，ti虽c然leh>tml5中section会自动给标题h1-h6降级， 但是最好手动给他<们h2降>关级于。如se下ct：ion</h2>
• 示例代码section使<p用>s注ec意t：ion的介绍</p> • 一张页面可以用<sesceticotni划o分n>为简介、文章条目和联系信息。不过在文
<title>网页的标题</title>
</head>
<body>
网页的内容
</body>
</html>
以<HTML>开头，以</HTML>结尾。
包括头部（Head）和主体（Body）两大部分。
<head>…</head>：网页的题头，说明文件命名与文件本身 的相关信息。
<title>…<title>：网页标题，在浏览器的标lotier>元H素T就M能L够用5了< 。/ l i >
• nav使用注意：
<li>CSS3</li> <li>JavaScript</li>
• 用在整个页面主要导<航/部ul分>上，不合适就不要用nav元素；
</nav>
article元素
• article元素最容<a易rt跟icsleec>tion和div容易混淆，其 实article代表一<h个1>在一文篇档文，章页</面h1或> 者网站中自 成一体的内容<，p>其文目章的内是容为..了</让p>开发者独立开 发或重用。譬<如fo论ot坛er的> 帖子，博客上的文章， 一篇用户的评<论p>，一个互动的widget小工具
3
文件结构
属性：标记通过属性来精确控制信息，以便制作出各种效果。
<标记 属性１＝属性值 属性２＝属性值…>内容</标记>
并不是每个标记都有属性。 可以根据需要使用标记的所有属性或几个属性，属性之间没 有顺序。 属性和标记一样，也不区分大小写。
4
② HTML5基本框架
<html>
文件结构
<head>
版权：html5jscss网所属，作 • 除了它的内容者，：arXtXicXle会有一个标题（通常会
在header里）<，/p会> 有一个footer页脚。 </footer>
</article>
section元素
• section元素代表文<s档ec中ti的o“n>节”或“段”，“段”可以是指一篇文章 里按照主题的分<段h；1>“se节c”ti可on以是是啥指？一<个/h页1面> 里的分组。
