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

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

开发工具：
html：（hyperText markup Language）超文本编辑语言
gb2312 ：国家标准字符集 gbk： 国家标准扩展字符集 utf-8 ：万国码

四大主流浏览器及其内核 内核
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 等于：双引号+图片地址 >

链接类标签：a
作用：跳转链接 href：输入跳转页面的地址 a标签右默认文本修饰；*
<a href 等于双引号+网址>

音频、视频类标签：audio，video
src：路径：视频、音频路径
controls 属性 是否加控制条
<audio src 等于双引号+音频地址 controls=“controls”>

<video src 等于双引号+视频地址 controls=“controls”>

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

**表单标签：**有默认样式
作用:表单提交，录入信息，登录，注册等…
表单标签：form
输入框标签：input
按钮标签：button

**列表类标签：**有序列表与无序列表
有序列表：

无序列表：

元素与元素之间的关系: 血缘关系
-父子关系
-兄弟关系：(同一个父亲)
-子孙关系：(隔代的标签)
大哥和小弟区分：浏览器解析决定，解析顺序从上往下解析，从辈分高的到低的

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