浅谈html

HTML是什么？

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，是一门描述性语言，是一门非常容易入门的语言，简单来说，网页就是用HTML语言制作的。

HTML基本结构

html由文档声明和html文档组成

文档声明：告诉浏览器我们使用的是那个版本的html，方便浏览器解析文档。

html文档：程序员在html标签内部编写代码，包括head标签和body标签，head标签中存放一些元信息，不会在网页中呈现，body标签中的代码，会在网页中实现。

HTML标签

1、标签的编写规则

1. html标签是以尖括号包围关键字呈现的。
2. 标签一般是成对出现的，尖括号内没有斜线为开始标签，有斜线为结束标签。
3. html不区分大小写，建议小写。
4. 要重视标签的语义化

2、常用标签

2.1、head内部的常用标签

head中的常用标签

标签	描述
/* */	style内部的注释标签
<!--  -->	style外部的注释标签
<meta>	定义元素可提供的有关页面的元信息
<title></title>	定义文档标题，其内容全部当做文本处理
<link>	定义文档与外部资源的关系
<style></style>	定义文档的样式信息

2.2、body内部的常用标签

块级元素，默认独占一行或多行，通常用来布局结构 

特点：

1. 默认独占一行，从上向下排布。
2. 可以设置宽高、内、外边距值，默认宽度为父元素100%，高度被内容撑开。
3. 块级元素大多可以容纳其他元素。

body中的常用块级元素

标签	描述
<div></div>	块级盒子标签
<p></p>	段落标签
<hr>	水平线标签
<ol><li></li></ol>	有序列表+列表项
<ul><li></li></ul>	无序列表 + 列表项
<dl><dt></dt><dd></dd></dl>	定义列表 + 列表组 + 列表项

行内元素也称内联元素，大小看内容，常用来控制文本样式

特点：

1. 与相邻行内元素在同一行上。
2. 只有设置水平方向的padding、margin值有效，其他无效。
3. 行内元素只能容纳文本或者其他行内元素，a标签除外。

body中的常用行内元素

标签	描述
<em></em> <i></i>	斜体内容标签
<strong></strong> <b></b>	强调内容标签，加粗
<q></q>	短引用标签，给内容加双引号
<del></del>	删除线标签，给内容加删除线
<a href=""></a>	a标签，一般用来放超链接，地址放在href中
<span></span>	行内盒子标签

行内块元素，综合了行内元素和块级元素的特点

特点：

1. 与相邻行内元素、行内块元素在同一行上，从左到右排列。
2. 默认宽度是本身内容的宽度，元素之间默认有间距。
3. 可以设置宽高、内、外边距值。

body中的行内块元素

标签	描述
<img>	图片标签

2.3、元素之间的转化 

• 将元素转换为块级元素：display：block；
• 将元素转换为行内元素：display：inline；
• 将元素转换为行内块元素：display：inline-block；