HTML基础标签

HTML
超文本标记语言   是一种创建网页的标准标记语言。
HTML不是编程语言，就是一种标记语言。
HTML使用标记标签来描述页面

划分：
单标记标签
双标记标签
注意事项：
1.命名规则：
  数字，字母，下划线    数字不能开头
  如：d01 d_1 banner 
2.改title
3.符号要在英文状态下书写
charset 字符集
UTF-8    国际通用字符集
gbk      宽字符集

<p>   段落
<h1>  标题
<br/> 换行
<hr/> 分割线
<img/> 图片
src   路径
返回上一层 ../
<b>   粗体
<i>   倾斜
<em>  倾斜
<sub> 下标
<sup> 上标
&lt; &gt;左右尖角号
&nbsp;空格

“crl+z 返回 crl+/注释”

css
层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中
样式书写：
1.行内样式  style="color: red;"
2.页内样式  <style>写样式</style>
3.外链样式  <link href="css/style.css" rel="stylesheet" type="text/css"/>

选择器；
1.标签选择器    p{    }
2.id选择器      
   步骤：
     <h1 id="add">我是h1</h1> 先起id名
     #add{
            color: pink; 通过#获取id，加样式
        }
3.class选择器
   步骤：
     <p class="p1">我是p1</p> 先起名
     .p1{
            color: blue;  通过.获取class，加样式
        }
id和class区别；
  id名不允许重复，而class名允许重复

文本样式；
color     字体颜色
textalign 文本对齐方式
background-color  背景颜色
text-decoration   文本修饰
      none        默认    取消
      underline   定义文本下的一条线
      overline    定义文本上的一条线
      line-through  穿过文本的一条线
      dotted      点虚线
      wavy        波浪线

简写：text-decoration:underline overline wavy chartreuse;

文本转换：
    text-transform:uppercase/lowercase/capitalize  大写/小写/首字母大写
文本缩进：
    text-indent 单位：px
字体大小
    font-size   单位：px
文字字体：
    font-family 
字体样式：
    font-style 
        normal  正常
        italic  倾斜

字体粗细：
    font-weight
         100-900   400默认
css背景：
    background-color  背景颜色
    颜色值：
        1.英文
        2.十六进制
        3.rgb()
    背景图片：
    background-imgage:url();
    background-size:   大小
    background-repeat: 背景重复
            no-repeat  不重复
            repeat-x   沿着x轴重复
            repeat-y   沿着y轴重复
    background-position:位置
            right bottom  右下
            left top      左上
            100% 100%
            20px 20px

简写：
    background: url(img/朴宝英.png) no-repeat right top;

边框；
border

边框线；
border-style；

soild     实线
dashed    虚线
dotted    点虚线

边框颜色；
border-color

边框粗细；
border-width   单位/px

简写；
border:soild red 2px

单独给一条边加边框：
border-top:soild red 2px;
border-bottom:soild red 2px;
border-left:soild red 2px;
border-right:soild red 2px;

注意:
1.每个值之间用空格隔开
2.每个值之间的顺序任意

行内与块级：

行内标签：
 宽高不可控，不独占一行
<img/> <span></span> <font></font> <a></a>

块级标签：
 块级宽高可控，独占一行
<p></p> <h1></h1> <div></div>

转换：
行内转块级: display:block;
块级转行内：dispaly:inline;
转行内块：
   宽高可控，不独占一行
   display:inline-block;

列表：
1.有序列表   ol   li
2.无序列表   ul   li
3.自定义列表 dl   dt   dd

列表样式：
list-style:   
     none:  取消

行高：
line-height   调整每一行之间的间距(高度)
 
 上下居中：把行高的值设置成与外侧盒子高度相同即可

 圆角效果：
 border-radius
 值：100% px

 给盒子半径就会变成圆

分别设置四个角的不同的圆角效果：
border-radius:10px 5px 8px 15px;
四个值：左上 右上 右下 左下

border-radius:10px 5px 8px;
三个值：左上 右上和左下 右下

border-radius:10px 5px;
两个值：左上和右下 右上和左下

阴影：
1.盒子阴影：
   box-shadow：
   1.x轴偏移量    阴影水平宽度  必选项  可以给负数
   2.y轴偏移量    阴影垂直高度  必选项  可以给负数
   3.阴影模糊半径 阴影边缘模糊程度  可选项  必须是正数
   4.阴影颜色     可选

box-shadow: 5px 5px 10px rgb(255, 0, 140),-5px -5px 10px rgb(255, 0, 191);

2.文字阴影：
   text-shadow：
   1.x轴偏移量    阴影水平宽度  必选项  可以给负数
   2.y轴偏移量    阴影垂直高度  必选项  可以给负数
   3.阴影模糊半径 阴影边缘模糊程度  可选项  必须是正数
   4.阴影颜色 

text-shadow: 5px 5px 5px rgb(0, 0, 0, 0.719);   

盒子模型：
所有的HTML元素都可以看成盒子模型。
组成：边框(border),内容(width,height),边距(内边距(padding)和外边距(margin))

<div></div>   盒子
布局方式：div+css

之前的布局方式：table表格

边距：布局方式之一 
1.内边距
padding
内容到边框的间距

padding-top    上内边距
padding-bottom 下内边距
padding-left   左内边距
padding-right  右内边距

简写：padding:10px 20px 30px 40px;

简写的方向和外边距一样。

2.外边距
   margin   调整盒子与盒子之间的距离

单独给一个方向加外边距：
margin-top
margin-bottom
margin-left
margin-right

简写：
margin:10px 20px 10px 20px;
四个值：上   右   下   左

margin:10px 20px 10px ;
四个值：上   左右   下   

margin:10px 20px;
四个值：上下 左右

margin:10px;
四个值：各个方向

左右居中效果：
margin-left和margin-right值给auto