这是我参与「第四届青训营」笔记创作活动的第一天
【什么是前端】
- 解决GUI人机交互问题
- 跨终端（PC/移动浏览器；客户端/小程序；VR/AR等）
- Web技术栈
前端工程师：使用Web技术栈解决多端用户界面交互问题
前端解决的根本问题：图形界面下人机交互的问题
前端技术栈
前端技术
- HTML——页面、结构、内容
- CSS——设置页面样式（如位置、大小、颜色等）
- JavaScript——定义网页行为
HTML、CSS、JavaScript和网络协议构成了前端基础技术栈
前端应关注以下几方面
【HTML】
基本结构
<!DOCTYPE html>----------------------标记当前HTML文件版本并由浏览器选择渲染模式
<html>-------------------------------文档根标签
<head>-------------------------------存储页面元数据
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>-------------------------------呈现给用户的内容
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
DOM树
基本语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
列表标签
列表——用来布局
有序列表
<ol>用于定义有序列表
<li>定义列表项
<ol>
<li>列表项1</li> 1.<ol></ol>**只能**嵌套<li></li>
<li>列表项2</li> 2.<li></li>之间相当于容器，可容纳所有元素
<li>列表项3</li> 3.<ol type="1/a/A/ⅰ/Ⅰ">
......
</ol>
无序列表*
<ul>表示HTML页面中项目的无序列表
<li>定义列表项
<ul>
<li>列表项1</li> 1.各个列表项之间没有顺序级之分，是并列的
<li>列表项2</li> 2.<ul></ul>**只能**嵌套<li></li>
<li>列表项3</li> 3.<li></li>之间相当于容器，可容纳所有元素
......
</ul>
自定义列表**
常用于对术语或名词进行解释和描述
定义列表的列表项前没有任何项目符号
<dl>用于描述列表，与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用
<dl>
<dt>名词1</dt>
<dd>名词1 解释1</dd> 1.<dl></dl>里面**只能**包含<dt>和<dd>
<dd>名词1 解释2</dd> 2.<dt>和<dd>没有个数限制，经常是一个<dt>对应多个<dd>
......
</dl>
超链接标签
在HTML标签中，
<a>标签用于定义超链接，旨在从一个页面链接到另一个页面
链接的语法格式
a:单词anchor的缩写，意为“锚”
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
链接分类
1.外部链接
例如<a href="http://www.baidu.com" target="_blank">百度</a>
打开窗口的方式
target默认的值是_self ...............当前窗口打开页面（原窗口覆盖打开）
_blank 新窗口打开页面（另外启动一个窗口打开）
2.内部链接 —— 网站内部页面之间的相互链接
直接链接内部页面名称即可
例如<a href="index.html">首页</a>
3.空链接 —— 没有确定链接目标
<a href="#">首页</a>
4.下载链接
如果href里面的地址是一个文件或者压缩包则会下载这个文件
5.网页元素链接
在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6.锚点链接*
点击链接 可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为 #名字 的形式,如<a href="#名字">名字</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="名字">名字</h3>
7.水平线标签 —— 用于分隔内容
<hr/>标签在HTML页面中创建水平线
提示：使用水平线（<hr>标签）来分隔文章中的小节
实例：
<p>This is a paragraph</p>
<hr/>
<p>This is a paragraph</p>
<hr/>
多媒体标签
- 图片标签
<img src="" alt="替代文本" width=""/> - 音频标签
<audio src="" controls> </audio>controls：播放按钮 - 视频标签
<video src="" controls> </video>controls：播放按钮
输入标签
选择标签
文本类标签
- blockquote：快捷引用（长引用）
- cite：短引用，如书名
- q：之前的引用内容
- code：代码
内容划分
语义化
- 什么是语义化？
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言
- 谁在使用我们写的 HTML？
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
- 语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
- 如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
