前端Day06笔记

最新推荐文章于 2024-08-13 11:55:13 发布

MJH666666

最新推荐文章于 2024-08-13 11:55:13 发布

阅读量39

点赞数 1

文章标签：前端笔记

本文链接：https://blog.csdn.net/MJH666666/article/details/131526309

版权

1.什么是HTML
 HTML：超文本标记语言（标签），标签可分为单标签和双标签，以html后缀的文件可以在浏览器中打开，打开前必须保存当前html文件（ctrl+s）

2.HTML5模板
 在英文模式下输入!可以生成一个HTML5模板如下：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <title>Document</title>
 7 </head>
 8 <body>
9
 10 </body>
 11 </html>

1）第1行<!DOCTYPE html>
表示该文件为html5的模板文件，告诉浏览器要以html5的模板来解析，如果不加这一行内容，可能浏览器会以怪异模式来解析而不是标准模式

2）第2行和第11行<html lang="en"></html>

表示这是起始和结束的html根标签root，lang="en"表示页面是英文的网页，浏览器会翻译成英文，如果是中文的，可以改成lang="zh-CN"，查看更多语言：https://www.w3school.com.cn/tags/html_ref_country_codes.asp

3）第3行和第7行<head></head>
表示这是网页的头部

4）第4行<meta charset="UTF-8">
表示要求浏览器使用utf-8字符集进行解码

5）第6行<title>Document</title>
表示网页的标题名为Document

6）第8行和第十行<body></body>
从开始到结束，中间的内容表示了网页的主体区域，html代码就在这个区域里写

3.HTML的规范
由w3c规定，必须按照他的要求来，这是程序员之间的默契，例如一个html文件中只能出现一次h1标签
代码格式化：右键选择格式化文档

4.标签分类
 1）单标签和双标签：
 a.单标签（自结束标签）
 标准写法：
 <标签名/>
 其他写法：
 <标签名>
 </标签名>
 b.双标签
 <开始标签></结束标签>
 敲标签时先敲出标签名，按住tab键可以自动生成后续的标签结构
 标签不区分大小写，不过尽量保持全小写！！！
 2）语义化标签和非语义化标签：
 a.语义化标签
 本身代表了某些含义，和最后显示出的长相无关，其作用是增强代码的可读性有利于SEO搜索引擎优化
 b.非语义化标签
 div标签：盒子标签，定义了网页中的部分区域
 span标签：定义了一部分文本内容

5.标签举例
 1）h1~h6 双标签
 标题标签，分别为一级标题、二级标题、三级标题......六级标题
 一个html中只能出现一次h1标签（符合HTML规范）
 2）
 以加粗的形式突出内容的重要性
 3）
 加粗
 补充：strong和b标签的区别：
 区别一：在特殊的设备中标签展示的方式不一样，比如盲人阅读模式，如果是strong标签包裹的内容则会加重语气，而b标签包裹的内容不会发生语气上的变化
 区别二：在SEO搜索引擎优化时strong标签更容易被爬虫爬取
 4）
 以倾斜的形式突出内容的重要性
 5）
 斜体标签，使内容倾斜
 6）
 上标文字标签，可以将文字在偏上的位置显示
 7）
 下标文字标签，可以将文字在偏下的位置显示
 8）<del></del>
 删除文本标签
 9）<ins></ins>
 插入标签，表示标签中是插入的内容
 10）
 下划线标签
 11）<code></code>
 代码标签，包裹代码段
 12）<cite></cite>
 引用标签（在浏览器中展示为斜体）
 13）
 附属标签
 14）<bdo></bdo>
 文字方向标签，属性dir表示文字的方向，取值为ltr（从左往右）或rtl（从右往左）
 15） 
 换行
 16） <hr/>
 水平分割线
 总结：
 h1~h6标题标签、p段落标签、strong标签、em倾斜标签以上标签记住！！！

6.特殊符号的表示方法
   浏览器解析HTML文件时对一些特殊符号无法正常解析，这时候就需要用到特殊符号的表示方法
   1）&nbsp    空格
   2）&lt       小于号
   3）&gt       大于号

7.标签的嵌套（这里的总结不全面，等css学完之后会再总结）
 p标签中不可嵌套p标签、h标签、div标签，其他标签都可以；
 div标签中可以嵌套任意标签；
 h标签不可嵌套p标签、h标签、div标签，其他标签都可以；
 其余的文本标签不可嵌套p标签、h标签、div标签，其他标签都可以

8.标签的属性
 写法：属性名=属性值，属性值必须是双引号或者单引号并且是英文状态的，如果属性名和属性值相同，可以省略属性值

9.媒体标签
 1）<img/>
 图片标签，具有以下属性：
 src：存放图片路径（包括绝对路径、相对路径、服务器地址）
 width：图片宽度
 height：图片高度
 title：鼠标悬停状态的提示文本（任意标签中都具备的属性）
 alt：图片加载失败时的替换文本
 2）<video/>
 视频标签，具有以下属性：
 src：存放视频路径（包括绝对路径、相对路径、服务器地址）
 controls：视频播放控件，如果不加这个属性，视频无法播放
 muted：静音
 autoplay：自动播放，这个属性使用时必须搭配muted属性，这是因为浏览器的设置
 loop：循环播放
 poster：，存放第一帧使用的图片作为海报，属性值为图片路径