HTML5 | 青训营笔记

Jokerlkc
118 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

01 HTML5

HTML入门

HTML：超文本标记语言，是一种专门对网页信息进行规范化展示的语言。

超文本：文本信息、图片、声音、视频、超链接等。

标记：标签的体现。

开发工具

使用VScode

配置插件：

  1. Debugger for Chrome （用于在谷歌浏览器中预览效果）
  2. Auto Close Tag（自动补全）

课程代码

<html>
    <head>
        <!-- head中的信息为一些浏览器中的配置标签 -->
        <!-- 单标签 告诉浏览器使用UTF-8进行编码 -->
        <meta charset="UTF-8"/>
        <!-- 网页名标签 -->
        <title>这是我的第一个HTML</title>
    </head>

    <body>
        <!-- body中的信息会直接展现在用户面前 -->
        This is my first HTML
    </body>
</html>

Head 标签的子标签

课程代码

<!DOCTYPE html>
<!-- HTML5的文档约束（DTD） -->
<html>
<head>
    <meta charset="UTF-8">


    <title></title>

    <!-- 搜索引擎优化 使其能被关键词搜索 可以设置多个-->
    <meta name="author" content="朱自清，张三"/>

    <!-- 自动刷新网页/跳转网页 -->
    <!-- 有两个参数第一个参数为等待多少时间（s）跳转 -->
    <!-- 第二个参数为跳转地址 -->
    <!-- 中间使用分号（;）隔开 -->
    <meta http-equiv="refresh" content="2;http://www.baidu.com"/>

    <!-- 禁止网页缓存到本地 -->
    <!-- 节省本地空间，没必要-->
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
  
    <!-- 还会有引入CSS、JS等文件的代码 -->

</head>
   
<body>


</body>
</html>

基本标签

body中基本标签

课程代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title></title>
  
</head>
<body>
    <!-- 一到六级 标题 -->
    <!-- 自动加粗加黑（自动换行） -->
    <!-- align 标签属性 定义标签内容靠左右居中对齐 -->
    <h1 align="center">123</h1>
    <h2 align="right">123</h2>
    <h3 align="left">123</h3>
    <h4>123</h4>
    <h5>123</h5>
    <h6>123</h6>

    <!-- 分隔线 标签 <hr/> -->
    <!-- width 标签属性 定义内容出现的宽度（水平方向）-->
    <!-- color 标签属性 定义内容出现的颜色 -->
    <!-- size 标签属性 定义内容垂直方向的大小 -->
    <hr/>
    <hr width="500px"/>
    <hr width="500px" align="right"/>
    <hr width="500px" color="blue"/>
    <hr width="500px" size="10px" color="green"/>

    <!-- 段落 标签 -->
    <p>阿里巴巴</p>

    <!-- 换行标签 -->

    <br />

    <!-- 空格标签 -->
    <!-- &nbsp(牛逼三炮) -->   
    &nbsp;

    <!-- 预文本标签（灵活性太大） -->
    <!-- 可以识别换行和空格 -->
    <pre>
        123
         123
          123

    </pre>


</body>
</html>

常用的小标签

课程代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title></title>
  
</head>
<body>
    <!-- 常用小标签 -->
  
    <!-- 文本下划线 -->
    <u>下划线</u>

    <!-- 文本斜体标签 -->
    <i>斜体</i>

    <!-- 文本加粗加黑 -->
    <b>加粗加黑</b>

    <!-- 删除线标签 -->
    <del>删除线</del>

    <!-- 文本上标和下标标签 -->
    <!-- 上标 -->
    2<sup>3</sup>
    <!-- 下标 -->
    2<sub>3</sub>

    <!-- 字体变小标签 -->
    <small>阿里巴巴</small>

    <!-- 字体放大标签 -->
    <big>阿里巴巴</big>

    <!-- 字体标签 -->
    <!-- color 颜色 size 大小 face 字体 -->
    <font color="red" size="250px" face="楷体">阿里巴巴</font>

    <!-- 封装内容 待补充 -->
    <span>腾讯</span>

    <hr/>   

    <!-- 有序列表 无序列表 自定义列表 标签 -->
    <!-- 有序列表 ol 标签-->
    <!-- 定义序号属性 type -->
    <!-- 作用：
         1.导航栏的布局
         2.树形菜单 
    -->
    <ol>
        <li>c++</li>
        <li>c</li>
        <li>python</li>
    </ol>
    <ol type="A">
        <li>c++</li>
        <li>c</li>
        <li>python</li>
    </ol>

    <!-- 无序列表 ul标签 -->
    <!-- 定义序号图形 type -->
    <ul>
        <li>c++</li>
        <li>c</li>
        <li>python</li>
    </ul>

    <!-- 自定义列表 dl标签 -->
    <!-- 可以制作树形菜单 -->
    <dl>
        <dt>c++</dt>
        <dd>c</dd>
        <dd>python</dd>
    </dl>


    <!-- 跑马灯 marquee标签 滚动 -->
    <!-- direction属性 跑马灯的方向 -->
    <!-- scrollamount属性 跑马灯速度 px每秒 -->
    <marquee >我是跑马灯</marquee>
    <marquee direction="right">我是右跑马灯</marquee>
    <marquee scrollamount="20px">我是跑马灯</marquee>
</body>
</html>

超链接标签

课程代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <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>
    <!-- 超链接的作用 -->
    <!-- 
        不能自动换行
        herf:指定跳转目标资源的位置
        target:打开网页的方式
        1. 实现不同页面的跳转
        2. 实现锚点功能（定位页面位置）
            通过href+#定位name的位置
            定义链接的name
        小tip，br*20 快速复制20个br，与python语法类似
     -->
     <!-- 跳转互联网的网站 -->
     <a href="http://www.baidu.com">百度</a>

     <!-- 跳转本地文件 -->
     <a href="test1.html">本地文件</a>

     <!-- 新建标签页打开网页 -->
     <!-- target属性下的blank -->
     <a href="http://www.baidu.com" target="blank">新建标签页打开网页</a>

     <!--  -->
     <a href="#bottom" name="top">返回底部</a>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br>

     <a href="#top" name="bottom">返回顶部</a>
</body>
</html>

图片标签

课程代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <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>
    <!-- 图片标签 -->
    <!-- 图片不会自动换行 -->
    <!-- 属性介绍 
        title 图片浮动文字标题
        height 高度
        width 宽度
        单独指定高度和宽度时默认等比例变大变小
        border=边框px 图片的边框
        alt="图片没了" 图片显示错误（无法正常使用的时候）
        align 调整图片的位置，必须要有参照物（前后文内容）

     -->
    <!-- <img src="img/1569046333101.jpeg"/> -->
  
    <!-- 相对路径 -->
    <img src="img/1569046333101.jpeg"/>
    <img src="img/1569046333101.jpeg" title="02大法好"/>
    <img src="img/156904633311.jpeg" alt="图片没了"/>

    <!-- 绝对路径 -->
    <img src="G:\coder\HTML-CSS-JS\img\1569046335698.jpeg"/>

    <!-- 网络路径 -->
    <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1816276065.webp"/>


</body>
</html>
avatar
文章
阅读
粉丝