学习目标:理解:网页的基本组成、什么是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字符实体标签
代码中明明输入了多个连续的空格,但是网页它只能识别出一个
字符实体标签:
只要记住空格这个就行了。 注意 后面有个分号“ ; ”