01课:HTML基本标签
1 !DOCTYPE html
是文档类型声明,目的就是告诉标准通用标记语言解析器,编写页面所用的标记语言。
HTML:即html类型,是HypeText Markup Language的缩写,即"超文本标记语言 (目前学html5)
<!Doctype>: 1.声明文档类型2.它的专业称:DTD文档类型定义即:Docment Type Definition 3.单标签
2html /html
html:1.双标签,2.存放网页上所有内容和信息 3.无论是给用户看还是浏览器搜索引擎都是存放在html开始标签和结束标签之间。4两个子标签:<head></head> <body></body>
<html lang="zh-CN">:lang是language(语言)的缩写,代表该网页属于哪一个国家的地方网页。
常用lang:
en-US/en :英语(美国)
zh-CN中文(简体,中国大陆)
zh-SG中文(简体,新加坡
zh-HK:中文(繁体-香港)
zh-MO中文(繁体,澳门)
zh-TW中文(繁体,台湾)
3 head /head
存储网页上给浏览器或是搜索引擎看的所有信息
子标签:
1.<title></title>:网页名字
2.<meta元素>
2.1 <meta charset="网页文件编码格式"> charset:字符集。作用:告诉浏览器我们的网页上文字编码格式。如果浏览器不知道网页文件的字符集的话就会出现乱码。
2.1.1展示中文的字符集种类:
gb2312:gb是国标的汉语包含6763汉字
gbk:国家标准扩展包含21886
gb18030:包含70244个文字
utf-8:包含全世界200多个国家和地区的语言文字
2.2<meta name="keywords"content="关键字信息">
2.21 keywords:为搜索引擎提供参考,网页内容所包含的核心搜索关键字。
2.3<meta name="description"content="网页描述信息">
2.3.1:Description:为搜索引擎提供参考,网页的描述信息结果中的页面摘要显示。
4 body /body
body标签内部存放用户能够看到的所有内容 (视频,音频,文字,图片等)
5标签分类
1.双标签 <标签名></标签名>
2.单标签:<标签名>
6标签关系:
6.1嵌套关系即父子关系
<head>
<title></title>
<head>
6.2并列关系即兄弟关系
<head></head>
<body></body>
7常用标签
7.1标题标签:h1--h6 (h1>h2>...h6)
7.2段落标签:<p></p>
7.3 水平线标签<hr>
7.4换行标签:<br>
7.5<div></div>:在网页内容中间划分一个矩形区域用来存放内容
7.6<span></span>标签:1.作用就是在网页内容的大段文字中间标注一行或是行文字并给这些文字设置不一样的效果。2.行内标签( inline)
7.7<blockquote></blockquote>在网页内容中间划分展示打断引用自古典。古籍,名人名言
7.8文本格式化标签
7.8.1 <strong></strong>展示大段文字中的重要文字
7.82<em></em>1.重要性比strong低,2.倾斜效果
7.83<i></i>包裹一段文字,产生倾斜效果,重要性不会有什么变化.
7.9图片展示标签:<img src=""alt=""width="" height="">
7.9.1:src:1.是sourse的缩写 2.图片文件的位置
7.9.2:alt:图片名称
7.9.3:width 图片实际宽度 height:图片实际的高度 (并不能改变它的实际尺寸)
7.10 src:路劲写法:不能出现中文
7.10.1:相对路劲:从本地文件(该代码所在的文件的当前位置)找到目标文件
(1)./当前文件 (2)../(上级目录) (3)../../(上上级目录)
7.10.2:绝对路径:
(1)本地:D:/project/demo/pic.jpg
(2)网络:https://www.baidu.com/img/blbla.jpg
8视频展示标签
8.1:<video src=""controls="controls"></video>标签的作用就是在网页上展示一个视频文件.
8.1.1 1.是sourse的缩写 2.视频的位置
8.1.2 controls="cotrols"这是视频文件的控制按钮区域
9音频展示标签
9.1:<audio src=""controls="controls"></audio>
9.1.1 (1) audio:音频文件 (2)src地址 (3)controls="controls"音频按钮
10链接标签
< a href="https:www.baidu,com/" targent="_blank">百度一下你就指导</a>
1.href="网页地址" 即Hypertext Reference的缩写 超文本引用
2.作用就是让我们点击网页跳转其他的网页上去.
3.target="页面打开方式" ‘_blank’新页面打开; _self 默认打开方式,当前页打开
4< a href="#"></a> 空文件
11无序列表(Unordered List )标签
1.网页中间还有一些内容相似、结构相仿、布局接近的区域,像这一类区域我们就使用无序列表来进行区域划分
2.格式:
<ul>
<li>
<li>
<ul>
12有序列表( ordered lists )标签
1.网页中间还有一些内容相似、结构相仿、布局接近但是每个区域的内容是有先后关系的的区域,像这一类区域我们就使用有序列表来进行区域划分,这一类区域大多用在详细法律条文、政府公告、产品说明等内容上
2格式:
<ol>
<li>
<li>
<ol>
13<自定义列表(definition list)标签
1.网页中间还有一些内容不完全一样、结构相仿、布局接近、每个区域的内容没有先后关系的的区域,像这一类区域我们就使用有自定义列表来进行区域划分,这一类区域大多用在专业名词条目的解释,或是网页底部信息分类等内容上
2 解释:
dt:列表标签
dd:列表内容
3格式:
<dl>
<dt></dt>
<dd></dd>
</dl>