【无标题】

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

Web标准提出的最佳体验方案：结构、样式、行为相分离。

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

HTML语法规范

双标签关系可以分为两类：包含关系和并列关系

包含关系

<head>

<title></title>

</head>

并列关系

<head></head>

<body></body>

第一个HTML

每个王爷都会有一个基本的结构标签（骨架标签），页面内容也是在这些基本标签上书写。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

HTML文档的后缀名必须是.html或.htm,浏览器的作用是读取HTML文档，并以网页的形式显示出他们。

此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。

3.网页开发工具

VSCode的使用

双击打开软件。
新建文件（Ctrl+N）.
保存（Ctrl+S），注意移动要保存为.html的文件
Ctrl+加号键，Ctrl+减号键可以放大缩小视图
生成页面骨架结构。输入！按下Tab键
利用插件在浏览器中预览页面：单击鼠标右键，在弹出出口中点击"Open In Default Browser"。

3.1文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是：当前页面采取的是HTML5版本来显示网页。

注意：

<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。
<!DOCTYPE>不是一个HTML标签，他就是文档类型声明标签。

3.2lang语言类型

用来定义当前文档显示的语言

en定义语言为英语
zh-CN定义语言为中文

简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页

3.3字符集

字符集（Character set）是多个字符的集合，一边计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset ="UTF8"/>

charset常用的值有：GB2312、BIG5、GBK、和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的“UTF-8”

4.HTML常用标签

重点记住每个标签的语义，根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰

4.2标题标签<h1>-<h6>

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了六个等级的网页标题即<h1>-<h6>。

<h1>我是一级标题</h1>

单词head的缩写，意为头部、标题。

标签语义：作为标题使用，并且依据重要性递减。

特点：

加了标题的文字会变得加粗，字号也会依次变大。
一个标题独占一行。

4.3段落和换行标签（重要）

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

<p>我是一个段落标签</p>

单词paragraph的缩写

标签语义：可以把HTML文档分割为若干段落。

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签</br>

</br>

标签语义：强制换行。

特点：

</br>是个单标签。
</br>标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.4文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要。

语义	标签	说明
加粗	<strong></strong>或者<b></b>	都更推荐使用前一个，标签加粗，语义更强烈
倾斜	<em></em>或者<i></i>
删除线	<del></del>或者<s></s>
下划线	<ins></ins>或者<u></u>

4.5<div>和<span>标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。

<div>这是头部</div>

<span>今日价格</span>

div是division的缩写，表示分割、分区。span意为跨度、跨距。

特点：

div标签用来布局，但是现在一行只能放一个<div>.大盒子
<span>标签用来布局，一行上可以多个<span>。小盒子

4.6图像标签和路径

图像标签的其他属性：

属性	属性值	说明
	图片路径	必须属性
	文本	替换文本。图像不能显示的文字
	文本	提示文本。鼠标放到图像上，显示的文字
	像素	设置图像的宽度
	像素	设置图像的高度
	像素	设置图像的边框粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"content="ie=edge">
    <title>图像标签</title>
</head>
<body>
    <h4>图像标签的使用:</h4>
    <img src="img.jpg"/>
    <h4>alt 替换文本 图像显示不出来的时候用文字代替：</h4>
    <h4>title 提示文本 鼠标放到图像上，提示的文字:</h4>
    <img src="img.jpg"alt="我是侯明昊"title="我是侯明昊neo"/>
    <h4>width 给图像设定宽度:</h4>
    <img src="img.jpg"alt="我是侯明昊"title="我是侯明昊neo"width="500"/>
    <h4>height 给图像设定高度：</h4>
    <img src="img.jpg" alt="我是侯明昊"title="我是侯明昊neo"height="100"/>
    <h4>border 给图像设定边框：</h4>
    <img src="img.jpg"alt="我是侯明昊"title="我是侯明昊neo"width="500" border="15"/>
    
</body>
</html>

图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。

<img src="图像URL"/>

src是<img>标签的必须属性，它用于指定文件的路径和文件名。

所谓属性：简单理解就是属于这个图像标签的特性。

图像标签属性注意点：

图像标签可以拥有多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
属性采取键值对的格式，即key="value"的格式，属性="属性值"。

路径之相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

这里简单来说，图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src="baidu.gif"/>
下一级路径	/	图像文件位于HTML文件下一级如<img src="images/baidu.gif"/>
上一级路径	../	图像文件位于HTML文件上一级如<img src="../baidu.gif"/>

路径之绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如，"D:\web\img\logo.gif"或完整的网络地址"https://www.itcast.cn/images/logo.gif".

4.7超链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

1.链接的语法格式

<a href="跳转目标"target="目标窗口的弹出方式">文本或图像<a/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"content="ie=edge">
    <title>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com"target="_blank">腾讯</a>
    target 打开窗口的方式 默认的值是_self 当前窗口打开页面   _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接：网站内部页面之间的相互链接</h4>
    <a href="公司简介.html" target="_blank">公司简介</a>
    <h4>3.空连接：#</h4>
    <a href="#">公司地址</a>
    <h4>下载链接：地址链接的是 文件.exe或者是zip等压缩包形式</h4>
    <a href="img.zip">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"></a>
    
</body>
</html>

两个属性的作用如下：

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中——self为默认值，_blank为在新窗口中打开方式。

连接分类：