前端与 HTML | 青训营笔记

记得带伞_
89 阅读8分钟

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

R-C.jfif

课程笔记

前端简介

目前在IT公司中前端的岗位越来越成为不可或缺的，前端的地位也愈见明显，很多学校已经体系的传授前端课程，也有越来越多的同学加入到前端学习的行列中。

什么是前端?

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

前端工程师就是使用web技术解决多端图形界面的人机交互问题，即在前端领域除了需要解决图形界面下的人机交互问题外还要解决如PC/移动浏览器、客户端/小程序、VR/AR等之间的跨端问题。

前端的基本Web技术栈主要有：

  • HTML：负责处理页面内容
  • CSS：负责处理页面样式
  • JavaScript：负责处理页面行为
  • HTTP网络协议：浏览器与服务器之间通过HTTP协议来进行通信

前端应该关注哪些方面的问题呢？

前端对于用户体验来说是非常重要的，所以作为前端不仅要懂得技术还要懂得其他一些方面的东西，前端应关注功能、美观、无障碍、安全、性能、兼容性等方面的内容，其中功能是最核心的方面，要知道所开发的功能应满足用户的哪些需求，解决用户的哪些问题；无障碍性是完善一个网站或产品的重要方面，要考虑到所构建的网站是不是对所有人都可用（比如一些色盲用户等）。

前端的边界

随着互联网的发展，前端也在不断地迭代更新，如今前端技术也逐渐覆盖众多领域，常见的有：

  • node.js：应用于开发服务器方面
  • Electron：应用于开发客户端方面
  • React Native：应用于开发客户端方面
  • WebRTC：实现P2P在线传输，可以用于实现多人会议
  • WebGL：在网页上开发流畅的3D游戏
  • webASSEMBLY：可以把C++和Rust或其他的语言编写的代码编译成可以直接在浏览器里直接运行的代码。

HTML

HTML全称为HyperText Markup Language即超文本标记语言,其中HyperText代表超文本即内容并不局限于文字还可以有图片、标题、链接、表格等一些更为丰富的内容格式；Markup表示标记，即在编写时使用一对标签（少数标签为单个）来表示一个或一部分内容，也可以在标签上设置一些属性，标签的属性一般都是以键值对的形式出现的；HTML的主要职责就是传达内容而非样式。

HTML语法

  • 标签和属性不区分大小写，推荐使用小写
    因为之后使用到的React和VUE框架比较多，在框架中自定义的组件用大写来表示，原生的html标签使用小写来表示，所以在写原生html时养成使用小写标签的习惯会比较好
  • 空标签可以不闭合 比如img、input、meta标签可以不写结束标签,或者在开始标签后添加个斜杠(/)即可
  • 属性值推荐使用双引号包裹
  • 某些属性的属性值可以省略，比如required、readonly等

常见的HTML标签

当你使用VSCode创建一个html文件后，在文件中输入!并点击Tab键则会自动生成如下的HTML内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
标识所使用的HTML版本为HTML5，浏览器识别到该标识后便会使用HTML5语法及规范来渲染页面

<html>
HTML文档的根标签，其中lang属性用来定义当前文档显示的语言，“en”值标识定义语言为英文，"zh-CN"表示定义语言为中文，其实对于文档显示来说怎样写都无所谓，定义成“en”的文档也可以显示中文，定义成“zh-CN”的文档也可以显示英文。但还是应该遵循标准，毕竟这个属性对浏览器和搜索引擎还是有作用的。

<head>
该标签里会放一些页面的元数据，即页面开发需要的但是又不希望展示给用户的信息比如页面标题(<title>标签)、页面编码格式(<meta>标签)、页面外部文件引用(<link>标签)等等。

<body>
该标签放置的就是我们希望呈现给用户的页面内容，比如文字、标题、图片等等。

DOM树
把html代码转化为一个如下的树形结构，其中每一个树节点称之为DOM节点。

image.png

标题标签

<h1>~<h6>标签：定义不同大小的标题，<h1>定义最大的标题，<h6>定义最小的标题 <p>标签：标记一个段落

<html>

<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。</p>

</body>
</html>

image.png

列表标签

<ol>标签：定义有序列表
<ul>标签：定义无序列表
<li>标签：定义列表项目，可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 
</body>
</html>

image.png 其中在有序列表中会默认从1开始，可以在<ol>标签中添加start属性可以设置开始的序号。

多媒体标签

<img>标签:插入一幅图像，其中src属性指出图像链接，alt属性用于当无法显示图像，浏览器将显示替代文本，这两个属性一般是img标签必需的属性。
<audio>标签:向页面中插入一段音频，其中src属性指出音频流的链接，不同浏览器默认的音频控件的样式也不一样。
<video>标签:向页面中插入一段视频，其中src属性指出视频流的链接，不同浏览器默认的视频控件的样式也不一样。

选项类标签

label标签：为 input 元素定义标注（标记），当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
input标签：用于收集用户信息的控件，根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
select标签：创建单选或多选菜单
option标签：定义下拉列表中的一个选项或一个条目
datalist标签：定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值，datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>

<p>
  <label for="textx">Text</label>
  <input type="text" list="fruitsxx" id="textx"/>
</p>
<p>
  <label for="colorx">Color</label>
  <input type="color" list="colorsxx" id="colorx"/>
</p>
<p>
  <label for="rangex">Range</label>
  <input type="range" min="0" max="64" list="numbersxx" id="rangex"/>
</p>
<p>
  <label for="numberx">Number</label>
  <input type="number" min="0" max="64" list="numbersxx" id="numberx"/>
</p>
<p>
  <label for="urlx">URL</label>
  <input type="url" list="urlsxx" id="urlx"/>
</p>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

image.png

页面内容划分标签

常用的页面内容划分标签有header、nav、main、article、footer、aside标签，这些标签实际上都属于是语义化标签，标签常用对应布局位置如下图：

image.png

语义化标签

html中的元素、属性及属性值都拥有某些含义，开发者应遵循语义来编写html，例如有序列表用<ol>，无序列表用<ul>，lang属性表示内容所使用的语言等等。我们编写的HTML代码除了自己看之外，有时也需要给到其他开发者来修改、维护，浏览器也需要根据我们的代码内容来展示页面，搜索引擎也会从我们编写的HTML代码中提取关键字或者内容排序，屏幕阅读器需要读取我们代码内容来将页面内容读给盲人听（无障碍性方面），诸如此类的许多地方都需要我们遵循语义来编写HTML才能更好的推进。

语义化的好处

  • 代码具有较高的可读性
  • 代码具有较高的可维护性
  • 方便搜索引擎优化
  • 提升无障碍性

如何做到语义化

  • 了解每个标签的属性和含义，可以通过阅读MDN文档或W3C规范来增强对标签含义的理解以及使用时机
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

总结

前端在互联网行业中是发展比较快的领域，技术在不断更新，我们要持续的学习才能跟上技术的发展。往往前端技术的发展都是在不断地精炼HTML、CSS、JS这些极其基础的东西，所以我们作为初学者不能够因为其简单而“学了就放”，应该在业余的时间里更加深入的学习和理解这些基础的知识，这对我们未来迎接新技术的挑战是一个很重要的保障。

第一次写文章，如有不足之处和不正确的地方，请指正😘

avatar
文章
阅读
粉丝