推荐博客：付铭

day-01

HTML

1、HTML 基本语法

html标签

单标签 <img /> 、<img>
双标签 <html> </html>

属性属于标签

<img src="图片的地址">
<table width="100" height="200"></table>

1.1 语法规范

标签嵌套用缩进
标签名不区分大小写建议小写
属性名不区分大小写建议小写

注释

<!-- 多行 -->
<!--
多行
-->

1.2 常用HTML实体

  空格
< <
> >
&amp； &
&copy； 版权
&yen； 人民币

2、HTML常用标签

主体结构

<html></html>
<head></head>
<body></body>

HEAD标签

<title></title> 网站标题
<meta> 指定网页的元信息指定关键字指定描述指定字符集属性： charset、name、content
<style></style>
<link> 导入css或者指定网页图标属性 src、 type 、 rel
<script> </script> 导入javascript

格式排版标签

<hn></hn> 1~6 标题
<p></p> 段落
<pre></pre> 原样输出
<br> 换行
<hr> 分隔
<div></div>

2.1 文本标签

<em></em> 强调表现为斜体
<strong></strong> 强调表现为粗体
<mark></mark> H5新增表示被选择
<sup></sup> 上标
<sub></sub> 下标
<ins></ins> 添加的内容
<del></del> 删除的内容
<ruby></ruby> / <rt></rt> 加拼音 H5新增

3、CSS基本语法

使用CSS

link 引入外部的CSS文件

<link rel="shortcut icon" type="image/x-icon" href="图标文件路径">    
<link rel="stylesheet" href="外部CSS文件路径"

<style> </style> 在html中写
使用html元素的style属性

格式

选择器 {
    CSS属性: 值;
    CSS属性: 值;
}

选择器 {属性:值;属性:值}

注释

/* */

CSS长度单位

px  像素
em  默认大小的倍数
百分比   默认大小参照
cm
mm
pt

CSS 颜色单位

colorName：  red/green/bue/purple/orange/yellow/pink/skyblue

rgb数字  rgb(34,45,23)  rgb(20%, 57%, 100%)

16进制数字  #abcdef   #f90   #ccc

4、CSS选择器

标签名选择器
tagName {
    
}

类名
.className {
    
}

ID选择器
#idName {
    
}


全局选择器
* {
    
}

组合 后代元素：空格连接，包含子代选择器
选择器 选择器{
 
}

组合 子元素：> 连接
选择器>选择器 {
 
}

群组
选择器,选择器,选择器{
 
}

多条件
p.item

5、选择器优先级

ID > CLASS > tagName > *

组合选择器 数数

6、CSS常用属性

6.1 字体

font-family　　字体家族
font-size
font-weight normal | bold
font-style normal | italic
font-variant normal | small-caps

font 复合属性

font:[weith | style | variant] size family

颜色

color

6.2 文本

word-spacing
letter-spacing　　字间距
text-align: left / center / right 水平居中
vertical-align: baseline / middle .... 垂直居中
line-height 行高
text-decoration ： none/overline/underline/line-through 一般用于a标签去除下划线
text-indent: 2em
word-wrap: break-word
overflow-wrap word-wrap的别名 CSS3
white-space pre pre-wrap

day_02

7、CSS 属性/尺寸/边框/背景

尺寸

width max-width min-width
height max-height min-height

边框

border-style 边框风格 solid / dotted / dashed / double / none
border-width 边框宽度
border-color 边框颜色
border 复合属性 border: 1px solid #ccc

内边距

padding-left
padding-top
padding-right
padding-bottom

padding

padding: 值;  上下左右
padding: 值1 值2；   上下 左右
padding: 值1 值2 值3;  上  左右  下
padding: 值2 值2 值3 值4；  上  右  下  左

7.1 背景属性

background-color 背景颜色 transparent
background-image 背景图片 url()
background-repeat 背景图片平铺 repeat no-repeat repeat-x repeat-y
background-position 背景图片位置
background-attachment 背景图片固定 scroll / fixed

background 复合属性

background: color image repeat postion attachment

CSS Sprite 精灵图雪碧图

利用 background-position 设置背景图片的位置
把很多小的图片集成到一张大图上
好处：减少网络请求数量

8、超级链接

8.1 a 元素

属性

href
target _blank（空白页打开） / _self
title 鼠标悬浮时的文本提示
download H5新增的

特殊用法

发短信　　smsto
打电话　　telto
发邮件　　mailto

8.2 路径

相对路径 ./（当前路径） ../（上一级路径）
绝对路径 URL http://www.biadu.com/index.html
特殊的相对路径 /lesson/path/index.html

8.3 cursor css属性

pointer /  move / no-drop

8.4 锚点

设置锚点

第一种方式
<a name="锚点名字"></a>

第二种方式
随便一个元素
<tagname id="锚点的名字"></tagname>

跳转到指定锚点

<a href="#锚点名"></a>

8.5 完整URL

http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1

协议protocol  http
主机名hostname   www.baidu.com / IP
路径 path     /path/demo/contents/
文件名filename   index.php
查询内容query  ?a=100&b=300
锚点   #mao1

9、图片

img元素

属性

src
title　　图片的文本信息（鼠标悬浮时展示）
alt　　图片资源加载失败时的文本提示
usemap

9.1 图片映射

map元素

- name
- id

area元素

- shape rect circle poly
- coords
- target
- href
- title

day_03

页面中的组成部分

10、列表

列表标签

有序列表

　　<ol> <li>

　　<ol>的属性： start type ="1/a/A/i/I" reversed

无序列表

　　<ul><li>

定义列表

　　<dl> <dt> <dd>

列表相关的CSS属性

　　适用于<ol>和<ul> 也可以设置给 <li>

list-style-type: disc/circle/square.../none
list-style-position: outside/inside
list-style-image: url()
list-style: 复合属性
reset操作:
　　ol,ul {
　　　　margin: 0;
　　　　padding: 0;
　　　　list-style: none;}

11、表格

HTML标签

<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>  
<caption></caption>  标题
<tr></tr>  行
<td></td>  单元格
<th></th>  表头单元格

CSS属性

table-layout: auto / fixed   列宽固定(相等)
border-collapse: separate/ collapse 合并单元格边框
border-spacing: 长度;  单元格和单元格之间的间隙  单元格不能合并
caption-side: top/bottom  标题的位置
empty-cells:hide/show   空的单元格显示/隐藏 单元格不能合并

合并单元格

td或者th的属性：
colspan  跨列
rowspan  跨行

12、表单

12.1 表单的组成(控件)

文本输入框

<input name="" type="text">
placeholder
maxlength
value

密码框

<input name="" type="password">
placeholder
maxlength
value

单选按钮

<input type="radio" name="" value="" checked>

复选框

<input type="checkbox" name="" value="" checked>

文件选择

<input type="file" name="">
multiple 多个

规定类型的文本输入框 (H5)

input:email
input:url
input:number   max/min/step
input:search
input:tel

范围选择框 (H5)

<input type="range" name="" value="" max="" min="" step="">

颜色选择(H5)

input:color

时间日期(H5)

<!--日期-->
<input type="date" name="date">

<!--月份-->
<input type="month" name="month">

<!--星期-->
<input type="week" name="week">

<!--时间-->
<input type="time" name="time">

<!--时间日期-->
<input type="datetime-local" name="dt">

下拉选项

<select name="">
    <option value=""></option>
    <option value="" selected></option>
    <option value=""></option>
</select>

multiple 多选

多行文本

<textarea name="" rows="" cols=""></textarea>
maxlenth

按钮

input:submit  input:reset  input:button
button:submit button:reset button:button   默认submit

12.2 表单标签

<form></form>   action（提交的后台接口，即请求的服务器路径）  method（请求方式）
<input>  type  name  max/min/step  maxlength  checked value  placeholder（H5） list(H5)
<select></select>  name
<option></option>  value
<textarea></textarea> rows cols  name  placeholder

<fieldset></fieldset>
<legend></legend>

<datalist></datalist>(H5)  嵌套option

12.3 表单验证（H5）

必须

required 属性   给所有可以输入的表单控件

指定类型

email/url/number

正则

pattern 属性 所有可输入 
ttile

12.4 表单控件的通用属性

disabled  所有的表单控件元素 禁用
enabled   可用
readonly  只读  用于可以输入的表单控件(input/textarea)
autofocus  自动获取焦点  所有的表单元素  H5
autocomplete   自动完成 on/off   H5
pattern
title
required

13、视频/音频(H5)

视频

<video src=""></video>
controls
autoplay
poster= ""
preload 预加载
loop

mp4 / ogg / webm

音频

<audio src=""></audio>
controls
autoplay
preload
loop

　　mp3 / wav / ogg

source

<video>
	<source src="" type="">
	<source src="" type="">
	<source src="" type="">
</video>
 
<audio>
	<source src="" type="">
	<source src="" type="">
	<source src="" type="">
</audio>

day_05

14、浮动

如何设置浮动 float:left\right\none

设置浮动之后的特点

脱离文档流。 对父元素和后面元素的影响
块状元素，可以共享一行。多个元素浮动，宽度超过父元素会自动换行
元素一旦浮动，都变为块状。   浮动元素的默认宽度，被内容撑开
父元素的宽度仍然会对浮动的元素产生限制

消除浮动的影响

父元素：
    设置overflow: auto/hidden
    父元素也浮动
 
后面的元素 设置 css属性  `clear:both`

14.1 浮动

元素可以设置向左或者向右浮动（不会跳出父元素的宽）
元素浮动后，会脱离文档流。（对后面的元素产生影响）
元素一旦浮动，会转换为块状元素
浮动的元素并不独占一行(仍然是块状元素) 因为脱离标准文档流
浮动的元素，宽度默认会是auto，被内容撑开
多个元素浮动，会排成一行，宽度超过父元素宽度，会自动换行

14.2 浮动的影响

对后面元素影响。后面元素会整体向前
对父元素有影响（父元素的高不能被撑开）

14.3 消除浮动影响

消除元素对后面元素的影响，在后面的元素设置 clear:both/left/right

：after | before {

　　concent：“”；

　　display：block；

　　clear：both；

}

消除子元素浮动对父元素的影响。给元素浮动者设置 overflow:hidden

15、定位布局

15.1 相对定位

通过 position:relative 设置元素为相对定位元素
元素设置为相对定位之后，不会脱离文档流，不影响其他元素
可以通过 left、top、right、bottom给相对定位的元素设置位置
定位元素：根据原先默认的位置去定位

15.2 绝对定位

通过position:absolute来设置绝对定位
元素绝对定位后，脱离文档流，影响后面的元素。宽度默认会被内容撑开
可以通过 left、top、right、bottom给绝对定位的元素设置位置
定位规则：根据第一个定位的祖先元素，如果没有定位的祖先元素，根据html元素。祖先元素什么定位都可以

15.3 固定定位

position: fixed;
left/top/right/bottom: 长度单位；

根据屏幕进行定位
脱离文档流（宽度默认变成内容撑开）
元素设置为固定定位或绝对定位之后，会变为块状元素

15.4 元素的层级位置

z-index: number;   只能用于被定位的元素

16、定义使用的CSS属性

position:  
left
top
right
bottom
z-index

day_06

17、布局知识点总结

元素垂直左右居中

position: absolute;
left: 50%;
top: 50%;
marign-top: -高的一半
margin-left: -宽的一半

元素水平居中

margin-left:auto;
margin-right: auto;

margin:0 auto;

text-align

让文字水平居中
内联元素(inline 和 inline-block)

line-height

让一行文字垂直居中。 line-height的值等于元素的高
内联元素(inline inline-block)

18、布局

18.1 CSS重置

reset.css

去掉所有元素的默认样式
也可以保证浏览器效果相同

/*整体设置 start*/
html{
    color:#000;
    background:#FFF;
}
body, div, dl, dt, dd, ul, ol,
li,h1, h2, h3, h4, h5, h6, pre,
code,form, fieldset, legend, input,
button,textarea, p, blockquote, th, td {
    margin:;
    padding:;
}
fieldset, img {
    border:;
}
input,select,textarea,button {
    outline:none;
}
textarea{
    resize:none;
}
    /*i一般作为字体图片使用*/
i {
    font-style: normal;
    /*文本垂直居中*/
    vertical-align: middle;
}
a{
    text-decoration:none;
    color: #333;
}
table {
    border-collapse:collapse;
    border-spacing:;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style:normal;
    font-weight:normal;
}
 
ol,
ul {
    list-style:none;
}
 
caption,
th {
    text-align:left;
}
/*整体设置 end*/

reset.css

normalize.css

重新设计了所有元素的默认样式
保证所有浏览器效果相同
 
优点：
添加了H5新元素的样式重置
没有简单粗暴

18.2 布局的H5新增标签(了解)

header
footer
main
aside
article
section
dialog
 
双标签，没有任何默认样式，跟div一样。 有语义

19、字体图标

详情点击☛http://fontawesome.dashgame.com/

day_07

20、CSS3 的选择器

20.1 基本选择器

tagName
.className
#idName
*
slector,selector,selector

20.2 层级选择器

selector1 selector2     后代
selectoer1>selectoer2   子元素
selector1+selector2   	紧邻在后面的兄弟元素
selector1~selector	后面所有兄弟元素

20.3 属性选择器

selector[attr]  	包含指定的属性
selector[attr=value]  	指定属性的值
selector[attr^=value]  	属性值以value开头
selector[attr$=value]  	属性值以value结束
selector[attr*=value]  	属性值包含value
selector[][][]          多个属性选择器
 
属性选择器优先级 同 class

20.4 伪类选择器

/*语法*/
selector:伪类 {
   
}

:link	  未访问的超链接
:visited  访问过的超链接
:hover    鼠标悬停 任意元素
:actived  激活状态的超链接
 
:focus    获得焦点时
 
:first-child
:last-child
:nth-child()  	指定数字，也可以指定关键字"odd", "even"
:nth-last-child
:only-child
 
:fist-of-type
:last-of-type
:nth-of-type()	指定数字，也可以指定关键字"odd", "even"
:nth-last-of-type()
:only-of-type()

20.5 伪元素选择器

::first-letter   第一个字
::first-line     第一行
::before         最前面插入一个子元素
::after          最后面追加一个子元素

21、CSS3 基础

21.1 浏览器私有前缀

-weibkit-*    chrome/safari
-moz-*       firefox
-ms-*         ie
-o-*         opera

21.2 CSS3 新增的颜色

background:rgba(r,g,b,不透明度)  不透明度：0~1 小数， 数越大，越不透明

21.3 CSS3新增长度单位

px
em		默认字体大小的倍数
rem		根元素字体大小的倍数
vw      窗口宽度分成100份  50vw
vh      窗口高度分成100份

21.4 CSS3新增属性

# 重新设置 盒子模型的规则
box-sizing: content-box(默认) / border-box （width/height盒子的宽高）
 
# 外轮廓  在border的外面 不算盒子
outline:
outline-style
outline-color
outline-width
 
# 不透明度
opacity 0~1 小数

21.5 设置圆角

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

22、CSS3 选择器

22.1 层级

空格
>
+ .item+li
~ .item~p

22.2 属性选择器

[attr]
[attr=value]
[attr^=value]
[attr$=value]
[attr*=value]
[][][]

22.3 伪类选择器

:link
:visited
:hover
:active
:focus
:first-child .list li:first-child
:last-child
:nth-child() 从1开始 odd even
:nth-last-child() 从1开始
:only-child li:only-child
:first-of-type
:last-of-type
nth-of-type()
nth-last-of-type()
only-of-type

<ul>
	<li></li>
	<li></li>
	<p></p>
	<li>li:nth-of-type(3) </li>
	<li></li>
	<li></li>
</ul>
 
li:nth-of-type(3)   #选择到
li:nth-child(3)   #没有满足条件的元素

22.4 伪元素选择器

::before .item::before
::after .clearfix::after {content:''; display:block; clear:both}

<div class="nav clearfix">
	子元素浮动
	[::after 此处是伪元素创建的]
</div>
 
<div class="banner">
</div>

::first-letter
::first-line
::selection
::placeholder ::placeholder {color:red} <input placeholder="请输入用户名">

23、CSS3 基础

23.1 新增颜色单位

rgba() 不透明0~1

23.2 新增长度单位

24、新增的CSS3属性

24.1 边框圆角

border-radius 长度单位
border-top-left-radius
border-top-righ-radius
border-bottom-left-radius
border-bottom-right-radius

24.2 布局

display: 值很多很多 .... table table-row...
box-sizing: content-box（默认值） / border-box

24.3 外轮廓

outline:1px solid #ccc
outline-style
outline-color
outline-width

24.4 不透明度

opacity: 0~1

24.5 阴影

box-shadow:水平偏移 垂直偏移;   偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;

24.5 背景

background-size: cover / contain / 400px 300px / 100% 100%
background: color image postion/size repeat attachment

24.6 CSS3变换

transform
- translatex()
- translatey()
- translate(x, y) 翻转
- rotate() 旋转角度 deg
- skewx() 歪斜角度deg
- skewy()
- skew(x, y)
transform-origin 变换的原点。对translate没有意义。对rotate影响大

24.7 过渡效果

哪些CSS属性可以过渡

长度 (padding margin width height  left/top/right/bottom border-width  background-position ...)
颜色
变换
纯数字 (opacity、z-index)

触发过渡

伪类触发  :hover  :focus  ....
媒体查询   @media
JS

相关属性

transition-property  指定要过渡的属性 用,隔开。默认是 all
transition-duration  过渡持续时间
transition-timing-function  过渡线性效果  默认 ease
transition-delay   过渡延迟
transition：property timing-function duration delay

24.8 CSS3动画

关键帧

@keyframes 动画名字 {
    0% {
        
    }
    20% {
        
    }
    40% {
        
    }
    100% {
        
    }
}

HTML及CSS学习笔记的更多相关文章

CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码显示"%u ...
HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
CSS学习笔记：溢出文本省略（text-overflow）
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

随机推荐

好坑吖，几乎GG，关于Nginx和supervisor的配置
从没想过部署个站点居然这么费劲.这还是搞了好多回且环境都具备的前提一下. 不过问题还是挺刁钻的,下面详细说一下. 1.net core编译少dll文件问题发布到服务器上执行dotnet FileSe ...
关于gitee代码上传下载
1.在gitee上面创建新分支: 2.复制本地ssh秘钥(C:\Users\Administrator\.ssh) 添加到 gitee设置页面的ssh:(如果之前没有秘钥,就执行ssh-keygen ...
EntityManagerFactory 是多线程的将其变成一个单线程(使用静态方法)提交效率
由于EntityManagerFactory 是一个线程安全的对象(即多个线程访问同一个EntityManagerFactory 对象不会有线程安全问题),并且EntityManagerFactory ...
git 学习(1) ----- git 本地仓库操作
最近在项目中使用git了,在实战中才知道,以前学习的git 知识只是皮毛,需要重新系统的学一下,读了一本叫 Learn Git in a Month of Lunches 的书籍,这本书通俗易懂,使 ...
虚拟机iso整理
供个人备用,随缘补充 ubuntu-16.04.6-desktop-amd64.iso 资源: https://pan.baidu.com/s/1ZR_5jgzNsGeOrkE6hAqxEA 提取码: ...
Android 入门（1）使用第三方控件
最近公司需要,准备开发扫描枪. 话不多说,直接开始创建新项目 1 如果遇到 Error:Execution failed for task ':app:preDebugAndroidTestBuil ...
Linux内核参数
vm.overcommit_memory 0 - 表示内核将检查是否有足够的可用内存供应用进程使用:如果有足够的可用内存,内存申请允许:否则,内存申请失败,并把错误返回给应用进程. 1 - 表示内核允 ...
[FJOI2016]建筑师
题目描述小 Z 是一个很有名的建筑师,有一天他接到了一个很奇怪的任务:在数轴上建 n 个建筑,每个建筑的高度是 1 到 n 之间的一个整数. 小 Z 有很严重的强迫症,他不喜欢有两个建筑的高度相同. ...
「LibreOJ NOI Round #1」验题
麻烦的动态DP写了2天简化题意:给树,求比给定独立集字典序大k的独立集是哪一个主要思路: k排名都是类似二分的按位确定过程. 字典序比较本质是LCP下一位,故枚举LCP,看多出来了多少个独立集,然 ...
前端ajax请求百度地图api
$.ajax({ type: "get", url: 'http://api.map.baidu.com/place/v2/search', data:{ ak:'您的ak', q ...

HTML及CSS学习笔记