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

前言

每天比前一天的自己进步一点点

HTML算我是接触较早的语言，经过这次课程算是对HTML进行一次复习。下面呢，我将之前所学的与此次课程的新知识做一次梳理

前端部分

一、什么是前端

解决GUI（图形用户界面）人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈
Web工程师就是使用Web技术栈解决多端GUI人机交互问题的工程师

二、前端的技术栈

24RA8ZR%692HY5W8@VEU}9N.png

三、前端关注点

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

HTML部分

一、网页的三大元素

HTML：网页的内容结构——内容
CSS：网页的视觉体验——样式
JavaScript：网页的交互处理——行为

二、HTML介绍

1.定义

超文本标记语言（英语：HyperText Markup Language，简称：HTML），它是用于构建网页基本结构及其内容的一门标记语言。

标记语言(Markup Language)

由无数个标记（标签、tag)组成；
是对某些内容进行特殊的标记，以供其他解释器识别处理；
由标签和内容组成的称为元素（element）

超文本(HyperTexte)

可以插入普通的文本（Text），还可以插入图片、音频、视频等内容
可以表示超链接（HyperLink），从一个网页跳转到另一个网页

HTML元素

图片.png

这个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用 ——在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

HTML元素的属性

一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。
属性名称，后面跟着一个等于号。
一个属性值，由一对引号“ ”引起来

三、HTML结构

一个HTML结构示例

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <h1>我是一级标题</h1>
    <p>我是一个段落</p>
  </body>
</html>

1.`<!DOCTYPE html>`

我们称之为文档类型声明，用于声明文档类型

用于告诉浏览器当前页面是HTML5页面，让浏览器用W3C的HTML5标准去解析识别内容
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题

2.`<html>`

表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。

3.`<head>`

规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。

一般会至少包含如下2个设置

网页的标题：title元素
meta元素可用于设置网页的字符编码、视口的适配等等

4.`<body>`

文档主体元素,该元素的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构

DOM树

网页的大致划分

四、HTML常用元素

1. p段落元素、h1~h6元素

  <body>
    <h1>我是一个标题</h1>
    <h2>我是一个标题</h2>
    <h3>我是一个标题</h3>
    <h4>我是一个标题</h4>
    <h5>我是一个标题</h5>
    <h5>我是一个标题</h5>
    <h6>我是一个标题</h6>
    <p>我是一个段落</p>
  </body>

2. ul无序列表、有序列表ol、dl自定义列表、li列表元素

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>
<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

3. input元素

placeholder="":默认输入框显示的文字
type="range"：范围选择
type="number"：数字选择，可以设置min和max
type="date"：日期选择
<textarea>标签：多行文本框

<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>

4. 引用元素

<blockquote></blockquote>:块级引用元素(长引用，长的文本的引用)
<cite></cite>：来源引文（短引文，表示一个作品的引用，且必须包含作品的标题。）
<q></q>：行内引（用来引用短的文本，所以请不要引入换行符）

5. 锚元素

<a> 通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接

    <a href="https://www.baidu.com/">百度一下</a>

补充：URL的格式

[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

图片1.png

五、语义化

定义

用正确的元素做正确的事情，HTML中的元素、属性及属性值都拥有某些含义因此开发者应该遵循语义来编写HTML

如有序列表用ol；无序列表用ul
lang属性表示内容所使用的的语言等

谁在使用我们写的HTML

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

语义化的好处

可维护性：方便代码维护
代码可读性：减少让开发者之间的沟通成本
提升无障碍性：能让语音合成工具正确识别网页元素的用途，以便作出正确的反应
搜索引擎优化：有利于SEO

什么是SEO

搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

如何做到语义化

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

前端与HTML | 青训营笔记

前言