昨天去了第一期360奇舞前端培训的第一节课。当看到期待已久的月影时，我超级兴奋。昨天上课的老师是超级厉害的赵文博老师，主要内容是HTML相关的。我曾经认为我的HTML学得很好。昨天上完课，感觉自己还有很多不足，尤其是很多细节的把控，体验层面的技术不够。以下为昨天课程总结：12-03HTML赵文博先生什么是Web前端开发利用Web标准技术开发网页或Web应用程序，通常运行在浏览器中，可以根据交互还原到页面设计图，然后按照产品经理的要求做成页面。交互：使用HTTP接口。前端：功能、设计（界面）、兼容性、安全性、性能（是否快速打开）、用户体验（做前端就是做用户体验）、易用性（易用性，做出来的产品是给大家的)可以顺利访问，包括有疾病的人，比如色盲、盲人、手脚不便的人。设备：在电脑上访问可能正常，在手机上访问不正常。比如国内浏览器的省流量模式，很多图片下载不了）属性和API一定要记住浏览器：chrome,firefox,safari,opera,ie基本浏览器结构：UIBackend：如何绘制操作相关的页面系统浏览器引擎：shell浏览器（没有自己制作渲染引擎和JavaScript引擎，IE内核）：360浏览器（快速模式：webkit，其他模式：lE引擎），UC浏览器，QQ浏览器，搜狗浏览器，一般双coreURL:Structure:Editors:Atom,Visualstudiocode,vim,sublimetextHTML:IntroductionandtextHTML:使用标签来描述页面的内容和结构。超文本标记语言。Doctype：1.指定HTML页面使用的标准和版本，2.浏览器根据doctype决定使用哪种渲染模式。渲染模式：QuirksMode，AlmostStandardMode（比较严格？当时太清楚了，没找到对应的资料，找到了再补充），StandardMode。不写doctype，就会走怪异模式。XHTML1.0,2000：用XML语法重新定义HTML，语法要求严格。XHTML2.0：不兼容的历史记录（旧页面在浏览器中完全无法使用），删除样式标签。去掉img，a，彻底修改Form。不欢迎开发者，浏览器也不支持。HTML5：HTML5设计思想：1.兼容现有内容，2.避免不必要的复杂性，3.解决实际问题（支持复杂的交互，比如定位，locals），4.优雅降级（比如可以在写html中canvas，如果浏览器不支持canvas，执行canvas中的html代码，如果支持，忽略继续执行。），5.尊重事实标准，6.用户“开发者”浏览器厂商“标准制定者”的完美理论。HTML5中的变化：doctype、meta、新的语义标签和属性、移除纯显示标签、画布、视频、音频、离线、本地存储、拖放等。HTML5中的语法：标签不区分大小写，建议使用小写;空标签可以不闭合，如input、meta；属性可以不用引号，推荐使用双引号标签分类：流元素、交互内容、段落内容、标题内容、章节内容HTML中的文本标签：p、h1~h6（多看文章会影响SEO）、hr段落级话题切换（在一个section中讲一个句号，前几段是一个话题，后面是一个话题，在两个话题之间添加一个
语义，显示为一条横线）；list：有序列表（ol，ol有start属性，从几开始），无序列表（ul），列表嵌套（默认第一层，第二层前面的图标不一样），定义列表（dl，用来描述键值对，dt，dd，一个dt可以对应多个dd，多个dts可以对应一个dd）；嵌套规则。引用：
长段落引用；简短的引用，比较短，只提到书名、电影名等；;cite和q的区别：cite表示这个东西的出处，书名，书名，第一章等等。q引用一个句子，包括句子的内容。Preformattedtext:pre(p中的标签会将多个空格和换行合并为一个空格):保留代码中的原始格式，包括换行和空格Code:code。短码...，长码...
图：可以用来表示图，也可以作其他用途。图标题网页整体结构：内容划分：header,nav,main,article,aside（附加内容，去掉就明白了，如果你看不懂，应该放到main里），footer用什么label？重点：强：重要性、严重性和紧迫性（例如，你需要医院的医生吗？是的，马上，马上。）；em：突出句子中的一个词（例如，你需要医生吗？不，想要一个护士。护士使用em来强调一个词）；b：在视觉上将单词与其他部分区分开来，例如论文摘要中的关键字；i：换一种语气说一句话，比如其他语言的翻译，旁白定义和对话中的缩写：dfn定义；abbr缩写，title属性进一步解释。例如：HTML是HyperTextMarkupLanguage的缩写，一种供用户制作网页的标记语言
HTML标准由W3C制定和修订。
代码：代码；var描述变量；可在kbd用户需要操作键盘时使用；samp用例的输出。上标和下标：sup；submark：与用户当前行为相关的高亮显示，例如显示结果中匹配的词，或者后面需要引用部分内容时。插入和删除：ins插入；del删除换行控件（尽量避免）：br手动控制内容换行；wbr显示时，需要换行时，会在wbr出现的地方处理换行div和span:notfoundEntitycharacterswhenusedinothertags:&<>:?￥HTML:linkomissionprotocol:whateverprotocolisnow，它会跳转到任何协议，比如当前是http，跳转后就是http。它可以节省一点字节。如果在https中引用了http的资源，浏览器是不允许引用的，但是如果省略协议，浏览器可以跳转到HTTPS，就可以使用了。Omitprotocolandhost：协议和host.$0会自动填充当前选中的项。Chrome控制器中的相对路径和绝对路径：绝对路径host省略，以目录开头，这个用的比较多。relativepathrelativepath链接（锚点）：测试链接目标：当前窗口打开新窗口opens自定义abc方法HTML:Imagealt一定要写，比如盲人用屏幕阅读器看alt中的文字。图片加载不出来，可以用alt来表示图片的内容。宽高建议用html写。Html中的宽高不能写单位，默认是px。指定图片宽高：不指定高宽：显示原图大小；指定宽度：按比例缩放到指定宽度；指定高度：按比例缩放到指定高度；指定宽度常用图像格式：1.Jpg：颜色较多的照片；2、png：颜色少时使用，png24可以做成透明；3、gif：适用于颜色较少，不能半透明，可以做成多帧的Animation；4、webp：google新出的，photos和颜色少的都可以用，体积会比jgp和png小，但是有些浏览器不支持，所以有兼容性问题。HTML:Table表格，只要是被认为是表头的，都可以使用th表格标题，caption必须是表格的第一个元素，对于盲人屏幕阅读器，你首先要知道这个表是干什么的列组（colgroup）可以按列定义样式 | |
|---|
可以使用css绘制表格，有什么不同？1.用css描述，表格会固定，调整位置很麻烦，而且html要重写。2.性能问题。如果使用css，加载样式前需要先加载html3.语义化HTML：form使用form获取用户提供数据action:用户提交后数据，你想提交到哪个URL。GETvs.POST1，get是从服务器获取，get是比较安全的操作，不会改变服务器的数据；post向服务器提交数据，服务器的数据会有一些变化；2、在缓存上，get可能会被缓存，而post永远不会被缓存；3.数据传输方式，get请求会把每个字段都放在url中，请求可以一次性发送到服务器，POST不会把数据放在url中。相反，它会进行编码，然后将编码后的数据存储在httpbody中，然后发送给服务器。数据分两次发送，先发送head，服务器同意后发送body。URLencode（编码）HTTPmethod:GET,POST,HEAD:不会返回http内容，只返回httphead,PUT,DELETE,OPTIONS:用于返回HTTPhead选项，常用于跨域单行文本框：placeholder:autofocus:聚焦到要输入的地方password:多行文本框:inputverification:required:required;如果想要更好的提示语句，用js写，原来验证时效性不是很好。
type:search,email,url,dosomeassistanceinusability,对读屏软件有用不同的是在手机上是有区别的，键盘的布局也会不一样，如果是在手机上搜索，go会变成搜索。还有输入验证，比如email，会验证email格式novalidate:不实现验证，如果要自己实现验证，就写这个代替默认的：radio:radiocheckbox:checkboxlabel:关联的文字，这样你就可以点击文字。屏幕阅读器软件可以通过标签知道输入的是什么。两种方式：Pleaseenteryourname:
select:Multi-choice:添加一个multiple属性；size属性，决定暴露多少选项，默认1组：optgrouphidden：界面不显示，隐藏。type=”hidden”文件选择：multipart/form-data：将提交的文件分成几个部分，同时选择多个文件：;对选中的文件进行过滤：//只能选中图片；你可以使用jsdate&time:datetime-localmonthweeknumber&range:inputtype="number"min=”0.5”max=”2.5”step=”0.01”name=”height”value=””inputtype=”rage”
一般用来暂时隐藏，等待机会显示。类似于display:none，但是在还原元素的时候要考虑是block还是inline-block。使用隐藏属性的另一个好处是屏幕阅读器。7.Accessibility8.web开发者应该做什么什么tag用来实现这个功能，可以加上aria属性，告诉辅助软件这个tag是干什么的。9、ARIA指定roleObstacle提供alt属性noscript：img的HTML标签，对于不支持JavaScript的浏览器，提供替代方案或提示输入和标签对应图形验证码和语音验证码文本和背景具有足够的对比度，便于键盘操作111.语义HTML中的元素、属性和属性值都具有一定的含义。开发人员应该遵循语义来编写HTML。12.为什么语义很重要？提高代码可读性和可维护性搜索引擎优化提高可访问性13.扩展的HTML元标签：一般写在与整个页面相关的meta中data-*属性：存放自定义属性，可以使用$0.dataset获取自定义属性的值applebanana微数据：告诉浏览器这个实体是什么。Itemscopeitemtypeitemprop，实体HTML5中的一个规范通过属性在HTML中嵌入格式化数据，提供给搜索引擎和浏览器（插件）。比如你在搜索引擎中搜索餐厅，你可以在搜索页面看到提取出来的信息：JSON-LD：将以上代码组合成jsHTML编码规范：htmlvalid。推荐两个工具：emmet、markdowncaniuse。com
