HTML| 青训营笔记

breezy
74 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

前端工程师

是使用web技术栈解决多端图形界面下的GUI(用户图形界面)人机交互问题的工程师

多端

包括PC/移动浏览器，客户端小程序，VR/AR等

技术栈

HTML(内容),CSS(样式),JavaScript(行为)运行在浏览器里,浏览器通过HTTP协议与服务器进行通信

前端工程师应该关注的部分

  • 功能满足需求
  • 美观
  • 无障碍性
  • 安全性
  • 性能
  • 兼容性
  • 用户体验感

开发环境

  • 就浏览器来说，包括IE，Chrome，Firefox，Safari(都具有自己的独立内核)
  • 就编辑器来说，可以使用VSCode,Vim,WebStorm等

HTML是什么

HyperText MarkUp Language——超文本标记语言，是用来描述网页的一种语言

  • 超文本:包括图片、标题、链接、表格等内容
  • 标记语言：用标签如h1表示一级标题

HTML语法

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

HTML标签

标题

  • h1 ~ h6 :一级~六级标题

列表

  • ol 有序列表(order list)
  • ul 无序列表(unorder list)
  • dl 自定义列表(definition list),有属性名与属性值,包括dt(definition title)，dd(definition title)

链接

  • target="_blank":新窗口打开
  • src:嵌入页面
  • href:外部引用

多媒体（img/audio/video）

<img src="" alt="" width=""/> //alt=""替代文本信息，不加载时显示的内容
<audio src="" controls></audio> //audio用于在文档中嵌入音频元素，controls表示播放控件
<video src="" controls></video> //video用于定义视频，比如电影片段或其他视频流

表单类

<input placeholder="请输入用户名">	//输入框
<input type="range">	//滑动条
<input type="number" min="1" max="10">	//输入数字控制范围
<input type="date" min="2022-07-23">	//日历
<textarea>Hey</textarea>	//多行文字

<label><input type="checkbox" checked />🍎</label> //多选框，checked默认选中
<label><input type="radio" name="frult"/>🍎</label> //单选,用name关联属性
<select> 
    <option>🥑</option> //下拉选择器
    <option>🍏</option> 
</select>

引用

  • blockquote:块级引用
  • cite：短引用（作品、书的名字，章节标题等）
  • q:短引用（引用前面提到的内容）
  • code:代码引用(多行代码外用pre包裹预格式化)

强调

  • strong:含义上的强调
  • em:一句话中强调的部分

<iframe>

嵌入别的内容并且不用与页面太多交互时适用，缺点包括弹出弹窗的阴影不能覆盖到整个页面

布局

  • header 头部(放置导航)
  • main 主题
  • aside 侧边栏
  • footer (放置版权信息等)

语义化是什么？

HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构(正确的标签做正确的事)

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

语义化标签

  • header
  • nav
  • main
  • article
  • section
  • aside
  • footer

语义化优点

  • 在没CSS样式的情况下，页面整体也会呈现很好的结构效果
  • 代码结构清晰，易于阅读，
  • 利于开发和维护,方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
  • 有利于搜索引擎优化（SEO)，搜索引擎爬虫会根据不同的标签来赋予不同的权重

如何做到语义化

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

如废除center样式标签，留下语义内容标签;UI库尤其要注意语义化;传达内容而不是样式：如标题文字可以用style，也可以直接用标签（更推荐）

补充

meta标签的作用

meta是用来在HTML文档中模拟HTTP协议的响应头报文。提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

meta 的属性

  • name:主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类
  • http-equiv:添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，就可以使用这个属性
  • content:当有http-equiv或name属性的时候，要有content属性对其进行说明
avatar
文章
阅读
粉丝