HTML+CSS WEB前端开发总结

初识Html

HTML, 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

---

基本结构

 声明文件语言类型 H5文档头
  ####    包裹所有标签
     ### 头部标签 包裹网页相关信息
    #### 设置字符集 中文 gb2312 GBK（早期的）UTF-8(全世界所有语言的字符集编码)
        
    ####  设置网页名字
   
   ###包裹网页内容 肉眼看到的
   

---

基本元素属性

标签	定义
h1-h6	标题标签
a	超链接标签 通过 href属性控制跳转地址 可以在新的页面打开 也可以在当前页打开
p	段落标签
b	字体加粗
u	字体下划线
s	字体删除线
i	字体斜体
	横线
	换行
div	无意义标签
span	无意义标签
img	图片一般通过src属性给图片路径 可单独设置宽高

---

行内元素和块级元素

独占一行的是块级标签（元素）行内标签（元素）可以跟其他元素在同一行

列表

1.无序列表 ul+li
2.有序列表 ol+li

表格

使用table标签 包含tr标签（代表行）tr标签包含th（加粗）或者td

---

路径

1.绝对路径 相对于操作系统所处在的位置
2.相对路径 相对于当前文件 目标文件所在的位置 ../(返回上一级)./(当前目录)
3.网络路径

---

初始CSS

---

什么是CSS

层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。当前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。

---

CSS引入方式

1.将CSS语句写在style标签中 style写在head标签中
2.使用link标签将CSS文件引入
3.在标签的style属性写CSS语句

---

语法

1>标签选择器
标签名{
    属性：值
}

2>class选择器
.类名{
    属性：值
}

3>id选择器
#类名{
    属性：值
}

4>通配符选择器
*{
    属性：值
}

---

选择器优先级

通配符选择器<标签选择器

代码注释

html注释 
css注释  /*这里写注释*/

解决margin塌陷

在父级加上overflow：hidden

---

浮动布局

float(浮动):让某个元素浮动起来 就是让元素脱离标准文档流

定位布局

相对定位position:relative会保留原先位置
绝对定位position:absolute不会保留原先位置

注：想要挪动谁，就给绝对定位。同时观察本身父级，如果父级没有定位，就给父级相对定位。否则就不管。

兼容性

条件注释法