HTML5-fishc 学习笔记

电玩女神 2024-04-18 17:06 70阅读 0赞

**\#\# meta标签**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70]  
meta标签中的内容不在界面显示  
更多meta标签的内容参考网站：https://man.ilovefishc.com/pageHTML5/meta.html

**\#\# style标签**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 1]  
以上为style标签的普通使用，还可以为不同的显示方式设置不同的显示样式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 2]

**\#\# link标签**  
link样式表  
![在这里插入图片描述][20190910143955220.png]  
link图标  
![在这里插入图片描述][20190911115516550.png]

**\#\# base标签**

指定相对URL的解析基准，点击页面上“第一个例子”时，会跳转到"http://demo.fishc.com/html5/lesson4/test1  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 3]

**\#\# script标签**  
载入JavaScript脚本  
![在这里插入图片描述][2019091014561667.png]  
**defer属性** 延迟执行脚本 等html全部解析完毕，才执行脚本内容  
defer属性只能用于外部脚本文件  
![在这里插入图片描述][20190910150031892.png]  
异步执行脚本 **async属性** 只能用于获取外部脚本文件  
脚本获取 html解析同时进行

**noscripe** 用来向不支持JavaScript的浏览器显示一些替代内容  
![在这里插入图片描述][2019091015051458.png]

**\#\# 注释**  
html:  
![在这里插入图片描述][2019091111565347.png]  
CSS : /\* \*/

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

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

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

**\#\# code标签**  
显示源代码内容  
![在这里插入图片描述][20190911121653554.png]  
多行代码用pre嵌入code表示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 4]  
定义程序的变量：var  
定义用户的输入：kbd  
定义程序的输出：samp  
![在这里插入图片描述][2019091112234497.png]

**引用部分：**

\*\* q元素\*\*

在引用内容两侧加入引号

\*\* blockquote元素\*\*

**cite元素-定义标题  
abbr元素  
\*\* dfn元素-术语**  
![在这里插入图片描述][20190912154329521.png]  
**address元素-定义作者信息**  
![在这里插入图片描述][20190912154421852.png]

**ruby元素**

![在这里插入图片描述][20190912154717116.png]效果：![在这里插入图片描述][20190912154812300.png]

**bdo元素-指定文本排版方式 从左到右ltr 从右到左rtl**  
![在这里插入图片描述][20190912155058174.png]

## 格式化部分： ##

**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元素-对列进行设置**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 5]

## **form表单的属性** ##

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

**\#\# label元素** 用于文本内容输出，不会带来样式上的变化  
![在这里插入图片描述][20190914172728807.png]  
**fieldset标签-可以对内容进行分组并“包裹”起来，清晰表达  
legen属性-fieldset的说明信息**

**单选框 - select标签 option标签**  
![在这里插入图片描述][20190914173409648.png]  
下拉列表太长时可对选项内容进行分组：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 6]  
**input标签的可用属性：**  
1.text，password  
2.submit button reset  
![在这里插入图片描述][20190914174332610.png]  
3.radio-单选框  
![在这里插入图片描述][20190914174517951.png]同一单选框中的内容其 name要保持一致  
4.checkbox-多选框  
![在这里插入图片描述][20190914174926829.png]  
5.时间和日期：time data month week datetime-local(本地日期和时间)  
![在这里插入图片描述][2019091417525629.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 7]

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

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

![在这里插入图片描述][20190915214010833.png]

11.number-限定数字输入，并用min max step 设置数字的范围  
![在这里插入图片描述][20190915221416375.png]  
12.range-数值滚动条 value设置默认值  
![在这里插入图片描述][20190915221623201.png]  
13.email,tel,url-邮箱,电话,网址  
![在这里插入图片描述][201909152220110.png]  
此时的输入限制还不是很符合要求，可增加pattern 根据正则表达式来限制输入  
14.placeholder-提示内容  
![在这里插入图片描述][20190916170055401.png]  
15.required-设置字段为必填  
16.size-设置输入框长度  
17.maxlength-限制输入的最大字符数量  
![在这里插入图片描述][2019091617062044.png]  
18.list datalist-设置内容关联  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 9]  
19.output-输出计算结果  
20.textarea-接收多行文本输入 cols rows wrap属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 10]

## 网页的架构 ##

div-块级无语义元素  
新元素替代div的布局结构，可用标签如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][20190917092406539.png]![在这里插入图片描述][20190917092353452.png]  
![在这里插入图片描述][20190917092420183.png]  
默认为收起来的状态，可设置open属性，将其设为默认打开的状态  
![在这里插入图片描述][20190917092540593.png]  
**map，area元素 -实现同一图片的不同点击位置，跳转到不同链接**  
![在这里插入图片描述][20190917104150613.png]  
**picture，source元素-设置图片的适配属性**不同的屏幕尺寸，显示不同的图片  
![在这里插入图片描述][20190917105050383.png]  
**figure，figcaption元素-将图片标记为插图**  
![在这里插入图片描述][20190917095239930.png]  
**在网页中嵌入视频-video**  
src-插入播放的视频  
controls - 控制条  
autoplay-自动播放（不同浏览器下效果不同）  
muted-静音播放  
preload-预加载（网页加载完成后，自动加载视频，免除加载的时间，但会消耗流量，默认为浏览器控制）  
poster-视频封面设置  
loop-循环播放  
![在这里插入图片描述][20190917100703910.png]  
**在网页中嵌入音频-audio**  
src-插入播放的音频  
controls - 控制条  
（其他元素与video相同）  
**字幕-track**  
添加WEBVTT文件，然后加载到track中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 12]![在这里插入图片描述][20190917102656208.png]  
**source-设置备用视频源，依次尝试多个视频源，直到播放成功为止**  
![在这里插入图片描述][20190917102341409.png]  
**iframe-嵌入其他网页**  
也可嵌入地图，并输入位置坐标  
![在这里插入图片描述][20190918104720944.png]  
加入sandbox元素，保护本网页免受嵌入网页的影响  
![在这里插入图片描述][20190918112209262.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 13]

**meter-一个范围内的值**  
![在这里插入图片描述][20190918105532457.png]  
![在这里插入图片描述][20190918105605435.png]  
**progress-进度条**

![在这里插入图片描述][20190918105655890.png]![在这里插入图片描述][20190918105648771.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3576d0beb6cc4c9baf50c2f13aa5b8a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9e900ec76b164548aa87b247f277b255.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a68a670a59d746bf8e9e2ed1619096d6.png
[20190910143955220.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e4983bfb9a6c485f990396da359e71fe.png
[20190911115516550.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/36da70e1cd11426ebbf2ee6f6e3f1dea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2acc84003a064730b89009fa814b212f.png
[2019091014561667.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/21d316767e3248789b1d78b70164790e.png
[20190910150031892.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0cae9186c757480e91b256410430b6b1.png
[2019091015051458.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/06213a4cbdd44ba5823a81e3df8e8f9f.png
[2019091111565347.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2e4c4b7dc7054e35b74df446f78da3c7.png
[20190911121653554.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/008b722c50764286bd5168258859086e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/68bdd63e337c4abbb55ccd9e5e763bbd.png
[2019091112234497.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fb9bc01010ec4da994579a887864ef32.png
[20190912154329521.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8c84668652c74a03a639739cf0f69ff9.png
[20190912154421852.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/938b72cfa4784e25a7e02e0cbc56d4ca.png
[20190912154717116.png]: https://img-blog.csdnimg.cn/20190912154717116.png
[20190912154812300.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/91511ab4969f49b7aa17de2669359e14.png
[20190912155058174.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/957e83d9e95e47e9bbed9d1808ffd163.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a685a01d13044ad8a4c22defaad1e996.png
[20190914172728807.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1dcdc0396d60453da32b4df9ba1045fd.png
[20190914173409648.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1debb363286145519691f28172cfd735.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5b67454529af4b1ca41d7184cc6d6ebb.png
[20190914174332610.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/534cc350c420432a9bad6e2a70d17847.png
[20190914174517951.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a05dc1eff42f4a50ba9ce44c9f7f05cb.png
[20190914174926829.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/da5f8e6da81f41a7bd5215b241f42838.png
[2019091417525629.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9d89a43cfd0a442c90fa9a879ac01e29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f7f40bfb25604fd0b4f5f146f0059c6d.png
[20190915214010833.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/dee4e5867a01437eb5aa986e16ab7b31.png
[20190915221416375.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2f4a900e3b55480298e1a713a75598ea.png
[20190915221623201.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/96eb4dafced941e6a4829fa7b412fe82.png
[201909152220110.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/600eedc30a224ddfbaf3dd0bc40b64de.png
[20190916170055401.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b9450a23567346bbad2db3dc04cb9153.png
[2019091617062044.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/811a9cd00c804087aec7730e50265fed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/562c0bda42074d909bd7dbbef06771de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/16fabde6bc5b4320956c0d47ba0f2449.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/655c0dd5eefc4700b6c7c47a241d1424.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/82cf2475f29c41ea903677f1a7aa909c.png
[20190917092406539.png]: https://img-blog.csdnimg.cn/20190917092406539.png
[20190917092353452.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e62ccad83070430eb2737622f976894c.png
[20190917092420183.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6370bf3ea7a6416fb2235363d0d9c3e1.png
[20190917092540593.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b9e8e2c878474adda44bf650b1aceb26.png
[20190917104150613.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0261630f372543029038d9894448f307.png
[20190917105050383.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/dd6c55ca09d34797a34f4522774e3789.png
[20190917095239930.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8a41b4add6b3480a9b1df85be2a17629.png
[20190917100703910.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d67ee2dfd84e49a59991882e61675f11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20190917102518671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2,size_16,color_FFFFFF,t_70
[20190917102656208.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e88f8d153d2a425f99908c595187f390.png
[20190917102341409.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ee24eec7294b4193b1914f8a3a3aa236.png
[20190918104720944.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4f38abc729514b9088e8552156cc66b7.png
[20190918112209262.png]: https://img-blog.csdnimg.cn/20190918112209262.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTM3MDc2_size_16_color_FFFFFF_t_70 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/38f4884c93964cb89f37237c11761e82.png
[20190918105532457.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e69664ebceb04e059e485406454e54a0.png
[20190918105605435.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2d8c93b44b1d4db1b5b15091fb6a8817.png
[20190918105655890.png]: https://img-blog.csdnimg.cn/20190918105655890.png
[20190918105648771.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/dca9a9c77936488eacf36ea7f3ec2f03.png