前端入门基础语言篇HTML | 青训营笔记

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

学完了前端入门基础，html、css和js,其中html和css相对比较基础，对于入门很ok，虽然时间不长，但是讲到的知识点都很常用，主要是html常用标签，css常用的样式，以及一些常用的布局。我只挑选一些常用到的知识点进行记录，方便查看。

各司其职

html（超文本标记语言）内容，css负责样式，JavaScript负责行为，服务器端和前端通过网络协议互相进行通讯。

前端应该注意的方面

1. 前端的功能
2. 用户界面的美观
3. 系统的兼容性，是否可以在大多数浏览器中运行
4. 用户的体验感
5. 是否考虑到无障碍阅读
6. 系统性能
7. 系统的安全性，安全性问题不出现就还好，出现了就是大问题了

HTML

表示文档的标记类型，告诉浏览器页面使用了哪种html版本，如果不写，浏览器会使用一种老旧的怪异模式去渲染页面。

html要做到传递的是内容而不是样式，要做到语义化，了解每个标签和属性的含义，考虑标签的使用场景，尽量不使用可视化工具生成代码，因为我们无法控制生成代码的质量。语义化具有提升代码可读性、可维护性、搜索引擎优化和提升无障碍性的好处。

知识点回顾

// a标签,target="_blank",表示新开一个网页访问href里面的地址，因为有些网站不允许在本页面中打开
<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>
//有序列表
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>
//无序列表
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>
// 介绍式
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
</dl>
// 引用标签
<blockquote cite="引用内容地址"></blockquote>
<cite>something</cite>
<q>something</q>
<pre><code>代码</code></pre>
<em>something</em> 
// input标签
<label><input type="checkbox" />🍎</label>//多选框
<label><input type="radio" name="sport" />⚽</label>//单选框通过name控制单选
//下拉框
<select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
</select>
//这个比较实用，输入的时候显示提示
<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>