「HTML4」HTML入门

签

标签：又称元素，是HTML的基本组成单位双标签（绝大多数都是双标签）：<标签名>标签体</标签名>第一个标签叫起始标签，第二个标签叫结束标签例：<marquee>尚硅谷，让天下没有难学的技术！</marquee>单标签：<标签名/>/可以省略例：<input>
标签名不区分大小写，但推荐小写，因为小写更规范
标签之间的关系：并列关系、嵌套关系，可以使用 tab 键进行缩进
1
2
3
4
5
<marquee>
尚硅谷，让天下没有难学的技术！
<input>
</marquee>
<input>

标签属性

用于给标签提供附加信息
可以写在起始标签或单标签中，形式如下：<标签名属性名="属性值" 属性名="属性值">
1
2
<marquee loop="1" bgcolor="orange">尚硅谷，让天下没有难学的技术！</marquee>
<input type="password">
有些特殊的属性，没有属性名，只有属性值，如：<input disabled>

不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写）属性名、属性值不能乱写，都是W3C规定好的属性名、属性值，都不区分大小写，但推荐小写双引号，也可以写成单引号，甚至不写，但推荐写双引号标签中不要出现同名属性，否则后写的会失效，例如：<input type="text" type="password">

基本结构

想要呈现在网页中的内容写在body标签中
head标签中的内容不会出现在网页中
head标签中的title标签可以指定网页的标题
1
2
3
4
5
6
7
8
<html>
<head>
<title>网页标题</title>
</head>
<body>
......
</body>
</html>

注释

特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
作用：对代码进行解释和说明
写法
1
2
3
4

<marquee loop="1">尚硅谷</marquee>

<marquee>尚硅谷123</marquee>
注释不可以嵌套

文档声明

作用：告诉浏览器当前网页的版本
写法

旧写法：要依网页所用的HTML版本而定，写法有很多参考：W3C QA - 可在 Web 文档中使用的 Doctype 声明的推荐列表
新写法：W3C 推荐使用 HTML 5 的写法
1
2
3
4
5
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>

文档声明必须在网页的第一行，且在html标签的外侧

字符编码

计算机对数据的操作存储时，对数据进行：编码读取时，对数据进行：解码
编码、解码，会遵循一定的规范 —— 字符集
常见的字符集ASCII：大写字母、小写字母、数字、一些符号，共计128个ISO 8859-1：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个GB2312：继续扩充，收录了 6763 个常用汉字、682个字符GBK：收录了的汉字和符号达到 20000+ ，支持繁体中文UTF-8 ：包含世界上所有文字与符号
为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合charset属性指定字符编码
1
2
3
<head>
<meta charset="UTF-8"/>
</head>

设置语言

主要作用让浏览器显示对应的翻译提示有利于搜索引擎优化
具体写法：<html lang="zh-CN">
lang属性的编写规则语言-国家/地区zh-CN ：中文-中国大陆（简体中文）zh-TW ：中文-中国台湾（繁体中文）zh ：中文en-US ：英语-美国en-GB ：英语-英国语言—具体种类（已不推荐使用）zh-Hans ：中文—简体zh-Hant ：中文—繁体W3School 上的说明：《语言代码参考手册》、《国家/地区代码参考手册》 W3C官网上的说明：《Language tags in HTML》

标准结构

HTML标准结构如下
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>

</body>

</html>

VSCode 删除行快捷键：Ctrl+Shift+K

输入!，随后回车即可快速生成标准结构
配置VScode 的内置插件 emmet ，可以对生成结构的属性进行定制
在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标

TML5以HTML4为基础，对HTML4进行了大量的修改。

介绍HTML5对HTML4到底进行了哪些修改？它们之间比较大的区别是什么？

1　语法的改变

HTML5的语法变化

HTML5中，语法发生了很大的变化。或许有人会抱着异常惊讶和不安地问“HTML普及到何种程度”“根本的语法发生了变化，会有多大影响”。

只是，HTML5的“语法变化”和其他编程语言所谓的语法变更意义有所不同。为什么这么说呢？原因比较特殊，因为以前的HTML几乎没有遵循规范实现的Web浏览器。

　现有浏览器与规范背离

HTML的语法是在SGML（Standard Generalized Markup Language）语言的基础上来规定的。但是由于SGML的语法非常复杂，文档结构解析程序的开发也不太容易，多数Web浏览器不作为SGML解析器运行。由此，HTML规范中虽然要求“应遵循SGML的语法”，但实际情况却是遵循规范实现的Web浏览器几乎不存在。

　规范向实现靠拢

如上所述，HTML5中提高Web浏览器间的兼容性是重大的目标之一。要确保兼容性，必须消除规范与实现的背离。因此HTML5以近似现有的实现，重新定义了新的HTML语法，使规范向实现靠拢。由于文档结构解析的算法也有着详细的记载，使得Web浏览器开发者可以专注于遵循规范去进行实现工作。在新版本的FireFox和WebKit（Nightly Builder版）中，已经内置了遵循HTML5规范的解析器。IE（Internet Explorer）和Opera也为了能够提供更好的兼容性实现而紧锣密鼓地努力着。

2　可编辑列表实例

将<div>、<table>元素转换成可编辑状态。

3　可编辑的div和table元素

designMode属性

designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上文所述的contentEditable属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本里被编辑修改。该属性有两个值——on与off。当属性被指定为on时，页面可编辑；被指定为off时，页面不可编辑

打开designMode属性

说明绝大部分浏览器都已支持designMode属性，如Internet Explorer9、Chrome、Firefox、Opera和Safari等浏览器都可支持designMode属性。

hidden属性

hidden属性类似于aria-hidden，它告诉浏览器这个元素的内容不应该以任何方式显示。但是元素中的内容还是浏览器创建的，也就是说页面装载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。hidden属性是一个布尔值的属性，当设为true时，元素处于不可见状态；当设为false时，元素处于可见状态。

说明

hidden属性可以代替CSS样式中的display属性，设置hidden="tru

tabindex是一个旧的概念，是指用户使用键盘导航一个页面时（通常使用Tab键，但某些浏览器，如著名的Opera，可能使用不同的键组合来导航），控制页面上的元素获得焦点的顺序。

当站点使用深度嵌套的布局表格来构建时，这个属性非常常用，但是如今这已经不再那么常用了。默认的标签页顺序是由元素出现在标记中的顺序来决定的，因此顺序正确和结构良好的文档应该不再需要额外的标签页顺序来提示。

002_HTML_操作系统和软件_尚学堂_哔哩哔哩_bilibili

01HTML4常用元素讲解

02HTML5新增通用属性

03HTML表单元素讲解

04HTML5新增元素和表单

05css基础及选择器讲解

06css3新增选择器

07字体与文本相关属性

08背景、边框、补丁相关属性

09大小定位与轮廓相关属性

10盒模型及布局相关属性

11表格与列表相关属性及响应式布局

12CSS3变形与动画相关属性

今日微语：

鸡汤再有理，终究是别人的总结。故事再励志，也只是别人的经历，别总想着依赖或者寻求精神寄托，其实你很清楚，只有你自己才能改变自己，不求多成功，但愿少遗憾。

喜欢请关注！

在线咨询

上一篇：大润发超市线上优惠购买的方法
下一篇：Web 性能优化：使用 CSS font-display 控制字体加载和替换

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商