这是我参与【第五届青训营】伴学笔记创造活动的第1天

前端

一、什么是前端

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR 等
Web 技术栈

二、前端技术栈

HTML (内容)
CSS (样式)
JavaScript (行为)

三、前端关注的方面与内容

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

四、前端的边界

node.js
ELECTRON
React Native
Web RTC
WebGL
WebASSEMBLY

前端的边界

五、开发环境

浏览器
- IE/EDGE
- Chrome
- Firefox
- Safari
编辑器
- VSCode
- Vim
- WebStorm

开发环境.jpg

HTML

一、HTML 是什么

HyperText Markup Language 超文本标记语言

HyperText :超文本
- 图片
- 标题
- 连接
- 表格
Markup Language : 标记语言
- 通过标签表示内容

<标签名属性名="属性值"></标签名> 例如：<h1></h1>

或

<标签名属性名="属性值"/> 例如<img/>

二、HTML结构举例

<!doctype html>    //标记当前使用文件的版本
<html>             //根标签
    <head>         //头标签 编码、标题等 （不会显示）
        <meta charset="UTF-8">
        <title>页面标题</tittle>
    </head>         
    <body>          // 页面内容
        <h1>一级标题</h1>
        <p1>段落内容</p1>
    </body>
</html>

DOM 树

dom树.jpg

三、HTML 语法

标签属性不区分大小写，推荐小写
空标签可不闭合，如 input、meta
属性值推荐用双引号包裹
部分属性值可以省略，如 required、readonly

1、标题

h1~h6 六级标题

2、列表

<ol>有序列表
<ul>无序列表
<dl>定义列表 <ol>、<ul>列表中的内容都需要用<li>标签表示

<dl> 列表中内容用<dt>、<dd>表示

<ol>
    <li>第一</li>
    <li>第二</li>
</ol>

<ul>
    <li>第一</li>
    <li>第二</li>
</ul>

<dl>
    <dt>名称：</dt>
    <dd>定义列表</dd>
</dl>

4、链接

<a></a> 跳转页面
<img/> 插入图片
<audio></audio> 插入音频
<video></video> 插入视频

5、输入

<input>
- <input placeholder=''>默认提示
- <input type="range"> 输入范围滑动
- <input type="number" min="" max=""> 输入范围数字
- <input type="date" min="2018-02-10"> 日期选择框
- <input type="radio" name=" ">单选组
```
<label><type="radio"name="num"/>1</label>
<label><type="radio"name="num"/>2</label>
```
- <input type="checkbox"> 多选组
```
<label><type="checkbox"/>1</label>
<label><type="checkbox"/>2</label>
```
- <input list=" 提示类名 "/><datalist id="指定的提示类名"><option>提示信息</option></datalist>
<textarea> 文本框（多行）输入
<select> 下拉选择

<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>

输入1.jpg

输入2.jpg

输入3.jpg

6、文本类标签（部分）

<blockquote cite="来源"> 快捷（长）引用

<blockquote cite="来源">
    <p>
        内容
    </p>
</blockquote>

<cite> 短引用

<p>我想引用的一本书叫做<cite>小王子</cite></p>

<q>段引用
```
<q>引用的具体内容</q>
```

<code> 代码

多行引用时使用 <pre>标签

<pre><code>
代码
内容
</code></pre>

 //pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<strong> 表示强调
<em> 语气重读
此外还有更多文本类标签

四、内容划分

内容划分.jpg

五、语义化

1、语义化是什么

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

2、HTML的使用对象

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

3、语义化好处

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

4、如何做到语义化

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

前端与HTML|青训营笔记

前端