Day68向HTML进阶

谁践踏了优雅 2023-02-28 01:39 121阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70]  
**1.什么是网站？**  
网站是指在因特网上根据一定的规则 ,使用HTML等制作的用于展示特定内容相关的网页集合。  
**2.什么是网页？**  
网页是网站中的一“页”, 通常是HTML格式的文件,它要通过浏览器来阅读。  
**3.网页的构成**  
网页是构成网站的基本元素,它通常由图片、链接、字声音、视频等元素组成。通常我们看到的网页,  
常见以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件。D  
**4.什么是HTML**  
HTML指的是超文本标记语言(Hyper Text Markup Language) ,它是用来描述网页的一种语言。  
HTML不是一种编程语言,而是一种标记语言(markup language)。  
标记语言是一套标记标签(markup tag)。  
**5.所谓超文本，有2层含义:**  
1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。  
2.它还可以从一一个文件跳转到另-个文件 ,与世界各地主机的文件连接(超级链接文本)。  
**6.网页的形成**  
网页是由网页元素组成的,这些玩素是利用html标签描述出来,然后通过浏览器解析来显示给用户的。  
**7.网页总结**  
网页是图片、链接、字、音、视频等元素组成实就是一个htm文件(后缀名为html)  
网页生成制作:有前端人员书写HTML文件,然后浏览器打开，就能看到了网页.  
HTML:超文本标记语言,用来制作网页的一门语言.有标签组成的.比如图片标签链接标签视频标签等…  
浏览器内核  
**8.浏览器内核(渲染引擎)** : 负责读取网页内容,整理讯息,计算网页的显示方式并显顽面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 1]  
**9.Web标准(重点)**  
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。 W3C (万维网联盟)是国际最著名的标准化组织。  
**10.为什么需要Web标准**  
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统- -外 , 还有以下优点:  
1.让Web的发展前景更广阔。  
2.内容能被更广泛的设备访问。  
3.更容易被搜寻引擎搜索。  
4.降低网站流量费用。  
5.使网站更易于维护。  
6.提高页面浏临速度。  
**11.Web标准的构成**  
主要包括结构( Structure)、表现 ( Presentation ) 和 行为( Behavior ) 三个方面。  
结构: 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。  
表现: 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS  
行为: 行为是指网页模型的定义及交互的编写,现阶段主要学的是Javascript  
Web标准提出的最佳体验方案:结构、样式、行为相分离。  
简单理解:结构写到HTML文件中,表现写到CSS文件中，行为写到JavaScript文件中。

◆能够说出标签的书写注意规范  
◆能够写出HTML骨架标签  
能够写出超链接标签  
◆能够写出图片标签并说出alt和title的区别  
◆能够说出相对路径的三种形式

◆HTML语法规范  
◆HTML基本结构标签  
◆开发工具  
◆HTML常用标签  
◆HTML中的注释和特殊字符

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

**12第一个HTML**  
每个网页都会有一个基本的结构标签(也称为骨架标签) ,页面内容也是在这些基本标签上书写标签名.  
< html>< /html>  
HTML 标签 页面中最大的标签，我们称为根标签。  
< head>< /head>  
文档的头部注意在head标签中我们必须要设置的标签是title  
< titile>< /title>  
文档的标题  
让页面拥有一个属于自己的网页标题  
< body>< /body>  
文档的主体,元素包含文档的所有内容，页面内容基本都是放到body里面的  
**13HTML初始页面**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 2]

1.  < !DOCTYPE html>文档类型声明标签 ,告诉浏览器这个页面采取html 5版本来示页面.
2.  < html lang= "en” >告诉浏览器或者搜索引擎这是一个英文网站本页面采取英文来显示
3.  < meta charset=“UTF-8” />必须写.采取UTE-8来保存文字.如果不写就会乱码.具体原理后面分析.  
    **14标签**  
    < h1>< /h1> 一级标题  
    < h6>< /h6> 六级标题  
    < p>< /p> 段落标签  
    < br /> 强制换行标签，break的缩写  
    < img src= alt= title=>  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 3]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 4]  
    **15.图像标签**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 5]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 7]  
    **16.打开页面方式**  
    target打开窗口的方式默认的值是\_ self 当前窗口打开页面blank 新窗口打开页面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 8]  
    **17.空链接，下载链接，网页元素链接**  
    ![在这里插入图片描述][20200719092245575.png]

![在这里插入图片描述][20200719092221613.png]  
**18.特殊字符**  
![在这里插入图片描述][20200719092757990.png]  
**19.表格**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 10]  
**19.VSCode快捷键**  
1.一次创建多个标题：td\*6  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 11]  
2.向下复制：Shift+Alt+↓  
![在这里插入图片描述][20200719100000595.png]  
**20.单元合并**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][20200719100747147.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 13]  
**21.无序列表，有序列表，自定义列表**  
无序列表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 14]  
有序列表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 15]  
自定义列表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 16]  
**22.表单**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 17]  
**23.input表单元素**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 18]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 19]

**24.label标签**  
![\*\*加粗样式\*\*][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 20]  
**25.select表单元素，定义下拉列表**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 21]  
**26.默认选择某项，selected的应用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 22]  
**27.textarea表单元素，多行表单**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 23]  
cols每行多少字,row行数  
![在这里插入图片描述][20200719114029530.png]  
看一下成功：  
**28.成果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 24]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70]: /images/20230209/feefac8708e24bdd9648771c0430cfaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 1]: /images/20230209/4f7cee80a8204a7b90616f7af27d8a6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 2]: /images/20230209/f5decc0ecda14d5c857bbdf4c0206547.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 3]: /images/20230209/2c7f3058be8646c78a3a64c9aea42e02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 4]: /images/20230209/e4431dc7e33e4ec7afb00dfa89347650.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 5]: /images/20230209/714449d7412a4b818e99861e083286ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 6]: /images/20230209/327830a41139477fac62c94964388593.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 7]: /images/20230209/481c301cead8472ea9650cec1a514fe2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200719091921183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[20200719092245575.png]: https://img-blog.csdnimg.cn/20200719092245575.png
[20200719092221613.png]: https://img-blog.csdnimg.cn/20200719092221613.png
[20200719092757990.png]: https://img-blog.csdnimg.cn/20200719092757990.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200719094912875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200719095030470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200719095755179.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[20200719100000595.png]: https://img-blog.csdnimg.cn/20200719100000595.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200719100514748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[20200719100747147.png]: https://img-blog.csdnimg.cn/20200719100747147.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200719101107455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/2020071910183338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200719102107114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/2020071910250537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200719105123473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20200719111221222.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20200719111855116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20200719113105172.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20200719113501653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20200719113706326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20200719113856498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70
[20200719114029530.png]: https://img-blog.csdnimg.cn/20200719114029530.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 24]: https://img-blog.csdnimg.cn/20200719141049588.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70