HTML学习

学习目标：理解：网页的基本组成、什么是HTML、常用的浏览器有哪些、Web标准三大组成部分

1.基础认知

1.1 认识网页（了解）

问1：网页由什么组成

  文字、图片、音频、视频、超链接

问2：我们所看到的网页背后的本质是?

  前端程序员写的代码 

问3：前端的代码是用过什么软件转换成用户眼中的页面

通过浏览器转化（解析和渲染）成用户看到的网页

1.2五大浏览器

 浏览器：是网页显示、运行的平台，是前端开发的必备利器

 常见的五大浏览器：IE 、火狐、谷歌、Safari浏览器、欧朋浏览器

1.3渲染引擎

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分

浏览器出品的公司不同，内在的渲染引擎也不同。

1.4Web标准

 为什么需要Web标准？

不同浏览器的渲染引擎不同，对相同的代码解析存在差异

 如果用户想看一个网页，结果用不同的浏览器打开效果不同，用户体验差！

Web标准：让不同的浏览器按相同的标准显示结果，让展示的效果统一！

Web标准的构成：

 

2.1HTML的概念

hyper text makeup language 超文本标记语言

        专用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

2.2网页体验--构建基本网页的步骤

1.在一个文件夹中新建一个文本文档。

2.把文档的拓展名改为html

3.用记事本方式打开该文档，并写入文字内容：你吃饭了吗。 保存并退出

4.双击该文档，浏览器会打开，并显示文字内容。

5.再次用记事本方式打开该文档，并修改文字内容为：<strong>你吃饭了吗。</strong>

保存并退出。

6.再次双击打开该文档，浏览器显示的内容与之间的比较，字体变粗了。

总结：

HTML标签要用<>括起来，并且是一对<>,。 如：<标签说明>xxx内容</标签说明>

2.3HTML页面固定结构

2.4HTML语法规范

一、HTML的注释

  写代码时添加注释，方便下次看到时想起功能和定义

  代码中的注释，是给代码阅读者看的，阅读者可能是他人或自己

注释的作用

 为代码添加具有解释性、描述性的信息，主要用来帮助开发人员了解代码

 浏览器执行代码时会忽略所有的注释

注释的快捷键

 在VS Code中：Ctrl + /

二、HTML标签的构成

三、HTML标签的关系

2.5HTML标签学习

排版标签: 标题标签、段落标签、换行标签、水平线标签

文本格式化标签

媒体标签

链接标签

排版标签

一、标题标签

二、段落标签

三、换行标签

四、水平线标签

 

文本格式化标签

 媒体标签

一、图片标签

 

 在平时 写代码时，对于 width 和 height ，只需要写一个就行，另一个会等比例缩放-----好处是图片不会变形

二、路径

绝对路径（了解） 

因为你设置的网页图片使用了绝对路径的话，那个图片在你的电脑是有的，但是别人的电脑在该绝对路径下有没有呢?如果没有，那么别人打开你做的网页，不就显示不了图片了。 

相对路径（常用）

 同级目录：

下级目录：在更内层，直接不断深入进去就行了。

上级目录：通过  ../ 返回上一层目录，若更上你就接着返回。

三、音频标签

如果你只给src，在网页是看不到音乐的，得加上 controls，才能显示，再手动点击播放， 

（谷歌浏览器不允许音频自动播放）

四、视频标签

谷歌浏览器允许视频自动播放，但是必须是在muted(静音)下播放

超链接标签

href：跳转地址

 通过新窗口打开超链接的方法，从而保留原来的页面，创建新页面。

2.HTML基础

2.1列表标签

2.1.1列表的应用场景

2.1.2无序列表 

ul代表整个无序列表

<ul></ul> 

2.1.3有序列表

 ol标签：表示有序列表的整体

 可见，究竟谁在前谁在后得自己编辑。。。。。。。。。。

2.1.4自定义列表

 dl：表示自定义列表整体，用于包裹dt，dd标签

dt：表示自定义列表主题

dd：表示自定义列表的针对主题的每一项内容

2.2表格标签

 

2.2.1表格标签相关属性

 

 

 

 

表格标题和表头单元格标签

效果：

 

表格的结构标签（了解）

有无结构标签在得到的结果上，对我们的视觉上没区别，但是对浏览器内核而言，有结构标签的话，处理效率高一点。

合并单元格：

思路：

代码实现：

 

 

示例：

 

2.3表单标签

2.3 表单标签

2.3.1 input标签 

使用场景：登陆页面，注册页面，搜索页面

 

演示：

 

 

 密码框输入的内容全部不可视，显示成原点。

 

2.3.2input系列标签--文本框

 

用来写提示内容

2.3.3input系列标签--单选框

 

同组的单选框中，若有一个含有属性checked的话，会默认选中它

2.3.4input系列标签--文件选择

 

通过该属性，能够上传多个文件。

2.3.5input系列标签--按钮与form

 要想那几个按钮能用，就必须要使用form标签配合。 让计算机知道把哪些东西提交/重置

每当用html写网页时，最好都用一个form标签在body里面，这样，写的任何按钮标签都能起作用了！！！！！！！！！！！！！！！！！！！！！！！！！！

2.3.6 button按钮标签

注意：与上面那个区分开，上面那个是：input标签中，令type属性 为button

这里是button标签：<button> </button>

 

 

 

2.3.7 select下拉菜单标签

2.3.8文本域标签-textarea

2.3.9 label标签

 方法1比较麻烦。

name是实现同组，使得单选功能实现；label、for 、id实现点“文本字，如：男，女”就能选择

第二种方式：

效果一样。

2.4 语义化标签 （常用）

2.4.1 没有语义的布局标签-div和span

 

通过观察代码和结果知道，div标签会独占一行，而span标签的内容可以在同一行。

 

2.4.2有语义的标签（了解）

（这些标签都是做手机端网页用的）

 

 

 

 

2.5字符实体标签

 

 代码中明明输入了多个连续的空格，但是网页它只能识别出一个

字符实体标签：

 

 

 只要记住空格这个就行了。 注意 后面有个分号“ ; ”