html 标签 和 部分 CSS

内部链接：
a标签：
href：跳转的路径
target：_self(默认值) 从自己的网页直接跳转到其他的网页
_blank 重新打开一个页面跳转到其他的网页

外部链接：
从自己的网站跳转到其他网站
a标签：
href： 使用完整的ip地址

锚点链接：
在网页内部进行跳转
href：属性值：跳转的位置标签的id
给跳转到的标签设置id值，id值是唯一的
a标签中的href属性要设置#id属性值，此时标签和a链接才能关联上

<strong id=“one”> 我是one</strong>
<a href="#one">去‘我是one’</a>
/** 空链接 **/
// <a href="#">去‘我是two'</a> // 会跳到顶部
// <a href="##">去‘我是two'</a> // 不会跳转

插入图和背景图的区别
插入图：是标签，在网页中需要占据位置的，用来突出的
背景图：是属性，在网页中是不占据位置的，可以理解为一个丰富的颜色，用来修饰标签

背景色属性
bgcolor: 颜色
background： url(‘路径’) || background=“路径”

页面切换

//  页面一  one.html
<a href="one.html"> To 一 </a>
<a href="two.html"> To  二 </a>
<h1> 我是页面一 </h1>


// 页面二   two.html
<a href="one.html"> To 一 </a>
<a href="two.html"> To 二 </a>
<h1> 我是页面二 </h1>

三种列表

// 无序列表：是被一组ul管理的列表，li是列表项，ul只能包含li，li可以包含任何标签
<ul>
  <li> 一 </li>
  <li> 二 </li>
  <li> 三 </li>
</ul>

// 有序列表：是被一组ol管理的列表，li是列表项，ol只能包含li，li可以包含任何标签（每一项前面有序号）
<ol>
  <li> 一 </li>
  <li> 二 </li>
  <li> 三 </li>
</ol>

// 自定义列表：是被一组dl管理的列表，dt、dd是列表项，dl只能包含dt、dd，dt、dd可以包含其他的标签 (有主题)
<dl>
  <dt> 亚洲 </dt>
  <dd> 中国 </dd>
  <dd> 日本 </dd>
  <dd> 韩国 </dd>
  <dd> 泰国 </dd>
</dl>

表格标签

<table border="1" width="300" height="300" cellspacing="0" align=“center”> // 设置表格边框为一像素只能用css  /  align=“center”整个表格居中（属性值：left、center、right）
<caption>阿拉伯数字</caption> //  表格的标题
  <tr>
    <td>壹</td>
    <td>贰</td>
    <td>叁</td>
  </tr>
   <tr align=“center”> // 可以给每一行添加
    <td align=“center”>1</td> // align: 使单元格的内容和表头居中
    <td>2</td>
    <td>3</td>
  </tr>
   <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

表单标签

// 表单： 表单标签   提示信息    表单域
// 标签： 
// label 标题
// 属性：
// for 关联输入框的id属性
<!--
type 类型：
  1、 text 文本框  
  2、password 密码框 
  3、radio 单选按钮（属性：name: 组的概念，将多个单选按钮的name属性值设置相同实现单选效果、checked默认选中，如checked="" || chenked || checked="checked"）   
  4、checkbox 复选框（checked默认选中，如checked="" || chenked || checked="checked"） 
  5、button  普通按钮（属性：value按钮显示的内容）  
  6、submit 提交按钮    必须在form 表单中
  7、reset：重置按钮
-->
<!--
 form 表单域
    属性： 
      action:  提交地址
      method： 提交方式   get / post 
-->
<!--
    select 标签  下拉框  
      option  下拉项
      属性：
          selected  默认选中  和 checked 类似
       optgroup  下拉组
         属性：
           label ： 标题
     textarea :  文本域
     button  ： 按钮  
        属性：
        type:  button 普通
                  reset 重置
                  submit  提交
-->

<form action="提交的地址" method=“get/post”> // method 提交的方式
	<label for="txt">姓名：</label>
	<input type="text id="txt" />
	<label>性别：</label>
	<input type="radio" name="gender"  />男 
	<input type="radio" name="gender" checked  />女
	<select>
	  <option selected="selected">中国</option>
	  <option>日本</option>
	  <option>朝鲜</option>
	  <option>泰国</option>
	</select>
	<select>
	 <optgroup label="亚洲">
	    <option selected="selected">中国</option>
		  <option>日本</option>
		  <option>朝鲜</option>
		  <option>泰国</option>
	 </optgroup>
	</select>
	<textarea></textarea>
	<input type="button" value="普通提交” >
	<input type="submit" value="真正的提交” >
	<input type="reset" value="重置” >
	<button type=“button”>默认是提交按钮</button>
</form>

***CSS***

<style>
  /*
  *   css样式 就是属性名对应属性值
  * 标签选择器
  */
 p {
    /**
    *  颜色的设置
    * 第一种： 设置颜色英文单词的方式  如：color: red;
    * 第二种： 用十进制的方式设置  如：rgb(255,0,0)
    * 第三种： 十六进制
    */
    /**
    *  首行缩进
    * 1em : 当前字体的大小
    *   text-indent: 2em
    */
    /**
    *  盒子的三属性： width: '100px';   height:'50px';  background: 'red';
    */
    /**
    *  鼠标样式
    * cursor:   no-drop;
    * text-decoration: line-through // line-through: 中划线；  underline: 下划线； overline： 上划线
    */
  }
</style>

***显示模式***
1、块级显示模式：可设置宽高，独占一行，在不设置的情况下，和父元素的宽度相同
块元素：div, h1-h6, p, ul, ol, li, dl, dt, dd, hr, form
2、行内显示模式： 设置宽高不起作用，宽高靠内容撑开大小，一行可以有多个
行内元素： span, b, strong, i, em, u, ins, s, del, a
3、行内块显示模式：设置宽高起作用，一行可以有多个
行内块元素：img 表单标签（label，input，button，select，textarea，option）
4、显示模式的转换：display: inline-block; display: block;
***类选择器***
定义类名： 以点开头，再加上类名称
调用类名： 用标签中的属性class调用类名

命名规范： 不能以数字开头，可以是 字母+数字+下划线+中划线， 还可以驼峰命名法
多样式调用： 一个标签可以调用多个类名，类名之间用空格隔开
id选择器
定义id选择器： #加id名称
调用： 标签中的id属性，id是唯一的

类选择器：可以被看作是人的名字，人的名字可以重复使用
id选择器： 是唯一的，像人的身份证一样

css三种书写方式
1：内嵌式： 将css代码写在html内，相对分离，避免代码冗余，便于维护，偶尔会用
2：行内式： 将css代码和html参杂在一起，代码易冗余，难以维护，代码耦合度高
3：外链式：将css代码单独写在一个文件里，和html绝对分离，易于维护, 代码耦合度低（）
css层叠
1、再给同一个标签设置不同属性的情况下都可以实现；在设置相同属性的情况下，在权重相同时后定义的被层叠先定义的; 在权重不同时，谁的权重大，渲染谁的。
2、权重：标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
3、可以写多个标签
块元素的默认宽高： 默认为父元素的宽高
后代选择器

 .eeg h3 {
    color: green;
  }

CSS继承性
1、继承的权重是0； 宽度和背景色不会被继承（在控制台中显示为透明的颜色，如下图）
2、所有关于设置文本的属性可以继承
3、有些标签都有对应的css样式，当继承时，会被自身的相同属性层叠掉；如：h1-h6, a

伪类

<style>
  a { font-size: red; } 
  // 当四种状态同时存在时， 顺序是 lvha
  a:link { color: red; } // 默认效果
  a:visited { color: blue; } // 访问后
  a:hover { color: yellow; } // 鼠标移入
  a:active { color: #000; } // 鼠标按下
</style>

行高
行高： line-height；在没有给盒子设置固定高度的时候，设置行高会自动设置一个相等的高度，保持垂直居中
文本分为四条线：顶线， 中线， 基线， 底线
单行文本垂直居中，行高等于盒子的高度
多行文本的行间距时基线到基线的距离
line-height: 16px; line-height: 2em; line=height: 2
复合属性
1、font：italic 700 40px /50px ‘宋体’ // font: 是否倾斜 是否加粗 字号/行高； 最少设置字号和字体属性，否则会报错
2、border: 5px solid red
3、background: yellow url(路径) no-repeat 10px 10px

盒子模型
1、padding 内边距
当元素设置元素后，
盒子在网页中的尺寸=自身的宽高+内边距+边距
padding减宽度的场景： 当块元素在不设置宽度的时候，和父元素的宽度一样，此时设置的padding，不用人为的减宽度，宽度和padding会自动计算
当块元素设置固定的宽度的时候，此时设置padding，需要对应的减去宽度或者高度的值
2、margin 外边距
盒子与盒子之间的距离。
3、外边距合并
外边距合并：垂直排列的两个块元素，分别给上面的盒子加向下的外边距和给下面的盒子加向上的外边距此时会形成外边距合并，当两个值相同的时候，就是该值，当值不同的时候，取最大值
4、块元素水平居中
text-align: center; // 文字居中（给父元素设置）
margin: 0 auto; // 块元素居中（给自己设置）
外边距塌陷

并集选择器
多个选择器用 ‘,’ 号隔开
如：.s1, p, .box .s2 a { 样式 }
清除标签的默认样式

  * {
        margin： 0；
        padding： 0；
    }

浮动
文本环绕 ： 将图片设置浮动，文本是标准流，此时标准流的元素是会被浮动压在下面，但是文本是不会被浮动的元素压住的，会环绕着浮动的元素所显示
1、浮动也是属性float；现在用来做浮动布局，之前学习三种显示模式被称为标准流
2、浮动是浮动流，是半脱离标准流的状态
3、清除浮动造成的影响
如果父元素没有设置高度，子元素元素设置浮动，父元素高度为0
（1）、给加了浮动的父元素设置固定的高度
（2）、给加了浮动父元素添加 ‘overflow:hidden;’
(3) 、 给加了浮动的父元素，调用claerfix

   .clearfix:after {
       content: '.';
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }

（4）、给父元素也设置浮动
overflow 属性

overflow: hidden; // 溢出隐藏，解决外边距塌陷， 清除浮动
overflow： auto； // 当字元素没有一处父元素时，不出现滚动条，反之出现滚动条
overflow： scroll;  // 当子元素没有溢出父元素得时候，会出现滚动条的槽

网页的版心
版新的盒子：在网页中是一个有故地方宽度和水平居中的
通栏的盒子： 在网页中是一个无固定宽度的盒子，随浏览器的宽度所决定

CSS初始化

// 基础设置
h1,h2,h3,h4,h5,h6,body,ul,li,ol,dt,dd,,dl,p {
   margin: 0;
   padding: 0;
}
ul,ol { list-style: none;}
input { outline: none; }
table { 
    border: 1px solid #eee;
    border-spacing: 0;
    border-collapse: collapse;
}
th, td { 
    border: 1px solid #eee;
}
h1, h2, h3,h4,h5,h6,b,strong { font-weight: 400; }
i, em {font-style: normal; }
s,u,del,ins {
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6{ font-size: 100%; } 
// 风格初始化
body {
  background-color: red; // 基础背景色
  font-size: 14px/1.5 '微软雅黑','宋体',tahoma,'\5b8b\4f53'; // 可同时设置多个字体
  color: #6c6c6c;
}
a { color: #6c6c6c; }
a:hover { color: #f40; }
img { 
// 解决img底部4像素留白
    display: block; 
}

定位
1、相对定位： position： relation; 也叫占位定位， 当元素加了相对定位的属性之后，虽然可以将该元素设置到网页的一个坐标位置，但在标准流的位置还是存在的，需要用四个偏移量来设置，（left\top\right\bottom） 移动的参考点是标准流时自身的位置
2、绝对定位： position： absolute; 是一个完全脱离标准流的状态，默认left和top的参考点是网页的左上，默认的right和bottom是窗口的右下
3、相对定位和绝对定位配合使用：
（1）、当元素在设置绝对定位后，设置宽高起作用
(2) 、子绝父相，子元素绝对定位，父元素相对定位，子元素的参考点就是当前（最近的加了相对定位属性的）父辈元素的四个角
（3）、z-index：1， 提高层级，只能是整数
4、定位i元素水平居中：
设置left值为50%；再用margin-left的值向相反的方向走自身宽度的一半
设置top值为50%；再用margin-top的值向相反的方向走自身高度的一半