1、HTML基本结构
html<!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>
</body>
</html>
- <!DOCTYPE html>
- 文档类型定义DTD
- 作用
- 告诉浏览器解析器知道该使用哪种语法解析页面；
- 不是标签，是一条声明语句；
- 必须写在HTML文档的第一行；
- 例<!DOCTYPE html>用HTML5的语法来解析HTML文档
- <html lang=“en”> 网页的整理文件，根元素
- <head>网页的头部信息，不会显示在网页中
- <meta charset=“UTF-8”>网页的元信息
- charset属性：字符集
- UTF-8：万国码，国际通用编码
- ASCII：0-9数字、字母大小写、一些特殊字符
- GBK：汉字国际扩展码，全部中文字符
- gb2312：只针对简体中文
- <title>网页标题
- <body>网页主体元素
常用的HTML标签
1、块级标签
- div标签 搭建网页结构的基本元素
- 语法
<div>[content]</div>- 特点
- 宽度默认撑满整个父元素
- 高度默认由内容撑开
- 独立成行——垂直布局
- 标题标签 h系列
h1~h6大小依次减小，重要程度依次减弱;h1标签在同一个页面中只能使用1次，其他标签可以重复使用- 语法
<h1>title</h1> <h2>title</h2> <h3>title</h3> <h4>title</h4> <h5>title</h5> <h6>title</h6>- 特点
- 宽度默认撑满整个父元素
- 高度默认撑满整个父元素
- 独立成行——垂直布局
- 自带文字加粗效果
- 自带间距
- 段落标记 p标签
- 语法
<p>段落内容</p>- 特点
- 宽度默认撑满整个父元素
- 高度默认由内容撑开
- 独立成行——垂直布局
- 自带间距
- 其他标签
- br标签 强制换行标签 空元素
- 专门用来实现换行，不能设置其他样式，不参与分类；不产生新段落的情况下换行
- 语法
<br /> <br>- hr标签 水平分割线 空元素
块级标签，默认自带间距和边框
<hr> <hr />
- br标签 强制换行标签 空元素
2、行级标签——span、b、strong、i、em、sup、sub、del
文本格式化标签
- span标签：万能标签 用于区分样式
- b标签：是一个实体标签，被包围的字符显示粗体效果
- strong标签：是一个语义标签，作用加强语气，表示重要的文本，在文本中显示粗体效果
- sub标签：下标
- sup标签：上标
- del标签：删除线
特点
- 宽度默认由内容撑开
- 高度默认由内容撑开
- 默认横向显示——水平布局，相邻的行级元素在同一行显示，当一行排不下时才会换行
- 换行和空格会被解析
3、行块级标签——img
- img标签 图片标签
- 语法
<img src="图片路径" title="图片标题" alt="替换文本" width ="" height=""/>- src属性：图片的存储位置
- title属性：鼠标悬停时的提示文字
- alt属性：如果浏览器中无法正常载入图像，则使用alt属性值替代图像
- width属性：宽度
- height属性：高度
- 使用
- 占位，可以撑开父元素
- 属于网页内容，有实际意义，是必不可少的
- 不可重复
- 可以被搜索引擎检测到
- 特点
- 默认水平布局
- 换行和空格会被解析
- 元素可以设置宽度和高度