web开发-html5+css3学习笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_35302661/article/details/79270374

  一．HTML(超文本标记语言) 

  包含头部（head）和主体（body）两大部分 

  head主要给浏览器和搜索引擎看 

  body给用户看的 

  二．DOCTYPE 文档类申明，一般写在文档的第一行 

  DOCTYPE主要分为html5和html4 

  Html5: <! DOCTYPE HTML> 

  组元素可以将页面切分为不同的部分 

  br标签 换行符基本结构 

  <! doctype html> 

  <html> 

  <head> 

  <meta charset=”utf-8”> 

  <title></title> 

  </head> 

  <body></body> 

  </html> 

  三．基本标签 

  Body bgcolor 背景颜色 background背景色 

  <body bgcolor=”red” background=”img.jpg”></body> 

  H1-h6 标题 align的属性值 left center rght 

  p标签空格和换行会被浏览器忽略，可以加<br/> 

  span标签 一般放一些小的文本，或者结合图片做一些效果 

  div标签 一般用于布局，一 

  hr标签 水平分割线 width=”50%” size=” 200” align="center" 

  <!--注释--> 

  四.格式标签 

  address 文档的联系信息，地址，斜体显示 

  B标签 粗体效果 

  del标签 删除效果 

  em标签 强调效果 斜体显示 

  i标签 斜体显示 

  pre标签 会保留空格和回车 

  small 小一号 

  big标签 大一号 

  strong标签 强调 显示为粗体 strong>em 

  u标签 下划线 

  sup标签 上标 

  sub标签 下标 

  img图像标签 alt="无法显示时的提示" 

  title="鼠标滑过时显示的文字" 

  arc="图片的路径" 

  width="100" 

  height="100" 单位不写默认px 

  border 边框 

  align和h标签不同，需要有文本作为参考 

  a href="" 没有href无法跳转到链接页面 

  href="#"，则指向页面顶部 

  target属性定义了链接以...方式打开 target="_blank"在新的页面打开 

  五.列表 

  有序 无序 定义 

  ol标签表示有序列表 

  <ol type="a"> 

  <li></li> 

  <li></li> 

  </ol> 

  ul定义无序列表 

  <ul> 

  <li></li> 

  <li></li> 

  <li></li> 

  </ul> 

  dl定义列表 

  <dl> （一个dt对应多个dd） 

  <dt></dt> 

  <dd></dd> 

  <dd></dd> 

  <dd></dd> 

  </dl> 

  六.块元素和行元素 

  常见块元素标签：p,div,ul,ol,dl,address, h1,h2,h3,h4,h5,h6,pre 

  常见行元素标签：a,b,em,strong，sub,sup,span,img(虽然是行内元素但是可以设置宽和高) 

  区别：1.块元素独占一行，行元素一行内可占多个 

  2.块元素可以设置宽和高，块元素的宽和高以浏览器为准，行元素不可以设置，以文本的大小为准 

  七.表格标签 

  <table border="2"> 

  <tr ><th colspan="4">表头，粗体显示</th></tr> 

  <tr> 

  <td>1</td> 

  <td>1</td> 

  <td>1</td> 

  <td>1</td> 

  </tr> 

  </table> 

  display: block 块 

  display: inline 行 

  八.实体字符 

  大于：&gt； 

  小于：&lt; 

  引号：&quot; 

  版权：&copy; 

  商标：&reg; 

  >>: &raquo; 

  <<: &laquo; 

  空格：&nbsp;(确定空格数量) 

  实体字符对照表：http://tool.xker.com/htmlchar.php 

  结构： html 样式:css 行为: Javascript 相分离 

  九.元素集 

  <fieldset>元素集可以将表单内的相关元素分组，通常和<legend>标签一起用，<legend>标签提示了fieldset的信息，fieldset是块级元素 

  <fieldset> 

  <legend>健康检测</legend> 

  身高：<input type="text"> 

  <br> 

  体重：<input type="text"> 

  </fieldset> 

  十.下拉列表 

  <select name="" id="" > 

  <optgroup label="江苏"> 

  <option value="1">常州</option> 

  <option value="2" selected>淮安</option> 

  <option value="3" disabled>南京</option> 

  </optgroup> 

  <optgroup label="浙江"> 

  <option value="4">诸暨</option> 

  <option value="5">义乌</option> 

  </optgroup> 

  </select> 

  <--!-->optgroup分组标签 

  十一.表单 

  通过<form>标签定义 

  属性 

  action 执行一个url 

  name 表单的名字 

  method 提交方式 get/post 默认的get方式，但是post方式更好，可容纳的更多，更安全。 

  enctype enctype="multipart/form-data" 以二进制方式进行传输 

  一个完整的表单包含了哪些元素？ 

  form标签+表单域（表单元素）+提交按钮 

  表单元素 

  <input type="text"> 单行文本框，默认的不写type类型，是text类型 

  <input type="password">密码框 

  <input type="radio"> 单选按妞 

  <input type="chechbox"> 复选框 

  单选和复选，名字相同即为一组 

  默认的checked="checked" 

  <label>提升用户体验 

  <label for="myId">男</label> 

  <input type="radio" id="myId"> 

  <input type="file"> 

  指定方式必须为post 

  要添加enctype="multipart/form-data" 

  button 只是一个普通的按钮，需要结合js 

  submit 提交按钮 

  image 提交按钮 有可能提交两次，不推荐 

  reset 重置按钮 

  <fieldset> 

  <legend>标题</legend> 

  <input type="text"> 

  </fieldset> 

  <select> 

  <optgroup> 

  <option value="0">北京</option> 

  <option value="1" select="selected">南京</option> 

  <option value="2" disabled="disabled">东京</option> 

  </optgroup> 

  </select> 

  <textarea></textarea>多行文本框，中间不加空格回车 

  placeholder 默认提示 

  require 必填 

  readonly 只读 

  disable 不可选择 

  <input type="hidden" name="myhidden" value="testest">隐藏域不会显示给客户，提交给后台 

  HTML5新的input类型 

  <tr> 

  <td>请输入网址</td> 

  <td><input type="url"></td> 

  </tr> 

  <tr> 

  <td>请输入数字：</td> 

  <td><input type="number" max="5"></td> 

  </tr> 

  <tr> 

  <td>拖动改变范围</td> 

  <td> 

  <input type="range" max="200" min="1" value="3"> 

  </td> 

  </tr> 

  <tr> 

  <td>请选日期</td> 

  <td><input type="date"></td> 

  </tr> 

  <tr> 

  <td>关键字</td> 

  <td><input type="search"></td> 

  </tr> 

  <tr> 

  <td>请选择颜色 </td> 

  <td><input type="color"> </td> 

  </tr> 

  二十二集. 

Div

  class定义类名，引用的时候使用。一个页面可以出现多词 

  id名，一个页面唯一 

  常见的Html5新增语义化标签 

  header 页面头部，一个页面可以有多个 

  footer 页脚 

  article 定义页面独立的内容，一般为文章 

  aside 侧边栏 不会对页面的元素有修改 只是更有语义 

  summary 是details的标题 

  time 定义日期或者时间 

  mark 标记 两个子元素 rt音标 rp标签不显示 

  ruby 注释 

  nav导航链接 

  progress 进度 value当前值 max 

  section 文档中的章节或者节 

  video 视频 

  audio 音频 

  source 资源 

  detalist 提示可能的值 

  <input type="text" list="car"> 

  <datalist id="car"> 

  <option value="123"></option> 

  <option value="niuche"></option> 

  <option value="baoma"></option> 

  </datalist> 

  embed 引入flash或者插件 

  <embed src="" type="application/x-shockwave-flash 

  "></embed> 

  两个标签之间不要加任何文字会显示出来 

  canvas 画布标签 

  初始大小是300px*150px 

  CSS样式表 

  ID>CLASS>元素>通配符 

  通配符即对整个页面有效 

  基础选择器 

  * 通配符对整个页面有效 

  #id id选择器，匹配特定ID 

  .Class 类选择器，匹配class包含特定的元素 

  element 标签选择器 

  一些常见的样式 

  color：red； 字体颜色 

  font-family：arial; 字体样式 

  text-align:center; 字体居中，可以选择left,right 

  background-color:red; 背景色 

  border：1px solid green;为元素添加边框，设置1像素宽度，实线，绿色 

  CSS样式表 

  结构： 

  选择器{声明1；声明2；声明3} 

  #id名 

  .class 

  标签名 

  通配符 

  ID>CLASS>元素 

  引入方式 

  行内样式表 style"" 

  内部样式表<style></style> 

  外部样式表<link rel="stylesheet"> 

  导入方式@url"test.css" 

  背景相关样式 

  1.background-color: #194127;背景颜色 

  2.background-image: url("");背景图片 

  3.background-repeat: no-repeat;背景图片是否对齐 

  4.background-size: autos背景图片大小 

  5.background-attachment:fixed;背景图片是否固定 

  6.background-position;背景图片相对于外部容器的相对位置 

  颜色相关 

  1.color 

  2.opacity 元素的透明度 

  字体相关 

  1.font-style: normal;指定文本的文本样式（正常，斜体） 

  2.font-weight 指定文本的粗细 

  600以下正常，600以上包含600是加粗显示 

  3.font-size 指定文本的大小 

  4.font-family; 指定文本的字体 

  p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}；将一段文字有省略号 

  text-decoration: underline; 下划线 

  text-decoration:overline; 上划线 

  text-decoration: line-through; 文字的贯穿线，类似于删除标签； 

  text-decoration: none;去除文本的 

  #ul1{list-style: none}； 

  去掉列表里的项目符号 

  list-style:none; 

  实例：使用背景图的方式设置项目图片更加灵活，兼容性更好 

  ul li{text-indent: 30px;background:url("ima/UC截图20171226113320.png") no-repeat; } 

  table{border:0px solid darkred;border-collapse: collapse; 

  27集 

  CSS选择器 

  基础选择器，关系选择器，属性选择器，伪类选择器，伪对象选择器。 

  关系选择器有如下几种： 

  1.包含选择器（E F）如ul li{color red}; 

  2.子选择器 (E>F） 只对子元素有影响，对下一层无影响 

  3.相邻选择器：(E+F） 紧贴在E元素的F元素为第一个兄弟元素。 

  兄弟选择器(E~F） 作用于E元素之后的所有元素：对他后面的元素起作用 

  属性选择器 

  E[att] 选择具有att属性的E元素 option[disabled]{} 

  E[att="val"] 选择具有att=val属性的E元素 

  E[att~="val"] 选择具有att=val属性,只要有val就会被选中 p[class~="p"] 

  E[att^="val"] 选择具有att属性,且以"val"开头的E元素 p[class^="p"] 

  E[att$="val"] 选择具有att属性,且以"val"结尾的E元素 p[class$="p"] 

  E[att*="val"] 选择具有att属性,且包含"val"的E元素 a[herf*="jd"] 

  28集 

  CSS伪类选择器 

  E:link 设置链接a在未被访问前的样式（特指a标签） 

  a:link{color:red} 与<a color:red>不用 

  E:visited 设置链接a在被访问后的样式（特指a标签） 

  a:visited{color:green;} 

  E:hover 设置鼠标悬停效果。不限标签 

  a:hover{background-color:blue;color:red} 

  E:active 设置元素在鼠标按下时的样式。不限于a标签 

  ul li:active{color: #194127;} 

  E：not(s) 匹配不含有s选择器的元素E 

  E：first-child 父类元素的第一个子元素 

  E：last-child 父类元素的最后一个子元素 

  E: only-child 父类元素只有一个子元素时才会生效 

  29集 

  伪类更多的是定义元素的状态，伪元素更多的是改变文档的结构。 

  常用伪元素 

  1.E:before/E::before 

  2.E:after/E::after 

  30集 

  CSS浮动（float） 

  浮动值： 

  left:向左浮动 

  right:向右浮动 

  33集（京东实例）： 

  *{margin:0px;padding:0px} 清楚格式 

  background:rgba(0,0,0,.3); 背景颜色+透明 

  34集（z-index） 

  relative,absulute,fixed可以使用z-index,static不可以使用 

  opacity:0。透明 

  display常见属性值： 

  1.none：隐藏对象，完全消失于文档流。 

  2.inline：指定对象为内联元素。 

  3.block： 指定对象为块元素 

  4.inline-block：指定对象为内联块元素（行内块元素） 

  5.table-cell：指定对象作为表格单元格 

  div{display: table-cell;vertical-align: middle;}指定为单元格，居中，避免改变行高的麻烦（line-height） 

  CSS选择器优先级 

  style=1000 

  id=100 

  class=10 

  element=1 

  ID>CLASS>* 

  important>内联>id>类>标签|伪类|属性选择器>伪元素>继承>通配符 

  35集-盒子模型 

  盒子模型主要定义了四个区域： 

  内容（content） 

  内边距（padding） 

  边框（border） 

  外边距（margin）。 

 
 < 
 h2 
 > 
 这是一个盒子模型 
 </ 
 h2 
 > 

 
 h2 
 { 
 width 
 :  
 300 
 px 
 ; 
 height 
 : 
 40 
 px 
 ; 
 padding 
 :  
 30 
 px 
 ; 
 margin 
 :  
 30 
 px 
 ; 
 border 
 :  
 solid  
 2 
 px cornflowerblue 
 } 

  更标准的盒子模型 

  书写内边距和外边距的规范（TRBL永远是这个规范） 

  如果有四个参数，上右下左（TRBL） 

  如果有三个参数，表示缺少的是左，与右（第二个相等） 

  如果有两个参数，表示缺少的是下左。与上右相等。（第一个是上下，第二个是左右。） 

  如果只有一个参数，表示上右下左为统一参数 

  背景会占据padding。 

  给行内元素加顶部和底部的内边距是不起作用的。加display:block 

  只对块元素起作用。 

  37集 

  border边框 

  border属性设置一个元素的边框 

  border：1px solid red; 

  边框可以设置的样式： 

  点状dotted 

  实线solid 

  双线double 

  虚线dashed 

  无边框none 

  常见灰色：#818181/#ddd 

38集
块元素垂直相邻外边距会合并，以数值大的为准
行内元素实际上不占用上下边距。行内元素的左右外边距不合并
浮动元素的外边距也不会合并
允许指定负的外边距值，使用时要小心

  四十集 

  outline: none避免搜索框变色 

  四十二集 

  伸缩盒模型最老版本 display:box 

  伸缩盒过渡版本 display:flexbox; 

  伸缩盒最新版本：display：flex; 

  根据浏览器内核的不同，css的前缀也会有不同 

Gecko内核前缀为-moz- 火狐浏览器
Webkit内核前缀为-webkit-，也叫谷歌内核，360浏览器，世界之窗，猎豹
Trident内核前缀为-ms- 也叫IE内核
Presto内核 -o- 目前只有Opera使用

  三种清除浮动的方式 

  使用伪元素进行清除 

 
 . 
 clear 
 :: 
 after 
 { 
 content 
 :  
 "" 
 ; 
 display 
 :  
 block 
 ; 
 clear 
 :  
 both 
 } 

  使用overflow:hidden进行清除 

  使用空div 

 
 . 
 clear 
 { 
 clear 
 :  
 both 
 } 

  css中的继承 

  能继承的常用属性 

  color, 

  cursor,(鼠标变成手的形状) 

  font-family,font-size,font-style,font-weight,font, 

  letter-spacing（字间距）,line-height,list-style,text-align,text-indent 

  44.CSS3圆角，阴影，字体 

  border-radius:10px 10px 5px 0px; 

  box-shadow:10px 10px 20px black(水平 垂直 模糊 颜色) 

  text-shadow: 

  文本效果 

  字体下载：字体大宝库 

45.

  transition 过渡。 

  允许CSS的属性值在一定时间内平滑地过渡 

  transition：属性名 时间 速度曲线(等待) 何时开始 

  transition：width 2s ease-in 2s; 

48.

  Transform 2D最常用到的函数是rotate() 

  transform:rotate(30deg) 通过rotate方法，元素顺时针旋转给定的角度。允许赋值，元素将逆时针旋转。deg为度数。配合transition:2s;一起使用 

  Transform3D常用的函数有：rotateX()、rotateY()、translate3d() 

  rotateX()、元素绕其X轴以给定的度数进行翻转 

  rotateY()、元素绕其Y轴以给定的度数进行翻转 

  translate3d(x,y,z)此函数用来规定指定元素在三维空间中的位移 

  overflow：hidden 

49.

  动画Animation 

  keyframs定义动画 

  animation引用动画 

  百分比对应着时间段，可以定义多段 

  或者from{} 

  to{} 

  animation:3s linear infinite CDturn (一次的时间 匀速 无限循环 动画名称 ) 

  特殊图形 

  三角形 

  通过Border定义，宽度和高度设置为0，另外两面的颜色要设置为透明 

  梯形 

  通过border定义，要设置宽度 

  圆形 

  宽度高度一致，border-radius设置为一半。 

  56切图 

  .wzgg .phone{float:right;} 

  .wzgg p:not(.phone){float:left} 

  浮动说明：class=.phone浮动向右。p标签下除了.phone以外的元素向左浮动。 

  background：linear-gradient(to bottom:#fefefe,#dedeef,#gwdcef) 线性渐变 

  background：radial-gradient() 

  overflow-y scroll;添加y轴滚动条 

  58集 

  box-sizing属性 

  两个值 

  content-box（标准盒模型） 

  padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型* 

  border-box（怪异盒模型） 

  padding和border被包含在定义的width和height内，元素实际大小定义了多宽就是多宽，此为怪异盒模型下的盒模型。 

  column-count分几列 

  column-gap 列间距 

  column-rule 列分割线样式 

  resize:both; 

  oerflow:auto; 

  一起配合使用 

  Javascript 

  substring()方法回忽略负数，直接作0来处理，而slice（）方法用字符串长度加上负数计算 

  var msg="happy"; //字符串长度为5 

  var result1 = msg.substring(1,-1); //返回h 

  var result2 = msg.slice(1,-1); //返回app (1,4) 包括前面的数字，但是不包括后面的数字 

  八进制以0开头，十六进制以0x开头 

  isNaN(),当检测的数据无法正确转换成Number类型时返回值为真(ture)，其他类型返回为假（false） 

  var x1 = "red" 

  var result1 = isNaN(x1); //返回值为真； 

  var x2 = “999” 

  var result2 = isNaN(x2); //返回值为假 

59

  meta标签的常见属性 

  http-equiv属性 

 
 < 
 meta  
 http-equiv= 
 "refresh"  
 content= 
 "3;url=http://www.baidu.com" 
 > 

  网页跳转 

  如果只写写时间，不写url，则只刷新本页面。 

  name属性 

  提供了名值对中的名称 

  name的常见值有 

  author 定义了该页面的作者 加content=“” 

  keywords 定义了html的文档关键字，加content=“” 

  description，用于描述文档 加content=“” 

 
 @media  
 screen  
 and  
 ( 
 max-width 
 :  
 1900 
 px 
 ){ 

 
  
 body 
 { 
 background 
 :  
 red 
 } 

}

  60，61媒体查询实例 

62

  字体图标 

 
 http://www.iconfont.cn/ 

  引用顺序：demo中寻找字符，样式表在上，class在下。顺序引用，谁在下面引用谁的。 

63

  雪碧图 

  {background-position：} 

  通过整合图片，减少对服务器的请求数量，从而加快页面的加载速度 

  Sprite 

  可以减少网页的请求，提高性能。 

  减少文件大小 

  解决命名的困扰，只需要对一张图片命名。 

  cssSprite.exe 

  display 

  表格没有ul加载的快 

  bootstrap 

68

  Bootstrap 

  实现内联子标题 加small标签或者加.small 

  引导主题副本（文章摘要）加.lead 

  对齐 .text-left (左);.text-center(中);text-right(右) 

  .text-muted 文字以浅灰色显示 

  .text-warning 警告 橙灰色 

  .text-danger 错误提示 红色 

  .text-info 这只是信息 浅蓝色 

  .text-success 强调正确的信息 浅绿色 

  表格 

  .table基础样式，padding 水平线 

  .table-striped 斑马线 

  .table-border 边框 

  .table-hover 鼠标滑过样式 

  .table-condensed 紧凑型表格 

  label标签 

  .active 激活效果 

 
 < 
 img  
 src= 
 "src/mmexport1513617045789.jpg"  
 alt= 
 ""  
 class= 
 "img-circle" 
 > 图片圆形 

 
 < 
 img  
 src= 
 "src/u=846525141,527426527&fm=200&gp=0.jpg"  
 alt= 
 ""  
 class= 
 "img-thumbnail" 
 >图片双线 

 
 < 
 img  
 src= 
 "src/u=1124696423,760344165&fm=200&gp=0.jpg"  
 alt= 
 ""  
 class= 
 "img-rounded" 
 >图片圆角 

70

  button+ul模拟下拉菜单 

 
  
 < 
 div  
 class= 
 "dropdown" 
 > 

 
  
 < 
 button  
 type= 
 "button"  
 class= 
 "btn btn-default dropdown-toggle"  
 data-toggle= 
 "dropdown" 
 > 
 ai 
 就 
 call 
 我 

 
  
 < 
 span  
 class= 
 "caret" 
 ></ 
 span 
 > 

 
  
 </ 
 button 
 > 

 
  
 < 
 ul  
 class= 
 "dropdown-menu" 
 > 

 
  
 < 
 li 
 >< 
 a  
 href= 
 "" 
 > 
 123 
 </ 
 a 
 ></ 
 li 
 > 

 
  
 < 
 li 
 >< 
 a  
 href= 
 "" 
 > 
 123123 
 </ 
 a 
 ></ 
 li 
 > 

 
  
 < 
 li 
 >< 
 a  
 href= 
 "" 
 > 
 123123 
 </ 
 a 
 ></ 
 li 
 > 

 
  
 < 
 li 
 >< 
 a  
 href= 
 "" 
 > 
 123112sd 
 </ 
 a 
 ></ 
 li 
 > 

 
  
 < 
 li 
 >< 
 a  
 href= 
 "" 
 > 
 121dasd 
 </ 
 a 
 ></ 
 li 
 > 

 
  
 </ 
 ul 
 > 

 
  
 </ 
 div 
 > 

  最外面添加.dropdown 

  button按钮添加. dropdown-toggle data-toggle="dropdown"(不是类) 

  ul添加.dropdown-menu 

  li可以加.divider添加下划线 

  nav导航栏 

  a标签实现下拉菜单 

  ul定义分页 

  面包屑导航（路径导航） 

  徽章，提示信息 

  缩略图 

  列表组 

  选项卡 