html基本知识点-CSDN博客

本文链接：https://blog.csdn.net/cloarl/article/details/129168387

一、HTML的基本框架

框架代码展示

在vs中创建整体框架的快捷方式是：shift+！然后按下enter键

<!-- shift+! -->
<!DOCTYPE html>
<!-- lang="en"  配置代码语言是英文 -->
<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>网页标题</title>
</head>
<body>
    书写网页的主体内容
</body>
</html>

1.1框架解释

<!DOCTYPE html>

文档声明，写在所有代码之前，位于第一行，告诉浏览器，我是按照html规范来编写内容，浏览器编译的时候也要按照规范去编译，免得出现乱码。

<html lang="en"></html>

lang="en" 写在html后面表示配置代码语言是英文

html的根标签，写在<!DOCTYPE html>下面，是双标签，一个网页只有一个根标签，所有的标签都要写在根标签里面。

<head></head>

head标签，双标签，卸载里面内容，用户是看不到的，是给浏览器看的，可以辅助浏览来解析代码，可以更快的显示界面，里面包括：

<title></title>

语义：表示网页的标题出现在网页标题栏中，可以帮助浏览器更快的搜索到网页，可以帮助到网页推广部门推广

<meta charset="UTF-8">

语义：设置字符集；meta 是单标签，主要是配合属性以及对应的属性值，来帮助浏览器解析代码

比如：charset="属性值" 解释：

属性写在开始标签或者单标签里面

属性值写在属性后，双引号内部表示属性的值

charset="UTF-8" 表示的就是使用万国码来编译

<meta http-equiv="X-UA-Compatible" content="IE=edge">

语义：规定以当前浏览器的最高版本去解析代码，主要用于ie浏览器，当遇到时就告诉浏览器使用最高的版本去解析

<meta name="viewport" content="width=device-width, initial-scale=1.0">

语义：设置完美视口，一般是配合移动端的网站

<body></body>

body标签，是双标签，写网页主体内容所有用户看到的内容都在body标签内，网页所展示的内容都在body标签中书写

二、html基本的标签

布局标签

<header>网页的头部
      <nav>顶部导航</nav>
      <div>快速导航</div>
    </header>
    <main>网页主体</main>
    <footer>网页的底部</footer>

都是双标签

nav 网页的导航

aside 和主体相关的内容，侧边栏

article 文章之类的

section 独立的区块，上面的标签都不合适，就用这个

标题标签

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

在浏览器中：

语义：用标题标签包裹的内容就是标题

解释：在浏览器中显示h1-h6语义是逐步降低的，h1语义最重，一般情况下，一个页面只有一个h1，常用的是h1-h3，

默认样式：字体有加粗，h1-h6,字体是逐步减小，标题标签是独占一行，行与行之间有较大的间隔

段落标签

<p></p>

语义：段落标签用于表示内容中的一个自然段，双标签

在浏览器中的默认格式独占一行，行与行之间有较大的间隔，它只能用来包裹文字或者图片

强调标签

3.1 em标签

<em></em>

语义：语音语调的一个加重强调

默认样式：字符变斜体、不会独占一行

3.1 strong标签

 <strong></strong>

语义：表示强调，内容重要性强调

默认样式：字符加粗、不会独占一行

两者的区别

1、默认样式上来看

2、语义：em 语音语调的强调，strong内容重要性的强调

3、一般情况下，我们在强调时，这两个标签都用，不做特别的细分

引用标签

1.长引用

<blockquote></blockquote>

引用别人说的话会换行

默认样式：引用话前面会有间隔

2.短引用

<q></q>

引用别人说的话，不会换行

默认样式：加了双引号

换行标签

<br>

强制换行，是单标签

分割线

<hr>

在浏览器中显示一条分割线

del标签

<del></del>

在所写内容上加上一天删除线

居中

<center></center>

标签中间所写内容在浏览器中居中对齐，可以嵌套

盒子标签

<div>
     
    </div>

没有具体的语义，多用于包裹其他标签，会独占一行

span标签

<span></span>

没有具体的语义，多用于包裹要修改内容，为以后用css修改内容做准备

列表

1.有序列表：用ol标签创建，li表示列表项

<ol>
      <li></li>
  </ol>

2:无序列表用ul标签创建，li表示列表项

默认样式：有项目符号，项目符号默认是小圆点，项目符号前也有间隔

<ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>

3:定义列表用dl标签创建，使用dt下定义，用dd对定义进行解释说明

<dl>
      <dt>下定义（小标题）</dt>
    
      <dd></dd>
      <dd></dd>
      <dd></dd>
    </dl>

4.注意：

1、列表之间是可以互相嵌套的

2、可以使用type属性更改项目符号

ol常用的1、a、A、I

ul常用：

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

3、默认样式，li有项目符号，上下左边都有间隔

4、最常用的ul，ol,在实际项目过程中，一般不做区分

图片标签

<img src="" alt="">

src：图片的地址，alt：图片没有显示出来时显示的内容，可以设置宽高，不过一般只设置宽度，浏览器会等比例放大或者缩小图片

12.1地址的划分

绝对路径无论你的html文件在哪里，只要写对地址，图片肯定能引进来

相对路径写的路径地址跟你的html文件位置有关

./ 你的html文件跟引入图片在同一目录下默认就是./,可以省略

../ 你的html文件跟引入图片在不同一目录下，需要跳出当前目录,

如果当前目录还没有，继续../跳出，直到找到为止

三、元素的分类

块元素主要是用来布局

特点：

1、会独占一行

2、块元素宽度默认是父元素的100%，如果你设置宽高，你设置多少就是多少

3、块元素高度默认是被内容撑开的

常用的块元素：h1-h6,p,div,header,main,footer,nav,·····

行内元素主要是用来包裹文字的

特点：

1、不会独占一行

2、行内元素的宽高都是被内容撑开的，不可以自定义宽高

常用的行内元素：span、em、strong、a·····

行内块元素目前主要用的行内块元素就是图片标签

特点：

1、即有块元素的特点又有行内元素的特点

不会独占一行，但可以设置宽高

相互之间的转换

display 实现不同元素的相互转换

可选值：

none 隐藏元素

block 转成块元素

inline 转成行内元素

inline-block 转成行内块元素

html基本知识点

一、HTML的基本框架

框架代码展示

1.1框架解释

二、html基本的标签

布局标签

标题标签

段落标签

强调标签

3.1 em标签

3.1 strong标签

两者的区别

引用标签

1.长引用

2.短引用

换行标签

分割线

del标签

居中

盒子标签

span标签

列表

1.有序列表：用ol标签创建，li表示列表项

2:无序列表用ul标签创建，li表示列表项

3:定义列表用dl标签创建，使用dt下定义，用dd对定义进行解释说明

4.注意：

图片标签

12.1地址的划分

三、元素的分类

块元素主要是用来布局

行内元素主要是用来包裹文字的

行内块元素目前主要用的行内块元素就是图片标签

相互之间的转换

使用块元素和行内元素布局时注意点：

1、块元素是布局元素，里面什么都能放，能放块元素，能放行内元素，行内块元素

2、行内元素一般就用来包裹文字，里面不能放块元素

3、特殊的块元素 p 不能放块元素，只能放文字或者图片

4、特殊的行内元素 a 里面什么都能放，除了它自己

html基本知识点

一、HTML的基本框架

框架代码展示

1.1框架解释

二、html基本的标签

布局标签

标题标签

段落标签

强调标签

3.1 em标签

3.1 strong标签

两者的区别

引用标签

1.长引用

2.短引用

换行标签

分割线

del标签

居中

盒子标签

span标签

列表

1.有序列表：用ol标签创建，li表示列表项

2:无序列表 用ul标签创建，li表示列表项

3:定义列表 用dl标签创建，使用dt下定义，用dd对定义进行解释说明

4.注意：

图片标签

12.1地址的划分

三、元素的分类

块元素 主要是用来布局

行内元素 主要是用来包裹文字的

行内块元素 目前主要用的行内块元素就是图片标签

相互之间的转换

使用块元素和行内元素布局时注意点：

1、块元素是布局元素，里面什么都能放，能放块元素，能放行内元素，行内块元素

2、行内元素 一般就用来包裹文字 ，里面不能放块元素

3、特殊的块元素 p 不能放块元素，只能放文字或者图片

4、特殊的行内元素 a 里面什么都能放，除了它自己

2:无序列表用ul标签创建，li表示列表项

3:定义列表用dl标签创建，使用dt下定义，用dd对定义进行解释说明

块元素主要是用来布局

行内元素主要是用来包裹文字的

行内块元素目前主要用的行内块元素就是图片标签

2、行内元素一般就用来包裹文字，里面不能放块元素