`
sharis1987
  • 浏览: 12305 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

3.基本的html结构

阅读更多

3.1开始编写网页

 每个html文档都包含以下基本成分:
  DOCTYPE
  html元素(包含lang元素,该属性不是必须的)
  head元素
  说明字符编码的meta元素
  title元素
  body元素
 
<!DOCTYPE html><!-- 该标记告诉浏览器该html的版本,此处声明为html5文档-->
<html>
<head><!-- 页面头部 -->
<meta charset="utf-8">
<title>示例1</title> <!-- 页面标题 -->
</head><!-- 结束页面头部 -->
<body><!-- 页面体 -->
 
</body><!-- 结束页面体 -->
</html>
 

3.2 创建页面标题

 每个页面都必须有一个title元素。每个页面的标题都必须是简短的,描述性的,唯一的。页面标题会被google等搜索引擎采用。
 title中不能包含任何格式,html,图像或指向其他页面的链接
 

3.3 创建分级标题

 html提供了6级标题:h1到h6元素对标题进行标记。h1是最高级别的标题,以此类推
 

3.4理解html5的文档大纲

 html5提供了四个分块内容:article,aside,nav,section。这些元素将文档划分为不同的区块,并定义了h1-h6(包括header,footer)元素的范围。
 这意味着每个分块元素都有它自己的h1~h6层次结构,每个页面都可以有1个以上的h1
 

3.5 对分级标题进行分组

使用hgroup对标题进行分组,用于指明标题是相关的
<hgroup>
 <h1>测试一级</h1>
 <h2>测试二级</h2>
</hgroup>
hgroup至少包含两个标题,只有第一个最高级别的标题出现在文档大纲里,但都会显示在网页上
 

3.7创建页眉

 如果页面中有一块包含一组介绍性或导航行内容,应该用header对其进行标记,一个页面可以有多个header
 不能再header里包含footer或者另一个header,也不能在footer或adderess元素中嵌套header
 

3.8 标记导航

 <header>
 <nav role="navigation">
  <a href="#">导航</a>
 </nav>
 </header>
html5不允许nav嵌套在address元素中
 

3.9 article

article是html5新增的元素,表示文档,页面,应用或网站中一个独立的容器,原则上是可以独立分配或可再用的。
 

3.10 定义区块

 section:html5的新元素表示文档或应用的一个一般的区块
 section是四个分块内容元素中一个,其余三个是nav,article,aside
 section不是像div一样的通用容器,它有一定的含义,div没有
 
 section与article的区别:如果内容适合用作聚合的一块独立的内容或一个小组件,就是用article,否则用section
 

3.11 指定侧栏

aisde元素:当有一部分内容与页面的主体内容不那么相关时使用
<aside role="complementary">
 侧边栏
</aside>
 

3.12 创建页脚

footer代表嵌套它的最近的article、aside、blockquote,body,details,fieldset,figure,nav,section,td的页脚,只有离它最近的是body时,才是整个页面的页脚
不允许footer中嵌套header或footer,不允许footer嵌套在header中或address中
 

3.14 创建通用容器

div:默认从新的一行开始,也是无语义区块元素
 

3.15 为元素指定类或id名称

1)在元素的开始标记中输入ID="值" id是唯一标识
2)为元素指定类别的方法
 class="值" ,一个元素可以有一个以上的class
id 属性会自动降钙元素转化为锚,从而可以创建指到这里的链接。
 

3.17添加注释

 
 <!--注释-->
分享到:
评论

相关推荐

    d3.min.js d3.js

    4. 布局算法:D3包含多种布局算法,如树状图布局、力导向图布局、饼图布局等,帮助开发者快速构建复杂的数据结构可视化。 5. 图形生成:D3可以生成各种基本图形,如线图、柱状图、散点图等,并支持自定义样式和交互...

    HTML5文档基本结构.pdf

    HTML5 文档基本结构 HTML5 文档基本结构是指 HTML5 文件的基本框架和结构。这个结构是 HTML5 文档的基础,确定了 HTML 文档的轮廓和浏览器的初始环境。HTML5 文档基本结构由多个元素组成,包括文档类型声明、HTML ...

    jQuery+d3横向树型股份结构图特效

    1. `index.html`:这是网页的主体,包含HTML结构和引用外部资源(如CSS和JavaScript文件)的链接。 2. `js`目录:存放JavaScript代码,其中应该包括jQuery库和自定义的JavaScript代码,用于处理数据和实现特效。 3. ...

    HTML语言基础,基本结构

    在HTML语言基础中,理解其基本结构至关重要,这包括HTML文档的头部、主体部分以及如何插入多媒体元素如图片和音乐。 一、HTML文档的基本结构 一个基本的HTML文档由以下几部分构成: 1. 文档声明:文档开头的`&lt;!...

    金鹰asp超速入门视频教程-015.基本结构和语法.rar

    在ASP中,基本结构通常包括HTML代码和嵌入其中的脚本语言,如VBScript或JScript。HTML负责页面的布局和静态内容,而脚本语言则处理动态数据和用户交互。在015课中,你将学习到如何设置ASP页面的基本结构,包括`&lt;% %&gt;...

    网页的基本结构.pdf

    网页的基本结构是指 HTML(HyperText Markup Language)文档的基本组成部分。它是网页的骨架,决定了网页的整体结构和布局。一个基本的 HTML 文档结构通常包括以下部分:&lt;html&gt;、、、等。 1. &lt;html&gt;:HTML 文档的根...

    JSP页面的基本结构.pptx

    JSP页面的基本结构 JSP(JavaServer Pages)是一种基于Java技术的动态网页生成技术,允许开发者在网页中嵌入Java代码,以生成动态内容。JSP页面的基本结构是指JSP页面的基本组成部分,包括页面指令、脚本元素、...

    数据结构与算法综合资料库.rar

    1. **基础知识**:数据结构的基本概念、分类及其应用。 2. **算法详解**:各种算法的工作原理、实现步骤和时间复杂度分析。 3. **源代码示例**:为每种数据结构和算法提供实际的编程实现,可能是C、C++、Java或...

    html 框架结构.pdf

    框架3内容.html"&gt; &lt;!-- 更多框架 --&gt; ``` **说明**:嵌套分割窗口允许在一个框架内部进一步划分出其他的框架。这对于构建复杂且功能丰富的网站是非常有用的。 以上介绍了HTML框架结构的基础知识及其应用,...

    jQuery组织结构图表插件OrgChart.zip

    1. `index.html`:这是示例页面,包含了基本的HTML结构和jQuery以及OrgChart插件的引用。通过查看这些文件,我们可以了解如何在网页中嵌入和初始化OrgChart。 2. `index2.html`, `index3.html`, `index4.html`:...

    某马机构----HTML基本结构.rar

    在这个名为"某马机构----HTML基本结构.rar"的压缩包文件中,我们可以期待学习到关于HTML的基本构成和HTML5的新特性。 首先,让我们深入了解HTML的基本结构。一个标准的HTML文档通常由以下部分组成: 1. **文档声明...

    pycharm配置python环境-07-html的基本结构.ev4.rar

    在本资源中,我们主要探讨如何使用PyCharm配置Python环境以及HTML的基本结构。PyCharm是一款强大的集成开发环境(IDE),特别适合Python编程。它提供了丰富的功能,如代码编辑、调试、性能测试和版本控制,是Python...

    html文件结构.pdf

    HTML文件的基本结构由一系列标签组成,这些标签定义了网页的各个部分及其内容。在给出的文件中,主要介绍了HTML的基本结构、语法、文件头标签、文件内容标签、文字格式和一些特殊效果。 一、HTML文件基本结构 HTML...

    vued3treeVUE实现自定义节点的树结构

    本项目"vued3treeVUE实现自定义节点的树结构"是基于Vue.js和D3.js的一个示例,旨在展示如何在Vue中利用D3库创建可自定义的树形数据结构。D3.js是一个强大的数据可视化库,它允许开发者通过数据操作DOM(文档对象模型...

    HTML5参考手册-合集.chm

    4. **HTML_2.chm**:可能是对早期HTML版本的介绍,包括HTML1和HTML2,它们奠定了Web页面的基本结构,比如简单的文本样式、超链接等。 5. **HTML4.01 & XHTML1.0参考手册.chm**:HTML4.01和XHTML1.0是HTML4的两个...

    html-5-css-3实训报告,html5和css3知识总结.docx

    HTML5 和 CSS3 是当前 web 开发中最重要的两个技术栈,本文将对 HTML5 和 CSS3 的基本概念、语法、应用场景进行总结和分析。 HTML5 基础知识点 1. HTML5 的文件结构:HTML 文件通常由 head 和 body 两个部分组成,...

    HTML5_canvas绘制动态树视图 类似结构图.rar

    这个"HTML5_canvas绘制动态树视图 类似结构图.rar"压缩包包含了一个利用Canvas实现的动态树形视图示例,它能帮助我们理解如何用HTML5的Canvas API构建交互式的数据可视化应用。 在Canvas上绘制动态树视图,首先需要...

    Data Visualization with D3.js

    3. **HTML布局**:D3.js可以用来通过HTML结构来安排图表元素的位置和层次。 4. **CSS样式应用**:如何用CSS为数据可视化添加样式,让图表更加吸引人和易于理解。 5. **使用数据结构**:D3.js强大的数据处理能力,...

    3d照片墙html5.

    2. 编写HTML结构:使用HTML5元素构建基本的页面结构。 3. 使用CSS3进行样式设计:控制照片墙的外观,如边框、阴影、过渡和动画效果。 4. JavaScript编程:利用`&lt;canvas&gt;`或WebGL等技术实现3D效果,处理用户交互,如...

Global site tag (gtag.js) - Google Analytics