一、什么是html
HTML：Hyper Text Markup Language（超文本标记语言） 。超文本包括：文字、图片、音频、视频、动画等
image.png
二、html的基本结构
新建 HTML 文档：文件名.html （点后缀是为了让系统更好的识别文件，让系统知 道拿什么软件来打开）
<!--<!DOCTYPE html> 告诉浏览器使用什么规范，这是html5的规范；
<DOCTYPE>声明必须放在HTML文档第一行；
<DOCTYPE>声明不是HTML标签-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
注意：
-
1.html 是由一对对的标签组成的语言，每一对标签都有它的特殊功能，例： <html></html>，第一个叫头标签，第二个叫尾标签，尾标签要加上结束符
-
2.<html lang=“en”></html>属于根标签，一个 HTML 文件里只能有一对 HTML 标签， 其他所有的标签都必须写在 HTML 里边。 lang=“en”：告诉搜索引擎爬虫，我们的网站是关于什么内容的。en 是英文的，zh 是 中文的，de 是德文的。
注意：属性名和属性值都写在头标签后面（空一格），写法：属性名=“属性值” -
3.HTML 里边分为两个标签:<head></head>和<body></body>
<head></head>标签：里边装思想，编辑给浏览器的，人看不到， <body></body>标签：里边装表皮，身体。展现给用户看的，皮肤类的。 -
4.①拓展：在 head 标签里写以下代码，符合搜索引擎爬虫的喜好，可以在搜索页面把你的 页面往前靠：
<meta content="服装" name="keywords">（关键字）
<meta content="这是一套 xxxx" name="description">（描述）
②head标签中还包含
<meta charset="UTF-8" /> 单标签，防止网页出现乱码，网页中可以识别任何国家的语言。（utf-8包含所有国家需要的字符）
<title> </title>标签：里边放网页的标题（页脚标）
三、html标签（标签规范）
1.标签对（有开始有结束）
2.闭合标签(<hr/>等)
注意：元素是由开始标签及结束标签及其中间内容组成
HTML标签语法
<标签名 属性='属性名' 属性='属性名2'>...</标签名>
四、 html常用标签
1.标题标签 h1~h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
特点：从 h1 到 h6 字号依次减小，作用：独 占一行，加粗字体，更改字体大小。
h1在一个页面只能用一次，有利于搜索引擎的优化和抓取，一般情况下包着logo
2.段落标签p
<p>我是段落</p>
特点：段落标签，能让标签里的内容成段展示。独占一行。
3.字体样式标签 em和strong
<!--加粗：<strong>…</strong>
斜体：<em>…</em>
想让字体即加粗又斜体，就把两个标签嵌套起来：<strong><em>内容</em></strong>，标签是可以嵌套的。-->
<strong>徐志摩人物简介</strong>
<p>
<em>1910</em>年入杭州学堂<br/>
<em>1918</em>年赴美国克拉大学学习银行学<br/>
...
</p>
4.特殊符号
image.png
5.图片标签img
image.png
<img src="image/hetao.jpg" width="160" height="160"
alt="薄皮核桃" title="薄皮核桃"/>
注意：src 里边放图片路径，分为网上的 URL（超链接）、本地绝对路径（需要把地址写全）、 本地相对路径（必须 html 文件和图片文件在同一目录下 ../返回上一层;
../代表一个上一级，如上一级的上一级../../）
- alt 图片占位符，当图片地址发生错误时展示文字信息（只有出错的时候会展示）
- title 图片提示符，鼠标移到图片上时，出现提示内容
6.超链接标签 a
7.无语义标签div 和span
div作用：主要就是给页面划分块，做布局使用的
span作用：用于包着一小段的文字的时候使用
div和span的标签的区别是啥？
解释：div包起来的东西会独占一行，而span没有任何的样式，而且不会换行
8.列表
列表分为：无序列表、有序列表、自定义列表
8.1有序列表
<ol>
<li>范雪雪演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
有序列表特性：
- 有顺序，每个<li>标签独占一行（块元素）
- 默认<li>标签项前面有顺序标记
- 一般用于排序类型的列表，如试卷、问卷选项等
有序列表标签，默认在网页中会以 1. 2. 3.往下排，但在 ol 后边加上 type= “1/a/A/i/I ”，他就会以指定的排序方式往下排（共五种排序方式，我写的/在笔记 中代表的是或者的意思，结束符不算哈），在 ol 后边加上 reversed=“reversed”，则 以倒序排列，在 ol 后边加上 start=“2”，则以第二个往下排，引号里可以只写数字， 写数字几，则从第几个开始往下排。ol 和 li 在实际开发中基本上不用。
8.2无序列表
<ul>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
无序列表特性：
- 没有顺序，每个<li>标签独占一行（块元素）
- 默认<li>标签项前面有个实心小圆点
- 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块
无序列表标签，默认前边为小黑点，即属性为 type=“disc”，小方块为 type= “square”，小圆圈为 type=“circle”
8.3 定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>黄瓜</dd>
<dd>西红柿</dd>
</dl>
定义列表特性：
- 没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
- 默认没有标记
- 一般用于一个标题下有一个或多个列表项的情况（使用较少）
9.表格
<table border="1" ><!--border="1" 边框为1-->
<tr>
<td colspan="3">学生成绩</td> <!-- colspan="3" 跨3列-->
</tr>
<tr>
<td rowspan="2">张三</td> <!-- rowspan="2" 跨2行-->
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
image.png
10.媒体元素
视频 video 音频audio
<!--视频-->
<video controls autoplay><!--autoplay自动播放-->
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
你的浏览器不支持video元素
</video>
<!-- 音频-->
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
循环播放loop
11.标签分类
a.块元素和行内元素
b.成对标签和自闭合标签
五、HTML5结构元素
image.png
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>网易邮箱页面布局</title>
<!--此段代码只是让大家能更好的看到每块元素的位置，后面在CSS中会具体讲解-->
<style>
header,section,footer{
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体部分</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
</body>
</html>
image.png
网友评论