前端与 HTML ｜ 青训营笔记

Carol_j
61 阅读2分钟

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

1.前端

前端工程师的工作内容是使用Web技术栈解决多端图形用户界面交互问题。

前端技术栈

HTML（内容）CSS（样式）JavaScript（行为）与网络协议构成了前端最基础的技术栈。

浏览器通过网络协议与服务器进行通信。浏览器把前端代码通过网络协议从服务器拿到后渲染成页面。浏览器通过网络协议把用户填写的内容或行为动作传给服务器端。

前端开发的关注点

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

2.HTML

HTML的概念

HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。

HTML元素：HTML由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。由开始标签、内容、结束标签三部分组成一个整体。

开发环境

浏览器:Edge/Chrome/Firefox/Safari
编辑器:VSCode/Vim/WebStorm
推荐使用 Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

开发环境的选择具体可参考：juejin.cn/post/712392…

一个demo初步了解HTML

<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
  	<h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>
  • <!DOCTYPE html>  声明为 HTML5 文档
  • <html>  元素是 HTML 页面的根元素
  • <head>  元素包含了文档的元（meta）数据，如  定义网页编码格式为 utf-8。
  • <title>  元素描述了文档的标题
  • <body>  元素包含了可见的页面内容
  • <h1>  元素定义一个大标题
  • <p>  元素定义一个段落

常用标签

标签描述
基础
<h1>~<h2>定义 HTML 标题
<p>定义一个段落
<br>换行
<hr>水平线
链接
<a>定义一个链接
列表
<ul>定义一个无序列表
<ol>定义一个有序列表
<li>定义一个列表项
<dl>定义一个定义列表
<dt>定义一个定义定义列表中的项目。
<dd>定义定义列表中项目的描述。

语义化

  • 了解标签和属性及属性值的含义
  • 思考标签适合描述的内容

补充学习

avatar
文章
阅读
粉丝