概念
超文本标记语言
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标记语言,HTML元素是构建网站的基石
标记语言(markuplanguage)
- 由无数个标记(标签、tag)组成;
- 是对某些内容进行特殊的标记,以供其他解释器识别处理;
- 比如使用<h2></h2>标记的文本会被识别为“标题”进行加粗,文字放大显示;
- 口由标签和内容组成的部分称为元素(element);
超文本(HyperText)
- 不仅仅可以插入普通的文本(Text),还可以插入图片、音频、视频等内容;
- 还可以表示超链接(HyperLink),从一个网页跳转到另一个网页;
结构
文档声明
HTML最上方的一段文本我们称之为文档类型声明,用于声明文档类型
<IDOCTYPE html>
- HTML文档声明,告诉浏览器当前页面是HTML5页面;
- 让浏览器用HTML5的标准去解析识别内容;
- 必须放在HTML文档的最前面,不能省略,省略了会出现兼容性问题;
HTML5的文档声明比HTML4.01、XHTML10简洁非常多
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.e strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html元素
<html>元素表示一个HTML文档的根(顶级元素),所以它也被称为根元素。
-
所有其他元素必须是此元素的后代。
<!DOCTYPE html>
<html lang="zh-CN">…
</html>
W3C标准建议为html元素增加一个lang属性,作用是
- 帮助语音合成工具确定要使用的发音;
- 帮助翻译工具确定要使用的翻译规则
比如常用的规则:
- lang=“en”表示这个HTML文档的语言是英文;
- lang=“zh-CN”表示这个HTML文档的语言是中文;
head元素
HTML head元素规定文档相关的配置信息(也称之为元数据),包括文档的标题,引用的文档样式和脚本等。
- 什么是元数据(metadata),是描述数据的数据;
- 这里我们可以理解成对整个页面的配置:
常见的设置有哪些呢?一般会至少包含如下2个设置。
- 网页的标题:title元素
<title>网页的标题</title>
- 网页的编码:meta元素:可以用于设置网页的字符编码,让浏览器更精准地显示每一个文字,不设置或者设置错误会导致乱码:一般都使用utf-8编码,涵盖了世界上几乎所有的文字;
<meta charset="UTF-8">
编译器
VSCode编辑器下载-安装:https://code.visualstudio.com/
安装插件(增加功能):右侧图标最后一项,Extensions,查找需要的插件(联网)
- 中文插件:Chinese
- 颜色主题:atomone dark
- 文件夹图标:VSCode Great Icons
- 在浏览器中打开网页:open in browserLive Sever
- 自动重命名标签:auto rename tag
VSCode的配置:
- Auto Save 自动保存
- Font Size 修改代码字体大小
- Word Wrap 代码自动换行
- Render Whitespace空格的渲染方式(个人推荐)
- Tab Size 代码缩进
推荐2个空格(公司开发项目基本都是2个空格)
HTML元素
HTML 元素参考 - HTML(超文本标记语言) | MDN
常用元素
-
<h1>我是h1标题</h1>
-
<p>我是段落元素</p>
-
<img src="./images/xiaowangzi.jpe3g" alt="小王子">
-
<a href="http://www.baidu.com" target="_self">百度一下</a>
属性
属性包含元素的额外信息,这些信息不会出现在实际的内容中。
一个属性必须包含如下内容:
- 一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
- 属性名称,后面跟着一个等于号。
- 一个属性值,由一对引号“"引起来
全局属性
全局属性 - HTML(超文本标记语言) | MDN
URL
URL代表着是统一资源定位符(UniformResourceLocator)
通俗点说:URL无非就是一个给定的独特资源在Web上的地址。
- 理论上说,每个有效的URL都指向一个唯一的资源;
- 这个资源可以是一个HTML 页面,一个CSS文档,一幅图像,等等;
标准格式:
URI
和URI的区别:
- URI =Uniform Resource Identifier 统一资源标志符,用于标识 Web 技术使用的逻辑或物理资源。
- URL = Uniform Resource Locator 统一资源定位符,俗称网络地址,相当于网络中的门牌号;
URI在某一个规则下能把一个资源独一无二的识别出来。
- URL作为一个网络Web资源的地址
可以唯一将一个资源识别出来,"所以URL是一个URI; - 所以URL是URI的一个子集;
- 但是URI并不一定是URL