笔记总结-html5+css3

一、HTML

1.基础&进阶

1.1概念

HTML是HyperText Markup Language(超文本标记语言)它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。

1.2语法

1.2.1注释

1.2.2元素

单标签元素，仅有一个标签

<meta /> 、<img />、<br/>

双标签元素，由开始标签和结束标签组成

<div></div>
<p></p>

1.2.3属性

核心元素title、id、class、style

1.2.4其他

显示结果	描述	实体名称	实体编号
	空格	&nbsp	&#160
<	小于号	&lt	&#60
>	大于号	&gt	&#62
&	和号	&amp	&#38
"	引号	&quot	&#34
￠	分（cent）	&cent	&#162
£	镑（pound）	&pound	&#163
¥	元（yen）	&yen	&#165
€	欧元（euro）	&euro	&#8364
§	小节	&sect	&#167
’	撇号	&apos (IE不支持)	&#39
©	版权（copyright）	&copy	&#169
®	注册商标	&reg	&#174
™	商标	&trade	&#8482
×	乘号	&times	&#215
÷	除号	&divide	&#247

1.3元素

1.3.1块级元素

作用：搭建网页结构

特点：

• 独占一行空间
• 默认宽度为100%
• 高度由子元素或内容决定
• 可以通过css指定其宽度

元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address…

1.3.2行内元素

作用：在结构中填充网页内容

特点：

• 与其他行内元素共享一行空间
• 宽高由自身决定
• 由于不用来搭建网页结构，所以也无需通过css指定其宽度
• 行内元素中不可以嵌套块元素
• 上下外边距不生效，左右边距生效

元素：span、a、strong、b、i、em、sub、sup…

1.4基础标签

- video(H5新增)

作用：播放视频
webm 网页中专用的视频格式

video标签的属性
src
controls 控制条
autoplay 自动播放
muted 静音
loop 循环播放
poster 封面
width 宽度
height 高度

  <video controls autoplay>
    <source src='' type='video/mp4'>
  </video>

- audio(H5新增)

作用: 播放音频

src
controls 控制条
autoplay 自动播放
muted 静音
loop 循环播放

1.5H5新增标签

除语义外，与div相同。新的标签带来的是网页布局的改变及提升对搜索引擎的友好。

header

<header>是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。

nav

<nav>是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。

article

<article>代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。

section

<section>作为Html文档独立的功能。

aside

<aside>元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。

footer

<footer>元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。

address

<address>元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。
在不支持Html5的浏览器中，由于浏览器无法识别Html5新增标签，所以默认将这些标签设置为行内元素（display:inline）,为了兼容性，需要：
section, article, aside, footer, header, nav, hgroup { display:block; }
但是上述方法有局限性，比如在IE8以及更早版本，是无法对未知元素进行样式的修饰，因此需要：图

figure& figcaption

figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

多用于用作文档中插图的图像。

details

details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。

open属性

​ 当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元 素应该被收缩起来不显示。默认值为false

summary子元素

​ summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从 属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供 单击。

1.6列表标签

1.6.1无序列表

<ul>
  <li>需要显示的条目内容</li>
</ul>

<ul type="value"></ul>
disc    默认值 实心圆
circle  空心圆
square  实心方块
虽然通过标签属性也能修改样式, 但是在企业开发中千万不要这么干 

1.6.2有序列表

<ol>
    <li></li>
</ol>

其它用法和ul都差不多, 也就是应用场景/注意点都和ul差不多
<ol type="A"></ol>
1   默认值。数字有序列表。（1、2、3、4）
a   按字母顺序排列的有序列表，小写。（a、b、c、d）
A   按字母顺序排列的有序列表，大写。（A、B、C、D）
i   罗马字母，小写。（i, ii, iii, iv）
I   罗马字母，大写。（I, II, III, IV）

1.6.3定义列表

给一堆数据添加列表语义，先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>
其实dt和dd都是英文的缩写
dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题
dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述的

1.7表格标签

-格式

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>身高</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>19</td>
    <td>1.78</td>
  </tr>
</table>

border width height cellspacing(单元格和单元格之间的距离)
cellpadding(单元格内容到单元格之间的距离) bgcolor 背景色
background 背景图片 align 设置表格在浏览器水平对齐方式 left center right
tr 一行 bgcolor align 设置整行单元格内容的水平对齐方式 valign 设置整行单元格内容的垂直对齐方式
td 一个单元格 一列 align valign bgcolor
th 表头标签 自带居中加粗效果
caption 表格标题标签
合并单元格：
跨行合并：rowspan
跨列合并：colspan

1.8form表单

- 表单的格式:

<form action="提交的服务器接口地址">
    <表单元素>
</form>

-常见表单元素

 form 
    input 
      type text 明文输入框
      type password 暗文输入框
      type radio 单选按钮 将单选按钮设置同一个属性 name='gender' value='男/女'
        checked 设置单选按钮被默认选中
      type checkbox 复选框
        checked 设置复选框被默认选中 
      select 
        optgroup 给下拉选项分组 
        option 下拉选项 
        selected 设置下拉框下拉选项默认选中
        readonly只读 disabled禁用
        textarea 多行文本框 
      type button 普通按钮
      type image 图片按钮 
      type file 上传文件 
      type reset 重置表单元素 清空在表单元素输入或者选择选项 但是默认值不清空
      type submit 提交按钮 将表单中输入的值提交到服务器 
      type hidden 隐藏域 

-H5新增表单元素

-datalist标签
		1.作用: 给输入框绑定待选项
    <input type="text" list="xxx">
    <datalist id="xxx">
        <option>xxx</option>
    </datalist>

    2.datalist格式:
    <datalist>
        <option>待选项内容</option>
    </datalist>

    3.如何给输入框绑定待选列表
    	1.搞一个输入框
    	2.搞一个datalist列表
    	3.给datalist列表标签添加一个id
    	4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

-progress <progress value="70" max="100">70%</progress>
    progress表示任务的完成情况，常用于进度条
        max 定义进度元素所要求的任务的工作量，默认值为1  
        value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。

-邮箱 <input type="email">
    可以自动校验输入的内容是否符合邮箱的格式

-域名 <input type="url">
    可以自动校验输入的内容是否是URL地址

-数字 <input type="number">
    输入框中只能输入数字

-时间 <input type="date">
    可以通过日历来选择时间

-颜色 <input type="color">
    可以通过取色板来选择颜色

1.9Http协议

1.9.1请求报文

请求报文：
  请求行：请求方式(get/post/其他请求) 请求路径(url) http1.1
  请求头：请求数据格式(Content-Type) User-Agent
  空行：换行或者回车 用来分隔请求头 
  请求体：post请求会将数据携带在请求体中 
  注意：get请求携带数据携带在地址栏 以?形式拼接数据

1.9.2响应报文

请求报文：
  请求行：请求方式(get/post/其他请求) 请求路径(url) http1.1
  请求头：请求数据格式(Content-Type) User-Agent
  空行：换行或者回车 用来分隔请求头 
  请求体：post请求会将数据携带在请求体中 
  注意：get请求携带数据携带在地址栏 以?形式拼接数据

二、CSS

1.基础&进阶

1.1引入

CSS引入方式优先级
内联样式>内部样式/外部样式 (就近原则)

link标签和@import区别?
所属范围：link标签属于html标签 @import属于css语法
加载顺序：link同时加载html和css @import优先加载css
兼容性：@import只支持ie5+版本 link标签无兼容性差异
建议使用link标签引入外部样式表

1.2选择器

1.2.1标签选择器

标签名{}

1.2.2id选择器

#id{}

1.2.3类选择器

.类名{}

1.2.4后代选择器

div p{} 选中div下所有后代p标签

1.2.5子代选择器

.one>p{} 选中类名为one下的直接子代p标签

1.2.6交集和并集选择器（组合选择器）

.one.two{}交集选择器

.one,.two{}并集选择器

1.2.7通用兄弟选择器 相邻兄弟选择器

.one~.two{}通用兄弟选择器

.one+.two{}相邻兄弟选择器

1.2.8伪类选择器

序选择器 ：

:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

​ 例如(3n+1)分别对应1,4,7…
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效

动态伪类选择器：

:link 从未被访问状态下的样式

:visited 被访问过的状态下的样式

:hover鼠标悬停状态下的样式

:active鼠标长按状态下的样式

否定伪类选择器

:not(选择器) 剔除该元素的其他元素

1.2.9伪元素

::after 元素最后边

::before 表示元素最前边的部分

::first-letter为第一个字符来设置一个样式

::first-line 为第一行设置一个样式

1.2.10属性选择权

[attribute=value]

-属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3

-属性的取值是以什么结尾的
​ [attribute$=value] CSS3

-属性的取值是否包含某个特定的值
​ [attribute~=value] CSS2
​ [attribute*=value] CSS3

1.2.11通配符选择器

*{
属性:值;
}

1.3css三大特性

继承，层叠，优先级

1.继承性 给父元素设置样式 后代元素可以继承
可继承属性:color text- line- font- letter-spacing word-spacing
注意：h1作为子元素时候无法继承font-size 参考自身font-size
a标签作为子元素无法继承color 和 取消下划线
2.层叠性 使用多个选择器给同一个标签设置样式
3.优先级 层叠性冲突问题
内联样式>内部样式/外部样式(就近原则)
!important 不计入权重 优先级最高
style 属性 1000
id选择器 100
类选择器 伪类选择器 属性选择器 10
标签选择器 伪元素选择器 1
input[name=‘user’] 11

1.4文本字体属性

font-size 设置字体大小
font-style 设置字体是否开启斜体 italic normal
font-weight 设置字体是否加粗 lighter/normal bold(700) bolder(900)
font-fmaily 设置字体类型
webfont
@font-face
简写:font:style weight size family; size和family不可以省略

1.5css隐藏元素方式

1.display:none 不占据原先在浏览器空间 绑定js事件不生效 会引起浏览器重排
2.visiblity:hidden 占据原先在浏览器空间 绑定js事件不生效 会引起浏览器重绘
3.opacity:0 占据原先在浏览器空间 绑定js事件生效 一般会引起浏览器重绘(一个图层)

1.6CSS盒模型

1.盒子种类:{
1.内容盒子 w3c盒子 标准盒子
2.边框盒子 IE盒子 怪异盒子
}
2.盒子区别:
1.盒子种类：{
1.内容盒子 w3c盒子 标准盒子 box-sizing:content-box
2.边框盒子 怪异盒子 IE盒子 box-sizing:border-box
}
2.盒子区别：{
1.内容盒子宽高是设置给盒子内容区宽高
2.边框盒子宽高是直接设置给盒子本身 width 和 height 由内容+内边距+边框
}
3.盒子计算公式:{
1.内容盒子：
盒子宽：width+左右padding+左右border
盒子高：height+上下padding+上下border
盒子所占页面空间宽：盒子宽+左右margin
盒子所占页面空间高：盒子高+上下margin
2.边框盒子:
盒子宽：width = 左右padding+左右border + content
盒子高：height =上下padding+上下border + content
盒子所占页面空间宽：盒子宽+左右margin
盒子所占页面空间高：盒子高+上下margin
}

background-color 背景颜色
background-image 背景图片
background-repeat 设置背景图片平铺方式
background-size 设置背景图片尺寸大小
background-position 设置背景图片位置
bgckground-attachment 设置背景图片关联方式
简写background:color image repeat attachment position;

1.7CSS布局机制

浮动：可以让块级元素水平排版
特性：脱离文档流，飘在文档流上方，原先位置不保留

1.7.1高度塌陷：

父元素高度由子元素撑起，给子元素设置浮动，父元素发生高度塌陷
解决方案：
1.给父元素设置高度
2.给父元素清除浮动 使用伪元素清除浮动
::after{
display:block;
content:“”;
clear:both;
}
3.在父元素最后设置一个空的一个标签 给空标签清浮动
外边距合并：
1.兄弟元素外边距合并
原因：一个兄弟设置上外边距，另一个兄弟设置了下外边距
解决：1.只给其中一个兄弟元素设置外边距
2.给下方兄弟元素开启BFC 设置一个display:inline-block
3.给其中一个兄弟元素设置父元素 给父元素开启BFC
3.父子元素外边距合并
原因：父子元素同时设置了同一方向外边距
解决：1.给父元素设置内边距，不给子元素设置外边距
2.给父元素设置一个border属性
3.给父元素开启BFC overflow:hidden
BFC(Block Formatting Context)块级格式化上下文 ************
相当于是元素的一种属性，有了这种属性，容器就成为独立的渲染区域，
容器内的元素不会影响容器外的元素
1.触发BFC
1.html
2.float不为none
3.position为absolute和fixed
4.display:inline-block
5.overflow不为visible auto hidden
2.作用：
1.避免外边距重叠
2.清除浮动(给父元素清除浮动、给兄弟元素清(会改变兄弟元素位置))
4.两列布局(左侧定宽右侧自适应)
5.三列布局（左右定宽 中间自适应）

1.7.2CSS布局机制

定位position 1.脱不脱离文档流 2.参照点定位

1.静态定位 默认所有元素在浏览器都是静态定位
position:static
2.相对定位 position:relative
特点：1.不脱离文档流 2.参照自身在浏览器位置定位
3.绝对定位 position:absolute
特点:1.脱离文档流 原先位置不保留 飘在文档流上方
2.无论有没有父元素或者祖先元素 参照浏览器视口区域定位
3.给父元素或者祖先元素设置定位 参照父元素或者祖先元素定位
4.固定定位 position:fixed
特点：1.脱离文档流 原先位置不保留 飘在文档流上方
2.参照浏览器视口区域定位
5.粘滞定位 position:sticky
特点：1.不脱离文档流
2.没有达到指定阈值之前是相对定位 达到阈值后是固定定位
z-index 更改元素堆叠顺序
兄弟元素同时开启定位流 谁的z-index较大 谁的优先级高
父子元素同时开启定位流：
1.如果两个同时设置 无论父元素z-index值多大 子元素优先级高
2.只给父元素设置 无论z-index值多大 子元素优先级高
3.只给子元素设置 同时z-index<0 父元素优先级高

1.7.3CSS水平垂直居中方案：

1.通过margin挤压 给子元素设置margin 左右margin=父width-子width/2
上下margin=父height-子height/2
2.通过padding挤压 给父元素设置 给父元素设置border-box
3.子绝父相 配合属性设置为0 top left bottom right 全部为0 margin:auto
4.子绝父相 top:50% left:50% margin-left:-width/2 margin-top:-height/2

三、git

1.代码版本控制工具

gitee 码云

个人使用：

1.初始化本地git仓库 (首次)
git init
2.新建远程仓库 (首次)
全局配置用户名和邮箱
git config --global user.name “willsonkang1”
git config --global user.email “2681091754@qq.com”
3.将本地git仓库和远程仓库进行绑定(首次)
git remote add origin xxx.git
查看绑定远程仓库 git remote -v
4.git add ./git add * 跟踪文件有无修改
5.git status 查看提交状态
6.git commit -m ‘[xxxxxx]’ 将暂存区文件提交到本地仓库
7.git push origin master 将文件提交远程仓库

后续使用

git add . 提交文件到暂存区
git commit -m ‘[xxx]’ 将暂存区文件提交到本地仓库
git push origin master 将文件提交到远程仓库
邀请大家加入远程仓库
1.克隆我的远程仓库
git clone xxxx.git
2.上传到远程仓库
更新远程仓库笔记 git pull origin master