记录与html的第一次正式相遇

左手的ㄟ右手 2021-11-30 00:40 267阅读 0赞

**记录与html的第一次正式相遇**  
leilei

**开发工具：**  
**html：（hyperText markup Language）超文本编辑语言**  
gb2312 ：**国家标准字符集** gbk： **国家标准扩展字符集** utf-8 ：**万国码**  
![在这里插入图片描述][20190722225251990.png]

**四大主流浏览器及其内核 内核  
[1.IE][] ： trident（独立研发）  
2.Firefox ： Gecko  
3.Googe chrome ： webkit/blink(独立研发)  
4.Safari ： Weblit**

**文件后缀：**  
xxx.html (html文件) 作用：写网页的，浏览器可以解析这个xxx.html文件  
xxx.css (css文件) 作用： 编写css语言，有美化的作用，浏览器可以解析  
xxx.js (js文件) 作用：编写js语言，主演要是写业务逻辑的

**路径：**  
以当前目录为标准  
./ 查找的同级目录  
…/ 查找上一级目录  
…/…/ 上两级目录

**html元素：**  
html元素的作用：构建页面。  
html标签: 大多数是以标签对的形式出现的。  
html: 是超文本链接

**根据特点分类：**  
**块元素：**  
代表标签：html body 所有布局类标签 main div section nav footer header p ul ol li dl dd form…  
1.默认宽度是占据父标签内容的全部，也就是 width:100%;  
默认的高度是有内容的多少决定的  
2.可以设置宽和高  
3.块标签会独立的占据一行，不会和其他默认样式元素同行  
**行元素：**  
代表标签：audio video span i e a span label select option  
1.默认的宽高由内容决定  
2.内容过多时允许换行并断开（一般用于处理文字样式）  
3.不可以直接设置宽和高（宽高无效）  
4.在一行中如有剩余空间，允许同其他行内标签公用一行  
5.上下方向外边距不能使用  
6.某些动画样式不能添加使用  
7.子元素在父元素中排列方式从左往右依次排列。直到排满为止才换行  
**行内块元素：**  
代表标签：img,button,input…  
1.默认的宽和高由内容决定  
2.内容过多时不会断开  
3.可以设置宽和高  
4.在一行中如果有剩余空间，允许其他 行内/行内块 标签公用一行  
5.行内块与行内标签会有行高的概念

**根据用途分类：**  
**head:** 头部标签，指的是头部  
**main：** 局类标签  
**header：** 网站上面部分的布局  
**section：** 内容区域  
**aside：** 侧边栏标签  
**footer：** 网站底部  
文本类标签：只要跟文字有关就可以用以下标签  
1.p： 段落标签  
2.span：一个文字标签  
3.i:斜体标签  
4.strong：加粗标签

\*\*h标签（h1-h6）?\*在一个页面中，h1标签只能出现一次，其他标题标签，可以出现多次，h1-h6标题级别依次降低，字体逐渐减小；

**图片类标签：img：**  
作用：加载图片 src：图片路径 alt：当图片信息不能加载的时候会出现；’  
<img src 等于：双引号+图片地址 >  
![在这里插入图片描述][20190722225043197.png]

**链接类标签：a**  
作用：跳转链接 href：输入跳转页面的地址 a标签右默认文本修饰；\*  
<a href 等于双引号+网址>  
![在这里插入图片描述][20190722225059124.png]

**音频、视频类标签：audio，video**  
src：路径：视频、音频路径  
controls 属性 是否加控制条  
<audio src 等于双引号+音频地址 controls=“controls”>  
![在这里插入图片描述][20190722224858408.png]  
<video src 等于双引号+视频地址 controls=“controls”>  
![在这里插入图片描述][20190722224932274.png]

**表格类标签：**  
作用：写表格；应用：有规律的排列，几行几列  
表格头部：thead  
表格身体:tbody  
表格行：tr  
表格列：td

\*\*表单标签：\*\***有默认样式**  
作用:表单提交，录入信息，登录，注册等…  
表单标签：form  
输入框标签：input  
按钮标签：button  
![在这里插入图片描述][20190722225153334.png]

\*\*列表类标签：\*\***有序列表与无序列表**  
有序列表：  
![在这里插入图片描述][20190722224631516.png]  
无序列表：  
![在这里插入图片描述][20190722224740900.png]  
**元素与元素之间的关系: 血缘关系**  
\-父子关系  
\-兄弟关系：(同一个父亲)  
\-子孙关系：(隔代的标签)  
大哥和小弟区分：浏览器解析决定，解析顺序从上往下解析，从辈分高的到低的

**总结：**\-每个属性都有特定的作用，具体的作用的程度有这个属性的值来决定的；  
\-属性是不可改变的，属性对应的值是可以改变的，属性具有唯一性  
\-一个属性可以跟多个值；

[20190722225251990.png]: /images/20211129/b543539e7903494182d3166a6005fedc.png
[1.IE]: http://1.IE
[20190722225043197.png]: /images/20211129/9a4da9bb01cc4792994b302a50a40de6.png
[20190722225059124.png]: /images/20211129/f2d868c08e7b494686b9c4fe244cc98d.png
[20190722224858408.png]: /images/20211129/9a10a42b5ae7488888a524c096e86926.png
[20190722224932274.png]: /images/20211129/81ba6df5c1d04c8d80333a62485bab29.png
[20190722225153334.png]: /images/20211129/9bac28613e054cb683b455c7fbaef78f.png
[20190722224631516.png]: /images/20211129/fc5b932aace3487fb3205d0df4b28374.png
[20190722224740900.png]: /images/20211129/021c127df7b445a9808221c8f083725a.png