前端与HTML|青训营笔记

Homemade_beer
345 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第一天

课程回顾

chapter 1 前端总览

  • 前端：实现GUI的人机交互
  • 前端技术栈：服务器端通过HTTP拿到代码，渲染成页面用户;行为通过HTTP提交至服务端
    55ab8b85fd16d6b85231329e15a504a.png

Chapter 2 了解HTML

  • Hyper:实现文字普通做不到的功能
    标题<h1><h2>...<h6>
    列表<ol></ol> <ul></ul> <dl></<dl>
    链接<a href="" target=""></a>/起源于ankle/
    图片<img src="" alt="">/alt的作用是在省流模式下也能有效传达信息/
    音频<audio controls></audio>/controls属性默认显示浏览器的播放控件/
    视频<vedio controls></vedio>
  • Markup Language:说明这是一类以标记语言为表现格式的
    P.S.<!doctype html>说明当前HTML文件的HTML版本，会影响浏览器的渲染模式，否则会应用老旧的怪异模式
  • DOM树：浏览器拿到HTML代码后，会解析成为DOM树，右键调试工具可查看
  • HTML语法： 注意属性值为TRUE时，不用写值

45d9f7fa4011823f2c1e23d45b22d6d.png

  • HTML内的控件
  1. 输入
    a.自由输入
    占位符的实现：<input placeholder="占位字">
    添加滑动条：type="range"
    输入数字:type="number" min="" max=""
    输入日期：typr="date" min=""
    输入多行文字:<textarea></textarea>
    这么说可能不太直观！我们根据图片理解一下~
    df9e605693dec9382ca2dbd523c86b3.png b.限制用户输入（选择）
    单选:<input type="checkbox">
    多选:<input type="radio" name="">/从name相同 且type="radio"的label中单选/
    下拉选择：<select></select>
    给定范围的自由输入:<input list="">/需要给input指定list中的选项/
    了解这些知识点后，我们再来看看图片上，解释下最后一个，当我们自由输入文字后，方框内会自动变成Greece/United kindom/United States中的一个喔！ 5f7c0c04a214a94f9c96ccd637be2cc.png 2.引用
    a.块级引用/长引用：<blockquote></blockquote>
    b.短引用:<cite></cite>和<q></q>/cite用于引用作品名，章节；q用于引用具体内容 例如图片第三行/
    c.引用代码：<code></code>
    d.强调:<strong></strong>和<em></em>/strong用于突出严重紧急 如图倒数第二行；em侧重语气上重读，如图最后一行/
    787f1534e21ff63be0fba8b629eda10.png

Chapter 3 页面布局结构

要注意页面的美观！一个页面只有一个main哦

ec89ae545061e09ba88a66074036c98.png

Chapter 4 谁在使用HTML

  • 开发者
  • 浏览器：标签通过浏览器体现作用，比如HTML中添加lang,作用可以直接告诉浏览器当前的语言环境是英语，方便翻译
  • 搜索引擎：搜索时，关键字在标题的权重更高，优先展示
  • 屏幕阅读器

ad8ee6c35a0dd1ad546b00702330017.png

总结

   本节课主要介绍了前端和HTML语言：前端的目的是为了更好的进行人机交互，作为前端工程师一定不能忽略色盲等等群体的使用需求；HTML作为一种标签语言，不同的标签有不同的功能，我们重点关注了输入/引用这两部分，为了更好地创作页面内容，请大家充分熟记标签后的语义ε(*･ω･)_/ﾟ:･☆

avatar
文章
阅读
粉丝