HTML 初始
HTML（Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
一、HTML 骨架结构
每种语言都有自己所必须遵守的格式，HTML也不例外，也有自己的语言语法骨架格式：
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
1、HTML标签：作用所有HTML中标签的一个根节点
2、head标签：
作用：用于存放：title,meta,base,style,script,link 等标签，
注意在head标签中我们必须要设置的标签是title
3、title标签：
作用：让页面拥有一个属于自己的标题。
4、body标签：
作用：页面在的主体部分，用于存放所有的HTML标签：p,h,a,b,u,i,s,em,del,ins,strong,img等标签
Tips：HTML 结构是单根树状父子结构。
二、HTML 基本语法特性
1、HTML 对换行不敏感，对 tab 不敏感
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。
2、空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
3、标签页严格封闭
标签不封闭是灾难的！！！
三、HTML标签介绍
1、标签格式
<标签名>封装的数据</标签名>
2、标签名大小写不敏感。
3、标签拥有自己的属性。
① 基本属性：bgcolor="red" 可以修改简单的样式效果
② 事件属性: onclick="alert('hello!');" 可以直接设置事件响应后的代码
4、标签的分类
在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。
1、双标签
<标签名> 内容 </标签名>
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
2、单标签
<标签 />
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
四、HTML标签关系与语法
1、标签关系
标签的相互关系就分为两种：
1）嵌套关系（父子关系）
<head> <title> </title> </head>
标签嵌套时一定要注意标签的顺序，不能混乱嵌套，下面的这种方式是错误的
<head> <title> </head> </title> ×
2）并列关系（兄弟关系）
<head></head>
<body></body>
两个标签并列显示也称为兄弟关系。
建议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。
2、标签语法
① 标签不能交叉嵌套
② 标签必须正确关闭
③ 属性必须有值，属性值必须加引号
④ 注释不能嵌套。
注意： HTML 代码不是很严谨，有时候标签不闭合，也不会报错，但是要避免这种情况。
五、文档类型
<!DOCTYPE html>
这句话就是告诉我们使用哪个html版本，我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。
这句话其实就是网页的声明头，术语叫做 DocType Defintion,文档类型定义，简称 DTD。
注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是 HTML5 的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。
六、HTML 历史及不同版本
1、历史发展进程如下图
2、HTML 不同的版本
现在学习的是HTML4.01这个版本，这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。但是IE6、7、8这些浏览器还不能过早的淘汰。但是随着技术的发展，HTML5技术越来越成熟，越来越受欢迎，也逐渐的适应移动端的需求了。
HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范（见下面）：
HTML4.01里面规定了普通、XHTML两大种规范。
HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。
一共有6种DTD，说白了，HTML第一行语句一共有6种：
| 大规范 | 里面的小规范 |
| HTML4.01 | Strict 严格的，体现在一些标签不能使用，比如 u |
| Transitional 普通的 | |
| Frameset 带有框架的页面 | |
|
XHTML1.0 严格体现在小写标签、 闭合、引号 |
Strict 严格的，体现在一些标签不能使用，比如 u |
| Transitional 普通的 | |
| Frameset 带有框架的页面 |
注意：HTML5中极大的简化了 DTD，也就是说 HTML5 中就没有XHTML了
七、HTML 头部
<head> 元素包含了所有头部标签元素。在<head> 元素中可以插入脚本（script),样式文件，及各种信息。
1、<title> 元素
此标签定义了不同文档的标题。在HTML/XHTML 文档中是必须的。
显示在搜索引擎结果页面的标题。
2、<base> 元素
此标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接。
3、<link> 元素
此标签定义了文档与外部资源之间的关系。通常用于链接到样式表。
4、<style> 元素
此标签定义了 HTML 文档的样式文件引用地址，需要指定样式文件来渲染 HTML 文档。
5、<meta> 元素
此标签描述了一些基本的元数据。这些数据不会显示在页面上，但会被浏览器解析。
6、<script> 元素
此标签用于加载脚本文件，如JavaScript文件。
八、<meta> 标签
1、定义字符集
语法：
<meta charset="UTF-8">
这句话是用来指定HTML页面采用的编码方式。
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文 包括6763个汉字
BIG5 繁体中文 港澳台等用
GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符，使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
更多的编码知识请阅读这篇文章：字符编码
2、定义关键字
语法：
<meta name="keywords" content="html,css,xml,javascript">
设置了关键字，有利于搜索引擎搜索，这个技术叫做SEO，search engine optimization，搜索引擎优化。
关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率
3、定义描述内容
语法：
<meta name="description" content="free web tutorials on html and css">
4、定义网页作者
语法：
<meta name="author" content="Tony">
5、刷新当前页面
语法：
<meta http-equiv="refresh" content="30">
九、语义化的HTML标签
HTML标签其实就是为了给文字，图片添加语义，给不同的内容添加不同的语义，让读者能够更好的理解HTML页面。
好处：
1、方便代码的阅读和维护
2、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3、使用语义化标签会具有更好地搜索引擎优化
核心：合适的地方给一个最为合理的标签。
如何查看HTML的语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
遵循的原则：先确定语义的HTML ，再选合适的CSS。
HTML 初始的更多相关文章
- 2DToolkit官方文档中文版打地鼠教程（一）：初始设置
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
- CSharpGL(38)带初始数据创建Vertex Buffer Object的情形汇总
CSharpGL(38)带初始数据创建Vertex Buffer Object的情形汇总 开始 总的来说,OpenGL应用开发者会遇到为如下三种数据创建Vertex Buffer Object的情形: ...
- ArrayList、Vector、HashMap、HashSet的默认初始容量、加载因子、扩容增量
当底层实现涉及到扩容时,容器或重新分配一段更大的连续内存(如果是离散分配则不需要重新分配,离散分配都是插入新元素时动态分配内存),要将容器原来的数据全部复制到新的内存上,这无疑使效率大大降低. 加载因 ...
- linux系统下使用xampp 丢失mysql root密码【xampp的初始密码为空】
如果在ubuntu 下面 使用xampp这个集成开发环境,却忘记mysql密码. 注:刚安装好的xampp的Mysql初始密码是空... 找回密码的步骤如下: 1.停止mysql服务器 sudo /o ...
- python基础之初始python
初始python之基础一 一.Python 介绍 1.python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发 ...
- openfire 初始密码
openfire 初始密码 mssql2014 进入数据库,找到 ofUser 表 ,将密码字段对应的密文替换为下面的内容,则密码就是 admin ecbd03623cd819c48718db1b27 ...
- Bash 什么时候会给 HOME 赋初始值
今天无意发现下面这个表现: $ env -i bash -c cd bash: line 0: cd: HOME not set $ env -i bash -c 'echo $HOME' 这表明了 ...
- Holt-Winters原理和初始值的确定
关于模型 (来自以下PPT,从第4页开始) 关于初始值: 以下文档给出了三个模型的初始值计算的思路. 大致思路如下,建立一个p阶移动平均模型,估计出参数即为初始值,具体的根据三种不同的模型,有 ...
- 关于int,integer初始值问题
- C#中异常：“The type initializer to throw an exception（类型初始值设定项引发异常）”的简单分析与解决方法
对于C#中异常:“The type initializer to throw an exception(类型初始值设定项引发异常)”的简单分析,目前本人分析两种情况,如下: 情况一: 借鉴麒麟.NET ...
随机推荐
- Kubernetes 资源对象
概述 我将它们简单的分类为以下几种资源对象: 类别 名称 资源对象 Pod.ReplicaSet.ReplicationController.Deployment.StatefulSet.Daemon ...
- Python并发编程之进程通信
''' 进程间的通信 ''' """ multiprocessing模块支持进程间通信的两种主要形式:管道和队列 都是基于消息传递实现的, ""&qu ...
- ActiveMQ消息可靠性-签收
非事务模式下消费者签收 动签收就像快递到达时,快递寄送点给你签收了,不用你自己去签收,而手动签收就是必须我本人签收, 自动签收(默认为自动签收) 手动签收:能够避免消息的重复消费 当设置为手动签收时, ...
- 洛谷 P1234 小A的口头禅
这里是传送门啊 I'm here! 题目描述 小A最近有了一个口头禅"呵呵",于是他给出了一个矩形,让你求出里面有几个hehe(方向无所谓). 输入输出格式 输入格式: 第一行两个 ...
- 【BZOJ3508】开灯
[BZOJ3508]开灯 题面 bzoj 题解 其实变为目标操作和从目标操作变回来没有区别,我们考虑从目标操作变回来. 区间整体翻转(\(\text{Xor}\;1\))有点难受,我们考虑将这个操作放 ...
- typora的使用技巧
目录 Typora 的 markdown 语法 标题: 插入图片: 链接: 字体变化: 删除: 文字高亮: 角标: 文本方位: :-:| :- | -: 制作表格: 常用快捷键(补充): 下划线: T ...
- K8s预选策略和优选函数简介
调度器选择策略: 预选策略(Predicate) 1. 根据运行Pod的资源限制来排除不符合要求的Node 2. 根据运行Pod时,是否要求共享宿主机的网络名称空间来判断,如: 某Pod启动要共享宿主 ...
- centos7 中iptables、firewalld 和 netfilter 的关系
centos7系统使用firewalld服务替代了iptables服务,但是依然可以使用iptables来管理内核的netfilter 但其实iptables服务和firewalld服务都不是真正的防 ...
- Java 并发系列之十：java 并发框架（2个）
1. Fork/Join框架 2. Executor框架 3. ThreadPoolExecutor 4. ScheduledThreadPoolExecutor 5. FutureTask 6. t ...
- 推荐IOS Moneky测试工具Fast Monkey
推荐IOS Moneky测试工具Fast Monkey 1 介绍 非插桩 iOS Monkey, 支持控件,每秒4-5 action事件 2 下载 https://github.com/zhangzh ...