网页代码基本结构以及html标签的使用

头顶一尘不染

已于 2022-11-16 19:32:09 修改

阅读量1.1k

点赞数 2

文章标签： html css 前端

于 2022-11-16 19:31:57 首次发布

本文链接：https://blog.csdn.net/LYC010727/article/details/127890658

版权

简单的网页结构以及标签的使用

简单的网页结构

下面这串代码是最最简单的网页结构，每个前端网页代码只有一个html标签，所有的网页代码都是编写在标签中间的。

<html>
    <!-- head标签 保存一些与那系信息 它里面的内容，用户是看不到的
    主要是帮助浏览器编译代码
    -->
    <head></head>
    <!-- body标签 书写网页的主体内容，所有的给用户看的，都写在body里面 -->
    <body>
        我的第一个页面
    </body>
</html>

快速注释

在这里，我们如果需要对代码进行注释，有一个快捷键可以使用，Ctrl键+/进行快速注释

<!-- Ctrl+/可以快速注释 -->

title标签

title标签是标题标签，标签中间编写的是浏览器标题栏显示的标题。
<title>这里写标题</title>

meta标签

meta标签是一个自结束标签，也可以存一些元信息，帮助浏览器编译代码。自结束标签有两种写法如下。其中可以定义一些属性，如：charset是字符集属性，相当于设置一个密码本，设置charset就是为了不出现乱码的情况。
<meta>/<meta />

完整的网页结构

完整的网页结构如下：其中！DOCTYPE是文档申明，表示你自己是按照代码规范来编写代码，需要浏览器也要按照代码规范来编译。

<!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>

</body>

</html>

实体

1、什么是实体？
在编写网页的时候，有一些字符使我们没办法打出来的，例如空格、大于号，这些字符已经提前被编译器或者浏览器征用，我们不能正常使用，我们要用一些额外的字符代替，这些额外的字符就叫实体
2、实体的语法
&+实体的名称
3、常用的一些实体
参考W3School网站html标签参考网站

img标签

img标签，可以用来引入外部的图片，也是一个自结束标签，它有以下4个属性：
src：引入图片的路径。
alt：是对图片的描述，正常情况下，alt的内容是不显示的，当图片的路径出现问题了，图片引入不成功，alt就会显示。它可以帮助浏览器检索图片，所以我们一定要养成写alt的习惯。
width 设置图片的宽度。
height 设置图片的高度
但是在一般情况下，我们不会同时设置width和height，而是只要单独设置width或者height，另外一个就会自适应调整。

<img src="" alt="" width="" height="">

html的规范

1、html标签有成双成对的，也有自结束标签
2、html中是不区分大小写的，但一般用小写居多
3、标签可以嵌套，但不可以交叉嵌套
4、养成良好的注释的习惯，注释要简洁、明了，注释也不可以嵌套
5、html，css，js都是一种宽泛的语言，它的容错率比较高，它会给你自动纠错，但我们要尽量避免，防止网站的性能有所影响；而且它改的不一定是你想要的