电脑  pc端页面布局（html+css）

移动端页面布局（html5 + css3 ）
          手机
          ipad


HTML5：
   新增的语义化标签

        header 头部标签

        nav    导航标签

        article 内容标签

        section 块级标签

        aside   侧边栏标签

        footer   尾部标签

  

音频标签（audio）



属性

                     值

                         描述


autopl                ay

autoplay                  

如果出现该属性，则音频在就绪后马上播放。


controls              

controls

                    如果出现该属性，则向用户显示控件，比如播放按钮。


loop                  

loop                        

如果出现该属性，则每当音频结束时重新开始播放。


preload               

preload                     

如果出现该属性，则音频在页面加载时进行加载，并预备播放。   如果使用 "autoplay"，则忽略该属性。


src                  

url

                           要播放的音频的 URL。

   



视频标签 (video)


属性                    

值                           

描述


autoplay              

autoplay

                  视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）


controls              

controls                  

向用户显示播放控件


width                 

pixels                    (像素)

设置播放器宽度


height               

pixels                    (像素)

设置播放器高度


loop                 

loop                       

播放完是否继续播放该视频，循环播放


preload           

auto（预先加载视频）
                  none（不应加载视频）         

规定是否预加载视频(如果有了autoplay   就忽略该属性）


src               

url                          

视频url地址


poster

            Imgurl                        

加载等待的画面图片


muted            

muted

                        静音播放

   

    input表单标签

        type="email"

限制用户输入必须为Email类型

        type="url"

限制用户输入必须为URL类型


        type="date"

限制用户输入必须为日期类型


        type="time"

限制用户输入必须为时间类型


        type="month"

限制用户输入必须为月类型


        type="week"

限制用户输入必须为周类型


        type="number"

限制用户输入必须为数字类型


        type="tel"

手机号码


        type="search"

搜索框

        
type="color"

生成一个颜色选择表单

     新增的表单属性
           属性              值
        required           

required

       表单拥有该属性表示其内容不能为空，必填

        
placeholder

        提示文本

       表单的提示信息，存在默认值将不显示


        autofocus         

autofocus      自动聚焦属性，页面加载完成自动聚焦到指定表单

         
autocomplete      

off / on

      当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。   默认已经打开，如   autocomplete=”on “    关闭   autocomplete =”off”   -需要放在表单内同时加上name属性   -同时成功提交


          multiple

           multiple

      可以选中多个文件提交



css3：

类选择器  属性选择器 结构伪类选择器  权重为10


     属性选择器
1. E[att] 选择具有att属性的E元素。

2. E[att="val"] 选择具有att属性且属性值等于val的E元素。

3. E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。

4. E[att$="val"] 选择具有att属性且属性值为包含val的字符串的E元素

5. E[att*="val"] 选择具有att属性属性值为包含val的字符串的E元素。



       
     结构伪类选择器
        :first-child
        :last-child
        :nth-child(n)
                n可以是数字、单词、公式（从0开始）
                不考虑元素的类型
                指定父元素
        :first-of-type
        :last-of-type
        :nth-of-type()
                考虑元素的类型


伪元素和标签选择器一样 权重为1

伪元素选择器
        ::before   在元素内部的前面插入内容
        ::after    在元素内部的后面插入内容
                content不能省略，可以设置为空
2D转换
        移动 transform:translate(x,y)
                x,y可以是具体的像素值，还可以是百分比
1. translate中的百分比单位是相对于自身元素的宽和高  translate:(50%,50%);

2. translate类似定位，不会影响到其他元素的位置
   对行内标签没有效果

        

电脑  pc端页面布局（html+css）

移动端页面布局（html5 + css3 ）
          手机
          ipad


HTML5：
   新增的语义化标签

        header 头部标签

        nav    导航标签

        article 内容标签

        section 块级标签

        aside   侧边栏标签

        footer   尾部标签

  

音频标签（audio）



属性

                     值

                         描述


autopl                ay

autoplay                  

如果出现该属性，则音频在就绪后马上播放。


controls              

controls

                    如果出现该属性，则向用户显示控件，比如播放按钮。


loop                  

loop                        

如果出现该属性，则每当音频结束时重新开始播放。


preload               

preload                     

如果出现该属性，则音频在页面加载时进行加载，并预备播放。   如果使用 "autoplay"，则忽略该属性。


src                  

url

                           要播放的音频的 URL。

   



视频标签 (video)


属性                    

值                           

描述


autoplay              

autoplay

                  视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）


controls              

controls                  

向用户显示播放控件


width                 

pixels                    (像素)

设置播放器宽度


height               

pixels                    (像素)

设置播放器高度


loop                 

loop                       

播放完是否继续播放该视频，循环播放


preload           

auto（预先加载视频）
                  none（不应加载视频）         

规定是否预加载视频(如果有了autoplay   就忽略该属性）


src               

url                          

视频url地址


poster

            Imgurl                        

加载等待的画面图片


muted            

muted

                        静音播放

   

    input表单标签

        type="email"

限制用户输入必须为Email类型

        type="url"

限制用户输入必须为URL类型


        type="date"

限制用户输入必须为日期类型


        type="time"

限制用户输入必须为时间类型


        type="month"

限制用户输入必须为月类型


        type="week"

限制用户输入必须为周类型


        type="number"

限制用户输入必须为数字类型


        type="tel"

手机号码


        type="search"

搜索框

        
type="color"

生成一个颜色选择表单

     新增的表单属性
           属性              值
        required           

required

       表单拥有该属性表示其内容不能为空，必填

        
placeholder

        提示文本

       表单的提示信息，存在默认值将不显示


        autofocus         

autofocus      自动聚焦属性，页面加载完成自动聚焦到指定表单

         
autocomplete      

off / on

      当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。   默认已经打开，如   autocomplete=”on “    关闭   autocomplete =”off”   -需要放在表单内同时加上name属性   -同时成功提交


          multiple

           multiple

      可以选中多个文件提交



css3：

类选择器  属性选择器 结构伪类选择器  权重为10


     属性选择器
1. E[att] 选择具有att属性的E元素。

2. E[att="val"] 选择具有att属性且属性值等于val的E元素。

3. E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。

4. E[att$="val"] 选择具有att属性且属性值为包含val的字符串的E元素

5. E[att*="val"] 选择具有att属性属性值为包含val的字符串的E元素。



       
     结构伪类选择器
        :first-child
        :last-child
        :nth-child(n)
                n可以是数字、单词、公式（从0开始）
                不考虑元素的类型
                指定父元素
        :first-of-type
        :last-of-type
        :nth-of-type()
                考虑元素的类型


伪元素和标签选择器一样 权重为1

伪元素选择器
        ::before   在元素内部的前面插入内容
        ::after    在元素内部的后面插入内容
                content不能省略，可以设置为空
2D转换
        移动 transform:translate(x,y)
                x,y可以是具体的像素值，还可以是百分比
1. translate中的百分比单位是相对于自身元素的宽和高  translate:(50%,50%);

2. translate类似定位，不会影响到其他元素的位置
   对行内标签没有效果