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

前端

前端工程师是利用web技术栈解决多端图形用户界面交互问题的工程师

前端技术栈

HTML:页面结构内容
CSS:样式
JAvascript：用户行为
HTTP

前端关注的方面

功能
美观
无障碍
安全
性能
兼容性
体验

前端应用

node.js electron react webrtc WebGL

开发环境

浏览器 chrome等
编辑器 vscode等

HTML

HyperText Markup Language

标题标签

    <h1>一级标题</h1>
    <h6>6级标题</h6>

图片标签
```
    <img src="photo.jpg" />  
```

列表标签

<ol>
    <li>有序列表</li>
</ol>
<ul>
    <li>无序列表</li>
</ul>
<h2>定义列表</h2>
<dl>
   <dt>标题</dt>
   <dd>具体表述</dd>
</dl>

链接

<a href= "www.bytednsdoc.com" alt= "n"> 网址链接 </a>

多媒体

<audio src="" controls></audio>
 <vedio src="" controls></vedio>

输入标签

<input type="">
<textarea>Hey</textarea>

选项标签

  <label>
  <>
  <select>
      <option><>
  </select>
  <input list="">
      <datalist id="">
          <option><>
      </datalist>

引用

    <blockquote cite= "http://"">
    </blockquote>
    <cite>短引用</cite>

代码标签
```
    <code>const</code>
```

文本标签

   <strong>加粗</strong>
   <em>斜体 </em>

内容划分

DOM树

HTML语法

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

语义化

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

谁在使用我们写的HTML

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

语义化的好处

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

如何做到语义化?

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

总结

HTMl 为超文本标签语言可以说明文字、图形、动画、声音、表格、链接等。 HTML元素以开始标签起始以结束标签终止。可以设置属性（一般在开始标签），并在其中附加信息

前端与 HTML | 青训营笔记

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

前端