03-HTML文档和标签

目录

一.概述

1.HTML文档

(1)使用HTML标签编写的文件,称作"HTML文档".

(2)特性:

①纯文本格式

使用记事本软件打开,能正常查看其中的内容.

注意:

记事本的作用在于查看纯文本的内容,不会渲染标签;浏览器才会渲染标签,标记语言所做的标记就是给浏览器解析用的.

②扩展名

  • *.html
  • *.htm

注意:

*.htm是因为曾经的操作系统要求扩展名长度不能大于3,属于历史遗留问题.

2.HTML标签

(1)概念

HTML文档中每一修饰内容语义的字符串,称作"标签".

HTML标记标签通常被称为HTML标签(HTML tag).

(2)标签的作用

不同的标签,代表不同的语义.

(3)标签的格式

  • 单标签:<标签名称 属性名1="值1" 属性名2="值2">.
  • 双标签:<开始标签 属性名1="值1" 属性名2="值2"> 内容 </结束标签>.

(4)注意

  • 标签是固定的一些,开发人员无法随意增加或修改.
  • 单标签,后面的/可以省略,一般按照编辑器的语法提示即可.
  • 不同的HTML版本,对应的标签集会有所变化.

二.文档结构

HTML文档的基本结构

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
    </body>
</html>

说明

1.DTD文档声明

(1)由于HTML版本众多,不同的版本之间可能存在着较大的差异,所以为了防止解析器解析错误,就使用DTD来声明文档版本.

(2)不同的版本有不同的版本声明规范

  • 分类
    • HTML
      • Strict(严格的,一些标签禁止使用)
      • Transitional
      • Frameset
    • XHTML

(3)注意

①HTML5的声明规范向下兼容,因此只使用<!DOCTYPE html>即可.

②必须写在文档的第一行.

③大小写不敏感.

③不是HTML标签.

④该声明可以省略,因为浏览器有自己的识别机制,但是规范要求,所以尽可能地不省略.

(4)详细

http://www.w3school.com.cn/tags/tag_doctype.asp

http://www.w3school.com.cn/html/html_doctype.asp

2.<html>

(1)此元素可告知浏览器其自身是一个HTML文档,所有的标签都写在它的内部.

(2)常用属性

  • lang:自带翻译功能的浏览器会根据该属性判断是否需要弹出自动翻译功能.
    • en:主体语言是英文.
    • zh-CN:主体语言是中文.

3.<head>

(1)设置网站配置信息

  • 站点图标
  • 标题
  • 网站的SEO相关信息
    • 关键字
    • 描述信息
    • ...
    • 例如:
      • <meta charset="UTF-8">
      • <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
      • <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
  • 加载外部的css文件或者js文件
  • ...

(2)其中的内容一般不会展示给用户查看.

(3)内部常用子标签

  • <title>
    • 显示在浏览器标签当中的标题,也会在网页被收藏时,作为收藏的标题.
  • <meta>
    • 这个标签用来描述HTML文档的属性
    • 例如
      • <meta charset="UTF-8">
        • 网页出现乱码,是因为存储时和取出时使用的字符集不同.
        • 解决方法:使用meta标签设置charset属性的值为utf-8等值.<meta charset="UTF-8">.
        • 常用中文编码
          • GBK(GB2312):包含全部中文字符.
          • UTF-8:包含全世界所有国家需要用到的字符.

4.<body>

专门用于存放,用于显示给用户查看的一些内容,例如文本,图片,音频,视频...

5.理解

将整个HTML文档比作一个人,head就好比头,其中的title等就好比五官,body则是身体.

posted @ 2020-10-01 11:20  Alasdair  阅读(127)  评论(0)    收藏  举报