360奇舞特训营(一):HTML

浏览: 105 发布日期: 2016-12-05 分类: html

昨天去上了第一节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中讲一个时期,前面几段是一个主题,后面是一个主题,在两个主题中间加一个<hr>语义,展示出来是一个横线);

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

  • 引用:<blockquote cite=”http://....”></blockquote>长段落引用;<cite></cite>短引用,比较短,只提到书名、电影名之类的;<q></q>;
    cite和q的区别:cite表示这块东西的来源、标题,书名,第一章之类。q引用一句话,包括的一句内容。

  • 预格式化文本:pre(p中的标签会把多个空格、换行合为一个空格):保留代码中的原格式,包括换行,空格

  • 代码:code .短代码,长代码<pre></pre>
    figure:可以用来表示图表,也可以做其他用途。<figure><figcaption>对figure的标题</figcaption></figure>

  • 网页总体结构:

  • 内容划分:header、nav、main、article、aside(附加的内容,去掉能看懂,如果看不懂应该放入main中)、footer

  • 我因为用什么标签?

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

  • 定义与缩写:dfn 定义;abbr 缩写,title属性做进一步的解释。比如:

<p><dfn>HTML是HyperText Markup Language的简称,一种用户创建网页的标记语言</dfn></p>

<p><abbr title="HyperText Markup Language">HTML</abbr>
标准由<abbr title="World Wide Web Consortium">W3C</abbr>
制定和修改。</p>
  • 代码:code;var 描述变量;需要kbd 用户操作键盘时可以用;samp 用例的输出。

  • 上标和小标:sup;sub

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

  • 插入和删除:ins 插入;del 删除

  • 换行控制(尽量避免):br 手动控制内容换行;wbr 在展示的时候,需要换行时,会在wbr出现的地方做一个换行的处理

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

  • 实体(Entity)字符:& <&gt:©¥

HTML:链接

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

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

  • 相对路径和绝对路径:

      <a href=”/a/b/c.html”>绝对路径</a>  host省略,从跟目录写起,这个用的比较多。
    
      <a href=”a/b/c.html”>相对路径</a>
      <a href=”../../c.html”>相对路径</a>
  • 页面内链接(锚点):

         <a href=#test>到test</a>
    
  • 链接目标:

         <a href=”..”  target=”_self”>当前窗口打开</a>
         <a href=”..”  target=”_blank”>新窗口打开</a>
         <a href=”..”  target=”abc”>自定义abc方式</a>
    

HTML:图片

  • <img src=”/path/to/img.jpg” alt=”替代文字” width=”300” height=”200”> 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

<table border=”1”>
<caption>表格标题,caption 必须是table的第一个元素,对盲人读屏软件来说要先知道这个表格做什么的</caption>
列组(colgroup)可以一列一列的来定义样式
<colgroup>
    <col class=”browser”>
    <col class=”..”  span=2>  <!—两列-->
</colgroup>
<thead>
    <tr>
        <th></th>
        <td></td>
</tr>
</thead>
</table>

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

HTML:表单

  • 使用form获取让用户提供数据
    <form action=”/echo” method=”POST”> 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选择,常用在跨域中

  • 单行文本框:<input name=”username” value=”zhaowenbo”>

  • placeholder:

  • autofocus:焦点focus到要输入的地方

  • 密码:

  • 多行文本框:

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

<form action=”/echo”>
  <p><input  required  minlength=”2”  maxlength=10”  placeholder=”2-10位”></p>
  <p><input  pattern=”1\d{10}”  placeholder=”输入手机号”></p>
</form>
  • type:
    search,email,url,在可用性上做一些辅助,对读屏软件来说有区别,在手机上有区别,键盘的布局会不一样,在手机上如果是search,go会变成搜索。而且有输入验证,比如email,会验证邮箱格式。

  • novalidate:
    不实现验证,在。如果要自己实现验证,不用默认的就写这个:<form action=”/echo” novalidate>

  • radio:单选框

  • checkbox:复选框

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

<p><label for=”name”>请输入你的名字:</label></p>
  <p><input id=”name” type=”” name=””>
  • select:
    实现多选:加一个 multiple 属性;size属性,决定露出来几个选项,默认1个

  • 分组: optgroup

  • hidden:
    不在界面上展示出来,隐藏。type=”hidden”

  • 文件选择:multipart/form-data:把提交的file分为几段
    同时选择多个文件:<input type=”file” name=”resume” multiple>;对选择的文件进行一个筛选: <input type=”file” name=”resume” multiple accept=”image/*”> // 只能选择图片;可以不用原生的上传,使用js

<form action=”/echo” method=”post” enctype=”multipart/form-data”>
<input type=”file” name=”resume”>

date & time:
<input type=”date”>
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>元素:对用户输入的输出结果 output for=”weight”
color:
<input type=”color”>
button:
type属性:submit,button(没有默认行为,要用js来实现),reset。默认值是submit
回车提交:???
只要有input,按下回车后就会提交,浏览器自动触发??
<button onclick=”alert(1)”>不指定type</button>
触发控件:
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
<p hidden>你看不见我</p> 一般用于暂时隐藏,等待一个时机显示出来。和display:none类似,但是在恢复元素的时候,要考虑是block,还是inline-block。使用hidden属性还有一个是有利于读屏软件。
7、无障碍性
8、web开发者应该做的事情
WCAG(比较老,更多的关注的是内容上的规范)
ARIA(Accessible Rich Internet Applications)对Web的富应用做了一个可用性的规范,不管用什么标签来实现这个功能,可以加上aria属性,来告诉辅助性软件这个标签是做什么的
9、ARIA
指定role
<ul role=”menubar”>
<li role=”menulist”>
10、提升无障碍性
为img提供alt属性
noscript:HTML标签,对于不支持JavaScript的浏览器,给予一个替代性的方案或者一个提示
input和label对应
图形验证码与语音验证码
文字和背景有足够对比度
键盘可操作
11、语义化
HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
12、为什么语义化很重要?
提升代码可读性、可维护性
搜索引擎优化
提升无障碍性
13、扩展HTML
meta标签:对整个页面相关的一般都写在meta中
data-*属性:来存储自定义的属性, $0.dataset可以用语获取自定义属性的值
<li data-id=”1”>apple</p>
<li data-id=”2”>banana</p>
microdata:告诉浏览器,这个实体是一个什么东西。Itemscope itemtype itemprop,一个实体
HTML5中的一个规范
在HTML中通过属性嵌入格式化数据
提供给搜索引擎、浏览器(插件)使用。比如在搜索引擎中搜索一个饭馆,可以在搜索页面中,看见提取出来的信息:

JSON-LD:
  把上面的代码结合到js中

HTML编码规范:html valid..
推荐两个工具:emmet,markdown
caniuse.com

返回顶部