360奇舞特训营（一）：HTML

lingdududu 发布于2019-08-01 16:03 / 2667人阅读

摘要：昨天上课的老师是超厉害的赵文博老师，主要内容是相关。下面是对昨天课程的总结赵文博老师什么是前端开发使用标准技术开发网页或应用通常运行在浏览器可交互根据设计图还原成页面，参考产品经理的需求，再做成页面。拼写检查，不是布尔值。

昨天去上了第一节360奇舞前端培训的第一节课，见着了仰慕已久的月影大大，心里超级超级激动。昨天上课的老师是超厉害的赵文博老师，主要内容是HTML相关。以前一直觉得HTML自己学得还好，昨天上完课后就感觉自己还有很多地方不足，特别是很多细节方面的把控，以及很多经验层面上技术的缺失。下面是对昨天课程的总结：

12-03 HTML 赵文博老师

什么是Web前端开发

使用web标准技术

开发网页或web应用

通常运行在浏览器

可交互

根据设计图还原成页面，参考产品经理的需求，再做成页面。交互：使用HTTP接口。

前端：功能、设计（界面）、兼容性、安全性、性能（打开的快不快）、用户体验（做一个前端就是做一个用户体验）、可用性（无障碍性，做出来的产品对于所有的人都能很顺利的访问到，包括有疾病的人，比如色盲、盲人、手脚不便的人。设备性：可能在电脑上访问正常，手机上访问不正常，比如国内浏览器省流量的模式，很多图片不能下载）

属性和API一定要背会

浏览器：chrome,firefox,safari,opera,ie

基本的浏览器结构：

UI Backend：和操作器系统相关的如何绘制页面
浏览器引擎：

壳浏览器（没有做自己的渲染引擎和JavaScript引擎，IE内核）
：360浏览器（急速模式：webkit,其他模式:lE引擎），UC浏览器，QQ浏览器，搜狗浏览器，一般都是双内核
URL：结构：

编辑器：Atom,Visual studio code,vim,sublime text

HTML:简介和文本

HTML：使用标签来描述页面的内容和结构。HyperText Markup Language。

Doctype:1.指定HTML页面使用的标准和版本，2、浏览器根据 doctype 来决定使用哪一种渲染模式。渲染模式：怪异模式Quirks Mode，准标准模式Almost Standard Mode（比较严苛？当时每太听清，也没找到相应的资料，找到了再补充），标准模式Standard Mode。不写doctype就到怪异模式。

XHTML 1.0,2000：用XML语法重新定义HTML，语法严格要求。

XHTML 2.0：不兼容历史（旧的页面在浏览器中完全不能用），去除样式类标签。去除img、a，彻底修改Form，开发者不欢迎，浏览器不支持。

HTML5：

HTML5设计思想：1、兼容已有内容，2、避免不必要的复杂性，3、解决现实的问题（支持实现复杂的交互，比如定位，locals），4、优雅降级（比如，可以在canvas中写html，如果浏览器中不支持canvas，就执行canvas中的html代码，支持就忽略继续执行。），5、尊重事实标准，6、用户》开发者》浏览器厂商》标准制定者》理论完美。

HTML5中的变化：doctype、meta，新增语义化标签和属性，去掉纯展示性标签，canvas、video、audio、离线、本地存储、拖拽等

HTML5中的语法：标签不区分大小写，推荐小写；空标签可以不闭合，比如input、meta；属性可以不用引号，推荐双引号

标签分类：流式元素、可交互内容、段落内容、标题内容、章节内容

HTML中的文本标签：

p、h1~h6（读附加的文章，会影响SEO）、hr段落级别的话题切换（在一个section中讲一个时期，前面几段是一个主题，后面是一个主题，在两个主题中间加一个

语义，展示出来是一个横线）;

列表：有序列表（ol,ol中有一个start属性，从几开始）、无序列表（ul）、列表嵌套（默认的一级、二级前面的图标不一样）、定义列表（dl，用来描述键值对，dt,dd，一个dt可以对应多个dd，多个dt可以对应一个dd）;嵌套规则。

引用：

长段落引用；短引用，比较短，只提到书名、电影名之类的；;
cite和q的区别：cite表示这块东西的来源、标题，书名，第一章之类。q引用一句话，包括的一句内容。

预格式化文本：pre（p中的标签会把多个空格、换行合为一个空格）：保留代码中的原格式，包括换行，空格

代码：code .短代码…，长代码

…

figure：可以用来表示图表，也可以做其他用途。

对figure的标题

网页总体结构：

内容划分：header、nav、main、article、aside（附加的内容，去掉能看懂，如果看不懂应该放入main中）、footer

我因为用什么标签？

强调：strong: 重要性、严重性和紧急性（比如医院中是否要找一个医生吗？是，立即，马上。）；em：从一句话中突出某个词语（比如是否需要找一个医生？不，要一个护士。护士用em，强调一个词）；b：将词语从视觉上和其他部分区别，比如一篇论文摘要中的关键词；i：换一种语调去说一句话时，比如其他语言翻译，对话中的旁白

定义与缩写：dfn 定义；abbr 缩写，title属性做进一步的解释。比如：

HTML是HyperText Markup Language的简称，一种用户创建网页的标记语言

HTML 标准由W3C 制定和修改。

代码：code；var 描述变量；需要kbd 用户操作键盘时可以用；samp 用例的输出。

上标和小标：sup；sub

mark：和用户当前行为相关的突出，比如在所示结果中匹配到的词，或者在一部分内容需要在后面引用时。

插入和删除：ins 插入；del 删除

换行控制（尽量避免）：br 手动控制内容换行；wbr 在展示的时候，需要换行时，会在wbr出现的地方做一个换行的处理

div和span：找不到其他标签用的时候

实体（Entity）字符：& <>:©¥

HTML：链接

省略协议：现在是什么协议就会跳转成什么协议，比如当前现在是http，跳转后是http。可以节省一点字节，如果在https中引用了http的资源，浏览器时不会让引用的，但是如果省略协议，浏览器就可以跳转成HTTPS，就可以用了。
省略协议和host：会自动补齐协议和host.

$0 当前选中的东西。 Chrome控制器中的

相对路径和绝对路径：

  绝对路径  host省略，从跟目录写起，这个用的比较多。

  相对路径
  相对路径

页面内链接（锚点）：

     到test

链接目标：

     当前窗口打开
     新窗口打开
     自定义abc方式

HTML：图片

”替代文字” alt必须写，比如盲人在用读屏设备，就读alt中的文字。图片未加载，可以通过alt来表明图片内容。width和height建议在html中写。Html中的width和height不能写单位，默认为px

指定图片宽高：
不指定高宽：原图大小显示；指定宽度：按比缩放到指定宽度；指定高度：按比例缩放到指定高度；指定宽高

常用图片格式：
1、Jpg：照片，颜色种类比较多；2、Png：色彩较少时使用，png24可以办透明；3、Gif:：适合色彩较少时，无法半透明，可以多帧做动画；4、Webp：google新出的，照片和色彩较少的都可以使用，而且大小会比jgp和png小一些，但是有部分浏览器不支持，所以有兼容性问题。

HTML：表格

table, 只要被认为是表头都可以用th


列组（colgroup）可以一列一列的来定义样式

表格标题，caption 必须是table的第一个元素，对盲人读屏软件来说要先知道这个表格做什么的

可以用css来绘制表格，有什么区别呢？1、用css描写，会把表格给固定了，要调整位置很麻烦，会要把html重写2、性能问题，如果用css，要把html加载后，再加载样式3、语义化

HTML：表单

使用form获取让用户提供数据

action：在用户提交数据后，希望提交到哪个URL。

GET vs. POST
1、get从服务器获取，get是一个比较安全的操作，不会对服务器的数据有改动；post向服务器提交数据，会对服务器的数据有一些改动；2、缓存上，get有可能是缓存的，post永远不会缓存；3、数据传输的方式，get请求会把每一个字段都放在url中，可以一次性把请求都发给服务器，POST不会把数据放在url中，而是会进行编码，然后把编码后的数据存在http的body中，再发送给服务器。数据发送时分两拨，先发送head，服务器同意后再发送body。

URL encode（编码）

HTTP method:
GET、POST、HEAD：不会返回http内容，只返回http head、PUT、DELETE、OPTIONS：用来返回HTTP有哪些head选择，常用在跨域中

单行文本框：

placeholder：

autofocus：焦点focus到要输入的地方

密码：

多行文本框：

输入验证：required：必填的；想要更好的提示语句在js中写，原生的验证及时性不是很好.

type：
search,email,url，在可用性上做一些辅助，对读屏软件来说有区别，在手机上有区别，键盘的布局会不一样，在手机上如果是search，go会变成搜索。而且有输入验证，比如email，会验证邮箱格式。

novalidate：
不实现验证，在。如果要自己实现验证，不用默认的就写这个：

radio：单选框

checkbox:复选框

laber：
关联文字，使点击文字也可以点击到。以及读屏软件可以同label知道输入的是什么。两种方式：

请输入你的名字：

select：
实现多选：加一个 multiple 属性；size属性，决定露出来几个选项，默认1个

分组： optgroup

hidden：
不在界面上展示出来，隐藏。type=”hidden”

文件选择：multipart/form-data：把提交的file分为几段
同时选择多个文件：;对选择的文件进行一个筛选： // 只能选择图片;可以不用原生的上传，使用js

date & time：

datetime-local
month
week
number &range：
input type=”number” min=”0.5” max=”2.5” step=”0.01” name=”height” value=””
input type=”rage”
元素：对用户输入的输出结果 output for=”weight”
color:

button：
type属性：submit,button（没有默认行为，要用js来实现）,reset。默认值是submit
回车提交：？？？
只要有input，按下回车后就会提交，浏览器自动触发？？

触发控件：
disabled, readonly：对readonly来说会提交到服务器，但是只读。disabled不能提交到服务器
表单设计：
帮助用户不出错（能让选的就不让填，对填的可以进行一些辅助，比如输入邮箱的时候提示补全）
尽早提示错误
扩大选择/点击区域
空间较多时要分组
分清主要动作和次要动作
传统上，用p把input包裹起来比较多。

HTML：扩展知识
全局属性：（几乎所有的元素都可以拥有的属性）
1、accesskey & tabindex
accesskey 可以给每个元素指定一个key，当用户在键盘上按下ctrl+alt+这个key，就相当于点击了这个元素。如何告诉给用户可以这样按呢？有的插件当按下Ctrl时，会在旁边显示。
tabindex 通过table键可以控制页面元素。如果做得不是很好，会出什么问题呢？
2、id,class,style
3、contenteditable & spellcheck
contenteditable : 页面是可以被修改的，而是是html的，是富文本的，不是text的。
spellcheck：拼写检查，不是布尔值。这样写spellcheck=””
4、语言lang & dir
lang：在大网站有多语言版本时，很有用。
dir：文字书写方向，默认是从左到右的书写顺序。从右到坐时：dir=”rtl”
5、title
鼠标放上去，可以看见解释或者完全的文字。体验不是很好，因为有延迟。所以一般自己做
6、hidden

一般用于暂时隐藏，等待一个时机显示出来。和display:none类似，但是在恢复元素的时候，要考虑是block，还是inline-block。使用hidden属性还有一个是有利于读屏软件。
7、无障碍性
8、web开发者应该做的事情
WCAG（比较老，更多的关注的是内容上的规范）
ARIA（Accessible Rich Internet Applications）对Web的富应用做了一个可用性的规范，不管用什么标签来实现这个功能，可以加上aria属性，来告诉辅助性软件这个标签是做什么的
9、ARIA
指定role

10、提升无障碍性
为img提供alt属性
noscript：HTML标签，对于不支持JavaScript的浏览器，给予一个替代性的方案或者一个提示
input和label对应
图形验证码与语音验证码
文字和背景有足够对比度
键盘可操作
11、语义化
HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
12、为什么语义化很重要？
提升代码可读性、可维护性
搜索引擎优化
提升无障碍性
13、扩展HTML
meta标签：对整个页面相关的一般都写在meta中
data-*属性：来存储自定义的属性， $0.dataset可以用语获取自定义属性的值
apple
banana

microdata：告诉浏览器，这个实体是一个什么东西。Itemscope itemtype itemprop，一个实体
HTML5中的一个规范
在HTML中通过属性嵌入格式化数据
提供给搜索引擎、浏览器（插件）使用。比如在搜索引擎中搜索一个饭馆，可以在搜索页面中，看见提取出来的信息：
```
JSON-LD：
  把上面的代码结合到js中
```
HTML编码规范：html valid..
推荐两个工具：emmet,markdown
caniuse.com

GPU云服务器云服务器奇舞特训营特训营秋招特训营 html 后退一页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50266.html

FISCO BCOS WorkShop | 区块链开发特训营，开课啦！

摘要：是完全开源的联盟区块链底层技术平台，由金融区块链合作联盟深圳简称金链盟成立开源工作组通力打造。我们鼓励机构成员开发者等社区伙伴参与开源共建事业，有你在一起，会更了不起。 FISCOBCOS是完全开源的联盟区块链底层技术平台，由金融区块链合作联盟(深圳)(简称金链盟)成立开源工作组通力打造。开源工作组成员包括博彦科技、华为、深证通、神州数码、四方精创、腾讯、微众银行、亦笔科技和越秀金科等...

yuanxin 2019-06-27 19:22 评论0 收藏0
【面试篇】2017腾讯IMWeb前端秋招特训营思考题

摘要：月日思考题题一站点是否应该出现在标签中题二是否应该支持面试题什么是盒子模型答标准盒和怪异盒简述和的区别答从外部引入资源，将页面导向外部资源简述同步和异步的区别答同步当前进程执行完后，下一个进程才能执行异步当前进程的执行不影响下一个进程的执行 7月12日思考题题一：站点Logo是否应该出现在标签中? 题二:是否应该支持IE6? 面试题什么是盒子模型?答：margin,bord...

darkerXi 2019-08-21 11:47 评论0 收藏0
【面试篇】2017腾讯IMWeb前端秋招特训营思考题

摘要：月日思考题题一站点是否应该出现在标签中题二是否应该支持面试题什么是盒子模型答标准盒和怪异盒简述和的区别答从外部引入资源，将页面导向外部资源简述同步和异步的区别答同步当前进程执行完后，下一个进程才能执行异步当前进程的执行不影响下一个进程的执行 7月12日思考题题一：站点Logo是否应该出现在标签中? 题二:是否应该支持IE6? 面试题什么是盒子模型?答：margin,bord...

littlelightss 2019-08-29 12:55 评论0 收藏0
【面试篇】2017腾讯IMWeb前端秋招特训营思考题

摘要：月日思考题题一站点是否应该出现在标签中题二是否应该支持面试题什么是盒子模型答标准盒和怪异盒简述和的区别答从外部引入资源，将页面导向外部资源简述同步和异步的区别答同步当前进程执行完后，下一个进程才能执行异步当前进程的执行不影响下一个进程的执行 7月12日思考题题一：站点Logo是否应该出现在标签中? 题二:是否应该支持IE6? 面试题什么是盒子模型?答：margin,bord...

Keven 2019-08-01 17:06 评论0 收藏0