前端与 HTML | 青训营笔记

囚鸟不知海_
537 阅读2分钟

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

课堂笔记

本堂课内容重点

  • 前端工作的定义
  • 前端技术栈拆解与分析
  • HTML作用解析
  • HTML语义化

前端工作的定义

前端工程师通过HTML、CSS、JavaScript等技术来解决图形界面下的人机交互问题，不仅仅包括pc浏览器，还包含客户端、小程序、VR、AR等。即通过Web技术栈来解决多端图形界面下的人机交互问题。

前端技术栈拆解与分析

image.png 前端最基础的技术栈包含：HTML，CSS，JavaScript以及HTTP协议。

HTML

常用的HTML标签:h1~h6标题标签、列表标签、input标签、a标签等。

h1~h6标题标签

标题标签中一般只存放文字，一个HTML文档里面只能有一个h1标签。

<h1>Hello World</h1>
<h2>Hello World</h2> 
<h3>Hello World</h3> 
<h4>Hello World</h4> 
<h5>Hello World</h5> 
<h6>Hello World</h6>

image.png

列表标签

列表标签分为三类：有序列表、无序列表和定义列表

有序列表

有序列表前会有1，2，3标号，用来标记顺序

<ol>
  <li>
    First
  </li>
  <li>
    Second
  </li>
  <li>
    Third
  </li>
</ol>

image.png

无序列表

无序列表不存在顺序，前用小黑点标记

<ul>
  <li>
    First
  </li>
  <li>
    Second
  </li>
  <li>
    Third
  </li>
</ul>

image.png

定义列表

dl表示定义列表，dt表示标题，而dd则是对dt的具体描述

<dl>
  <dt>
    靓仔
  </dt>
  <dd>
    我
  </dd>
  <dd>
    还是我
  </dd>
</dl>

image.png

input标签

input标签默认是一个文本框，可以通过改变type来更改其样式与功能，如type="range"表示一个滑块，type="number"表示一个输入数字的文本框，type="data"表示日期选择，type="radio"表示选框（多选），通过给定相同的name属性值来实现单选效果。

<div>
<input>

<input type="range">

<input type="number">

<input type="date">
</div>
<p>
  <label>
    <input type="radio">男
  </label>
  <label>
    <input type="radio">女
  </label>
</p>

<p>
  <label>
    <input type="radio" name="sex">男
  </label>
  <label>
    <input type="radio" name="sex">女
  </label>
</p>

image.png

a标签

a标签用来定义超链接，用于从一张页面链接到另一张页面。其最重要的属性是href属性，来指示链接的目标。

<a href="www.baidu.com">百度</a>

image.png点击文本跳转至百度

注所选的标签是我认为比较重要或者容易混淆的标签。

HTML语义化

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

语义化的好处

  • 代码可读性更高
  • 可维护性更好
  • 优化搜索引擎
  • 提升无障碍性
avatar
文章
阅读
粉丝