配置：在vs code中声明页面为html，然后添加open in browser，view in browser插件通过快捷键alt+b实现在浏览器中查看编写好的html界面

基本成分：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

</body>

</html>

1.编写HTML5页面开头的步骤

  1. 输入<!DOCTYPE html>，声明页面为HTML5文档
  2. 输入<html lang=" ">声明页面默认使用的语言
  3. 输入<head>开始网页文档的头部
  4. 输入meta元素声明字符编码
  5. <title></title> 包含页面的标题
  6. 输入</head>，结束页面文档的头部
  7. 输入<body>,开始页面的主体
  8. 为页面预留一些空行
  9. 输入</body>,结束主体
  10. 输入</html>,结束页面

2.创建分级标题

HTML提供了六级标题用于创建页面信息的层次关系：

h1,h2,h3,h4,h5,h6 级别由高到低

注意：

  • 创建分级标题时，要避免跳过某些级别，如从3到5，不过允许从低级别跳到高级别
  • 不要使用h1~6标记副标题，标语以及无法成为独立标题的子标题

使用header创建页眉——包括网站标志，主导航和其他全站链接，甚至搜索框

<body>

<header role="banner">

    <nav>

        <ul>

            <li><a href="#gaudi">Barcelona's Architect</a></li>

            <li lang="es"><a href="#sagrada familia">La Sagrada Familia</a></li>

            <li><a href="#park-guell">Park Guell</a></li>

        </ul>

    </nav>

</header>

</body>

注意：

  • 只在必要时使用header
  • header与h1~h6元素中的标题是不能互换的，它们都有各自的语义目的
  • 不能在header里嵌套footer元素或另一个header，也不能在footer或address元素里嵌套header

3.标记导航

对页面中的重要链接群使用nav：

  1. 输入<nav>
  2. 输入一组链接并将其标记为ul（无序列表），ol（有序列表）结构
  3. 输入</nav>

4.标记页面的主要区域

一个页面只有一个部分代表其主要内容，可以将这样的内容包在main元素中，该元素在一个页面仅使用一次，最后在main开始标签加上role=“main”

注意：

  • 如果创建的是Web应用，则使用main包围其主要的功能
  • 不能将main放置在article，aside，footer，header，nav元素中

5.创建文章

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

步骤：

  1. 输入<article>
  2. 输入内容，可以包含任意数量的元素，类型包括段落，列表，音频，视频，图像，图形等
  3. 输入</article>

注意：

  • article可以嵌套使用
  • 一个页面可以有0或多个article
  • 一个article可以包含一个或多个section元素

6.定义区块

section元素：“通用的”区块，标记页面中的特定区域

定义区块的步骤：

  1. 输入<section>
  2. 输入区块的内容
  3. 输入</section>

注意：

如果只是出于添加样式的原因要对内容添加一个容器，应使用div而不是section

7.指定附注栏

aside元素

注意：

  • 在HTML中，应该将附注栏内容放在main的内容之后，通过CSS改变它们在浏览器中的显示顺序
  • 对于与内容有关的图像（如图表，图形或带有说明文字的插图），使用figure而非aside
  • HTML5不允许将aside嵌套在address元素内

8.创建页脚

footer元素

注意：不能在footer里嵌套header或另一个footer。同时，也不能将footer嵌套在header或address元素里。

只能对页面级的footer使用role="contentinfo",且一个页面只能使用一次

9.创建通用容器div

10.使用ARIA改善可访问性

一些可用的地标角色：

  • role="banner"(横幅):添加到页面级的header元素，每个页面只用一次
  • role="navigation"(导航):与nav元素是对应关系，将其添加到每个nav元素，或其他包含导航性链接的容器
  • role="main"(主体）:最好添加到main，也可以添加到其他表示主体的元素
  • role="complementary"(补充性内容):添加到aside或div元素（前提是仅包含补充性内容）
  • role="conteninfo"(内容信息):添加至整个页面的页脚（footer），每个页面仅使用一次

11.为元素指定类别或ID名称

可以给HTML元素分配唯一的标识符（ID），或指定其属于某个（或某几个）类别，也可以同时指定标识符和类别

（1）为元素添加唯一的ID

id=“name”

（2）为元素指定类别的方法

class=“name”或class=“name  anothername”（可以指定两个以上的类别名称）

12.为元素添加title属性

使用title属性为网站上任何部分加上提示标签，用的最多的是链接

13.添加注释

步骤：

  1. 输入<!--
  2. 输入注释
  3. 输入-->结束注释文本

基本HTML结构的更多相关文章

  1. 【.net 深呼吸】细说CodeDom（1）：结构大观

    CodeDom 是啥东东?Html Dom听过吧,XML Dom听过吧.DOM一般可翻译为 文档对象模型,那 Code + DOM呢,自然是指代码文档模型了.如果你从来没接触过 CodeDom,你大概 ...

  2. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. Python学习--04条件控制与循环结构

    Python学习--04条件控制与循环结构 条件控制 在Python程序中,用if语句实现条件控制. 语法格式: if <条件判断1>: <执行1> elif <条件判断 ...

  4. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  5. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  6. ElasticSearch 5学习(10)——结构化查询（包括新特性）

    之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...

  7. ASP.NET Core应用针对静态文件请求的处理[4]: DirectoryBrowserMiddleware中间件如何呈现目录结构

    和StaticFileMiddleware中间件一样,DirectoryBrowserMiddleware中间本质上还是定义了一个请求地址与某个物理目录之间的映射关系,而目标目录体现为一个FilePr ...

  8. Go结构体实现类似成员函数机制

    Go语言结构体成员能否是函数,从而实现类似类的成员函数的机制呢?答案是肯定的. package main import "fmt" type stru struct { testf ...

  9. CRL快速开发框架系列教程十(导出对象结构)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  10. Javacript实现字典结构

    字典是一种用[键,值]形式存储元素的数据结构.也称作映射,ECMAScript6中,原生用Map实现了字典结构. 下面代码是尝试用JS的Object对象来模拟实现一个字典结构. <script& ...

随机推荐

  1. 适用于移动设备弹性布局的js脚本(rem单位)

    背景介绍 目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆.以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用 ...

  2. Go 1.11 Module 介绍

    title: "Go 1.11 Module" date: 2018-10-26T23:50:56+08:00 draft: false --- Go 1.11 Module 介绍 ...

  3. 【转载】许纪霖教授在上海财经大学演讲——漫谈“大学生的四个Learn”

    这几年,越来越多的大学毕业生抱怨找不到合意的工作.很多单位又感叹,找一个称职的大学生真难.这就形成一个非常大的反差和矛盾.那么,社会究竟需要怎样的大学生?我们的大学到底应该培养怎样的大学生?我们作为大 ...

  4. 详解vuex

    一.vuex的作用: vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式变化. 作用:组件之间的通信,大规模的逻 ...

  5. Android 开发 values目录里定义数组、颜色、文本、尺寸xml配置文件并且获取数据 附录Android符号转码表

    以下xml都在res/values/文件夹下创建 创建String类型array: /app/src/main/res/values/array.xml <?xml version=" ...

  6. PHP语言入门的学习方法十要素

    对于PHP程序设计语言来说.每个人的学习方式不同,写这篇文章的目的是分享一下自己的学习过程,仅供参考,不要一味的用别人的学习方法,找对自己有用的学习方式.经常在某些论坛和QQ群里看到一些朋友会问“怎样 ...

  7. C#解析json和xml数据

    C#解析json和xml数据 // 用到的包using Newtonsoft.Json; // using Newtonsoft.Json.Linq; const string value = &qu ...

  8. 分组密码算法AES-128,192,256 C语言实现第一版

    AES的C语言实现入门版 AES分组密码算法中明文分组位128bits,密钥分组可以为128,192,256bits.AES也是由最基本的变换单位——“轮”多次迭代而成的.我们将 AES 中的轮变换计 ...

  9. 0 Python学习计划

    每天一小节,坚持水滴石穿. 2019-4-1 景略

  10. 关于Float.parseFloat()的一点探讨

    最近在解决线上的bug时,遇到一个问题. 第三方传过来的课程编码时4214410000,然而我们存进数据库的值却变成了4214409980.查遍了所有的代码都查不到有对这个值修改的代码.最后,通过打印 ...