HTML和CSS基础知识

1.HTML是什么？

         HTML是超文本标记语言，是一种标记语言，不是编程语言

2.web标准是什么？

        web标准是由W3C组织制定的一系列标准，包括结构、表现、行为三个方面

        （1）结构： 结构化标准语言，如HTML---负责网页中元素的整体布局

        （2）表现：层叠样式表，如CSS---负责网页中元素的外观显示

        （3）行为： JavaScript---负责网页中元素的交互功能和动态效果

3.标签的分类
        3.1 根据标签的结构分类：
           （1） 双标签：<标签名>内容</标签名>
           （2） 单标签：<标签名 />
        3.2 根据标签的特性分类：
           （1） 块级标签：独占一行，可以设置宽高，
            （2）行内标签：不独占一行，不可以设置宽高，
            （3）行内块标签：不独占一行，可以设置宽高， 
        3.3 根据标签的语义化分类
            （1）语义化标签：有语义的标签，如：<h1>标题</h1> <p>段落</p>
            （2）非语义化标签：没有语义的标签，如：<div> <span>

4.常用的标签
        4.1 标题h1-h6：用于显示标题，h1最大，h6最小
        4.2 段落p：用于显示段落
        4.3 图片img：用于显示图片
        4.4 超链接a：用于跳转页面
        4.5 换行br：用于换行
        4.6 水平线hr：用于显示水平线
        4.7 div：用于划分区域，是一个块级标签
        4.8 span：用于划分区域，是一个行内标签

5.列表： 用来描述具有相同特征的一组数据---用于页面结构布局
  5.1 有序列表：有序列表中的数据是有序的，有序列表中的每一项都有一个序号，序号默认从1开始
（1）语法结构：
        <ol>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ol>
（2）特点：

•         1.有序列表中的每一项都有一个序号，序号默认从1开始
•         2.有序列表中有默认的外边距和内间距
•         3.有序列表中的每一项都是一个块级元素

 5.2 无序列表：无序列表中的数据是无序的，无序列表中的每一项都没有序号
  （1）语法结构：
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
   （2）特点：

•         1.无序列表中的每一项都没有序号
•         2.无序列表中有默认的外边距和内间距
•         3.无序列表中的每一项都是一个块级元素

5.3 自定义列表：自定义列表中的数据是有序的，自定义列表中的每一项都有一个序号，序号可以自定义
   （1）语法结构：
        <dl>
            <dt>列表项1</dt>
            <dd>列表项1的描述</dd>
            <dt>列表项2</dt>
            <dd>列表项2的描述</dd>
            <dt>列表项3</dt>
            <dd>列表项3的描述</dd>
        </dl>

6.表格：在网页中以行+列的单元格的方式整齐展示和数据

        6.1 语法格式

                <table>
                <tr>
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                </tr>
                <tr>
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                </tr>
                <tr>
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                </tr>
            </table>

        6.2 常用属性

                （1）border：设置表格的边框
                （2）width：设置表格的宽度
                （3）height：设置表格的高度
                （4）align：设置表格的对齐方式
                （5）bgcolor：设置表格的背景颜色
                （6）cellpadding：设置表格的内间距
                （7）cellspacing：设置表格的外边距
                （8）colspan：设置单元格横向合并
                （9）rowspan：设置单元格纵向合并
               （10）bordercolor：设置表格的边框颜色

7.表单: 用于收集用户的信息

        7.1 表单域
                <form action="服务器网络地址" method="get/post">
                </form>

        7.2 表单控件

                （1） 单行文本输入框 

                <input type="text" name="username" />
                        type: 表示控件的类型---必写
                        name: 表示控件的名称---必写
                        value: 表示控件的值 --- 可选
                        placeholder: 表示控件的提示信息 --- 可选
                        disabled: 表示控件是否禁用 --- 可选
                        maxlength: 表示控件的最大长度 --- 可选
                        required: 表示控件是否必填 --- 可选

                （2） 多行文本输入框---文本域  

                <textarea name="content"></textarea>

                        name: 表示控件的名称---必写
                        cols: 表示控件的列数 --- 可选
                        rows: 表示控件的行数 --- 可选

                （3） 下拉列表框

                 <select name="city">
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="gz">广州</option>
                </select>
                        name: 表示控件的名称---必写
                        value: 表示控件的值 --- 必写
                        selected: 表示控件是否选中 --- 可选

8. css层叠样式表：层叠的意思就是多个样式同时作用于一个元素，这时候就需要有一个优先级的概念

        8.1 css常用的引入方式

                （1）行内样式：直接在标签内部通过style属性设置样式

                （2）内部样式：在head标签内部通过style标签设置样式

                （3）外部样式：通过link标签引入外部的css文件

        8.2 优先级

                行内样式 > 内部样式 > 外部样式

9. css选择器分类

        9.1 基础选择器

                （1）标签选择器（标签{样式属性声明}）--- 选择页面中所有同类的标签

                （2）类选择器（.class名{样式属性声明}）---- 选择页面中所有同类名的标签

                （3）id选择器（#id名{样式属性声明}）---id名称在项目中是唯一的 

                （4）通配符选择器--- *{样式属性声明} 选择页面中所有标签

        优先级：id选择器>类选择器>标签选择器>通配符选择器 

        9.2 复合（复杂）选择器

                （1）后代选择器---选择器1 选择器2{样式属性声明}，选择器1中的所有选择器2 

                （2）子代选择器-- 选择器1 > 选择器2{样式属性声明}，选择器1中的所有选择器2

        9.3 结构选择器

                （1）第一个子元素选择器-- 选择器:first-child{样式属性声明}，选择器中的第一个子元素

                （2）最后一个子元素选择器--- 选择器:last-child{样式属性声明}，选择器中的最后一个子元素

                （3）第n个子元素选择器-- 选择器:nth-child(n){样式属性声明}，选择器中的第n个子元素

                （4）倒数第n个子元素选择器-- 选择器:nth-last-child(n){样式属性声明}，选择器中的倒数第n个子元素

                （5）奇数子元素选择器--- 选择器:nth-child(odd){样式属性声明}，选择器中的奇数子元素

                （6）偶数子元素选择器--- 选择器:nth-child(even){样式属性声明}，选择器中的偶数子元素

        9.4 hover伪类选择器：选择器:hover{样式属性声明}---鼠标悬停在当前标签时上时的样式

10. 背景属性

        10.1 背景颜色--- background-color

                特点：（1）必须设置高度 

                           （2）背景图片会填充整个盒子， 属性值： url(图片路径)

        10.2 背景图片--- background-image

               特点： （1）必须设置高度 

                           （2）背景图片会填充整个盒子， 属性值： url(图片路径)

        10.3 背景平铺--- background-repeat

                （1）repeat-x 水平平铺
                （2）repeat-y 垂直平铺
                （3）no-repeat 不平铺 

        10.4 背景尺寸--- background-size

                （1）contain 保持图片原有比例，将图片缩放到最大，使图片的宽度或者高度等于盒子的宽度或者高度
                （2）cover 保持图片原有比例，将图片缩放到最小，使图片的宽度或者高度等于盒子的宽度或者高度
                （3）100% 100% 使图片的宽度或者高度等于盒子的宽度或者高度

        10.5 背景图渐变---background: linear-gradient(渐变方向,颜色1,颜色2,颜色3...)

                （1）渐变方向：线性渐变--- linear-gradient

                        to top--- 从下到上
                        to bottom--- 从上到下
                        to left--- 从右到左
                        to right--- 从左到右
                        to top left--- 从右下到左上
                        to top right--- 从左下到右上
                        to bottom left--- 从右上到左下
                        to bottom right--- 从左上到右下

                （2）渐变形状：径向渐变---- radial-gradient

                        circle--- 圆形
                        ellipse--- 椭圆形
                        closest-side--- 以最近边为半径的圆形
                        closest-corner--- 以最近边为半径的椭圆形
                        farthest-side--- 以最远边为半径的圆形
                        farthest-corner--- 以最远边为半径的椭圆形

11. display显示模式

        （1）块级元素---- block: 独占一行,可以设置宽高

        （2）行内元素--- inline： 不独占一行，不能设置宽高

        （3）行内块元素--- inline-block： 不独占一行，可以设置宽高

12. position 定位：用于页面布局的

        （1）相对定位:position: relative;----参考自己默认的原位置进行定位---不释放原有空间位置---没有脱标（脱离标准流布局）
        （2） 绝对定位：position: absolute---- 参考body标签的左上角原点位置进行定位---释放原有空间位置---脱标（脱离标准流布局）
        （3） 父相子绝----父元素为相对定位，子元素为绝对定位
        （4） 固定定位：position: fixed;----参考浏览器窗口的左上角原点位置进行定位---释放原有空间位置---脱标（脱离标准流布局）