HTML5 学习

记录笔记，自己参考~~

常见的标签

• 标题：h1,h2,h3,h4...
• 段落：p
• 换行: br
• 容器：div, span(用来容纳其他标签)
• 表格: table, tr, td
• 列表: ul, ol, li
• 图片: img
• 表单 : input
• 链接 ： a

代理示例如下：

    
    


    
    
 我是h1标签
    
 我是h2标签

    
    
    
    
    

    
    
 我是段落标签我是段落标签我是段落标签我是段落标签

    
 我是段落标签我是段落标签我是段落标签我是段落标签


    
    

    
    
    
    
    


    
    

        
 我是无序列表
        
 我是无序列表
        
 我是无序列表
        
 我是无序列表
        

    
    

        
 我是有序列表
        
 我是有序列表
        
 我是有序列表
        
 我是有序列表
        

    
     我是超链接
     百度一下,你就知道

    
    
我是div标签 我是div标签
    
我是div标签 我是div标签
    
我是div标签 我是div标签
    

        

            
 我是段落 
        
    

    

image.png

新增标签

image.png

image.png

image.png

代码如下：

    
    




    浏览器兼容  
     

    

    
    

image.png

进度条，以及声音都是可以控制的，视频也可以播放

CSS

• CSS 全称是Cascading Style Sheets, 层叠样式表
  它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

CSS的编写格式是键值对形式的，比如

color : red;
background-color : blue

CSS的3种书写样式

• 行内样式：直接在标签的style属性中书写

• 页内样式： 在本网页的style标签中书写

• 外部样式 在单独的CSS文件中写，然后再网页中用link标签引用

代码如下

    
    
    
    
    
    




    
我是容器标签
    
我是容器标签
    
我是容器标签
    
我是段落标签
    
我是段落标签
    
我是段落标签
    
我是段落标签

image.png

+++++++++

CSS的两大重点

• 属性
  通过属性的复杂叠加才能做出好的网页
• 选择器
  通过选择器找到对应的标签设置样式

CSS选择器 - 标签选择器

• 选择器的作用
  选择对应的标签，为之添加样式

• 标签选择器
  根据标签名找到标签

image.png

CSS选择器 - 类选择器

image.png

CSS选择器 - id选择器

image.png

CSS选择器 - 并列选择器

image.png

CSS选择器 - 符合选择器

image.png

CSS选择器 - 后代选择器

image.png

CSS选择器 - 后代直接选择器

image.png

CSS选择器 - 属性选择器

image.png

image.png

示例代码

    
    
    


    
我是div标签
    
我是div标签

    
我是段落标签
    
我是段落标签
    
我是段落标签

    
我是div标签
    
我是段落标签

    /*后代选择器*/
    

        我是div标签
        我是超链接
        

            我是二级链接
        
    

image.png

CSS选择器 - 选择器优先级

image.png

• 优先级排序
  important > 内联 > id > 类 > 标签 |伪类| 属性选择 >伪元素> 统配符 > 继承

HTML标签类型
HTML有N多个标签， 根据显示的类型， 主要可分为3大类

• 块级标签
  独占一行的标签
  能随时设置宽度和高度(比如div，p,h1,h2,ul,li)

• 行内标签(内联标签)
  多个行内标签能同时显示在一行
  能随时设置高度和宽度(比如input,button)

修改标签的显示类型

CSS中有个display属性， 能修改标签的显示类型
none： 隐藏标签
block : 让标签变为块级标签
inline: 让标签变为行内标签

CSS属性

image.png

image.png

image.png