day1

1.什么是网页？
网站是网页的集合
网页是网站的一个页，通过浏览器阅读，通常是HTML格式的文件。
网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，经常见到的网页后缀多为.htm或.html结尾，因此将其俗称为HTML文件。
2.什么是HTML？
是超文本标记语言，是一种描述网页的语言。
不是编程语言，是标记语言。
标记语言是一套标记标签。
3.超文本的含义
（1）超越了文本限制：可以假如图片、声音、动画、多媒体等内容。
（2）超级链接文本：可以从一个文件跳转到另一个文件，与任何地区主机的文件连接。
4.常用浏览器
浏览器是网页显示。
火狐（Firefox）、谷歌(Chrome)、Safari、Opera、IE。
5.浏览器内核
是渲染引擎，读取网页内容、整理讯息、计算网页的显示方式并显示页面。
Trident（IE、猎豹安全、360极速浏览器、百度浏览器）
Gecko（Firefox）
webkit（Safari）
Blink是webkit的分支（chrome、opera）
Webkit/Blink（360、UC、QQ、搜狗等）
6.web标准
是W3C组织和其他标准化组织制定的一系列标准的集合
W3C万维网联盟是国际最著名的标准化组织
7.为什么需要web标准？
浏览器不同，显示出来的页面排版就由差异，为了让不同的开发人员写出的页面更加标准，还使：web发展前景更广阔/内容可以被广泛的设备访问/容易被搜索引擎搜索/降低网站流量费用/网站更易于维护/提高页面浏览速度。
8.web标准的构成
结构：对网页元素进行整理和分类，主要指html。
表现：对网页元素的版式、颜色、大小等外观样式进行设置，主要指CSS。
行为：网页模型的定义和交互的编写，主要指JavaScript。
9.web标准提出的最佳体验方案
结构、表现、行为相分离
结构写在html文件中，表现写在css文件中，行为写在JavaScript中。
10.html语法规范
（1）<标签></标签>（标签在尖括号内，大多成对出现）。
（2）有的标签是单标签，比如< br/ >。
11.标签的关系
包含关系（父子关系、套娃）和并列关系。
12.html基本结构标签
骨架标签，页面内容在这些基本标签上书写。
html页面也称为html文档。

如上图：
html标签是页面中最大的标签，称为根标签。
head标签是文档的头部，head标签中必须要设置的标签是title。
title标签是文档的标题，使页面有一个属于自己的网页标题。
body标签使文档主体，里面放页面的内容。
13.开发工具
VSCode的使用
（1）新建文件（ctrl+N）。
（2）保存文件（ctrl+S），要保存为.html文件。
（3）ctrl+加号键/减号键，可以放大缩小视图。
（4）输入!后按tab键，生成页面骨架结构。
（5）在浏览器中预览页面，添加插件open in browser，单击鼠标右键，在弹出的窗口中点击“Open In Default Browser”。
14.VSCode工具生成骨架标签新增代码
（1）< !DOCTYPE>标签（页面第一行，不是html标签，知识个声明文档的标签）
文档类型声明标签，告诉浏览器要用html5版本来显示网页
（2）lang语言
定义当前文档显示的语言
en为英语网页
zh-CN为中文网页
不论此网页为英文的还是中文的，内容中的英文和中文都可以正常显示
这个属性对浏览器和搜索引擎是有作用的
（3）charset字符集是多个字符的集合，以便计算机能够识别和储存各种文字。
在head标签内，可以通过< meta>标签的charset属性来规定html文档应该使用哪种字符编码。
< meta charset=“UTF-8”/>（不写的话可能会引起乱码的情况）
charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家能用到的字符。
14.html常用标签
根据标签的语义，在合适的地方放一个合理的标签，可以让页面更加清晰。
（1）标题标签< h1>-< h6>（语义是重要性，重要性依次递减）
< h1>我是一级标题< /h1>
特点：加了标题的文字会加粗，字号依次变小。
一个标题占一行。
总共有六级。
（2）段落标签< p>< /p>(可以把html文档分割成若干段落)
< p>这是一个段落标签< /p>
特点：文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保持有空隙
（3）换行标签< br />（强制换行）
特点：单标签
简单的开始新的一行，和段落不同，段落之间会插入一些垂直的间距
（4）文本格式化标签（粗体、斜体、下划线等，突出重要性，比普通文字更重要）
< strong>< /strong>（加粗 优先）
< b>< /b>（加粗）
< em>< /em>（倾斜 优先）
< i>< /i>（倾斜）
< del>< /del>（删除线 优先）
< s>< /s>（删除线）
< ins>< /ins>（下划线 优先）
< u>< /u>（下划线）
（5）盒子标签（装饰）
< div>< /div> （分割，分区，大盒子）
特点：一行只能有一个div，一个div单独占一行。
< span>< /span> （跨度、跨距，小盒子）
特点：一行可以有多个span。
（6）图像标签
< img src=“图像名.格式” />
src是< img>标签的必须属性，它用于指定图像文件的路径和文件名
属性：属于这个图像标签的特性
首先，要将图形和html文件放在一起
（7）图像标签的其他属性
alt：替换文本，图片不能显示时的文字
title：提示文本，鼠标放在图像上，显示的文字
width：图像的宽度（单位是像素px，不写单位时默认px）
height：图像的高度（单位是像素px，不写单位时默认px）
border：图像的边框粗细（单位是像素px，不写单位时默认px）
仅修改宽度或者高度，图片会进行等比例的放大缩小
15.课堂案例（体育新闻）
案例地址：D:\所有作业\黑马