简介

前端初体验略略略

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--
      安装vscode
      安装中文语言包
      安装ALU主题
      将一个目录作为项目目录
      创建一个新网页 
      安装livesever
      尝试通过live sever 来运行网页
      设置代码自动保存 
      -->
      <h1>hello</h1>
      <p>hh</p>
      <p>hhh</p>
</body>
</html>

实体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实体</title>
</head>
<body>
    
     <!-- 
            在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格
            在html中,有些时候,我们不能直接书写一些特殊符号
            比如,多个连续的空格,比如字母两侧的大于和小于号

            如果我们需要在网页中书写这些特殊符号,则需要使用html中的实体
            实体的语法
                实体的名字:&nbsp;空格
                           &gt;大于号
                           &lt;小于号
                           &copy;版权符号            
         -->
    <p>
        今天 天气真不错!
    </p>
    <p>hhh</p>
    
</body>
</html>

标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
        meta主要用于设置网页中的一些元数据,元数据不是给用户看到
            charset 指定网页的字符集
            name 指定的数据的名称
            content 指定数据的内容
                keywords 表示网站的关键字,可同时指定多个关键字,关键字之间使用,隔开
                description 用于指定网站的描述
                title标签的内容会作为搜索结果的超链接上的文字显示
     -->
     <meta name="keywords" content="HTML5,前端,css3">
     <meta name="description" content="这是一个非常不错的网站">
     <!-- 
         <meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
         将页面重定向到另一个网站 
      -->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

语义化标签

(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        在网页中html专门用来负责网页的结构
            所以在使用html标签时,应该关注的是标签的语义,而不是他的样式

            标题标签
                h1~h6 一共有六级标题,h1最重要,h6最不重要
                h1在网页中的重要性仅次于title标签,一般情况下,一个页面中只有一个h1
                一般情况下标题标签只会用到h1~h3
                标题标签都是块元素

            在页面中独占一行的元素称为块元素(block element)


     -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <!-- 
        hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup
     -->
     <hgroup>
         <h1>回乡偶书</h1>
         <h2>其一</h2>
     </hgroup>
    <!-- 
        p标签表示页面中的一个段落
     -->
     <p>在p标签中的内容表示一个段落</p>
     <p>在p标签中的内容表示一个段落</p>
     <!-- 
         em标签用于表示语音语调的加重

         在页面中不会独占一行的元素称为行内元素(inline element)
      -->
     <p>今天天气<em>真</em>不错!</p>
     <!-- 
         strong表示强调重要内容
      -->

     <p>你今天必须要<strong>完成作业</strong>!</p>

     鲁迅说,
     <!-- 
         blockquote表示一个长引用
      -->
     <blockquote>
         这句话我从来没有说过
     </blockquote>
     <!-- q表示一个短引用 -->
     子曰<q>学而时习之,不亦乐乎</q>
     <!-- 
         br表示页面中换行
      -->
     <br>
    今天天气真不错4
</body>
</html>

(2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        块元素(block element)
            在网页中一般通过块元素对页面进行布局
        行内元素(inline element)
            行内元素主要用来包裹文字

            一般情况下会在块元素中放行内元素,而不会在行内元素中块元素
            块元素中基本什么元素都能放
            p元素中不能放任何块元素

        浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正
     -->
    
</body>
</html>

(3)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!-- 
        布局标签(结构化语义标签)
     -->
     <!-- 
         header表示网页头部
         main表示网页主体(一个页面中只会有一个main)
         footer表示网页的底部
         nav表示网页中的导航
         aside和主体相关的其他内容(侧边栏)
         article表示一个独立文章

         section表示一个独立的区块,上边的标签都不能表示时用section

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

     <header>

     </header>
    
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!-- 
        列表(list)
        在html中也可以创建列表,html列表一共有三种
            1.有序列表
            2.无序列表
            3.定义列表

        有序列表,使用ol标签来创建有序列表
            使用li来表示列表项

        无序列表,使用ul标签来创建无序列表
            使用li来表示列表项
        
        定义列表,使用dl标签来创建一个定义列表
            使用dt来表示定义内容
            使用dd来对内容进行解释说明

        列表之间可以互相嵌套





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

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


     </ul>

     <dl>
         <dt>结构</dt>
         <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
         <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
         <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
     </dl>
     <ul>
         <li>
             aa
             <ul>
                 <li>aa-1</li>
             </ul>
         </li>
     </ul>
    
</body>
</html>

超链接

(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>

    <!-- 

        超链接可以让我们从一个页面跳转到其他页面,或者是当前页面的其他内容

        使用a标签来定义超链接
            属性;
                herf 指定跳转的目标路径,值可以是一个外部网站,也可以写一个内部页面的地址

        超链接也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素
     -->
    <a href="https://www.baidu.com">超链接</a>
    <br>
    <a href="07列表.html">超链接2</a>
</body>
</html>

(2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        target属性,用来指定超链接打开的位置,可选值
            self 默认值 在当前页面打开超链接
            blank 在一个新的页面中打开超链接
     -->
    

    <a href="07列表.html"target="blank">超链接</a>
    <br><br>
     <a href="#bottom">去底部</a>
     <br><br>
     <a href="#p3">去第三个自然段</a>

     <br><br>
     
     <p>在这场没有硝烟的战争中,一群可爱的“白衣天使”们,不顾自身安危,当国家需要她们的时候,冒着被感染的风险,义无反顾地冲在最前线。许多医护工作者被感染,有的为了抗击病毒牺牲了,但是他们无怨无悔。最令我敬佩的是钟南山爷爷,84岁高龄的他,本该在家安享晚年,却在抗击新冠病毒的一线,带领所有的医护工作者与大恶魔做斗争</p>
     <p>在这场没有硝烟的战争中,一群可爱的“白衣天使”们,不顾自身安危,当国家需要她们的时候,冒着被感染的风险,义无反顾地冲在最前线。许多医护工作者被感染,有的为了抗击病毒牺牲了,但是他们无怨无悔。最令我敬佩的是钟南山爷爷,84岁高龄的他,本该在家安享晚年,却在抗击新冠病毒的一线,带领所有的医护工作者与大恶魔做斗争</p>
     <p id="p3">在这场没有硝烟的战争中,一群可爱的“白衣天使”们,不顾自身安危,当国家需要她们的时候,冒着被感染的风险,义无反顾地冲在最前线。许多医护工作者被感染,有的为了抗击病毒牺牲了,但是他们无怨无悔。最令我敬佩的是钟南山爷爷,84岁高龄的他,本该在家安享晚年,却在抗击新冠病毒的一线,带领所有的医护工作者与大恶魔做斗争</p>
     <p>在这场没有硝烟的战争中,一群可爱的“白衣天使”们,不顾自身安危,当国家需要她们的时候,冒着被感染的风险,义无反顾地冲在最前线。许多医护工作者被感染,有的为了抗击病毒牺牲了,但是他们无怨无悔。最令我敬佩的是钟南山爷爷,84岁高龄的他,本该在家安享晚年,却在抗击新冠病毒的一线,带领所有的医护工作者与大恶魔做斗争</p>
     <!-- 在开发中可以将#作为超链接的路径的占位符使用 -->
     <a href="#">这是一个新的超链接</a>

     <br><br>

     <!-- 可以使用javascript:;来作为herf的属性,此时点击这个超链接什么也不会发生-->
     <a href="javascript:;">这是一个新的超链接</a>

     
     <br><br>


    <!-- 
        可以直接将超链接的herf属性设置为#,这样点击超链接以后,页面不会发生跳转,而是转到当前页面顶部的位置

        可以跳转到页面的指定位置,只需要将herf属性设置#目标元素的id属性

        id属性(唯一不重复的)
            每一个标签都可以添加一个id属性
            id属性就是元素唯一标识,同一个页面中不能出现重复的id属性
     -->
     <a id="bottom" href="#">回到顶部</a>
</body>
</html>

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        图片标签用于向当前页面中引入一个外部图片
        使用img标签来引入外部图片,img标签是一个自结束标签
        img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)
        属性;
            src 属性指定的是外部图片的路径(路径规则和超链接一样)

            alt 图片的描述,这个描述默认情况下不会显示,有些浏览器无法加载时现实搜索引擎会根据alt中的内容来识别图片
               如果不写alt属性,则图片不会被搜索引擎所收录

            width 图片的宽度(单位是像素)
            height图片的高度
                宽度和高度如果只修改一个,则另一个会等比例缩放

            注意;
                一般情况下在pc端,不建议修改图片大小,需要多大图片就裁多大
                但是在移动端,经常需要对图片进行缩放(大图缩小)


        图片的格式;
            jpeg(jpg);支持的颜色比较丰富,不支持透明效果,不支持动图
                    一般用来显示照片

            gif;支持颜色较少,支持简单透明,支持动图
                适合表示颜色单一的图片

            png;支持颜色丰富,支持复杂透明,不支持动图
                适合颜色丰富,复杂透明图片(专为网页而生)

            webg;这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
                  它具备其他图片所有优点,而且文件特别小
                  缺点;兼容性不好
            
            base64;将图片使用base64进行编码,这样可以将图片转换为字符,通过字符的形式来引入图片
                   一般都是一些需要和网页一起加载的图片才会使用base64


            效果一样,用小的
            效果不一样,用效果好的

     -->
     <img src="" alt="">
</body>
</html>

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        内联框架,用于向当前页面中引入一个其他页面
            src指定要引入的网页的路径
            frameborder 指定内联框架的边框
     -->
     <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
     <h1>hello</h1>
</body>
</html>

音视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        audio 标签用来向页面中引入一个外部的音频文件
            音视频文件默认情况下不允许用户自己控制播放停止的

            属性;
                controls 是否允许用户控制播放
                autoplay 音频文件是否自动播放
                    如果设置了autoplay 则音乐会再打开页面时自动播放,但是大部分浏览器都不会自动对音乐进行播放
                loop 音乐是否循环播放

     -->
    <!-- <audio src="./"  controls></audio> -->
    <!-- 除了通过src来指定外部文件的路径以外,还可以通过source来指定文件 -->
    <!-- <audio controls
        对不起,您的浏览器不支持播放音频,请升级浏览器
    
         < source src="./">
    </audio> -->

    <!-- <embed src="./source./audio.mp3" type="audio /mp3" width="200" height="100"> -->

        <!-- 
            使用video标签来向网页中引入视频
            使用方式和audio 类似
         -->

        <video  src=""></video>


</body>
</html

Q.E.D.