推荐博客：付铭

day-01

HTML

1、HTML 基本语法

html标签

  • 单标签 <img /> 、<img>

  • 双标签 <html> </html>

属性 属于标签

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

1.1 语法规范

  • 标签嵌套 用缩进

  • 标签名 不区分大小写 建议小写

  • 属性名 不区分大小写 建议小写

注释

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

1.2 常用HTML实体

  • &nbsp; 空格

  • &lt; <

  • &gt; >

  • &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  默认大小的倍数百分比   默认大小参照cmmmpt

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.../nonelist-style-position: outside/insidelist-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">placeholdermaxlengthvalue
  • 密码框
<input name="" type="password">placeholdermaxlengthvalue
  • 单选按钮
<input type="radio" name="" value="" checked>
  • 复选框
<input type="checkbox" name="" value="" checked>
  • 文件选择
<input type="file" name="">multiple 多个
  • 规定类型的文本输入框 (H5)
input:emailinput:urlinput:number   max/min/stepinput:searchinput: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:buttonbutton: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:  lefttoprightbottomz-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: 0;padding: 0;
}
fieldset, img {border:0;
}
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:0;
}
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 新增长度单位

  • rem

  • vw

  • vh

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% {

   }}

相关CSS属性

animation-name  指定动画的名字animation-duration  动画的执行时间animation-timing-function 执行效果速度  animation-delay   延迟animation-iteration-count   循环 次数  infinite(无限)animation-direction:  alternate （正向 反向 交替）\ reverse（反向）animation-play-state: running / pausedanimation 复合属性

转载于:https://www.cnblogs.com/rongge95500/p/9762654.html

HTML及CSS学习笔记相关推荐

  1. CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法

    CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...

  2. 前端篇--------1.css学习笔记

    1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap     overflow:hidden     text-overflow:ellipsis 2.css m ...

  3. HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】

    w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

  4. HTML/CSS学习笔记02【表单标签】

    w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

  5. HTML/CSS学习笔记01【概念介绍、基本标签】

    w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

  6. CSS学习笔记 display属性

    CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...

  7. CSS学习笔记-04 a标签-导航练习

    个人练习,各位大神勿笑  .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...

  8. div+css学习笔记一（转）

    div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...

  9. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  10. CSS 学习笔记 - 盒模型

    CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...

最新文章

  1. http、TCP/IP协议与socket之间的区别
  2. BurpSuite pro v2.0.11版
  3. 升级Springboot版本异常：HateoasConfiguration required a single bean, but 3 were found
  4. [LeetCode] Flatten Binary Tree to Linked List
  5. Centos Flex 2.6.4
  6. python正则表达式处理txt_Python文本处理服务（re正则表达式例子）
  7. mongodb php update,MongoDB文档的更新(php代码实例）
  8. 工作要求，写了一些没用的设计文档
  9. 单片机：DS1302时钟
  10. 于仕琪libfacedetection WIN10 VS2015
  11. python操作crontab定时任务
  12. WPF基本控件的简介(二)
  13. 深入理解Flash Player的安全域（Security Domains）
  14. SAP PS 第15节 预算管理
  15. Ubuntu下使用FreeRadius实现Wifi认证
  16. 教师职称论文发表在哪些杂志有效
  17. 倍福PLC的C++ ADS通讯定义数据类型时注意事项
  18. 交流充电桩电路图_详细剖析交流充电桩上电源和RS485隔离原理
  19. 基于华为云设计的智能家居控制系统(STM32+ESP8266)
  20. python只会基础能做什么？---你可以做一个文字游戏！

热门文章

  1. 数据类型及其字符串方法
  2. rowspan 动态变化_php – 从数据库中获取记录时的动态rowspan
  3. sku设计mysql_商品SKU功能设计与优化
  4. UVa1585 - Score
  5. android sensors 总结(一)
  6. 基于vue实现钉钉审批流程(仿)
  7. 图像处理——HSV图像应用（matlab）
  8. PS软件打开闪退是什么原因？怎么处理闪退的问题？
  9. 《东邪西毒》里的经典台词
  10. [IOS APP]【现代流行唱法】零基础入门学唱歌