网页
网站是在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一页，通常是HTML格式的文件，需要通过浏览器来阅读。
网页是构成网站的基本元素，通常由图片，链接，文字，声音，视频等元素组成（本质就是一个HTML文件）。一般我们看到的网页常见以 .htm或 .html后缀结尾的文件，因此将其俗称为HTML文件。
HTML
HTML是指超文本标记语言（Hyper Text Marker Language），它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language）。
标记语言是一套标记标签（markup tag）。
“超文本”
-
可以加入图片，声音，动画，多媒体等内容（超越了文本限制）。
-
可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
网页的形成
网页是由网页元素组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析来显示给用户的。
开端人员开发代码 ——> 浏览器显示代码（解析 渲染） ——> 生成最后的 Web 页面
常用的浏览器
浏览器是网页显示，运行的平台，常用的浏览器有IE，火狐（Firefox），谷歌（Chrome），Safari 和 Opera 等。
浏览器内核（渲染引擎）：负责读取网页的内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE，猎豹安全，360极速浏览器，百度浏览器 |
| Firefox | Gecko | 火狐浏览器内核 |
| Safari | WebKit | 苹果浏览器内核 |
| Chrome / Opera | Blink | Chrome / Opera 浏览器内核，Blink其实是WebKit的分支 |
目前国内一般浏览器都会使用 WebKit / Blink 内核，如 360，UC，QQ ，搜狗等
Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合，W3C（万维网联盟）是国际最著名的标准化组织。
为什么需要Web标准？
浏览器不同，显示的页面或排版就有些许的差异。遵循Web标准可以让不同的开发人员写出的页面更标准，更统一。
-
让Web的发展前景更广阔、
-
内容能被更广泛的设备访问
-
更容易被搜索引擎搜索
-
降低网站流量费用
-
使网站更易于维护
-
提高页面浏览速度
Web标准的构成：包括结构（Structure），表现（Presentation），行为（Behavior）三个方面。<结构类似身体，表现类似于外观装饰，行为类似行为动作>
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML |
| 表现 | 表现主要用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型是定义及交互的编写，现阶段主要学的是JavaScript |
Web标准提出的最佳体验方案：结构，样式，行为相分离。
简单来说就是把结构写在HTML文件中，表现写在CSS文件中，行为写在JavaScript文件中。
问题
-
网页的基本组成
通常由图片，链接，文字，声音，视频等元素组成。
-
什么是HTML
超文本标记语言，用来制作网页的一门语言，由各种各样的标签组成，比如：图片标签，链接标签，视频标签等
-
常用的浏览器
IE，火狐（Firefox），谷歌（Chrome），Safari 和 Opera
-
Web标准的三大组成部分
包括结构（Structure），表现（Presentation），行为（Behavior）三个方面,结构最为重要
标签
HTML语法规范
基本语法
-
HTML标签是由尖括号包围的关键词，例如<html>
-
HTML标签通常是成双成对出现的，例如<html>和</html>我们称为双标签，标签中的第一个标签是开始标签，第二个标签是结束标签。
-
有些特殊的标签必须是单个标签（极少情况）例如 我们称之为单标签。
标签关系
双标签关系可以分为两类：包含关系和并列关系
包含关系：(类似于父子关系)
<head>
<title></title>
</head>并列关系：(类似于兄弟关系)
<head></head>
<body></body>
<html>
<head></head>
<body></body>
</html>
<br />HTML基本结构标签
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称HTML文档。
<html>
<head>
<title>标题</title>
</head>
<body>
内容
</body>
</html>| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML | 页面中最大的标签，我们称之为根标签 |
| <head></head> | 文档的头部 | 在head标签中，我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 包含文档的所有内容，页面内容基本都是放在body里面的 |
HTML文档的后缀名必须是 .html或 .htm，浏览器的作用是读取HTML文档，并以网页的形式显示它们
开发工具
VSCode的使用：
-
双击打开软件
-
新建文件（Ctrl + N）
-
保存（Ctrl+S），注意要保存为 .html文件
-
Ctrl + “+” ，Ctrl +“—”，用来放大或缩小视图。
-
生成页面骨架结构，【输入！，加上Tab键】
-
利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。
VSCode插件安装
第一列第五个为插件安装按钮；
输入需要安装的插件。
“Install”
重启软件/重新加载
| 插件 | 作用 |
|---|---|
| Chinese (Simplified) Language Pack for VS Code | 中文语言包 |
| Open in Browser | 右击选择浏览器打开html文件 |
| CSS Peek | 追踪至样式 |
| Auto Rename Tag | 自动重命名配对 HTML / XML 标签 |
VSCode工具生成骨架标签新增代码
<!DOCTYPE html> //当前页面使用HTML5版本来显示
<html lang="en"> //当前文档的显示语言：英文
<head>
<meta charset="UTF-8"> //UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。【这句必须要写】
<title>hello</title>
</head>
<body>
"Hello world!"
</body>
</html>-
<! Doctype> 文档类型声明标签，作用是告诉浏览器使用哪种HTML版本来显示网页。
(当前页面采取的是HTML5版本来显示网页)
-
位于文档最前面的位置，位于<html>标签之前
-
并不是一个HTML标签，并不属于HTML的一部分，用于声明整个文档，是文档类型声明标签
-
-
lang语言，用来定义当前文档显示的语言，对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文，这个属性对于搜索引擎有一定作用（提示，警示）
-
en定义语言为英语
-
zh-CN定义语言为中文
-
-
charset字符串，字符集（Character set）是多个字符的集合，便于计算机识别和存储各种文字。在<head>标签内，可以通过<meta>标签的<charset>属性来规定HTML文档应该使用哪种字符编码。
charset常用的值有 ; GB2312(简体中文)，BIG5（繁体中文），GBK（简体和繁体中文），UTF-8（万国码）
HTML常用标签
标题标签<h1>-<h6>
<h（head）>，头部，标题。
标签语义：作为标题使用，依据重要性递减。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>特点：
-
加了标题的文字会变粗，字号也会依次变大
-
一个标题独占一行
段落和换行标签
<p（paragraph）>，段落
标签语义：用于定义段落，将整个网页分为若干个段落。
<br /(break)>，打断，换行【单标签】
标签语义：强制换行
<p>段落标签</p> <br />
特点：
-
文本在一个段落中会根据浏览器窗口的大小自动换行
-
段落之间有一定的空隙
-
换行和段落不一样，换行只是开始新的一行，段落之间会插入一些垂直的间距。
· Alt+Z ：VsCode中自动换行
文本格式化标签
在网页中，有时会需要粗体，斜体，下划线等效果，会用到文本格式化标签，
标签语义：突出重要性，比普通文字重要
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> | 推荐使用<strong>标签，语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 推荐使用<em>标签，语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 推荐使用<del>标签，语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 推荐使用<ins>标签，语义更强烈 |
文本格式化标签
<body>
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字<br />
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字<br />
我是<del>删除线</del>
我是<s>删除线</s><br />
我是<ins>下划线</ins>
我是<u>下划线</u><br />
</body><div>和<span>标签
<div>和<span>标签是没有语义的，是用来装内容的盒子，用来给网页进行布局
<div>大盒子</div>
<span>小盒子</span>div是division的缩写，表示分割，分区
span意为跨度，跨距
特点:
<span>标签用来布局，一行可以有多个<span>标签，小盒子 <div>标签用来布局，但一行只能放一个<div>标签，大盒子
<body>
<div>我是div标签，我可以一个人独占一行</div>
<div>我是div标签，我可以一个人独占一行</div>
<span>百度</span>
<span>搜狐</span>
<span>新浪</span>
</body>图像标签和路径（重点）
1 图像标签
在HTML中，<img>标签用于定义HTML页面中的图像
<img src="图像URL" /><img(image)>,图像，【单标签】
src是img标签的必须属性（属性可以简单理解为属于这个图像的特征），用于指定图像文件的路径和文件名
图像标签的其他属性:
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示时显示的文本 |
| title | 文本 | 提示文本，鼠标移动到图像上时显示的文本 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
<body>
<h4>图像标签的使用</h4>
<img src="img.jpg"/>
<h4>alt 替换文本 图像显示不出来时用来替换的文字</h4>
<img src="img1.jpg" alt="这是许嵩"/>
<h4>title 提示文本 鼠标放到图像上时提示的文本</h4>
<img src="img.jpg" alt="这是许嵩" title="这是许嵩"/>
<h4>width 给图像设定宽度：</h4>
<img src="img.jpg" alt="这是许嵩" title="这是许嵩" width="500"/>
<h4>height 给图像设定高度</h4>
<img src="img.jpg" alt="这是许嵩" title="这是许嵩" height="500"/>
<h4>border 给图像设定边框</h4>
<img src="img.jpg" alt="这是许嵩" title="这是许嵩" height="500" border="2"/>
</body>图像标签属性注意点：
-
图像标签可以拥有多个属性，但必须写在标签名img的后面
-
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
-
属性采取键值对的格式，即key=“value” 的格式，属性=“属性值”
2 路径
（1）目录文件夹和根目录
目录文件夹：存放做页面所需的相关素材，比如html文件，图片等
根目录：打开目录文件夹的第一层是根目录
（2）VSCode打开目录文件夹
文件---->打开文件夹，选择目录文件，方便后期管理文件
页面中需要非常多的图片，通常我们会新建一个文件夹来存放这些图像文件，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。
相对路径：以引用文件所在位置为参考基础，建立出的目录路径（简单来说就是图片相对于HTML页面的位置）
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 如 | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如 |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级 如 |
上上一级路径可表示为： ../../
绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径“D:\web\,,,,,,"或完整的网络地址“http://www. ”。
超链接标签
在HTML标签中，超链接标签的作用是从一个页面链接到另一个页面。
1 链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像 </a>a为 anchor 的缩写，意为锚。
相关属性及其作用
| 属性 | 作用 |
|---|---|
| href | 【必须属性】用于指定链接目标的 url 地址，当标签使用href属性时，它就拥有了超链接的功能。 |
| target | 用于指定链接页面的打开方式，其中_self为默认值（在当前窗口打开页面即替换掉当前页面）， _blank 在新窗口打开页面 |
2 链接的分类
-
外部链接，必须有http://
<a href="http://www.baidu"> 百度</ a>-
内部链接，网站内部页面之间的相互链接，直接链接内部页面名称即可
<a href="index.html"> 首页</a>-
空链接
<a href="#"> 首页</a>-
下载链接，如果href里面地址是一个文件或者压缩包，会下载这个文件
(地址链接的是文件 .exe 或者是zip等压缩包形式)
-
网页元素链接，在网页中的各种网页元素如文本，图像，表格音频等都可以添加超链接。
-
锚点链接，点击链接可以快速定位到页面中的某个位置
在链接文本的 href 属性中，设置属性值为“#名字”的形式，如<a href="#two">第二季</a> 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二季介绍</h3>
<body>
<h4>1 外部链接</h4>
<a href="http://www.qq" target="_blank">腾讯 </a>
<h4>2 内部链接</h4>
<a href=demo01.html target="_blank">demo01 </a>
<h4>3 空链接</h4>
<a href="#">空链接 </a>
<h4>4 下载链接</h4>
<a href="img.zip">下载文件 </a>
<h4>5 网页元素的链接</h4>
<a href="http://www.qq" ><img src="img.jpg"></a></br>
<h4>6 锚点链接</h4>
<a href="#live">主要作品</a>
<h3 id="live">主要作品页面</h3>
</body>HTML中的注释和特殊字符
注释
当需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字时，就需要用到注释标签。
HTML中的注释以<!--开头，以-->结束
【快捷键：crtl+/ (注释当前行)】
特殊字符
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格 |   ; | |
| < | 小于号 | < ; |
| > | 大于号 | > ; |
| & | 和号 | & ; |
| ¥ | 人民币 | ¥ ; |
| © | 版权 | © ; |
| ® | 注册商标 | ® ; |
| ° | 摄氏度 | ° ; |
| ± | 正负号 | ± ; |
| × | 乘号 | × ; |
| ÷ | 除号 | ÷ ; |
| ² | 平方2（上标2） | ² ; |
| ³ | 立方3（上标3） | ³ ; |
更多推荐
HTML5 【第一天】
发布评论