# HTML5+CSS3 ## 前序：我的发现 ### 1 蒙版文字 ```css /* 让文字显示背景的颜色*/ *{ background-image: -webkit-gradient(linear,0 0,0 bottom, from(#e9f8ea), to(#88d78d)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } ``` ## 章节一 webstorm安装与设置 优点：自动补全 ## 章节二 HTML基础元素 ### 1 标题标签`

` 作用：设置标题 ```html

一号标题

二号标题

三号标题

四号标题

五号标题
六号标题
``` ### 2 段落标记`

` ```html

这是一个段落

这是一个段落

这是一个段落

``` ### 3 强制换行`

` ```html
``` ### 4 分割线`
` ```html

这是第一个段落

这是第二个段落

``` ### 5 图片`` ```html 蜡笔小新 ``` ### 6 超链接`` ```html 百度一下 跳转到06 跳转到图片
点击我 跳转到我 跳转到06的某个位置 点击我 返回页面顶部 ``` ### 7 文本格式化标签 ```html 加粗 倾斜 下划线 删除线 删除线 强调，倾斜显示 强调，加粗显示 上标 下标 23 O2 小号字体 大号字体 ``` ### 8 无序列表`` ```html ``` ### 9 有序列表`
    ` ```html ``` ### 10 自定义列表`
    `
    项目
    项目的注释
    项目的注释
    项目的注释
    帮助中心
    账户管理
    账户管理
    账户管理
    服务支持
    账户管理
    账户管理
    账户管理
    账户管理
    ```html
    项目
    项目的注释
    项目的注释
    项目的注释
    帮助中心
    账户管理
    账户管理
    账户管理
    服务支持
    账户管理
    账户管理
    账户管理
    账户管理
    ``` ### 11 表格 #### 表格创建 ```html
    表格的标题
    三行两列的表格 三行两列的表格
    三行两列的表格三行两列的表格 三行两列的表格三行两列的表格
    三行两列的表格 三行两列的表格
    ```
    表格的标题
    三行两列的表格 三行两列的表格
    三行两列的表格三行两列的表格 三行两列的表格三行两列的表格
    三行两列的表格 三行两列的表格
    #### table属性 ```html ``` #### tr属性 ```html ``` #### td属性 ```html ``` ## 章节三 表单 ### 1 form ```html
    ``` ### 2 表单元素 ```html
    用户名：
    密码：
    性别： 男 女 人妖
    爱好： 唱 跳 rap

    性别：

    爱好：

    下拉列表：

    多行文本框：

    文件：

    图片提价按钮：

    隐藏域：

    ``` ### 3 表单元素常用属性 ```html

    姓名：

    密码：

    性别：

    爱好：

    城市：

    ``` ### 4 H5新增type类型 ```html

    邮箱：

    网址：

    搜索：

    电话：

    颜色：

    数字：

    范围：

    日期：

    月：

    周：

    ``` ### 5 H5新增表单元素属性 ```html

    姓名：

    密码：

    邮箱：

    ``` ### 6 行内元素与块级元素 ```html

    一号标题

    这是一个段落

    加粗 超链接 ``` ## 章节四 H5新增元素与CSS初识 ### 1 div和span ```html ``` ### 2 H5新增语义化布局标签 ```html5 ``` ### 3 视频和音频 ```html ``` ### 4 CSS与引入方式 ```html ``` ## 章节五 CSS常用属性 ### 1 字体的属性 ```html ``` ### 2 背景属性 ```html ``` ### 3 文本属性 ```html ``` ### 4 列表属性 ```html ``` ### 5 表格属性 ```html ``` ### 6 overflow:hidden ```html ``` ### 7 行高间距 ```html ``` ### AAAAAAAAA8 选择器 ```html ``` ## 章节六 盒模型 ```css box-sizing: content-box|border-box|inherit; /* content-box标准盒模型，宽高定义内容大小 border-box怪异盒模型ie，宽高定义边框以内 inherit继承父元素 */ ``` ```html ``` ### 厂商前缀 ```html ``` ## 章节七 浮动和定位 ### 1 浮动和清除 ```html ``` ### 2 display ```html ``` ### 3 position ```html ``` ## 章节八 C3新特性 ### 1 圆角`border-radius` ```html ``` ### 2 阴影`box-shadow` ```html ``` ### 3 背景渐变`background-image:-o-linear-gradient(,,)` AAAAAAAAAAAAAA 上面的元素需要加position 不然会被覆盖 ```html ``` ### 4 位移与旋转transform ```html ``` ### 5 过渡`transition` ```html ``` ### 6 动画`animation` ```html ``` ## 章节九 响应式布局 ### 1 媒体查询 768px-992px ```html ``` ## 2 响应式 ```html ``` ### 3 多列（报纸效果） ```html ``` ## 章节十 雪碧图 ### 雪碧图 ```html ```