HTML，CSS实训笔记

HTML笔记

1、HTML -- 超文本标记语言

2、html 结构
(代表H5)

   
       
   


   
   



3、常用标签
 3.1、块级标签
       特点：独占一行，前后会主动换行
       标题标签(h1--h6)
       段落标签(p)
       水平线(

---

)
       有序列表
         

           
(多个)
         

       无序列表
           

           
(多个)
           

       div -- 主要用于分区
 3.2、行级标签
        特点：按行逐一显示，不会自动换行
       文本类的
           加粗(b)
           斜体(i)
           强调(em)
           粗体(strong)
           小号字体(small)
           下标(sub)
           上标(sup)
           文本显示方向(bdo 属性：dir)
       超链接
            文本/图片


       图片
           


       span标签--包裹特殊文字
       换行

       空格：能够识别一个空格，如果多个，使用 
       版权：©
 4、form表单
       

       表单元素
         
           type = "text" 文本框
           type = "password" 密码框
           type = "radio" 单选框 -- 同一组的单选框，name要一样
           type = "checkbox" 多选框-- 同一组的多选框，name要一样
           type = "submit" 提交按钮 可以通过value属性修改显示的内容
           type = "reset" 重置按钮  可以通过value属性修改显示的内容

       

CSS笔记

一、HTML和CSS的区分
HTML---负责的是页面的内容
CSS----负责的是页面的样式(颜色、字体、位置、动画)
二、
那么html跟css如何建立关联
引入CSS样式，提供了3中方式
1、行内样式(知道即可，不推荐使用)
    格式：写在标签里边，通过style属性
    eg:

2、内部样式(近两天会使用到，以后就不建议使用了)
    格式：写在head里，通过style标签
    eg:
3、外部样式(推荐使用这种方式，以后就用这种方式)
    格式：html和css分离，是不同的文件，使用的时候要引入进来
    eg:① (较常使用)
       ②


三、修改样式
首先你要明确对谁进行修改，找到它，然后修改就可以
怎么找到你要修改的元素啊？
同样提供了3种方式
    第一种：元素选择器(HTML中的标签名)
    p{
        属性名：值;
    }
    特点：适用于所有的p元素,范围比较广


    第二种：类选择器
    .类名{
        属性名：值;
    }
    特点：比元素选择器精准
    eg:

    第三种：id选择器
    #id名{
        属性名：值;
    }
    特点：更为精准，能够找到唯一的那个元素
    eg:


    第四种：通配符(适用于所有的元素，慎用)
    *{
        padding:0;
        margin:0;
        取消标签默认的一些内边距和外边距
    }


4、修改样式
    字体类修改
        color
        font-family
        font-style
        font-size
        font-weight
        text-decoration
        text-indent
        text-align
        text-transform
        line-height
        letter-spacing
        word-spacing
    边框
        border-style
        border-color
        border-width
        以上三条都可以简写：border：solid 1px red;


        border-top、bottom、left、right


        border-radius 边框弧度
        border-radius:10px
        border-radius:100% 圆形


        可以使用border画一个三角形


    背景：
        background-color
        background-image:url("图片地址");
        background-repeat:repeat、repeat-x、repeat-y、no-repeat
        backgroung-position: 10px 20px 第一个值距离左边的像素值，第二个距离上边的像素值
        以上三条可以简写
        background:url("图片地址") no-repeat center;


    列表：
        list-style-image:url("图片地址"); 使用图片替换原有的黑点
        list-style-position:inside、outside;黑点的位置，默认在外边
        以上可以简写：
        list-style:none;取消默认的黑点


    盒子模型：
        元素的组成部分：内容(content)+填充物(padding)+边框(border)+外边距(margin)
        其中：padding ：指的是内容和边框之间的距离
              margin：指的是元素跟元素之间的距离
        padding-left、right、top、bottom
        以上可简写  padding:10px;
                    padding:10px 20px;
                    padding:10px 20px 30px 40px;


        margin：同上。