HTML5基础
块元素和行内元素
块级元素特点：
- 每个块级元素都独占一行 其宽度自动填满其父元素宽度。
- 常给a标签设置display：block属性 此时a标签整体都可点击
内联元素特点：
- 行内元素设置宽度 高度width height无效（替换元素除外）
HTML标签
语义化标签
blockquote表示一个长引用，块元素
q表示一个短引用
title 鼠标移到元素上时显示一段提示文本
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本
超链接
相对路径：
./ 同一目录，可以省略不写，默认写了./
../ 上一目录
/ 表示下一目录
链接的目标窗口：
target="_blank" 在新窗口中打开
target="_self" 在自身窗口打开（默认值）
可以跳转到页面的指定位置，只需将href属性设置为 #目标元素的id属性值
img属于替换元素（块元素和行内元素之间，具有两种元素的特点）,注意基线对齐
内联框架
- 用于向当前页面中引入一个其他页面
- frameborder 表示有无边框，1表示有，0表示无
音视频
<audio src="../source/audio.mp3" controls autoplay></audio>
audio 标签用来向页面中引入一个外部的音频文件，替换元素
音视频文件引入时，默认情况下不允许用户自己控制
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放(不同浏览器不同，大部分都不会自动播放）
谷歌，火狐，不会自动播放，IE，Edge会自动放
loop 是否循环播放
IE8不支持audio
除了通过src来指定外部文件的路径外，还可以通过source来指定，一般都用source
vedio 视频标签
<audio controls>
对不起，你的浏览器不支持，请升级浏览器
<!-- 支持的浏览器会显示audio效果，不支持的会忽略audio，直接显示文字-->
<source src="../source/audio.mp3">
<source src="../source/audio.ogg">
<!-- 解决格式问题-->
</audio>
<embed src="../source/audio.mp3" type="audio/mp3" width="300" height="100">
IE8支持，非常难用
<video src="../source/flower.webm" controls></video>
<video controls>
<source src="../source/flower.webm">
<source src="../source/flower.mp4">
<embed src="../source/flower.mp4" type="video/mp4">
</video>IE8不支持
表格与表单
表格
可以将一个表格分为三部分
thead 头部
tbody 主体
tfoot 底部
- 表格默认是没有边框的
- 默认情况下元素在td中是垂直居中的
- 单元格不会默认跨列
colspan 横向合并单元格
rowspan 纵向合并单元格
table 属于一个块元素，但是和传统的块元素不一样，width不会是100%
border-spacing 指定边框之间的距离
border-collapse: collapse; 设置边框的合并
如果表格中没有使用tbody，而是直接使用tr
那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
tr不是table的子元素
table > tr:nth-child(odd){
background-color: bisque;
}
表单
action 表单要提交的服务器地址
注意：数据要提交到服务器中，必须要为元素指定一个name属性值
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能
可选值：
on 打开自动完成
off 关闭自动完成
readonly 设置表单项只读，数据会提交
disabled 设置表单项禁用，数据不会提交
autofocus 设置表单自动获得焦点
checked 默认选中
选择框必须要指定一个value属性，value属性最终会作为用户的填写值传递给服务器
selected 默认选中
移动端
像素
像素：
- 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
- 分辨率：1920 * 1080 说的就是屏幕中小点的数量
- 在前端开发中像素要分成两种情况讨论，CSS像素 和 物理像素
- 物理像素，上述所说的小点点就属于物理像素
- CSS像素，编写网页时，我们所用的像素都是CSS像素
- 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
- 一个CSS像素最终由几个物理像素显示，由浏览器决定
默认情况下在PC端，一个CSS像素 = 一个物理像素
视口（viewport）
- 视口就是屏幕中用来显示网页的区域
- 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
- 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值
有的笔记本开了125%的全局缩放倍率，此时浏览器80%缩放才是CSS：物理 = 1:1
笔记本自带缩放，桌面右键显示设置
Ctrl+0 重置缩放
Ctrl+滚轮 调节缩放
在不同的屏幕中，单位像素的大小是不同的，像素越小屏幕会越清晰
智能手机的像素点，远远小于计算机的像素点
默认情况下，移动端的网页都会将视口设置为980像素（CSS像素）
以确保PC端网页可以在移动端正常访问，但是如果网页的宽度超过了980，
移动端的浏览器会自动对网页缩放以完整显示网页
所以基本大部分的PC端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验
为了解决这个问题，大部分网站都会专门为移动端设计网页
完美视口
移动端默认的视口大小是980px（CSS像素）
默认情况下，移动端的像素比就是 980px/移动端宽度
如果我们直接在网页中编写移动端代码，这样在980px的视口下，像素比是非常不友好的
编写移动页面时，必须要有一个比较合理的像素比
CSS像素 对应几个 物理像素
我们可以通过改变视口的大小来，来改变CSS像素和物理像素的比值。
- 每一款移动设备设计时，都会有一个最佳的像素比，
- 一般我们只需要将像素比设置为该值即可得到一个最佳效果
- 将像素比设置为最佳像素比的视口大小我们称其为完美视口
将网页的视口设置为完美视口
设置视口大小 device-width 表示设备的宽度（完美视口） 初始化缩放设置为1.0
<meta name="viewport" content="width=device-width,initial-scale=1.0">
结论：以后再写移动端的页面，就把上边这个玩意先写上
VW
不同的设备完美视口的大小是不一样的
iphone6 375
iphone6plus 414
由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，
比如在iphone6中 375就是全屏，而到了plus中375就会缺一块
所以在移动端开发时，就不能再使用px来进行布局了
vw 表示的是视口的宽度（viewport width）
- 100vw = 一个视口的宽度
- 1vw = 1%视口宽度
vw这个单位永远相对于视口宽度进行计算
设计图的宽度
750px 1125px
设计图750px，使用vw作为单位
创建一个 48px * 35px 大小的元素
750px (设计图像素) = 100vw 1px = 0.1333333333vw
48px = 6.4vw
35px = 4.667vw
VW适配
html{
/*
网页中字体大小最小是12px，不能设置一个比12像素还小的字体
如果我们设置了一个小于12px的字体，则字体自动设置为12
0.1333333vw = 1px
5.3333vw = 40px
*/
font-size: 5.33333vw;
}
.box1{
/*
rem 1 rem = 1 html的字体大小
1 rem = 40px
*/
width: 1.2rem;
height: 0.875rem;
background-color: #bfa;
}
响应式布局
响应式布局
- 网页可以根据不同的设备或窗口大小呈现出不同的效果
- 使用响应式布局，可以使一个网页适用于所有设备
- 响应布局的关键就是 媒体查询
- 通过媒体查询，可以为不同设备或设备不同的状态分别设置样式
响应式设计的网页
- 移动端优先
- 渐进增强
使用媒体查询
语法：@media 查询规则{}
媒体类型：
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
- 可以使用,连接多个媒体类型，这样他们之间就是一个或的关系
可以在媒体类型前添加一个only ,表示只有
only的使用主要是为了兼容一些老版本浏览器
@media all{
body{
background-color: #bfa;
}
}
媒体特性：
width 视口的宽度
height 视口的高度
min-width 视口的最小宽度，视口大于指定宽度时生效
max-width 视口的最大宽度，视口小于指定宽度时生效
样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
一般比较常用的断点
小于768 超小屏幕 max-width = 768px
大于768 小屏幕 min-width = 768px
大于992 中性屏幕 min-width = 992px
大于1200 大屏幕 min-width = 1200px
,连接表“或”
and连接表“且”，一定要两边空格
@media only screen and (min-width:500px) and (max-width:700px)
@media not screen and (min-width:500px) and (max-width:700px){
body{
background-color: #bfa;
}
}
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：
- 全新的界面设计 ，将会带来全新的写作体验；
- 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
- 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
- 全新的 KaTeX数学公式 语法；
- 增加了支持甘特图的mermaid语法1 功能；
- 增加了 多屏幕编辑 Markdown文章功能；
- 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
- 增加了 检查列表 功能。
功能快捷键
撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G
合理的创建标题，有助于目录的生成
直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。
如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片: 
带尺寸的图片:
居中的图片: 
居中并且带尺寸的图片:
当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
// An highlighted block
var foo = 'bar';
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的：
| 项目 | Value |
|---|---|
| 电脑 | $1600 |
| 手机 | $12 |
| 导管 | $1 |
设定内容居中、居左、居右
使用:---------:居中
使用:----------居左
使用----------:居右
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：
| TYPE | ASCII | HTML |
|---|---|---|
| Single backticks | 'Isn't this fun?' | ‘Isn’t this fun?’ |
| Quotes | "Isn't this fun?" | “Isn’t this fun?” |
| Dashes | -- is en-dash, --- is em-dash | – is en-dash, — is em-dash |
创建一个自定义列表
-
Markdown
- Text-to- HTML conversion tool Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。2
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.
你可以找到更多关于的信息 LaTeX 数学表达式here.
新的甘特图功能，丰富你的文章
- 关于 甘特图 语法，参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：
这将产生一个流程图。:
- 关于 Mermaid 语法，参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图：
- 关于 Flowchart流程图 语法，参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。
注脚的解释 ↩︎
4651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
