2.1 HTML5文档结构:

  • HTML5文档结构包括头部(head)、主体(body)两大部分。

2.1.1<!DOCTYPE>声明

引用官方的DTD文件,在HTML5之前版本,如xHTML、HTML4.0都有官方的DTD文件引用,DTD是文件类型定义,主要对标签的使用进行定义。基于HTML5“化繁为简”准则,不需要引用严格意义上的DTD规范,只需引用<!DOCTYPE html>代码即可。

2.1.2 <html>标签

html文档的根元素,成对出现,代表文档的开始和结束。

2.1.3 <head>标签

<head></head>                              文档的头部标签,为所有头部元素的容器,<head>中元素可以引用脚本、指示浏览器在哪里找到样式表,提供元信息等
<title></title>                             用于定义文档标题,只能出现在<head>中
<meta> 用于定义html元数据
<link rel="stylesheet" href=""> 引用外部文件标签,通常放置在头部标签<head>中,用于连接外部CSS资源文件
<style></style> 为内嵌样式标签,位于<head>中,用于定义内部CSS样式

2.1.4<meta>标签

设置页面关键字——用于告诉搜索引擎网页的关键字
<meta name="keyword" content="某人,论坛,学历,前端">
用于告诉搜索引擎网站的主要内容
<meta name="description" content="web前端的一些面试技巧">
用于介绍作者的一些信息
<meta name="author" content="某人,邮箱">
设置网页的定时跳转
<meta http-equiv="Refresh" content="";URL=""> /*content后跟值为当前页面在多少时间跳转,URL值为跳转到具体的网页网站*/

2.1.5 <body>标签

body标签是HTML的主体部分,网页所需显示内容都放在该标签内。

2.2 HTML5标签、元素及属性

HTML网页实际由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。

HTML元素就是通过HTML标签进行定义的。

2.2.1标签

1.单标签

<br>                       换行
<hr> 创建一条水平线
<meta> 元素可提供有关页面的元信息
<img src="" alt=""> 图片标签,用于页面插入图片

2.双标签

<h1></h1>     标题标签
<p></p> 段落标签
<ul></ul> 无序列表标签
<table></table>表格标签

3.

  • 标题标签:<h1>-<h6>,<h1>标签代表1级标题,级别最高,文字最大其他标签依次递减;

标题字对齐属性:align

center:    居中对齐;

left:     左对齐内容;

right:    右对齐内容;

justify:    对行进行伸展,每行都可有相同长度

  • 段落标签:<p>
  • 换行标签:<br>                   将文字在一个段内强制换行,一个<br>代表换行一次
  • 不换行标签:<nobr>            不换行内容放在<nobr><nobr/>之间;<nobr><nobr/>之间遇到<br>换行标签,内容将自动换行;
  • 水平线标签:<hr>                 将上下内容分隔开
  • 插入空格:&nbsp;
  • 插入特殊字符:“&”开头,“;”结尾,中间加上特殊字符对应编码即可,特殊字符对应编码链接: https://www.jb51.net/onlineread/htmlchar.htm

2.2.2 标签属性

  • <标签名 属性名1=“属性值1” 属性名2=“属性值2” ……>内容部分</标签名>   两个不同的属性之间不需要分号
  • <p style="color:red;font-size:20px;background-color:white"> style属性中的不同设置需要分号

2.2.3 元素

<p>HTML</p>       开始标签到结束标签所有代码,为HTML元素
位于起始标签和结束标签之间的文本为HTML元素内容

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

  1. HTML介绍、文档基本结构、meta标签、HTML标记的语法

    一.HTML的介绍 Hyper Text Mark-up Language 超文本标记语言,是一种描述性标记语言(不是编程语言),主要用于描述网页(可以有图像,文字,声音,等..)但没有交互性 HTM ...

  2. 深入分析MFC文档视图结构(项目实践)

    k_eckel:http://www.mscenter.edu.cn/blog/k_eckel 文档视图结构(Document/View Architecture)是MFC的精髓,也是Observer ...

  3. MFC单文档程序结构

    MFC单文档程序结构三方面: Doc MainFrame View

  4. MFC 构建、消亡 顺序 (二)--多文档 (MDI)

    MFC 构建.消亡 顺序 (二)--多文档 (MDI) by:http://www.cnblogs.com/vranger/ (一)MDI 生成顺序 (二)打开文档-“Open” (三)新建文档-“N ...

  5. MFC文档视图结构学习笔记

    文档/视图概述 为了统一和简化数据处理方法,Microsoft公司在MFC中提出了文档/视图结构的概念,其产品Word就是典型的文档/视图结构应用程序 MFC通过其文档类和视图类提供了大量有关数据处理 ...

  6. 使用ABBYY FineReader 手动校正文档复杂结构

    ABBYY FineReader 15(Windows系统)拥有强大的OCR识别功能,能对扫描仪或者数码相机等光学工具获取的图像进行识别,解析其中的文本.图像.表格.条形码等,方便用户进一步获取图像中 ...

  7. XML 文档的结构

    XML 文档的组成 一个XML文档由两部分构成:第一部分是文档序言,第二部分是文档元素(节点). 1.文档序言 文档序言通常位于XML文档的顶端,根元素之前出现,它是一个特定的包含XML 文档设定信息 ...

  8. .Net Core3.0 WebApi 项目框架搭建 二:API 文档神器 Swagger

    .Net Core3.0 WebApi 项目框架搭建:目录 为什么使用Swagger 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染.后端分离的形态,而且前端技术和后端技 ...

  9. MongoDB_文档存储结构(三)

    MongoDB 文档数据库的存储结构分为四个层次,从大到小依次是:数据库(database).集合(collection).文档(document).键值对. 图 1 描述了 MongoDB 与 My ...

随机推荐

  1. 由反转链表想到python链式交换变量

    这两天在刷题,看到链表的反转,在翻解体思路时看到有位同学写出循环中一句搞定三个变量的交换时觉得挺6的,一般用的时候都是两个变量交换(a,b=b,a),这种三个变量的交换还真不敢随便用,而且这三个变量都 ...

  2. Java网关服务-AIO(三)

    Java网关服务-AIO(三) 概述 前两节中,我们已经获取了body的总长度,剩下的就是读出body,处理请求 ChannelServerHandler ChannelServerHandler即从 ...

  3. JUC---04Lock(二)ReentrantReadWriteLock

    1.读写锁 分为读锁和写锁,多个读锁不互斥,读锁与写锁互斥,这是由jvm自己控制的,你只要上好相应的锁即可.如果你的代码只读数据,可以很多人同时读,但不能同时写,那就上读锁:如果你的代码修改数据,只能 ...

  4. AtCoder 1807 食塩水

    题意 有 \(n\) 瓶食盐水,第 \(i\) 瓶为质量 \(w_i\),浓度 \(p_i\%\) 的食盐水,需要选出 \(k\) 瓶食盐水混合在一起,问最大浓度. \(\texttt{Data Ra ...

  5. Java学习的第二十九天

    1. 如果类中的某个属性不希望被序列化则需要transient关键字 序列化一组对象 2.无问题 3.明天学习打印流

  6. Java学习的第十九天

    1.今天学了接口只能有抽象的常量和方法,接口为interface    承接接口是implements 接口的使用 接口中的方法必须是抽象的,没有构造方法 2.今天没有问题 3.明天学习第六章综合实例 ...

  7. 关于python递归函数,这样写就对了

    大家好我是致力于让每个人都能够轻松学会编程的小梁,在这条路上任重道远,关注我,每天让您获取来自编程的乐趣. 关注公众号"轻松学编程".了解更多. 今天就给大家分享一下关于使用递归函 ...

  8. Miller-Rabin 素数检验算法

    算法简介 Miller-Rabin算法,这是一个很高效的判断质数的方法,可以在用\(O(logn)\) 的复杂度快速判断一个数是否是质数.它运用了费马小定理和二次探测定理这两个筛质数效率极高的方法. ...

  9. 使用Apache Hudi + Amazon S3 + Amazon EMR + AWS DMS构建数据湖

    1. 引入 数据湖使组织能够在更短的时间内利用多个源的数据,而不同角色用户可以以不同的方式协作和分析数据,从而实现更好.更快的决策.Amazon Simple Storage Service(amaz ...

  10. Java_基础(二)

    思想 面向过程的思想: 怎么按步骤把问题解决, 并将步骤编程方法, 一步一步事项, 适合简单不需要协作的任务 面向对象的思想: 怎么设计这个事务 区别与联系 都是解决问题的思维方式, 都是代码组织的方 ...