网页的构成
一个有具体功能的完整的网页，一般由3部分组成
- HTML:网页的具体内容和结构
- CSS:网页的样式（美化网页最重要的一块）
- JavaScrip:网页的交互效果，比如对用户鼠标事件做出响应
HTML文件的拓展名是.htm.html
因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm
一、HTML的构成
image8.png
1、<!DOCTYPE html>
- HTML文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
- 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题
2、html元素
- html元素是HTML文档的根元素，一个文档中只能有一个，其他所有元素都是它的后代元素
- W3C标准建议为html元素增加一个lang属性，作用是：帮助语音合成工具确定要使用的发音；帮助翻译工具确定要使用的翻译规则；lang="en"告诉浏览器：这个HTML文档的语言是英文
3、head元素
- head元素里面的内容是一些"元数据"(元数据:描述数据的数据)
- 一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标
-
以下列出的元素大多数情况下都是在head元素内部使用：
metal、title、style、link、base、script、noscritpt
image3.png
4.body元素
- body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。
二、常用元素
HTML提供了大量元素，每一个元素都有特定的用途，保证了网页的丰富多样性
区块：div
区分：span
文本：p、h1~h6、em、dt、dd
表格：table、tbody、thead、tr、td、th、tfoot、caption
表单：form、input、label、textarea、select
链接：a
图片：img
文档：html、head、title、body、meta
列表：ul、ol、li、dlside、footer、nav
其他：br、hr、iframe
结构：header、section、a、strong、pre、address、q、blockquote、cite、co
- 标签对：html、head、title、body、div、ul、li包含了具体内容，书写格式是标签对。（
<元素名> 具体内容</元素名>）
<title>测试</title>
<head> </head>
<h1>44444</h1>
- 单标签：meta、img、br、input没有包含具体内容，书写格式是单标签（
<元素名>或者<元素名/>、<元素名 />）
建议统一采用<元素名>写法即可，不需要再加后面的斜杠 /
<input placeholder="占位的文字”>
<img src=“test”>
<br>
三、元素的属性
每一个元素都可以拥有自己的属性，属性可以增强元素的功能
书写形式是：<起始标签 属性名="属性值”>
image.png
- 上图中的html、meta、body元素均拥有属性，其中body元素拥有3个属性
- 属性名都是小写，而且是无序的，谁先谁后不影响实际效果
- 属性值可以使用双引号、单引号括住，也可以省略引号。建议统一使用双引号
- 有些属性是公共的，每一个元素都可以设置,比如class、id、title、lang属性
- 有些属性是元素特有的，不是每一个元素都可以设置比如meta元素的charset属性、img元素的alt属性等
网友评论