前端===>HTML

最新推荐文章于 2023-03-01 15:23:29 发布

阿公带你飞。

最新推荐文章于 2023-03-01 15:23:29 发布

阅读量246

点赞数

本文链接：https://blog.csdn.net/weixin_44872216/article/details/99176961

版权

本文详细介绍了HTML的基本结构和常用标签，包括标题、段落、换行、字符实体、块级和行内标签、图像、链接、列表、表单以及表格的使用方法。重点讲述了各个标签的属性和作用，以及在网页设计中的重要性。

摘要由CSDN通过智能技术生成

html基本结构

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

<!-- 这是一段注释  -->

快捷键 !+tab

html标签

通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

<h1>这是一级标题
<h2>这是二级标题
<h3>这是三级标题
<h4>这是四级标题
<h5>这是五级标题
<h6>这是六级标题

html段落标签

<p>一个段落含有默认的上下间距

html换行标签

<br>
直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入
来强制换行

html字符实体

&nbsp 空格的字符实体 html中只能输入一个空格,在段落前想缩进两个文字的空格
“<” 和 “>” 的字符实体为 < 和 >
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体

html块标签、含样式的标签

html块标签

1、<div> 标签块元素，表示一块内容，没有具体的语义。

2、<span> 标签行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签

1、<em> 标签行内元素，表示语气中的强调词

2、<i> 标签行内元素，表示专业词汇

3、<b> 标签行内元素，表示文档中的关键字或者产品名

4、<strong> 标签行内元素，表示非常重要的内容

html图像标签、绝对路径和相对路径

html图像标签
- <img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
  - src属性定义图片的引用地址
  - alt属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
    <img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
- ./ 表示当前文件所在目录下
- ../ 表示当前文件所在目录下的上一级目录