这是我参与「第四届青训营 」笔记创作活动的的第1天，学习网页基础内容。前端技术栈、前端需要关注问题和前端可以实现的功能等...
前端技术栈
- HTML:内容
- CSS:样式
- JS:行为
- http协议:传输
前端需要关注问题
- 美观
- 功能
- 无障碍(针对特殊群体和特殊情况，如色盲等)
- 安全
- 兼容性
- 用户体验
前端可以实现的功能
- 服务端(Node.JS)
- 用户端(Election)
- 3D(webGL)
- 语音交互(webRTC)
- 代码执行(WebAssembly)
HTML是什么
全称：Hyper Text Markup Language，是制作网页的基础语言。
- HyperText: 图片, 标签, 音视频
- Markup Language: 标签, 属性键值
HTML语法
- 由一系列的元素和标签组成。元素名不区分大小写
- 空标签可以不闭合或者加
/闭合(<input>,<img/>) - 属性值用双引号闭合
- 部分标签属性值可以省略(required, readonly…) 浏览器拿到HTML后会将嵌套关系转化为一个DOM树
HTML标签复习
<!DOCTYPE html><!-- 指明HTML版本(不写的话浏览器按照老版本标准(兼容模式)执行)-->
<html><!--根标签-->
<head><!--存放元数据/头区域-->
<meta charset="utf-8"><!--文档编码-->
<title>第一个文件</title><!--页面标签名字-->
</head>
<body><!--需要呈现的内容/正文部分-->
<h1>aaaa</h1><!--标题: <h1/>-<h6/>默认样式从大到小-->
<h2>bbbb</h2>
<h3>cccc</h3>
<h4>dddd</h4>
<h5>eeee</h5>
<h6>ffff</h6>
</body>
</html>
页面展示：
网页头部标签：（在<head>...</head>之间使用）
<title>：页面标题标签，将HTML文件的标题显示在浏览器的标题中，用于说明文件用途。 每个文档只能出现一次
例：
<title>第一个文件</title>
<meta>标签：是HTML中的单标签，用来指明本页作者、制作工具、所包含的关键词。可重复出现在头部标签
有两大属性：HTTP标题属性（http-equiv）和页面描述属性（name）。
graph TD
meta -->http-equiv
meta --> name
name-->keywords
name-->drscription
http-equiv -->refresh
例 1 - 定义文档关键词，用于搜索引擎：
<meta name="keywords" content="网上购物，网上商城，家电，手机，电脑，服装，居家...">
例 2 - 定义web页面描述：
<meta name="description" content="京东JD.COM-专业的综合...">
例 3 - 定义页面作者：
<meta name="author" content="Hege Refsnes">
例 4 - 每60秒刷新页面：
<meta http-equiv="refresh" content="60">
<link>:用于链接外部样式，只提供链接该文档的一个路径，通常用来链接css样式文件。
<link rel="stylesheet" href="外部样式表文件名.css" type="text/css">
<script>:脚本标签，用于为HTML文档定义客户端脚本信息。可以位于文档中任何位置
<script="text/css" src="脚本文件名n.js" ></script>
特殊符号
| 符号 | 字符实体 |
|---|---|
| 空格 |  ； |
| >（大于号） | > |
| <（小于号） | < |
| "(引号) | " |
| ©（版权号） | © |
| 注释 | <!--...--> |
<hr/>
水平线 HTML hr 标签属性
超链接
<a href="url/#" target="窗口名称" title="指向链接显示的文字" />文本文字</a>
最重要的两个属性是href与target
图像
-
多媒体:
<img/>,<audio>...</auduio>,<video>...</video> -
图像＋超链接
<a href="url/#" ><img src="图像文件名"/></a>
alt: 不被加载的时候的替换内容(不被加载的情况包括: 加载失败, 用户开启省流模式)
音视频自动播放属性: controls: 规定浏览器应该为视频提供播放控件
muted: 静音播放
音视频自动播放属性:
视频静音(通过加上 muted 属性)或音量设置为 0
用户与网站进行了交互(通过点击, 敲击, 按键等)
站点已被列入浏览器白名单;
浏览器确定用户频繁使用媒体, 自动加入白名单或者通过首选项或其他用户界面功能手动发生
自动播放功能策略授予了
<iframe>及其文档自动播放支持.用户已将该站点添加到其移动设备的主屏幕或在桌面设备上安装了 PWA.
列表
无序列表
<ul type="符号类型">
<li type="符号类型1">第一个列表项 </li>
<li type="符号类型2">第二个列表项 </li>
......
</ul>
在<ul/li>后指定样式
| 指定样式语法 | 显示内容 |
|---|---|
<ul/li type="disc"> | 符号为实心圆点● |
<ul/li type="circle"> | 符号为空心圆点○ |
<ul/li type="square"> | 符号为正方形方块█ |
<ul/li img src="graph,gif"> | 符号为指定的图片文件 |
有序列表
<ol type=”符号类型”>
<li type=”符号类型1”>表项1
<li type=”符号类型2”>表项2
…
</ol>
在<ol>后指定样式
| 指定样式语法 | 显示内容 |
|---|---|
<ol type="1”> | 序号为数字 |
<ol type="A"> | 序号为大写英文字母 |
<ol type="a”> | 序号为小写英文字母 |
<ol type="I”> | 序号为大写罗马字母 |
<ol type="i”> | 序号为小写罗马字母 |
定义列表
<dl>
<dt>…第一个标题项…</dt>
<dd>…对第一个标题项的解释文字…</dd>
<dt>…第二个标题项…</dt>
…
<dd>…对第二个标题项的解释文字…</dd>
</dl>
嵌套列表
所谓嵌套列表,就是无序列表与有序列表出嵌套混合使用。
文字与段落
<p>
<h1>-<h6>
详情见本章 HTML标签复习
<br/>
强制文本换行
没有使用<br/>，从浏览器中显示没有换行
↓使用<br/>
