当前位置: 首页 > news >正文

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 属性值的格式。

http://www.lryc.cn/news/428483.html

相关文章:

  • 开源的向量数据库Milvus
  • 设计模式-工厂方法
  • Flask SQLALchemy 的使用
  • Metasploit漏洞利用系列(一):MSF完美升级及目录结构深度解读
  • C/C++|经典代码题(动态资源的双重释放与「按值传递、按引用传递、智能指针的使用」)
  • 西北乱跑娃 -- linux使用笔记
  • Kubectl基础命令使用
  • 推荐编译器插件:Fitten Code 更快更好的AI助手
  • ArcGIS Pro基础:状态栏显示栏的比例尺设置和经纬度位置
  • 微前端架构入门
  • [LitCTF 2023]导弹迷踪
  • win10安装wsl2(ubuntu20.04)并安装 TensorRT-8.6.1.6、cuda_11.6、cudnn
  • 信息搜集--敏感文件Banner
  • Qt 学习第六天:页面布局
  • 利用队列收集单双击和长按按键
  • AI工作流:低代码时代的革新者,重塑手机问答类应用生态
  • 配置MySQL主从,配置MySQL主主 +keeplive高可用
  • 第5节:Elasticsearch核心概念
  • 存储实验:华为异构存储在线接管与在线数据迁移(Smart Virtualization Smart Migration 特性)
  • 职业院校云计算实训室建设方案全景剖析
  • VS Code安装与vue项目新建
  • 如何在Java中将数据库查询结果转换为枚举类型
  • 秋招突击——8、20——知识补充——Java容器
  • IOS 06 OC调用Swift第三方框架
  • SAP和致远OA系统集成案例
  • 19 OptionMenu 组件
  • 【C语言】字符函数与字符串函数(上)
  • 机器学习系列—深入探索弗里德曼检验:非参数统计分析的利器
  • 【ubutnu18.04】k8s 部署4: worker节点配置1.31.0和containerd 1.7.20
  • android kotlin集成WorkManager实现定时获取数据