web前端html的学习内容

这里是本人自己学习HTML过程中记下的笔记，也算比较全面，给学前端初期的小伙伴们推荐一下 尚硅谷 的学习视频，希望对你们有帮助。

web前端html

实体:
&实体的名字；
大于 &gt；
小于 &lt；
空格 &nbsp；
版权 &copy；

图片的标签:
src=“图片的路径” alt=“图片的描述”，alt必须写，网页才可以检录，在没显示图片的情况下，可以显示alt的描述；

相对路径: 返回上一级目录 / 返回几级目录 就写几个…/

图片的格式 jpg png gif

meta标签：（1）设置网页的关键字

（2）设置网页的描述
（3）请求重定向

xhtml语法规范：
大小写都可以，一般情况下，都是用小写
属性的值，必须用引号，单引号双引号都可以
自结束标签，换行
或

内联框架

超链接：
使用超链接可以从一个页面跳转到另一个页面，使用a标签来创建超链接
href：指向链接跳转目标地址，可以是相对路径也可以是完整地址
a标签中的·target属性可以用来指定打开链接的位置，_self,表示在当前窗口打开，_blank,表示在新的窗口打开，可以设置内联框架的name属性值，链接将会在
指定的内联框架中打开
我是一个超链接

我是一个超链接

我是一个超链接
链接会打开内联框架

下划线

---

如果不知道链接地址，可以设置为 我是一个超链接 id属性，在同一页面中只能有一个， 回到顶部 去底部 发送电子邮件的超链接，点击链接后可以自动打开默认的邮件客户端，href="mailto:邮件地址" 联系我们 位于中心位置标签

内部样式表：

或者可以使用外部样式表：使用link标签

html的注释 <！-- --！>
css的注释 /* */

css语法：
选择器 声明块 声明块中包含许多声明，名与值相互配对，中间用：隔开，声明块之间用；隔开。

块元素： div对页面布局 p表示段落 h1 h2 h3都表示标题 会独占一行

内联元素（行内元素）：a超链接 img引入图片 iframe内联框架 span专门选用文字，为文字设置样式 只占自身大小元素，不会占用一行

块元素中不能包含块元素，一般是块元素包含内联元素，a元素可以包含任何元素，出了他本身，p元素中不能包含任何元素。

id选择器，可以选中唯一的元素，语法 #id的属性值{}
class选择器，选中一组选择器，语法 .ckass的属性值{}
选择器分组(并集选择器)，选择多个选择器对应的元素， 语法 选择器1，选择器2， 选择器3{}
统配选择器， *{} ，选中所有元素
复合选择器（交集选择器）， 可以选中同时满足多个选择器的元素， 语法 选择器1选择器2选择器N{}
后代元素选择器，选中指定元素的指定后代元素，语法 祖先元素 >后代元素> 后代元素{}
子元素选择器，选中指定父元素的指定子元素， 语法 父元素 > 子元素
伪类选择器，为处在特殊状态得元素设置样式，1：为没访问过的链接:link 2：访问过的链接:visited,涉及隐私，只能设置文字样式 3: :hover表示鼠标移入状态 4：:active表示链接被点击状态
:hover和 :active 也可以为其他元素设置，其他只对超链接使用

input 输入文本框 :focus获取焦点 文本框获取焦点后，修改样式 input:focus{}
为p标签中选中的内容使用样式，可以使用::selection 在火狐中编写方式::-moz-selection

使用伪元素来表示元素中一些特殊的位置，1:为p中第一个字符设置特殊样式，背景 p:first-letter 2:为p中的第一行设置一个背景，文字样式 3: p:before表示元素最前边的部分，一般before都需要结合content样式一起使用，content
可以向before 或 after 的位置添加一些内容， :after表示元素的最后边的部分。

属性选择器：
[属性名] 选取含有指定属性的元素
[属性名=“属性值”] 选取含有指定属性值的元素
[属性名^=“属性值”] 选取含有指定内容开始的元素
[属性名$=“属性值”] 选取含有指定内容结尾的元素
[属性名*=“属性值”] 选取属性值以包含指定内容的元素

子元素选择器：
:first-child 可以选择第一个子元素
:last-child 可以选择最后一个子元素
:nth-child（） 可以选择任意元素，后边指定参数，even 表示偶数位置 odd 表示奇数位置

:first-of-type
:last-of-type
:nth-of-type
和上述类似，只不过child，是所有的子元素中排列，type，是在当前类型中排列。

兄弟元素选择器：
前一个+后一个 紧跟着的后一个兄弟元素
前一个~后面所有的兄弟元素

否定选择器：
：not（）可以从选中的元素中剔除某些元素

优先级的规则：
内联样式(style)，优先级1000
id选择器， 优先级100
类和伪类， 优先级10
元素选择器， 优先级1
通配*， 优先级0
继承的样式， 没有优先级
当选择器包含多种选择器时，将多种选择器的优先级相加后比较，优先级计算不会超过他的最大数量级，如果选择器优先级相同，则选择靠后的样式
并集选择器的优先级是单独计算 div, p, #p1, .hello{}
在样式的最后，加！important，则此时样式将会获得最高优先级，高于内联样式。

伪类的顺序：
a:link
a:visited
a:hover
a:active 简称： l v h a love hate

文本标签：
语气的强调，默认使用斜体显示
内容的强调，默认使用粗体显示
内容使用斜体显示
内容使用粗体显示
表示一些细则一类的内容，合同中的小字等
加书名号的内容，不是参考内容
行内引用，浏览器默认加引号

表示常引用，会独占一行 设置上标 设置下标 自动添加删除线 自动添加下划线

预格式标签，保存代码中的格式，一般与 来表示。

无序列表：

中间用

• 来做列表项 ul和li都是块元素， type值可选 disc,默认值，实心圆点；square,实心的方块；circle,空心的圆。 有序列表：
  和无序列表一样，type的值，1，默认值，阿拉伯数字；i/I，采用小写或大写的罗马数字作为序号；a/A,采用小写或大写字母作为序号， ol也是块元素 定义列表：

  dt:被定义的内容

  dd:对被定义的内容的描述

  同时，dl，ul，ol之间都可以相互使用

  长度单位：
  px 像素 像素越小 显示越清晰
  % 百分比
  em 和百分比相似 相对当前元素字体大小 1em=1font-size

  字体的样式一：
  color：字体颜色
  font-size：设置格大小
  font-family：设置文字字体 该样式可设置多个字体，多个字体之间用，隔开 当使用多个字体时，浏览器会优先使用前边的字体，如果前边没有就尝试下一个

  字体分类：
  serif（衬线字体）
  sans-serif（非衬线字体）
  monospace（等宽字体）
  cursive（草书字体）
  fantasy（虚幻字体）

  字体的样式二：
  font-style 可以设置文字的斜体
  可选值：normal，默认值，文字正常显示
  italic，文字以斜体显示
  oblique，文字会以斜体的效果显示 与italic相似，一般只使用italic
  font-weight 可以设置文字的加粗效果
  可选值：normal，默认值，文字正常显示
  bold，定义粗的字体
  font-variant 可以设置小型大写字母
  可选值：normal，默认值，文字正常显示
  small-caps 文本以小型大写字母显示：将所有字母以大写形式显示，但是小写字母的大写要比大写字母的大小要小。
  font 可以设置字体的所有样式 font-size必须写，并且在倒数第二；font-family必须写，必须在倒数第一。

  行高：
  line-height 可接收值：1.直接接收一个大小
  2.可以接收一个百分数，相对字体大小计算行高
  3.一个数值，设置字体大小相应倍数
  行间距=行高-字体大小
  在font中也可以指定行高，在字体大小后添加/行高

  text-transform：可以设置文本的大小
  可选值：none，默认值，正常显示
  capitalize，单词首字母大写，通过空格识别单词
  uppercase，所有字母大写
  lowercase，所有字母小写
  text-decoration：可以设置文本修饰
  可选值：none，默认值，正常显示
  underline，为文本添加下划线
  overline，为文本添加上划线
  line-through，为文本添加删除线
  letter-spacing：可以指定字符之间的距离
  world-spacing：可以设置单词之间的距离
  text-align：设置文本的对齐方式
  可选值：left，默认值，文本靠左对齐
  right，文本靠右对齐
  center，文本居中对齐
  justify，两端对齐，通过调整空格的大小，实现两端对齐
  text-indent：用来设置首行缩进
  当指定一个正值时，会自动向右缩进
  当指定一个负值时，会自动向左缩进，通过这种方式，隐藏一些不想显示的文字
  这个值一般会使用em作为单位
  盒子模型：
  内容区（content）
  内边距（padding）
  边框（border）
  外边距（margin）

  盒子模型边框：
  width：height设置内容区
  border-width：设置边框宽度，4个值，上 右 下 左，顺时针；3个值，上 左右 下；2个值，上下 左右；1个值，所有；border-xxx-width，xxx指的是，top right bottom left
  border-color：设置边框颜色，和宽度一样，border-xxx-color
  border-style：设置边框的样式，与上述一样，可选值：none 默认值，没有边框 solid 实线 dotted 点状 dashed 虚线 double 双线

  border：可以直接设置边框的 样式 颜色 宽度 不能分别设置上下左右

  内边距：
  padding 与border-width 规则一致

  外边距：
  margin 与padding规则一致， 上 左 方向影响自己， 下 右 方向影响其他盒子 还可以设置auto 水平方向的最大位置

  内联元素：支持水平的边距

  display:修改元素类型
  可选值：inline 可以将一个元素作为内联元素显示
  block 可以将一个元素设置块元素显示
  inline-block 将一个元素转换为行内块元素 可以将一个元素既有行内元素的特点又有亏啊元素的特点，即可以设置宽高，又不会独占一行
  none 隐藏元素 既不会显示在页面，也不会占据页面

  visibility：
  可选值：visible，默认值，可显示在页面
  hidden，隐藏元素，不会显示在页面，但会占据页面空间

  overflow：
  子元素默认是存在父元素的内容区，如果子元素大小超出父元素内容区，超出部分会溢出父元素区域，并且在外面显示。
  可选值：visible，默认值，溢出的内容不会被处理，可以看见
  hidden，溢出的内容会被修剪，不会显示
  scroll，为父元素增加滚动条，通过滚动条查看完整内容
  auto，根据需求自动添加滚动条，需要水平或垂直或不加。

  文档流：
  块元素：独占一行，自上而下排列，子元素宽度默认是父元素的100%，块元素在文档流中的高度默认被内容撑开，块元素默认在文档流中垂直排列。
  内联元素：只占自身大小，默认自左向右，一行不足以容纳所有的内联元素，则换下一行，在文档流中，内联元素的宽度和高度都被内容撑开

  浮动一：
  希望块元素在页面中水平排列，可以是块元素脱离文档流，使用float来使块元素脱离文档流。
  float 可选值：none，默认值，元素默认在文档流中排列
  left，元素会立即脱离文档流，向页面的左侧浮动
  right，元素会立即脱离文档流，向页面的右侧浮动
  当为一个元素设置浮动后，（float属性是一个非none的值），元素会立即脱离文档流，它下面的元素会立即向上移动，元素浮动后会尽量向页面左上或右上漂浮，直到遇到父元素的边框或者其他的浮动元素，如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素，浮动的元素不会超过他的上边的兄弟元素，最多一边齐。
  浮动不会盖住文字，文字会自动环绕在浮动元素的周围，可以通过浮动设置文字环绕图片效果。

  解决高度塌陷一：（overflow：auto； zoom：1；）
  隐含属性Block Formatting Context简称BFC，默认值是关闭，当开启BFC以后，1.父元素的垂直外边距不会和子元素重叠 2.开启BFC的元素不会被浮动元素所覆盖 3.开启BFC的元素可以包含浮动的子元素

  如何开启元素的BFC：1.设置元素浮动（使用这种方式，虽然可以撑开父元素，但是会导致父元素的宽度丢失，会导致下边的元素上移，不能解决问题）
  2.设置元素的绝对定位
  3.设置元素为inline-block（可以解决问题，但是宽度会丢失，不推荐使用）
  4.将元素的overflow设置为非visible的值，一般设置为 auto 或 hidden

  兼容IE6及以下浏览器，通过开启haslayout，开启方式很多，直接使用副作用最小的：直接将元素设置为zoom：1; zoom表示放大的意思，后边跟着一个数值，写几就是将元素放大几倍，zoom：1；表示不放大元素，但是通过该样式可以开启haslayout
  在IE6中，如果为元素指定一个宽度，则会默认开启haslayout

  去除项目符号：list-style：none；

  解决高度塌陷二：1.可以在高度塌陷的元素的最后，添加一个空白div，然后对其进行清除浮动 clear：（left right both）清除左 右 两侧（即是对其最大影响）侧浮动对盒子模型的影响
  2.通过after伪类，在元素的最后添加一个空白的块元素，然后对其清除浮动，和添加一个div原理一样，最推荐使用。兼容IE6，.clearfix{zoom:1;}
  .clearfix:after{
  /添加一个内容/
  content：“”；
  /转换为块元素/
  display：block；
  /清除两侧的浮动/
  clear：both；

  3.完善clearfix:既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
  .clearfix:before, .clearfix:after{ content:"", display:table; clear:both;} .clearfix{ zoom:1;}

  相对定位：（relative）
  定位：指的是将制定的元素摆放到页面的任意位置
  通过position属性来设置元素的定位：
  -可选值：static：默认值，元素没有开启定位
  relative：开启元素的相对定位
  absolute：开启元素的绝对定位
  fixed：开启元素的固定定位（也是绝对定位的一种）
  （1).当开启元素的相对定位后，而不设置偏移量，元素不会发生任何变化
  （2).相对定位是相对于元素在文档流中原来的位置进行定位
  （3).相对定位的元素不会脱离文档流
  (4).定位元素会提升一个层级
  （5).相对定位的元素不会改变元素的性质，块还是块，内联还是内联

  可以通过left right top bottom四个属性来设置元素的偏移量
  left：元素相对于定位位置的左侧偏移量
  right：元素相对于定位位置的右侧偏移量
  top：元素相对于定位位置的上边偏移量
  bottom：元素相对于定位位置的下边偏移量

  position：relative；
  left：100px；

  绝对定位：（absolute）
  1.开启绝对定位，会使元素脱离文档流
  2.开启绝对定位后，如果不设置偏移量，则元素的位置不会变化
  3.绝对定位是相当于离他最近的开启了定位的元素进行定位的，如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
  4.绝对定位会使元素提升一个层级
  5.绝对定位会改变元素的性质，块元素的高度和宽度都被内容撑开，内联元素变成块元素

  position：absolute；
  left：0px；
  top：0px;

  固定定位：（fixed）
  1.固定定位也是一种绝对定位，大部分特点和绝对定位一样
  2.不同点：
  固定定位永远相对于浏览器窗口进行定位
  固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
  IE6不支持固定定位

  position:fixed;
  left:0px;
  top:0px;

  元素的层级：
  如果元素的层级是一样的，则下边的元素会盖住上边的
  通过z-index属性可以设置元素的层级
  可以为z-index制定一个整数值，该值将会作为当前元素的层级，层级越高，越优先显示
  对于没有开启定位的元素不可以使用z-index
  父元素z-index的值再高，也不可以盖过子元素
  z-index：3333；

  opacity：设置元素的透明背景度
  0-1来设置 0：表示完全透明 1：表示完全不透明 0.5：表示半透明

  opacity：1；
  filter：alpha（opacity=50）；

  alpha（opacity=透明度） 透明度需要0-100之间的值 0：表示完全透明 100：表示完全不透明 50：表示半透明

  背景一：使用background-image来设置背景图片
  background-image：url（相对路径）；
  如果背景图片大于元素，默认会显示图片的左上角
  如果背景图片等于元素，默认会显示图片的全部
  如果背景图片小于元素，默认会显示背景图片平铺以充满元素

  可以同时为元素指定背景颜色和背景图片，背景颜色会作为背景图片的底色
  background-image：url(img/1.jpg);

  background-repeat用于设置背景图片的重复方式
  repeat，默认值，背景图片会平铺
  no-repeat，背景图片不平铺，有多大就显示多大
  repeat-x，背景图片沿水平方向重复
  repeat-y，背景图片沿垂直方向重复

  背景二：使用background-position来设置
  可选值：该属性可以使用top right left bottom center中的两个值来指定背景图片的位置
  top left 左上 top center top right
  left center center center right center
  left bottom bottom center right bottom

  如果只给出一个值，则第二个值默认是center

  也可以直接指定两个偏移量：
  第一个值是水平偏移量
  -如果指定的是一个正值，则图片会向右移动指定的像素
  -如果指定的是一个负值，则图片会向左移动指定的像素
  第二个值是垂直偏移量
  -如果指定的是一个正值，则图片会向下移动指定的像素
  -如果指定的是一个负值，则图片会向上移动指定的像素
  background-position：20px 30px；

  background-attachment：用来设置背景图片是否随着页面一起滚动
  可选值：scroll，默认值，背景图片随着窗口滚动
  fixed，背景图片会固定在某一位置，不随页面滚动
  不随窗口滚动的图片，我们一设置给body，而不设置给其他元素
  background-attachment：fixed；

  按钮练习：
  .btn:link{ display:block; width:100px; height:200px; backgroud-image:url(1.png); backgroud-repeat:no-repeat; }
  .btn:hover{ backgroud-image:url(2.png);}
  .btn:active{ backgroud-image:url(3.png);}
  简写属性：background：背景颜色 背景图片 背景不重复 背景图片位置 背景图片不随滚动条滚动
  background：#fba url（1.png）no-repeat center fixed;

  表格简介：table是一个块元素

  table （创建单元格 ）tr（在table标签中使用tr来表示表格的一行，有几个tr就有几行） td（在tr中需要使用td来创建一个单元格，有几个单元格就有几个td）

  td，th{ border:1px solid #bfa; }

  rowspan用来设置纵向的合并单元格
  colspan用来设置横向的合并单元格

  B4表示纵向合并2个单元格 border-spacing：table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离 border-collapse可以设置表格的边框合并，如果设置了边框合并，则border-spacing自动失效，border-collapse：collapse； th 表头，字体相对居中 tr:nth-child(even){ backgroud-color:#fba；}设置隔行变色，even是偶数，odd是奇数 tr：hover{ background-color：#ff0；}设置鼠标移入改变的颜色

  长表格：表格分为三个部分，thead （表头）tbody（表格主体）thead（表格底部）

  永远显示在表格头部 永远显示在表格的中间 永远显示在表格底部

  如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并将所有的tr都放到tbody中，所以tr不是table的子元素，而是tbody的子元素

  表单：
  用来将用户信息提交给服务器，比如：百度的搜索框 注册 登录等操作都需要填写表单
  使用form标签创建一个表单，form标签中必须指定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址

  使用form标签创建的只是一个空白表单，还需要添加不同的表单项

  使用input来创建一个文本框，它的type属性是text,将表单项中的数据提交给服务器，给表单指定一个name属性，name表示提交内容的名字，在文本框中也可以指定value属性值，该值作为文本框的默认值显示
  用户名<input type="text" name="username" value="我是value"/>
  
  用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器，url地址？查询字符串
  格式： 属性名=属性值&属性名=属性值&属性名=属性值
  
  提交按钮可以将表单中的信息提交给服务器，使用input创建一个提交按钮，它的type属性值是submit,在提交按钮中可以通过value属性来指定按钮上的文字
  <input type="submit" value="注册" />
  
  密码框：使用input创建一个密码框，它的type属性值是password
  密码<inout type="password" name="password" /><br/><br/>
  

  表单项一：单选按钮：使用input创建一个单选按钮，它的type属性值使用radio，单选按钮通过name属性进行分组，name属性相同是同一组按钮，必须指定一个value属性，如果希望在单选按钮中或是多选按钮中指定默认选中的选项，在选中的项中添加checked="checked"属性
  性别男
  性别女

  多选按钮：使用input创建一个多选按钮，它的type属性值使用checkbox
  爱好篮球
  羽毛球
  排球
  足球

  下拉列表：使用select来创建一个下拉列表，下拉列表的name属性需要指定给select，而value属性需要指定给option，可以通过option中添加selected="selected"来设置默认选项
  当为select添加一个multiple=“multiple”，则下拉列表变成一个多选的下拉列表。
  在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组，可以通过label属性来指定分组的名字

  你喜欢的明星
  

  <optgroup lable="女明星">
  	<option value="fbb">范冰冰</option>
  	<option value="lxr">林心如</option>
  </optgroup>
  
  <optgroup lable="男明星">
  	<option value="pcj">潘长江</option>
  	<option value="ldh">刘德华</option>
  </optgroup>
  
  </select>
  

  使用textarea创建一个文本域：自我介绍
  可以创建一个重置按钮，点击重置按钮以后表单中内容将会恢复默认值
  使用input type=“button” 可以创建一个单纯的按钮，这个按钮没有任何的功能，只能被点击

  除了使用input，也可以使用button标签来创建按钮，这种方式和input类似，只不过由于它是成对出现的标签，使用起来更加的灵活。
  提交
  重置
  按钮

  label标签，该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
  用户名
  

  性别男

  在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中,在fieldset中可以使用legend子标签，来指定组名

  用户信息

  框架集和内联框架类似，都适用于在一个页面中引入其他外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，推荐使用框架集。
  属性：rows，指定框架集中的所有的框架，一行一行的排列。
  cols，指定框架集中的所有的页面，一列一列的排列。
  这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小

  在frameset中使用frame子标签来指定要引入的页面，引入几个页面就写几个frame

  frameset也可以嵌套frameset，frameset不能和body标签在一起，使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面

  在IE6中对图片格式png24支持度不高，如果使用图片格式是png24，则会导致图片的透明效果无法正常显示
  解决方法：1.可以使用png8代替png24，即可解决问题，但是代替之后图片的清晰度会下降
  2.使用Javascript来解决问题，需要向页面引入一个外部的JavaScript文件，然后写一下简单的JS代码，来处理问题
  在body标签最后引入外部的JS文件，在创建一个新的script标签，并且编写一些js代码

  

  条件hack：在某些浏览器可以识别,
  <！–[if IE 6]> 如果是IE 6就显示
  

  我是一个标签

  
  <![endif]–>

  <！–[if It IE 6]> 如果是小于 IE 6就显示
  

  在IE6 以下的浏览器中显示

  
  <![endif]–>

  <！–[if Ite IE 6]> 如果是小于等于IE 6就显示
  

  在IE6中 或者 IE6以下的浏览器中显示

  
  <![endif]–>

  <！–[if ！ IE 6]> 如果不是IE 6就显示
  

  我是一个标签

  
  <![endif]–>

  属性hack：在选择器前添加* html，则该选择器只有IE6可以识别

  • html body{background：#bfa；}
    只在IE6中生效 在样式前添加一个下划线，则样式只有在IE6以下的浏览器才可以识别 _backgroud-color:yellow;
    添加了*的样式只有IE7及以下的浏览器认识 *backgroud-color:yellow;
    在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别 background-color：yellow\0;

  为文字设置水印：placeholder=“”；
  单独为IE6设置一个背景不随元素滚动：-background-attachment：fixed；
  设置字体大小为0，去除空格： .icom{ font-size:0; }