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

前端与HTML

前端应该关注哪些方面：

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

HTML

is short for HyperText Markup Language
HyperText：超文本，如图片、标题、链接、表格
Markup Language：标记符号语言

语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如 input/meta
• 属性值推荐用双引号括起来
• 某些属性值可以省略，比如 required/readonly

标题

h1~h6

p标签、h1~h6标签内容建议只放文字

 <h1>字体排印学</h1>
 <h2>历史</h2>
 <p>活字的雏形或可追溯至公元前两千年前后美索不达米亚文明的乌鲁克和拉尔萨，砖块上面不均匀的印花被视作有可能是活字思想雏形。</p>
 <h3>印刷体源流</h3>
 <p>中国在唐代就已经出现雕版印刷术，公元868年的《金刚经》是现存最古老的印别品之一，使用的技术即是木照版印刷。</p>
 <h2>应用</h2>
 <p>..</p>

列表

 <h2>世界电影票房排行榜</h2>
 <ol> <!--Ordered List有序列表-->
   <li>阿凡达</li>
   <li>泰坦尼克号</li>
 </ol>
 ​
 <h2>购物清单</h2>
 <ul> <!--Unordered List无序列表-->
   <li>🍇</li>
   <li>🍉</li>
 </ul>
 ​
 <h2>霸王别姬</h2>
 <dl> <!--Defination List定义列表-->
   <dt>导演：</dt> <!--Defination Title-->
   <dd>陈凯歌</dd> <!--Defination Description-->
   <dt>主演：</dt>
   <dd>张国荣</dd>
   <dd>张丰毅</dd>
   <dt>上映日期：</dt>
   <dd>1993-01-01</dd>
 </dl> <!---->

链接

 <a href="https://www.bytedance.com/"> <!--a表示链接-->
   字节跳动官网
   <!--<a href="URL"> 与 </a> 之间设置显示的别名-->
 </a>
 ​
 <a href="https://www.bytedance.com/" target="_blank"> <!--表示在新标签页打开-->
   字节跳动官网
 </a> <!---->

 <img
   src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
   alt="Metal movable type" 
   width="400"
 />
 <!--src 资源地址-->
 <!--alt 可替代选择-->
 <!--width 图片宽度-->
 ​
 <audio 
   src="/assets/music.ogg"
   controls
 ></audio>
 <!--controls 默认播放控制器-->
 ​
 <video
   src="/assets/video.mp4"
   controls
 ></video> 
 <!---->

输入

 <!--input标签-->
 <input placeholder="请输入用户名"> <!--placeholder输入框-->
 ​
 <input type="range"> <!--range范围拉杆-->
 ​
 <input type="number" min="1" max="10"> <!--number数字输入框 设置数值范围-->
 ​
 <input type="date" min="2018-02-10"> <!--date日期选择框 设置选择范围-->
 ​
 <textarea>Hey</textarea> <!--textarea自由文本框 可设置默认文本-->
 <!---->

 <p>
   <label><input type="checkbox" />🍎</label> <!--checkbox多选按钮-->
   <label><input type="checkbox" checked />🍏</label> <!--checked设置为选中-->
 </p>
 ​
 <p>
   <label><input type="radio" name="sport" />⚽</label> 
   <label><input type="radio" name="sport" />🏀</label> <!--radio单选按钮--> <!--同名radio只能选择一个-->
 </p>
 ​
 <p>
   <select>
     <option>🥑</option>
     <option>🥩</option>
     <option>🥓</option>
   </select> <!--select下拉选择框--> <!--option为选项-->
 </p>
 ​
 <input list="countries" />
 <datalist id="countries">
   <option>Greece</option>
   <option>United Kingdom</option>
   <option>United States</option>
 </datalist> <!--datalist设置一个输入推荐词，可以自由输入，也可以通过下拉进行选择推荐词快捷输入-->
 <!---->

引用、代码、加粗

 <blockquote cite="http://t.cn/RfjKO0F">
   <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
 </blockquote> <!--块引用-->
 ​
 <p>我最喜欢的一本书是<cite>小王子</cite>。</p> <!--引用-->
 ​
 <p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p> <!--q引用，会加双引号-->
 ​
 <p><code>const</code>声明创建一个只读的常量。</p> <!--code设置为代码-->
 ​
 <pre><code>
 const add = (a, b) => a + b;
 const multiply = (a, b) => a * b;
 </code></pre> <!--多行代码标签-->
 ​
 <p>在投资之前，<strong>一定要做风险评估</strong>。</p> <!--strong加粗-->
 ​
 <p>Cats <em>are</em> cute animals.</p> <!--em斜体-->

语义化

• HTML中的元素、属性及属性值都拥有某些含义

• 开发者应该遵循语义来编写HTML

  • 有序列表用ol;无序列表用ul
  • lang属性表示内容所使用的语言

好处

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

谁在使用我们写的HTML

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

如何做到语义化

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