前端与HTML
前端技术栈
- HTML设定内容，css设定样式，JavaScript设定行为，这些运用在浏览器上，通过网络协议（http）来与服务器端联系
前端关注什么
- 功能、美观、无障碍、安全、性能、兼容性、用户体验
HTML
- HyperText Markup Language 超文本（图片、标题、连接、表格）标记语言（开始标签和结束标签搭配）
<!DOCTYPE html>
- 决定了使用的html的版本，用于浏览器的正确渲染
<head>
- 里面存在一些页面需要的数据但是不需要直接呈现给用户，比如编码、页面标题
<body>
- 需要呈现给用户的文字、标题、图片
DOM树
- document里面有html节点，html下面又有head和body节点，head后面有meta和title等，body后面有h1和p等
HTML语法
- 标签和属性不区分大小写，一般用小写
- 空标签可以不闭合，如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，如required、readonly
标题h1-h6
列表
-
有序列表
<ol>和<li>搭配
-
无序列表
<ul>和<li>搭配
-
属性名+属性值
<dl>和<dt>``<dd>,<dt>表示属性名，<dd>表示属性值
链接
<a href="https://www.baidu.com" target="_blank">``target="_blank"表示不是替换掉原来的页面而是在新窗口打开，
图片
- 用img标签，src表示图片地址，alt表示图片展示不出来的时候显示的替代性文本，width表示宽度
音频
- 用audio标签，src表示音频的地址，加一个controls属性表示有浏览器默认的播放按钮，包含进度条时间
视频
- 用video标签，同audio
输入
- 用input标签，placeholder属性表示用户没有输入时显示什么，输入后会被替换；input后面还可以跟
type="range"则是一个表示范围的滑动块，用户可以选择一个值；让用户输入数字时可以让type等于number，并且可以指定min和max的值；让用户输入日期，可以把type设置为date，会显示日期选择框，也可以设置min - 用textarea这一对标签可以输入多行文本
选择
-
可以选择多个：用input标签，type设置为checkbox，显示的选项前有小方框
-
选择单个：用input标签，type设置为radio，name属性要设置为相同，则相同name的选项间可以达到互斥关系，显示的选项前有小圆圈
-
下拉选择：用select这一对标签，选项写在option这一对标签中
-
可以输入，但也给出了一些选项,不影响正常输入
<input list="countries" /> <datalist id="countries"> <option>Greece</option> <option>UK</option> <option>US</option> </datalist>
文本
-
引用
- 长引用：直接引用别人的话，用blockquote这对标签，cite表示引用对象地址，后面跟p显示引用内容
- cite引用：cite这对标签，包含短短几个字，表示引用别人的作品书籍或章节，展示为斜体
- q引用：q这对标签，前面已经讲过，这里拿出来重复以下
-
code标签：代码，用code这对标签，当多行代码时，外面还要包裹pre这对标签
-
强调
- strong标签：表示重要严重紧急
- em标签：语气重读
页面布局结构
- header部分可以放一些导航nav
- 页面的主体部分main，包含artical
- aside表示和内容相关但是不太重要，比如广告这些
- footer放在页面尾部，一般放参考链接、备案信息等
个人感悟
- 比较清楚的了解了html的各种标签用法以及显示出来的形态，重点感受到了html是主要作用于内容而不是样式
