HTML
介绍:
超文本标记语言 (HyperText Markup Language)
特性:
语义化:
根据页面的结构,选择适合的HTML标签(这样做的好处是1.对机器友好:更适合爬虫爬取有效信息,有利于网站优化,并支持读屏软件,根据文章生成目录等。2.对开发者友好,增强可读性,结构更清晰,更好看出网页的结构,有利于团队代码开发与维护)
常见的语义化标签:
<header>用于头部</header>
<main>用于主要部分</main>
<section>次要部分</section>
<footer>尾部</footer>
标签:
HTML标签中,有双标签和单标签两种。其中,单标签由一个标签组成;双标签由“**开始标签”和“结束标签”**组成。
<meta charset="UTF-8"/>单标签
<img/>单标签
<div>双标签</div>
新的API:
新增了 音频(用于媒介回放的video和audio元素)、图形(绘图canvas元素)、离线(通过创建cache manifest文件,创建应用程序缓存)、本地存储(localStorage存本地,sessionStorage临时存储,关闭网页就清除)
结构:
<!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>
<div>
这里用来构建网站内容
</div>
<!---注释的内容写这个标签里(快捷键 shift+/ )--->
</body>
</html>
-
<!DOCTYPE html> 是 HTML5 的文档类型声明,它告诉浏览器当前页面是使用 HTML5 规范编写的,HTML5 是最新的 HTML 版本,拥有更多的功能和优化,因此推荐在新的 Web 页面中使用它
-
<html lang="en"></html> 向搜索引擎表示该页面是html语言,并且语言为英文网站,其"lang"的意思就是“language”,语言的意思,而“en”即表示english 你的页面如果是中文页面,可将其改为 <html lang="zh"> zh即表示中文
-
<meta>标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。 META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
-
<title>标签定义文档的标题 也就是浏览器网站的标题 定义浏览器工具栏中的标题 提供页面被添加到收藏夹时的标题 显示在搜索引擎结果中的页面标题
-
<body> 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等) </body>
以上就是html5最基本的结构了
常见的meta标签:
-
<meta name="viewport" content="width=device-width"/> viewport用于移动端适配
-
<meta name="keywords" content="HTML,CSS"/>keywords突出网站关键字
-
<meta charset="utf-8"/>charset描述HTML文档类型
行内元素、块元素、行内块元素
行内元素:
1.当元素与元素相邻时,不会换行,会拼接在一起,一行多个
2.无法设置行内元素的宽高、上下内外边距
3.一个行内元素可以包括行内元素和文本内容,a标签特殊,可以放块级元素、行内块元素,但不能再放一个a标签
4.宽度默认随文本变化
块元素:
1.一个块级元素占据一整行
2.可以设置宽高和内外边距
3.块级元素可以包含行内元素、块级元素、行内块元素和文本内容,但h1-h6和p元素只能包含文本
4.宽高默认继承父元素
行内块元素:
1.独占一行
2.可以设置宽高和边距
常见的行内块:
<img/>
<input/>
<td></td>
但h1-h6和p元素只能包含文本
4.宽高默认继承父元素
行内块元素:
1.独占一行
2.可以设置宽高和边距
常见的行内块:
<img/>
<input/>
<td></td>