HTML5-fishc 学习笔记

## meta标签

meta标签中的内容不在界面显示
更多meta标签的内容参考网站：https://man.ilovefishc.com/pageHTML5/meta.html

## style标签

以上为style标签的普通使用，还可以为不同的显示方式设置不同的显示样式。

## link标签
link样式表

link图标

## base标签

指定相对URL的解析基准，点击页面上“第一个例子”时，会跳转到"http://demo.fishc.com/html5/lesson4/test1

## script标签
载入JavaScript脚本

defer属性 延迟执行脚本 等html全部解析完毕，才执行脚本内容
defer属性只能用于外部脚本文件

异步执行脚本 async属性 只能用于获取外部脚本文件
脚本获取 html解析同时进行

noscripe 用来向不支持JavaScript的浏览器显示一些替代内容

## 注释
html:

CSS : /* */

Javascript： // 单行注释 或者 /* 多行注释 */

## 块级元素和行内元素
br元素： 换行

## HTML字符实体
在html中不能直接使用某些字体，需要特定符号进行替换。例如“<”需用&#60； 替换
## pre标签
保留等宽字体

## code标签
显示源代码内容

多行代码用pre嵌入code表示

定义程序的变量：var
定义用户的输入：kbd
定义程序的输出：samp

引用部分：

** q元素**

在引用内容两侧加入引号

** blockquote元素**

cite元素-定义标题
abbr元素
** dfn元素-术语

address元素-定义作者信息

ruby元素

效果：

bdo元素-指定文本排版方式 从左到右ltr 从右到左rtl

格式化部分：

strong元素-强调文本重要性，加粗
b元素-加粗显示，表示粗体，无重要语义
em元素-表示强调，斜体
i元素-表示斜体，无语义
del元素-元素内内容会加入删除线
ins元素-所在内容会加入下划线
s元素-所在内容会被划掉
u元素-定义专有名词
mark元素-标记内容，黄色底色
sup，sub元素-上下标，用于数学公式或化学公式
small元素-小字表示内容

列表部分：

ul元素-无序列表
li元素-表格中每一项内容
ol元素-有序列表 属性：reverse start type
CSS样式用于表格
列表嵌套
dl元素-定义列表 dt-项目内容 dd-项目内容所对应的项目介绍

table 元素-表示表格，th表头，td内容，caption表头· html5后，表格的权限得到限制，需要用CSS制作表格样式。

thead tbody tfoot元素配合th td使用，优化表格样式
colgroup元素-对列进行设置

form表单的属性

form input button标签
表单提交方法：get post
autocomplete-自动填充属性 on/off 可单独设置某一个input的属性
target-指定目标显示位置 如：_blank 在新的页面显示
value-设置默认值
autofocus-自动聚焦
disable-禁用，不传递数据
readonly-禁止修改，传递数据

## label元素 用于文本内容输出，不会带来样式上的变化

fieldset标签-可以对内容进行分组并“包裹”起来，清晰表达
legen属性-fieldset的说明信息

单选框 - select标签 option标签

下拉列表太长时可对选项内容进行分组：

input标签的可用属性：
1.text，password
2.submit button reset

3.radio-单选框
同一单选框中的内容其 name要保持一致
4.checkbox-多选框

5.时间和日期：time data month week datetime-local(本地日期和时间)

百分号编码（URL编码）：有些符号会引起歧义，制定规范进行替换

6.search-搜索框
7.color-颜色控制器
8.image-图片作为按钮，可以获取鼠标点击图片的相对位置，做出不同的回应。
9.hidden -输入框在网页显示时 完全不显示，但在浏览器的控制台可以看到元素的存在
10.file-上传文件 需要设置form中的enctype=multipart/form-data method=post,还可以设置文件的类型accept,设置长传尺寸 multiple属性-同时长传多个文件

11.number-限定数字输入，并用min max step 设置数字的范围

12.range-数值滚动条 value设置默认值

13.email,tel,url-邮箱,电话,网址

此时的输入限制还不是很符合要求，可增加pattern 根据正则表达式来限制输入
14.placeholder-提示内容

15.required-设置字段为必填
16.size-设置输入框长度
17.maxlength-限制输入的最大字符数量

18.list datalist-设置内容关联


19.output-输出计算结果
20.textarea-接收多行文本输入 cols rows wrap属性

网页的架构

div-块级无语义元素
新元素替代div的布局结构，可用标签如下：



默认为收起来的状态，可设置open属性，将其设为默认打开的状态

map，area元素 -实现同一图片的不同点击位置，跳转到不同链接

picture，source元素-设置图片的适配属性不同的屏幕尺寸，显示不同的图片

figure，figcaption元素-将图片标记为插图

在网页中嵌入视频-video
src-插入播放的视频
controls - 控制条
autoplay-自动播放（不同浏览器下效果不同）
muted-静音播放
preload-预加载（网页加载完成后，自动加载视频，免除加载的时间，但会消耗流量，默认为浏览器控制）
poster-视频封面设置
loop-循环播放

在网页中嵌入音频-audio
src-插入播放的音频
controls - 控制条
（其他元素与video相同）
字幕-track
添加WEBVTT文件，然后加载到track中

source-设置备用视频源，依次尝试多个视频源，直到播放成功为止

iframe-嵌入其他网页
也可嵌入地图，并输入位置坐标

加入sandbox元素，保护本网页免受嵌入网页的影响

meter-一个范围内的值


progress-进度条

a