1. HTML5

meta标签

 <meta name="keywords" content="HTML5,前端,CSS3">
 <meta name="description" content="这是一个非常不错的网站">
  
复制代码

语义化标签

<!-- 
  标题标签:
 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>
 -->
<!-- 
    块元素（block element）
        - 在网页中一般通过块元素来对页面进行布局
    行内元素（inline element）
        - 行内元素主要用来包裹文字 <p></p>
 -->
 <!-- 
    布局标签（结构化语义标签）：

    header 表示网页的头部
    main 表示网页的主体部分(一个页面中只会有一个main)
    footer 表示网页的底部
    nav 表示网页中的导航
    aside 和主体相关的其他内容（侧边栏）
    article 表示一个独立的文章
    section 表示一个独立的区块，上边的标签都不能表示时使用section

    div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
    span 行内元素，没有任何的语义，一般用于在网页中选中文字

  -->
复制代码

三种html列表

    1、有序列表 
    2、无序列表
    3、定义列表
    
复制代码

 <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
    </dl>
复制代码

超链接、图片、内联框架、音视频

     <a href="https://www.baidu.com">超链接</a>
     <img src="./img/1.gif" alt="松鼠">
    <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
    <audio controls>
        <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>
复制代码

实体（转义字符）

    &nbsp；   空格
    &gt ；  >
    &lt ；  <
    &copy ；  版权符号
复制代码

2. CSS3

使用CSS来修改元素的样式（3种方法）：
1.内联样式（ 注意：开发时绝对不要使用内联样式） 
复制代码

 <p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>
复制代码

2.内部样式表
复制代码

<style>
    p{
      color: blue;
      font-size: 20px;
    }
  </style>
  <body>
  <p> 会当临绝顶，一览众山小</p>
</body>
复制代码

3.外部样式表（最佳实践）
复制代码

  <link rel="stylesheet" href="./style.css">
复制代码

选择器

复合选择器

交集选择器：选择器1选择器2选择器3选择器n{} #b1.p1h1.red{}
并集选择器：选择器1,选择器2,选择器3,选择器n{} #b1,.p1,h1,span,div.red{}
复制代码

关系选择器

子元素选择器 ：父元素 > 子元素{}
后代元素选择器：祖先 后代{}
选择下一个兄弟：前一个 + 下一个{}
选择下边所有的兄弟：兄 ~ 弟{}
复制代码

伪类选择器 a伪类

  :first-child 第一个子元素
  :last-child 最后一个子元素
  :nth-child() 选中第n个子元素
  :nth-child(even){} 选中偶数子元素
  :nth-child(odd){}选中奇数子元素
  :not() 否定伪类
  
  a:link{} 
  a:visited{} 
  a:hover{}
  a:active{} 点击
复制代码

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

  伪元素使用 
      ::before 元素的开始 
      ::after 元素的最后
 - before 和 after 必须结合content属性来使用   
复制代码

        div::before{
            content: 'abc';
            color: red;
        }
复制代码

选择器的权重

            内联样式        1,0,0,0  
            id选择器        0,1,0,0  |#id名{}
            类和伪类选择器   0,0,1,0   |.class{}
            元素选择器       0,0,0,1  | p{} h1{}
            通配选择器       0,0,0,0  |*{}
            继承的样式       没有优先级
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎用！

class 是一个标签的属性，它和id类似，不同的是class可以重复使用
复制代码

长度单位

    像素
        - 屏幕（显示器）实际上是由一个一个的小点点构成的
        - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
        - 所以同样的200px在不同的设备下显示效果不一样

    百分比
        - 也可以将属性值设置为相对于其父元素属性的百分比
        - 设置百分比可以使子元素跟随父元素的改变而改变

    em
        - em是相对于元素的字体大小来计算的
        - 1em = 1font-size
        - em会根据字体大小的改变而改变

    rem
        - rem是相对于根元素的字体大小来计算
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端