继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

奇舞团前端特训第一次课程笔记——HTML

_So_
关注TA
已关注
手记 12
粉丝 42
获赞 398

1. 前端考虑因素

  • 功能,兼容性,安全性,设计,可用性,性能,用户体验

    2. 浏览器结构

    3. 浏览器内核

  • 浏览器 渲染引擎 js引擎
    IE Trident ([‘traɪd(ə)nt]) Chakra
    IE Edge EdgeHTML Chakra
    chrome Bink V8
    opera Bink V8
    Firefox Gecko ([‘gekəʊ]) Spidermonkey
    Safari Webkit JavaScriptCore

4. html标签

5.链接

  • 省略协议:会根据当前页面的协议自己补充
  • 省略协议和host:会根据当前页面的协议和host自己补充
  • 锚点:#后面没有任何东西就会到页面顶部
  • target : target="abc",给一个名字,在相同名字打开的窗口会在同一个窗口打开

6.图片

  • alt:替代文字。<img src="x/x.jpg" alt="替代文字" width="300" heigth="300"> 读屏软件能读,还有省流量模式下显示文字,还有seo友好。
  • withd,heith:建议写上,在图片还没加载完,它会占据空间,避免闪动。不指定宽高,原图大小显示;指定宽度,按比例缩放到指定宽度;指定高度,按比例缩放到指定高度。
  • 常用格式
    • JPG 照片
    • png 色值较少的情况;半透明
    • gif 无法半透明;可以实现多帧动画
    • webp 大小更小;兼容性不好

7. table

<table> <!--必须是table第一个子元素--> <caption>浏览器引擎</caption> <colgroup> <col calss="first"> <col calss="second-third" span="2"> <!--批量为每列添加样式,span是跨越几列--> <colgroup> <thead> <tr> <th>浏览器</th> </tr> </thead> <tbody> <tr> <th>chrome</th> </tr> <tbody> </table>

8. form

  • GET:浏览器一般会缓存;数据第一次就会随http header发送到服务器;一般只为获取数据,不修改服务器数据
  • POST:一般不缓存;数据第二次就随http body发送到服务器;对服务器数据有修改时使用
  • 输入验证
    • required
    • minlength="2" maxlength="10"
    • pattern="1\d{2}"
  • type: search(对于读屏软件友好,手机上键盘上会有搜索按钮),text,email,url
  • novalidate: 在form上添加该字段,浏览器禁用默认的验证
  • label: 关联checkbox和文字联动,增加易用性;<lable for="name"></lable><input id="name"><lable><input/></lable>,两种方式关联,对读屏软件友好
  • select: 、
    • multiple 多选
    • size 多选时显示几个
    • optgroup 分组
  • 文件选择
    • enctype:multipart/form-data,用一个boundary分隔符去分割每个字段,

      ----webkitboundarydsadsadsd
      Content-Disposition: form-data; name="name"

      John
      ----webkitboundarydsadsadsd

  • date & time:
    • date
    • month
    • week
    • time
  • number & range: min,max,step
  • output: for属性,来自于谁的输出(填input的name),但还是需要js来辅助输出
  • button:type
    • submit,默认的type值,注意;如果绑定了click事件,回车提交前浏览器会触发click事件再提交(button在form里)
    • button
    • reset
  • readonly & disabled:用户都不可操作;区别在于,readonly的字段还是会提交到服务器的,但disabled的不会被提交到服务器
  • 表单设计
    • 帮助用户不出错
    • 尽早提示错误
    • 扩大选择、点击区域
    • 控件多时分组
    • 区分主要操作和次要操作
  • 回车提交: 光标在input里的时候,默认回车提交,不论是否有提交按钮

html补充

  • accesskey & tabindex:
    • accesskey="i",按下ctrl+alt+i,相当于点击;方便键盘操作
    • tabindex="-1",按tab键将根据tab键的index升序切换,指定了该属性的元素就不要禁用outline,不然focus后元素没有变换,不友好
  • id,class & style
  • contenteditable & spellcheck
    • contenteditable 将元素内容变成可编辑状态
    • spellcheck 拼写检查
  • lang & dir
    • lang="zh-CN",页面或元素的语言,任何标签都可使用
    • dir="rtl",文字的抒写方向,如阿拉伯语,从右到左
  • title:大部分元素可以设置,当文字过长,省略一部分后,可以把全文显示在title里,hover的时候显示
  • hidden:<p hidden>你看不见我</p>
  • 无障碍性: WCAG、ARIA
  • 提升无障碍性
    • 为img添加alt
    • noscript
    • input和lable对应
    • 图形和语音验证码
    • 文字和背景有足够的对比度
    • 键盘可操作
  • 语义化
    • 提升可读性、可维护性
    • seo优化
    • 提升无障碍性

      9. 扩展html

  • meta
    • charset 编码
    • http-equiv 指定http header
    • keyword description seo优化
    • viewport 移动端viewport
    • renderer 360浏览器指定内核
  • data-*:dataset 获取数据
  • microdata
    • 语义关系网
  • JSON-LD:

    <script type="application/ld+json">
    {
    "@context": "http://schema.org",
    "@type": "Person",
    "name": "John Doe",
    "jobTitle": "Graduate research assistant",
    "affiliation": "University of Dreams",
    "additionalName": "Johnny",
    "url": "http://www.example.com",
    "address": {
    "@type": "PostalAddress",
    "streetAddress": "1234 Peach Drive",
    "addressLocality": "Wonderland",
    "addressRegion": "Georgia"
    }
    }
    </script>

  • 工具
    • emmet
    • markdown
打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP