1. 初识
超文本标记语言,主要是通过HTML标签对网页中的文本,图片,声音等内容的描述。
2. 骨架格式
<html> 根标签
<head> 头标签
<title>这里写的是标题</title> 标题标签
</head>
<body> 主体标签
这里是主体部分。
</body>
</html>
3.HTML标签分类
(1) 双标签
<标签名> 内容 </标签名>
(2) 单标签 ,也称为空标签,指的是一个标签号即可完整描述某个功能
<标签名 /> 单标签数量很少
4. HTML标签关系
(1)嵌套关系
<head><title> </title></head>
(2)并列关系
<head></head> <body></body>
建议: 如果两个标签之间是嵌套关系,子元素最好缩进一个tab的身位,如果是并列关系,标签对齐。
5. 开发工具
-
DW :Dreamweaver
-
Sublime3
-
WS : WebStorm
-
HB : 飞一样的编码
-
VSCode :微软
-
sublime的使用
生成HTML骨架的方法:
(1) html:5 + tab键
(2) ! + tab键
6. 文档类型
<!DOCTYPE html>
这句话的意思是告诉我们使用的是html的哪个版本
HTML有很多的版本,我们需要告诉用户和浏览器使用的版本号,<!DOCTYPE>标签位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范,必须在开头的位置使用这个标签为所有的文档指定版本和类型,这样浏览器才能够按照指定的文档类型进行解析。
注意:一些老的网站可能用的还是老版本的文档类型比如XHTML之类的, 但是我们学习的是HTML5,这个文档类型有很好的兼容性(向下兼容原则)。
7. 字符集
<meta charset="UTF-8">
utf-8是目前最常用的字符集编码方式,其他的还有gbk和gb2312
- gb2312: 简单中文,包括6763个汉字
- BIG5:繁体中文,港澳台使用
- GBK: 包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312
- UTF-8: 包含了全世界所有国家需要用到的字符
8. HTML标签语义化
- 标签语义化:标签的含义
- 标签语义化的原因:
(1)方便代码的阅读和维护
(2)让浏览器或者网络爬虫能够很好的解析,从而更好分析其中的内容
(3)使用语义化标签会有更好的探索引擎优化 - 核心: 在合适的地方给一个最为合理的标签
- 原则: 先确定语义的HTML,再选择合适的CSS
- 语义好不好: 当去掉CSS之后,网页的结构依然组织有序,并且有良好的可读性,不管是谁都能够看懂这块内容是什么。
9. HTML常用标签(重点记忆)
首先,要区分HTML与CSS,这是两种不同的语言, 现在学的是结构,只写HTML标签,认识标签,不会给结构标签指定样式。 HTML标签很多,常用的一定要记住,同时要学会如何查看学习手册。
- 排版标签: 用于网页布局
-
标题标签(熟记)
<head> </head> 头部标签
有6个等级的标题标签: h1~h6
标题标签的语义:作为标题使用,并且依据重要性进行递减
基本语法格式为:<hn> 标题文本 </hn>
** 注意:h1标签应为重要,尽量少使用,一般是用于logo
-
段落标签
<p>文本内容</p>
默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。
-
水平线标签
- horizontal : 横线
<hr /> 是一个单标记标签
显示的是一条水平线,用于将段落与段落分隔开。
-
换行标签
- 单词:break,打断,换行
<br />
- div span标签(重点):这两个是没有语义的,是用于网页布局的两个盒子
- div : division的缩写, 分割,分区的意思,
- span :跨度,跨距,范围
<div>这是头部</div> <span>今日价格</span>
-
-
文本格式化标签(熟记)
在网页中,有时需要为文字设置粗体,斜体或者下划线效果,此时使用HTML的文本标记语言进行标记,使文字以特殊方式显示:- 文字以粗体方式显示
<b></b> 只是加粗使用没有强调 <strong></strong> XHTML推荐方式
- 文字以斜体方式显示
<i></i> <em></em> XHTML推荐
- 文字以加删除线方式显示
<s></s> <del></del> XHTML推荐
- 文字以加下划方式显示
<u></u> <ins></ins> XHTML不推荐使用
** 标签属性
属性就是特性,可以使HTML标签提供更多的信息
基本语法<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>
- 标签可以有多个属性,必须要写在开始标签中,位于标签名的后面
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
- 任何标签的属性都有默认值,省略该属性则取默认值
- 采取键值对的格式
-
图像标签(重点)
- 基本语法格式
<img src="图片URL"/>
- 必须属性:src,指定图像文件的路径和文件名
- 标签属性
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图像的路径 |
alt | 文本 | 图像不能显示时的替换文字 |
title | 文本 | 鼠标悬停时显示的内容 |
width | 像素(XHTML不支持%页面百分比) | 图像宽度 |
height | 像素(XHTML不支持%页面百分比) | 图像高度 |
border | 数字 | 设置图像边框的宽度 |
- 链接标签(重点)
单词:anchor的缩写,锚,铁锚
基本语法格式:
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
(1)href 用于指定链接目标的URL地址,当使用href标签时,她就具备了超链接的功能。 hypertext reference的缩写
(2)target属性:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中self是默认值,_blank是在窗口中打开方式
(3)注意:
①外部链接需要添加 :http:// + 网址
② 内部链接:直接链接内部页面名称即可
③ 如果在编写的时候没有确定超链接的链接位置,通常将href的属性值定义为#, 即 <a href="#">文本内容</a>
表示该链接暂时是一个空链接
④ 不仅可以创建文本超链接,在网页中的元素,比如图片,音频,视频,表格等都可以创建超链接。
- 锚点定位
- 通过创建锚点链接,用户能够快速定位到目标内容。
- 创建锚点链接分为两个步骤:
- 使用
<a href=#id名>链接文本</a>
创建链接 - 使用相同的id名标注跳转目标的位置
- 使用
- base标签: 可以设置整体链接的打开状态
基本语法格式:<base />
单标签
比如: 在<head></head>
标签之间写<base target="_blank" />
则表示页面中的链接都会在新窗口中打开 - 目前学过的单标签:img,br,hr,base
- 特殊字符标签(理解)
特殊字符 | 描述 | 字符代码 |
---|---|---|
空格符 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
。 | 摄氏度 | ° |
© | 版权 | © |
® | 注册商标 | ® |
2 | 平方,上标2 | ² |
3 | 立方,上标3 | ³ |
× | 乘号 | × |
÷ | 除号 | ÷ |
± | 正负号 | ± |
- 注释标签
- 多写注释,这是非常好的代码习惯,会使得团队协作顺畅
- 注释是写给队友看的,浏览器是不执行的
- 注释的内容不会显示在浏览器的窗口当中,但是作为HTML文档内容的一部分,也会被下载到用户计算机上,查看网页源代码时就可以看到
- 基本语法格式:
<!--注释内容-->
- sublime中的注释HTML代码的快捷键:单行注释:Ctrl+/ ;多行注释:选中后ctrl+shift+/
10. 路径(重点 + 难点)
实际工作中,通常新建一个文件夹专门用于存放图像文件,这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为: 相对路径和绝对路径
- 相对路径:
- 图像文件和HTML文件位于同一文件夹:只需要输入图像文件的名称即可,如 :
<img src="th.jpg" />
- 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件夹,之间用/隔开, 如:
<img src="img/wofeng.jpg" />
- 图像文件位于HTML文件的上一级文件夹:在文件名之前加“…/”,如果是上两级,则需要使用“…/…/”,以此类推。比如:
<img src="../liyifeng.jpeg" />
- 图像文件和HTML文件位于同一文件夹:只需要输入图像文件的名称即可,如 :
- 绝对路径:
D:\web\img\logo.gif
或者完整的网络地址,例如:
http://www.itcast.cn/imges/logo.gif
11. 列表标签
- 无序列表ul (重点)
无序列表的各个表项之间没有顺序级别之分,是并列的,基本语法如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
(1)<ul></ul>
中只能嵌套<li></li>
标签,直接在<ul></ul>
之间输入其他标签或者文字的做法是不被允许的。
(2)<li></li>
之间相当于一个容器,可以容纳所有元素。
(3)无序列表会带有自己的样式属性,放下那个样式(比如说每一项无序列表前面的黑点),让CSS来做!
- 有序列表ol (了解)
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
(1)<ol></ol>
中只能嵌套<li></li>
标签,直接在<ol></ol>
之间输入其他标签或者文字的做法是不被允许的。
(2)列表项前面的序号设置用CSS来做
- 自定义列表 (理解)
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表向前没有任何项目符号,基本语法格式如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
......
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
<dd>名词2解释3</dd>
......
</dl>
术语或名词进行解释和描述,定义列表的列表向前没有任何项目符号,基本语法格式如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
......
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
<dd>名词2解释3</dd>
......
</dl>