HTML学习笔记（二）

最新推荐文章于 2023-02-04 20:54:59 发布

梦缘Z

最新推荐文章于 2023-02-04 20:54:59 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/Earthla_up/article/details/107236530

版权

一、HTML基本标签

1.文档声明 DOCTYPE

只需要记住：H5文档类型 <!DOCTYPE html>

2.< html >标签

html的根元素，用来包含html文档的所有元素

3.< head >标签

包含在头部的内容不会被显示的页面中，这里通常包含页面的编码，作者，页面的描述信息，js的导入，css的导入等信息。

4.< meta charset=“utf-8” >标签

用来声明当前文档的编码方式为UTF-8
“UTF-8” 是一种字符编码。如果你的网页出现了中文，但是你却没有使用UTF-8，那么你网页的中文内容将无法正常显示，会出现乱码的情况。

5.< title >标签

用来声明当前文档的标题，标题将会出现在浏览器的选项卡中。

6.< body >标签

所有想要显示在浏览器中的元素都被包含在该元素中。

以下为例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hello world</div>
</body>
</html>

显示结果：
在这里插入图片描述

二、HTML元素

1.元素组成

一个html是由一个开始标签，一个结束标签，以及内容组成。结束标签与开始标签类似，不过结束标签在尖括号内多了一个斜线。标签决定了其内容的特性。某些HTML元素具有空内容，大多数HTML元素可拥有属性。
例如：

开始标签	元素内容	结束标签
< p >	这是一个段落	< /p >
< a href=“default.htm” >	这是一个链接	< /a >
< br >	换行

注意：不要忘记使用结束标签，可能会产生不可预料的结果或错误。

2.块级元素（Block elements）【支撑起整个网页的结构】

（1）独占一行空间，用来布局段落，列表，导航菜单，脚注等结构；
（2）高度由内容决定、宽度占满窗口；
（3）宽、高可以设置。
如：div、html、body、h1-h5、p…

3.行内元素（Inline elements）【填充网页】

（1）与其他元素共享一行空间
（2）宽高由内容决定
（3）宽高无法设置
如：span、i、bold…

另：块级元素可以嵌套其他元素，行内元素不可以嵌套块级元素

4.空元素（ Empty elements）

只包含单个标签，通常用于在文档中插入部分内容，
例如 img ：
< div >< img src=“my.jpg” alt="">< /div >

5.替代元素（ replaced element ）

替代元素已经脱离了CSS的范畴，它们的表现不依赖CSS，典型的替换元素有< img >，< objec t>，< video >，< textare >，< input >，< audio >，< canvas >等。

三、HTML属性

元素也可以拥有属性，与元素相关的特性称为属性，属性由键值对组成。例如：name=“value”。属性信息不会出现在你的实际内容里。比如添加一个class属性用于识别元素，稍后也可以根据该属性进行一些样式信息的设定或者其他事情。
属性是由属性名和属性值组成，属性名与属性值之间使用等于号“=”分割，属性与属性之间使用空格“ ”分开，属性值通常使用单引号或者双引号括起来，属性一般用于开始标签。