一、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>
在浏览器中:
![](https://i-blog.csdnimg.cn/blog_migrate/c98a0f6101698bf2b91fc1364ee3d863.png)
语义:用标题标签包裹的内容就是标题
解释:在浏览器中显示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 转成行内块元素 |