HTML&CSS简单学习，看这篇就够了！

---

1 HTML

1.1 HTML基本标签

HTML: 超文本标记语言
p标签: 段落标签
br标签: 简单换行
h1-h6: 标题标签
hr标签: 水平分割线, 华丽的分割线
font标签: color属性改变颜色, size字体大小
b标签: 加粗
i标签: 斜体
strong标签: 带语义的加粗
em标签: 斜体标签,带语义

img标签: 图片标签 显示图片
​    src: 指定图片路径(相对路径)
​    width: 宽度
​    height: 高度
​    alt: 图片加载失败时的提示

相对路径:
​    ./ 代表当前路径
​    …/ 代表的是上一级路径
​    …/…/ 代表的是上上一级路径

ul标签: 无序列表
ol标签: 有序列表
li标签: 列表项

a标签: 超链接标签:
​    target: 打开方式
​    href: 指定要跳转的链接地址

table标签: table > tr > td
tr标签: 行
td标签: 列
​    合并行: rowspan
​    合并列: colspan

form 标签: 表单标签,主要是用来向服务器提交数据
    method: 提交方式 get post
    action : 提交的路径

input 标签:
type:
​    password: 密码框
​    text: 文本
​    submit: 提交
​    button: 普通的按钮
​​    reset: 重置按钮
​​    radio: 单选按钮 设置name属性让它们是一组
​​    checkbox: 复选按钮

1.2 表格布局的缺陷

1. 嵌套层级太多，一旦出现嵌套顺序错乱，整个页面达不到预期效果。
2. 采用表格布局，页面不够灵活，动其中某一块，整个表格布局的结构全都要变。

1.3 HTML的块标签

1. div标签: 默认占一行,自动换行
2. span标签: 内容显示在同一行

2 CSS

2.1 CSS概述

1. Cascading Style Sheets: 层叠样式表
2. 主要作用:
   用来美化我们的 HTML 页面的
   HTML 决定网页的骨架，CSS 化妆
   将页面的HTML和美化进行分离
3. CSS的简单语法:
   在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

   <style>
     选择器{
       属性名称:属性的值;
       属性名称2: 属性的值2;
     }
   </style>
   

2.2 CSS选择器

1. 帮助我们找到我们要修饰的标签或者元素

• 元素选择:

  元素的名称{
    属性名称:属性的值;
    属性名称:属性的值;
  }
  

• ID选择器:

  以#号开头  ID在整个页面中必须是唯一的s
  #ID的名称{
    属性名称:属性的值;
    属性名称:属性的值;
  }
  

• 类选择器:

  以 . 开头 
  .类的名称{
     属性名称:属性的值;
    	属性名称:属性的值;
  }
  

2.3 CSS中的其它选择器

• 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
• 属性选择器:

  a[title]
  a[titile='aaa']
  a[href][title]
  a[href][title='aaa']
  

• 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代
• 子元素选择器: 父选择器 > 儿子选择器
• 伪类选择器: 通常都是用在A标签上

2.4 CSS的引入方式

1. ​外部样式: 通过 link 标签引入一个外部的 css 文件
2. 内部样式: 直接在 style 标签内编写 CSS 代码
   ​3. 行内样式: 直接在标签中添加一个 style 属性, 编写 CSS 样式

2.5 CSS浮动

1. 浮动的元素会脱离正常的文档流，在正常的文档流中不占空间。

float属性:
    left
    right

clear属性: 清除浮动
    both : 两边都不允许浮动
    left: 左边不允许浮动
    right : 右边不允许浮动

2.6 CSS的优先级

1. 按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器
2. 相同选择器，就近原则: 哪个离得近，就选用哪个的样式
   ​

2.7 CSS的盒子模型

1. 内边距:

   padding-top: 上
   padding-right: 右
   padding-bottom: 下
   padding-left: 左
   

• 用法说明:

  padding:10px;  上下左右都是10px
  padding:10px 20px;  上下是10px 左右是20px
  padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
  padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向
  

2. 外边距:

   margin-top: 上
   margin-right: 右
   margin-bottom: 下
   margin-left: 左
   

3. CSS绝对定位:

   ​position: absolute
   top: 控制距离顶部的位置
   ​left: 控制距离左边的位置