2020 10 29日

网站由具有特定服务的网页组成

网页由图像文字声频视频链接等元素组成,以浏览器查看的HTML文件
HTML:超文本标记语言

网页的形成
1.前端工程师用开发工具写代码 —— 标签及内容;
2.浏览器解释和渲染代码: 1.解释:读取 HTML 并分析 HTML 结构和内容;
2.渲染:生成最后的页面并显示结果;
3.用户在浏览器中浏览页面的展示结果。

常用浏览器
1.谷歌浏览器 Chrome
2.火狐浏览器 Firefox
3.Safari(苹果电脑) / iPhone / iPAD
4.IE / Edge(微软)
5.欧朋浏览器 Opera

Web标准
结构:HTML 网页元素的结构和内容
表现:CSS 网页元素的外观和位置,包括:版式、颜色、大小等
行为:JavaScript 网页模型的定义与交互
【HTML结构最重要】
为什么需要 Web 标准?
让不同的浏览器按照相同的标准显示结果,展示统一内容
HTML 语法规范
标签的书写规范是什么?
1.所有标签都包含在 <> 中间,例如:;
2.大多标签都是成对出现的(双标签),例如:,其中: 1. 开始标签;2. 结束标签,结束标签在标签名前有一个 /(斜线);

3.单标签不需要结束标签,例如:

双标签和单标签的特点是什么?
1.双标签是成对出现的,有开始标签和结束标签;
2.单标签不需要结束标签。

html 根标签,是页面中最大的标签
head 设置页面信息,例如网页标题 title 以及其他告诉浏览器或爬虫的信息
title 网页标题,显示在浏览器标签上
body 网页文档内容,供用户浏览

1. 标签的作用是什么?

告诉浏览器当前页面是 H5 的网页;

必须写在页面的第一行 的上方;
不是 HTML 标签,是文档类型的声明标签。

2.lang 的作用是什么?
lang 用来定义当前文档显示的语言;
en 英语;
zh-CN 中文。

3.charset 字符集应该用哪一个字符集?
charset=“UTF-8”;
网页中一定要写,否则有可能会出现乱码的情况;
UTF-8(万国码)以前常用的字符集; GB2312:常用汉字;
GBK:国标汉字;
BIG5:繁体中文(台湾)。

HTML 提供了几个等级的标题?
标题共有 6 个等级,从<h1.>到 <h6.>
重要性依次递减
字号依次递减
独占一行

「段落标签和换行标签」

1.段落标签和换行标签的作用是什么?
◦段落标签负责显示一段文字;
◦换行标签会把文字强制换行。

2.段落标签的是什么?有什么特点?
◦段落标签是 p 标签;
◦特点: ◾是双标签,段落内容包含在开始标签和结束标签之间;
◾文本在一个段落中会根据浏览器窗口的大小自动换行;
◾段落和段落之间有一定的空隙。

3.换行标签是什么?有什么特点?
◦换行标签 是 br 标签;
◦特点: ◾是个单标签;
◾换行后只是另起一行,不像 p 标签会有明显的间距。

4.在 VSCode 中看到的文本排列方式和浏览器中的一样吗?
◦浏览器在显示页面时,会把 HTML 文件中多个空格或换行合并成一个空格显示。

「文本格式化标签」

1.文本格式化标签的作用是什么 ?
◦突出显示,比普通文字重要。

2.文本格式化标签
strong 或 b 加粗,更推荐 strong
em 或 i 倾斜,更推荐 em
del 或 s 删除线,更推荐 del
ins 或 u 下划线,更推荐 ins

3.为什么推荐使用单词较长的标签?
◦使用 strong、em、del、ins 语义更清晰、更强烈。

「div 和 span 标签」

1.div 和 span 标签的语义是什么 ?
◦div 和 span 没有语义;
◦是在布局时用来装东西的盒子

2.div 和 span 的区别是什么?
div 大盒子,一行一个
span 小盒子,一行多个

「图像标签」

1.在 HTML 中,用哪一个标签来定义图像?
◦图像标签:img,是英文单词 image 的缩写

2.图像标签的必须属性是什么?为什么?
◦src 属性是图像标签的必须属性;
◦因为只有指定了图像文件的路径和文件名,图像标签才能正确地显示图片。

3.几个图像属性,作用是什么?
src 图片路径 指定图像文件的路径和文件名
alt 文本 替换文本,图像不显示时显示
title 文本 提示文本,鼠标悬停的时候显示

4.属性的书写位置在哪里?
◦属性写在开始标签中,在标签的名字后面,语法格式如下:
<标签名 属性名1=“属性值1” 属性名2=“属性值2”>
<img src=“路径” alt="" title=">

5.图像的宽度和高度需要同时指定吗 ?为什么?
◦宽度属性 width / 高度属性 height;
◦现阶段不需要同时指定宽高,浏览器会根据已经指定的宽或高,等比例缩放图像。

6.哪一个属性没有智能提示?
◦边框属性 border 没有智能提示,后续会利用 CSS 设置图像边框。

7.几个图像属性,作用是什么?

src 图片路径 指定图像文件的路径和文件名
alt 文本 替换文本,图像不显示时显示
title 文本 提示文本,鼠标悬停的时候显示
width 像素 图像的宽度
height 像素 图像的高度
border 像素 图像边框的粗细

「相对路径」

1.什么是相对路径?
◦以文件所在位置为参考基础建立的目录路径。

2.文件夹之间用什么符号分隔?(下一级路径写法)
◦文件夹之间使用 / 分隔

3。 …/ 是什么意思?
◦…/ 表示上一级文件夹。

4.一个文件会有多个上级文件夹吗?
◦一个文件最多只能有一个上级文件夹,不会有多个上级文件夹。

「绝对路径」
1.什么是绝对路径?
◦文件或文件夹的绝对位置,能够直接定位。

2.问绝对路径能够定位唯一的文件或者文件夹吗?
◦绝对路径能够定位唯一的文件或文件夹。

「链接标签」

1.链接标签的作用是什么?
◦从一个页面链接跳转到另一个页面或者页面的其他位置。

2.链接标签是单标签还是双标签?为什么?
◦链接标签是双标签;
◦可以在链接标签内部包含其他元素(点击谁),href 属性用来指定跳到哪。

3.链接标签的语法是什么?哪一个属性最重要?
文本或图像
◦href:目标位置
◦target:窗口打开方式
◾_self(默认)在当前窗口打开
◾_blank 在新窗口中打开
◦链接标签的 href 属性最重要,指定链接跳转的目标位置。

4.内部链接会跳转到哪里?可以使用相对路径吗?
1.外部链接,跳转到其他网站,跳出当前网站;
2.内部链接,网站内部页面之间的相互链接,可以使用相对路径。

5.在开发时时候空链接?空链接有什么特点?
◦开发过程中,还不能确定链接目标时可以暂时使用空链接。
[空链接会重新刷新页面。]

6.下载链接有相比较其他链接有什么特殊的?
◦下载链接,如果 href 的地址是一个浏览器默认不支持的文件类型,就会下载。

「锚点链接」

1.锚点链接的作用是什么?
◦锚点链接可以实现页面内跳转。

2.目标标签需要增加什么属性,才能实现锚点链接的跳转?
◦目标标签需要增加 id 属性,才能实现锚点链接的跳转 —— 跳转到 id 所在位置

3.锚点链接的语法是什么?
◦锚点链接的语法是:href="#id"

「注释标签和特殊字符」

1.VSCode 中注释的快捷键是什么?
◦ctrl + /。

2.HTML 中的注释有什么用处?我们开发的时候要写注释吗?
◦注释是给程序员看的,可以帮助程序员阅读和理解代码,注释不会显示在页面中;
◦在开发页面时,页面内容通常是从上向下顺序排列的,合理使用注释能够辅助拆分页面结构。

3.前端工程师一般记住几个特殊符号就可以了?
◦空格  :no break space
◦大于号 >:greater than
◦小于号 <:less than

vxcode快捷键:
在这里插入图片描述

chrome浏览器快捷键浏览器快捷键

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页