html第一天

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

划分：
单标记标签：   <meta />
双标记标签：   <title></title>

注意事项：
1.命名规则：
  数字，字母，下划线    数字不能开头
  如：d01  d_1  banner 

2.改title
3.符号要在英文状态下书写

charset  字符集
UTF-8    国际通用字符集
gb2312
gbk      宽字符集

<p>    段落
<h1>   标题
<br/>  换行     单标记
<hr/>  分割线   单标记
<img />  图片   单标记
src     路径
返回上一层    ../

<b>   粗体
<i>   倾斜
<em>  倾斜

<sub>  下标
<sup>  双标
&lt;   &gt;   左右尖角号
&nbsp;  空格

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: chartreuse;      通过#获取id，加样式
      }

3.class选择器
  步骤：
     <b class="acc">我是加粗</b>     先起class名
     .add{
         color: chartreuse;      通过"."获取class，加样式
      }

id和class区别：
   id名不允许重复，而class名允许重复
   

文本：
 color                字体颜色
 text-align           文本对齐方式      center 居中
 background-color     背景颜色
 width                宽度
 height               高度        单位：px/像素
 text-decoration      文本修饰
          none          默认      取消
          underline     定义文本下的一条线
          overline      定义文本上的一条线
          line-through  穿过文本的一条线
          dotted        点虚线
          wavy          波浪线

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

文本转换：
    text-transform:uppercase/lowercase/capitalize    大写/小写/首字母大写

文本缩进：
    text-indent    单位：px

字体大小：
    font-size      单位：px

文字字体：
    font-family   

字体样式：
    font-style
            normal   正常
            italic   倾斜
            oblique  倾斜

字体粗细：
    font-weight
          值：
          normal     默认值       正常大小
          bold       定义粗体
          bolder     更粗
          lighter    定义更细字符
          inherit    从父元素继承

          100-900    400默认

css背景
   
    background-color     背景颜色
    颜色值：
        1.英文           red    blue
        2.十六进制       #fff   #1057bf     
        3.rgb()          rgb(17,90,195)

    背景图片
    background-image  
        url()  路径
    
    background-size:50px 100%;     背景图片大小

    background-repeat    背景重复
             no-repeat   不重复
             repeat-x    沿着X轴重复
             repeat-y    沿着Y轴重复

    background-position:right bottom;   背景图片位置：左下
                 值：right bottom
                     100%   100%      
                     50px 50px

简写： background: url(img/shop_bottom_05.jpg) no-repeat right top;