HTML 基础要素解析

目录

HTML 初步认识

纯文本文件介绍

纯文本文件与其它文件的区别

Html介绍

HTML 骨架

文档类型(!DOCTYPE)声明

介绍

常用的 DOCTYPE 声明

meta标签

字符集

关键字和页面描述


HTML 初步认识


纯文本文件介绍

        纯文本文件指的是仅包含文本内容,不存在样式,且使用记事本等纯文本编辑器打开时能够正常读取,不会出现乱码的文件。例如,html、css、js 都属于纯文本文件。

纯文本文件与其它文件的区别

        txt 文件仅能保存文本内容,无法记录文本样式。而 doc 文件既能保存内容,又能保存样式。因此,存储相同的内容时,doc 文件通常比 txt 文件大。

Html介绍

        HTML 是 “HyperText Markup Language” 的英文缩写,即超文本标记语言。

        HTML 标签是分等级的,HTML 将所有的标签分为两类:容器级和文本级。容器级的标签内部可以放置任何元素;文本级的标签内部只能放置文字、图片、表单元素。

        .html 是网页的常见格式。

        当前业界的标准是,网页技术严格遵循三层分离:html 主要负责描述页面的语义;css 负责描述页面的样式;js 负责描述页面的动态效果。

HTML 骨架


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
    <meta name="Keywords" content="关键字 " />  
    <meta name="Description" content="描述 " />  
    <title>Document</title>  
</head>  
<body>  
    …  
</body>  
</html>  

文档类型(!DOCTYPE)声明


介绍

        DTD 即文档类型声明(Doc Type Declaration)。总共有 7 种 DTD,在 HTML4.01 中有三种<!DOCTYPE>声明,在 XHTML1.0 中也有三种<!DOCTYPE>声明,而在 HTML5 中仅有一种<!DOCTYPE>声明。XHTML 总体上比 HTML 更为严格,比如要求标签必须为小写字母、标签必须闭合、属性值必须带引号等。HTML4.01 兼容 ie6 及以上版本,HTML5 兼容 ie9 及以上版本。例如:

        HTML4.01 :

        strict(严格型):更为严格,不包括展示性的和弃用的元素(比如 font、u、b、i 标签),不允许框架集(Framesets)。

        transitional(过渡型):相对不那么严格,不允许框架集(Framesets)。

        frameset(框架集型):允许框架集(Framesets)。

        XHTML1.0 :

        strict(严格型):更为严格,不包括展示性的和弃用的元素(比如 font、u、b、i 标签),不允许框架集(Framesets)。

        transitional(过渡型):相对不那么严格,不允许框架集(Framesets)。

        frameset(框架集型):允许框架集(Framesets)。

常用的 DOCTYPE 声明

        HTML4.01 :

        Strict :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  

        Transitional :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

        Frameset :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  

        XHTML1.0 :

        Strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

        Transitional :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

        Frameset :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  

        HTML 5 :

<!DOCTYPE html> 

        备注:XHTML 1.1 :该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型(例如提供对东亚语系的 ruby 支持)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  

meta标签


字符集

        中文能够使用的字符集两种:

        第一种:UTF-8

        UTF-8 是国际通用字库,包含各种国家的语言,但保存尺寸较大,存储一个汉字需要3个字节。例如:新华网藏语频道使用的是 UTF-8,以保证字符集的丰富性。

        第二种:gb2312(也可以写成 gbk)

        gb2312 包含的字符较少,主要是中文、少数外语和符号,但尺寸较小,存储一个汉字只需 2 个字节。例如:部分网易的网页出于对显示速度的追求,或许会采用 GBK(或 GB2312)字符集。

        UTF-8 和 gb2312 对比:

字符集

描述

UTF-8

字全,存储一个汉字所需3个字节。

gb2312

只用中文、少数外语和符号,存储一个汉字所需2个字节。

关键字和页面描述

        <meta> 标签永远位于 <head> 元素内部,属于自封闭标签。

<meta name="Keywords" content="关键字 " />  
<meta name="Description" content="描述 " />  

        meta 标签必须属性:

属性

描述

content

some_text

定义与 http-equiv 或 name 属性相关的元信息

        meta 标签可选属性:

属性

描述

http-equiv

content-type

把 content 属性关联到 HTTP 头部。

expires

refresh

set-cookie

name

author

把content属性关联到一个名称。

description

keywords

generator

revised

others

scheme

some_text

定义用于翻译 content 属性值的格式。

  • 9
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端基地

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值