一、HTML定义
根据W3C(标准化组织,专门制定web标准)定义:
- HTML:Hyper Text Markup Language,超文本标记语言,用来定义文档的内容结构。(标记语言)
二、HTML的发展
1、目前使用的是HTML5,草案在2008年发布,2012年形成稳定版本。
HTML5中的变化:
(1)标签:
- 新增DOCTYPE、meta
- 新增语义化标签和属性
- 去掉了纯展示性的标签
- 添加了canvas、video、audio、本地存储、拖拽
(2)语法:
- 标记不区分大小写,推荐小写
- 空标记可以不闭合
- 属性值可以不添加引号,推荐双引号
- 属性值中包含true和false的可以省略(控制属性是否生效)
2、html文档结构
- DOCTYPE用来定义文档的类型,没有DOCTYPE的情况下会出现怪异模式(混杂模式),有DOCTYPE的情况下叫标准模式(严格模式)。
- head元素又叫文档头,包含所有元数据(页面有关的附加信息)。
- title为文档标题,显示在浏览器的标题栏或者标签页。
- meta标识页面其他的元数据,指示浏览器使用字符编码集进行解析。
三、HTML术语
1、注释:
2、元素:
①元素组成:
<h3> 编程入门 </h3>
起始标记 元素内容 结束标记
<img src="" alt="">
属性:给元素添加额外的信息,写在开始标记里,与标记名用空格隔开,属性名与属性值用等号隔开。
②空标记:没有元素内容和结束标记的元素。
③元素嵌套:一个元素放在另一个元素里,元素不能相互嵌套。
<div>
<p>元素嵌套</p>
</div>
④元素关系:
-
父子关系:A元素直接包含B元素,A是B的父元素,B是A的子元素。
-
兄弟关系:两个元素拥有同一个父元素,他们就是兄弟元素。
-
祖先和后代关系:若A直接或者间接包含B元素,A就是B的祖先元素,B就是A的后代元素。
<body>
<section>
<a href="">链接1</a>
<a href="">链接2</a>
</section>
<h4>分隔线</h4>
<div>
<p>第一个</p>
<p>第二个</p>
<p>第三个</p>
</div>
</body>
如例:
(1)body是section、h4、div的父元素,section、h4、div是body的子元素。
section是a的父元素,a是section的子元素;div是p的父元素,p是div的子元素。
(2)section、h4、div是兄弟元素,两个a是兄弟元素,三个p是兄弟元素。
(3)section、h4、div、a、p都是body的后代元素。
四、HTML元素
(一)结构元素
- div:用来划分区域,没有语义
- header:头部标签
- nav:导航栏
- aside:表示跟周围主题相关的附加信息
- article:网页正文
- section:整体的部分主题
- footer:页面或某个区域的脚注
(二)文本元素
-
h1~h6:标题,数字越大,字体越小
-
p:段落
-
strong:重要文本
-
b:应突出显示的文本
(注意:两者表现出来是一样的,但是在语义上有差别,strong强调文本的重要性,b强调在文本上突出显示的文本)
-
em:在文本上加强调,斜体
-
i:一般用来放图标(特别对待的文本)
-
blockquote:整段文本的引用
-
q:小段文本的引用
-
span:跨越多个字符
-
cite:对参考文献的引用
-
abbr:对缩写词的引用
-
a:超链接
<a href="路径" target="页面打开的位置"></a>
-
页面打开位置
target="_self"表示链接默认在当前页面打开,一般不设
target="_blank"表示链接在新的页面打开
-
路径(所有href路径都是如下规律)
①相对路径:站内资源
书写格式: ./表示文件当前所在目录(可以省略) ../表示返回上一级目录(跳出当前目录)
-
②绝对路径:站外资源(一般直接复制粘贴网址)
书写格式:协议://域名/目录
-
块级元素:h、p、blockquote
-
行内元素:strong、b、em、i、q、span、cite、abbr、a、img
(三)实体字符
-
书写格式:&实体名称;(都是以&开始;结尾)
-
常见字符:
- 空格 : ;
- 小于符号< :<;
- 大于符号> :>;
- 并且符号& :&;
- 版权符号© :©;
- 注册符号® :®;