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 10 29日相关推荐

【不忘初心】Win10_20H2_2009_19042.572_X64_六合一_[纯净精简版](2020.10.29)
母版来自MSDN WIN10_20H2.19042.508,集成补到19041.572,20H2相比1909 2004版本要稳定很多,精简起来也比较顺手,相对来说体积比之前的要小一些,精简方法基本上 ...
2020.10.29腾讯QQ音乐社招前端电话一面总结
2020.10.29腾讯QQ音乐社招前端电话一面总结面试官晚上19:16打过来的,聊了44分钟,到八点准时结束.无论过没过,都记录一下面试过程吧,是问了几个大问题,在几个大问题的基础上根据你的回答, ...
第三轮测试卷一（2020.10.29）
第三轮测试卷一(2020.10.29) 铺石板,输入n x m的广场,和a x a的石板,求最少需要多少石板? /* 算法思想:没啥.... 理解向上取整就行 */num=((n+a-1)/a)*(( ...
前仿真和后仿真的区别，按键消抖设计思想、PLL使用、ODDR2的原语使用 --2020/10/29工作总结
2020/10/29工作总结前仿真和后仿真的区别前仿真综合后仿真后仿真 synthesize和implement.generate bitstream 参考链接按键消抖设计思想 PLL使用 ...
【2020.10.29 洛谷团队赛普及组】T2 U138014 魔法药水
题目描述小武的实验室里有一种魔法药水,这个药水有个很奇怪的性质,它只能在盛放的体积为2的幂次时保持稳定,例如1,2,4,81,2,4,81,2,4,8.所以小武在实验室里放置了很多容积为2的幂次的 ...
重装正版Windows 10和Microsoft office home and student 2019教程（2020.10.29）
目录环境准备:一个U盘(至少8G) 步骤第一步利用微软下载工具制作U盘启动盘到微软官网下载Windows 10 界面,"点击立即下载工具"后会弹出一个下载界面, 下载此文 ...
类神界原罪2的摄像机控制——Unity随手记（2020.10.29）
好久没写博客了事情的起因是我想要实现一种摄像机,要求摄像机能跟随锁定角色移动的同时还能绕角色旋转旋转.类似神界原罪2锁定角色后的摄像机. 先放上最后的实现代码 // 要跟随的目标public Tra ...
被开会占满的周四2020.10.29日记
生活日记上午醒来后还是球赛后遗症,不过这次反应强烈的是两只脚,脚背上半部分特别疼,只能慢慢的走路了. 中午班级开了入党积极分子的推优会,我第一次做了一把计票员,体验还是满独特的.下午照常的那位老师的 ...
【】已定，10月29日无限火力、乱斗2019开放时间
10周年庆典今年是英雄联盟LOL10周年庆典,此次庆典开始时间是10月16日,也是大家最初猜测无限火力于10月16日开放的原因. 福利彩蛋回馈可惜的是英雄联盟LOL主宰人拳头公司并没有如大家所愿, ...

2020 10 29日

2020 10 29日相关推荐

最新文章

热门文章