HTML5学习笔记1

沐-风_

已于 2023-08-18 16:56:59 修改

阅读量127

点赞数

分类专栏：前端文章标签： html5

于 2023-08-18 08:55:40 首次发布

本文链接：https://blog.csdn.net/qq_35484691/article/details/132309049

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（1）第一个前端程序（记事本，后缀txt改HTML，用浏览器打开）

<html>
       <head>
              <title>我的第一个网页</title>
       </head>
       <body>
               你好，世界！
       </body>
</html>

（2）需要的工具

1、浏览器：火狐、谷歌（推荐）或IE
2、开发者工具：推荐vscode（打开速度快，而且使用方便）

（3）vscode打开文件与创建文件

1、选择文件夹
2、拖曳文件夹

（4）vscode插件拓展

1、open in browser

2、汉化

（5）生成浏览器文件.html的方法

输入一个叹号“！”然后回车

（6）vscode常用快捷键

1、代码格式化:Shift +Alt + F

2、向上或向下移动一行: At + Up 或 At + Down

3、快速复制一行代码:Shift + Alt + Up 或 Shift + Alt + Down

4、快速保存: Ctrl + S
5、快速查找:Ctrl + F
6、快速替换:Ctrl + H

HTML5简介与基础骨架

可用来做：网站，小程序，App,数据可视化

（1）HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言，用HTML5编写的文件，后缀以.html结尾。
HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如:<html> 标签有两种表现形式：
1、双标签，例如:<html></html>
2、单标签，例如:<img>

HTML5的DOCTYPE声明

（2）HTML5的基本骨架

HTML标签

head标签

body标签

title标签

meta标签

（3）标签之标题

生成h1~h6的快捷键：h$*6

正确使用标题

标题标签位置摆放

（3）标签之段落（p）、换行(br)、水平线(hr)

标签之段落

标签之换行

注意：p是双标签，br是单标签，<br/>代表结束

标签之水平线

注意：hr也是单标签

<body>
    <p>我是一个段落标签</p>
    <p> 如果你希望在不产生一个<br/>新段落是情况下换行</p>
    <hr color="" width="" size="" align=""/>    <!--创建水平线-->
    <hr color="blue" width="300px" size="40px">  <!--不设置align默认居中，也可设置为center-->
    <hr color="" width="" size="" align=""/>    <!--创建水平线-->
    <hr color="red" width="300px" size="40px" align="left">
    <hr color="" width="" size="" align=""/>    <!--创建水平线-->
    <hr color="orange" width="300px" size="40px" align="right">
</body>

在这里插入图片描述

标签之图片

在这里插入图片描述

注意：调整图片大小，一般只规定宽度不规定高度（规定高度容易造成图片失真）

（1）图片的绝对路径

在这里插入图片描述

（2）图片的相对路径

在这里插入图片描述

子级：

注：同级关系./可以省略

父级

（3）图片的网络路径

具体的网络地址如：https://img.zcool.cn/community/01869958648ad7a801219c77b96611.jpg@1280w_1l_2o_100sh.jpg

标签之超文本链接

在这里插入图片描述

超链接属性

在这里插入图片描述

例如：

<body>
    <a href="https://www.bilibili.com/">哔哩哔哩</a>
    <a href="https://www.csdn.net/">CSDN</a>
    <a href="https://www.bilibili.com/">
        <img src="https://i-blog.csdnimg.cn/blog_migrate/7afcb317a6b198b82901e926527064b2.png" width="200px" alt="">
    </a>
</body>

效果如下：
`
哔哩哔哩
 CSDN

标签之文本

常用的文本标签

在这里插入图片描述

<body>

    <p>白菜</p>
    <p>我喜欢吃<em>白菜</em></p>
    <i>i白菜</i>
    <b>b白菜</b>
    <strong>strong白菜</strong>
    <span>span白菜</span>
    <del>del白菜</del>

</body>

效果如下：
在这里插入图片描述

注：标签之间可以嵌套。

列表标签之有序列表

有序列表是一列项目，列表项目用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。

<body>

   <ol>
    <li>我们无论遇到什么困难</li>
    <li>勇敢的去面对它</li>
    <li>加油</li>
    <li>奥里给！！！</li>
   </ol>
    
</body>

在这里插入图片描述

type属性

在这里插入图片描述
如下：

   <ol type="I">
    <li>我们无论遇到什么困难</li>
    <li>勇敢的去面对它</li>
    <li>加油</li>
    <li>奥里给！！！</li>
   </ol>

在这里插入图片描述

有序列表嵌套

    <ol type="A">
        <li>我们无论遇到什么困难</li>
        <ol type="a">
            <li>大的困难</li>
            <li>小的困难</li>
        </ol>
        <li>勇敢的去面对它</li>
        <li>加油</li>
        <li>奥里给！！！</li>
    </ol>

在这里插入图片描述

列表标签之无序列表

在这里插入图片描述

<body>

    <ul>
        <li>我们无论遇到什么困难</li>
        <ul>
            <li>大的困难</li>
            <li>小的困难</li>
        </ul>
        <li>勇敢的去面对它</li>
        <li>加油</li>
        <li>奥里给！！！</li>
    </ul>


</body>

在这里插入图片描述
注：无序列表也是可以嵌套的。

type属性

<body>

    <ul type="disc">
        <li>加油，奥里给</li>
        <li>加油，奥里给给</li>
        <li>加油，奥里给给给</li>
        <li>加油，奥里给给给给</li>
    </ul>
    <ul type="circle">
        <li>加油，奥里给</li>
        <li>加油，奥里给给</li>
        <li>加油，奥里给给给</li>
        <li>加油，奥里给给给给</li>
    </ul>
    <ul type="square">
        <li>加油，奥里给</li>
        <li>加油，奥里给给</li>
        <li>加油，奥里给给给</li>
        <li>加油，奥里给给给给</li>
    </ul>
    <ul type="none">
        <li>加油，奥里给</li>
        <li>加油，奥里给给</li>
        <li>加油，奥里给给给</li>
        <li>加油，奥里给给给给</li>
    </ul>


</body>

在这里插入图片描述

无序列表应用场景(应用场景比有序列表广泛)

在这里插入图片描述

无序列表快捷键

快速生成ul+li布局：ul>li*3(数字根据自己需要li的数量修改)
在这里插入图片描述

标签之表格

在这里插入图片描述
表格由“行，列，单元格”组成，单元格的特点是“同行等高，同列等宽”。

注释

单行注释：
在 HTML 中可以使用在代码中添加注释，之间的所有内容都会被视为注释。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head> <!-- head 开始 -->
      <meta charset="UTF-8"> <!-- 当前文档采用UTF-8编码 -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>你是最棒的！</title>
</head> <!-- head 结束 -->
<body> <!-- body 开始 -->
      <!-- 一段文本 -->
      <p>单行注释的写法</p>
</body> <!-- body 结束 -->
</html>