【前端与HTML】|青训营笔记01

加油的小白
97 阅读4分钟

这是我参与【第四届青训营】笔记创作的第1天

1.什么是前端？

  • 解决GUI人机交互问题
  • 跨终端
    • PC移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈

总的来说，前端工程师时使用Wed技术栈解决多端图形用户界面交互问题的工程师

2.前端技术栈

-前端技术栈是三大件（HTML、CSS、JavaScript)通过网络协议与服务器端进行交互

3.前端应该关注哪些方面？

  • 开发者——修护、维护页面
  • 浏览器——展示页面
  • 搜索引擎——提取关键词、排序
  • 屏幕阅读器——给盲人读页面内容

4.前端的边界及开发环境

5.什么是HTML?

Hyper Text Markup languager是一种超文本的标记语言

1>DOM树

把html的代码转化成树形的结构，里面的节点称为dom节点

  • 把html的代码转化成树形的结构，里面的节点称为dom节点

2>HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，比如reaction、readonly

①标题标签h1~h6

一共六级

②列表标签

  • 有序列表：ol 有序列表，里面的列表项用 li表示
  • 无序列表：ul 无序列表，里面的列表项用 li表示
  • 定义列表：dl 有属性名的列表，dt：描述列表里的标题，具体的值用dd表示

③链接

  • <a href=" "> </a>插入链接
  • <a href=" " target=" "> </a>表示新窗口打开的链接

④插入多媒体

- img图片

 - src 图片的地址
 - alt替代性的文本，帮这张图片去加载，width宽度，展示多宽

- audio 音频

 -   src音频的地址，controls表示浏览器显示默认的播放空间

- video标签

 -  src音频的地址，controls表示浏览器显示默认的播放空间

⑤输入

  • 提供控件，用户去输入或选择一些值，表单类的控件，让用户去提供一些输入信息，让用户输入数据

    • input文本输入框，placeholder表示占位符：用户没有输入时，自动显示什么，用户输入时就取消掉了
    • <input type="range">用户输入范围，在用户输入数据时下方会显示一个滑动酷爱，表示数据输入的长度
    • <input type="number" min="1" max="10">让用户输入数字，指定最小值和最大值
    • <input type="date" min="2018-02-10">取日期相关的值，日期选择，弹出日期选择框
    • <textarea>Hey</textarea>需要用户输入多行的长文字

  • 让用户在已有的选项中去选择数据

    • <label><input type="checkbox" />xx </label>\选多个数据
    • <input type="radio" name="sport"/> 限制用户只能选一个。互斥关系通过name来达到多个radio之间如果name相同用户只能从相同名字间去选择一个；

image.png

  •      `<select></select>` 选项较多，页面直接展示较臃肿，用下拉选择。

  •     `<input list="countries"/>`用户自由输入一些值，输入时给用户一些提示，用input指定一个list属性

⑥文本类标签

image.png

引用标签

  • <blockqupte>快捷引用或长引用:一般是直接引用一段话，cite属性，表明引用的文字来源于哪

  •  <cite>标签：短引用：短短几个字表示引用别人作品的名字或者章节

  •   <q>短引用，表示具体引用哪个内容

  •   <code>引用代码

image.png

强调标签

  • <strong>更突出表示这个东西含以上非常重要,严重紧急

  • <em>语气上的强调

内容划分

  • 页头：header（logo，导航→nav）

  • 主体：main一个页面有一个main元素
     article——文章正文

  • 相关:asigin

  • 页尾：footer ：参考链接，版权信息，备案信息

6.语义化是什么？

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol，无序列表用ul
    • lang属性表示内容所使用的语言

7.语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

HTML传达内容，而不是样式

8.如何做到语义化？

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不适用可视化工具生成代码
avatar
文章
阅读
粉丝