1.HTML简介：
HTML：Hyper Text Markup Language
1.1 HTML基本结构
<!--
文档声明，标识当前网页的版本的
该声明标识网页是遵循html5语法规范的
编写网页时，一定要编写的文档声明，
在某些浏览器中，如果不写文档声明，会导致浏览器进入到怪异模式
-->
<!doctype html>
<!-- html网页中根标签，一个页面中有且只有一个根标签
网页中的所有内容都应该写在根标签的内部
-->
<html>
<!--
网页的头部，head标签中的内容，不会在页面中直接显示
浏览器根据head中的内容来解析网页，搜索引擎也可以根据他们来检索网页
-->
<head>
<!-- 使用meta来设置页面的字符集 -->
<meta charset="utf-8" />
<!--
网页的标题，一般会在页面的标签头部显示
所属引擎在检索一个网页时，会主要检索title中的内容
并依据该内容，来判断网页的主要内容，
title中的内容会影响到网站在搜索引擎中的排名
-->
<title>我是title</title>
</head>
<!-- 网页的主体，网页中所有的可见内容，都应该写在body中 -->
<body>
<h1>这是一个非常漂亮的网页</h1>
</body>
</html>
1.2 标题标签 ，段落标签，水平线，换行，加粗，斜体
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>常用的标签</title>
</head>
<body>
<!-- 标题标签
在HTML一共有h1 ~ h6 六级标题
6级标题中 h1最大 h6最小
从h1 到 h6 重要性依次降低
h1最重要，h2其次 依次递减
搜索引擎检索页面时，h1仅次于title，也会影响到页面在搜索引擎中的排名
一个页面一般只有一个h1标签
一般页面中只会使用h1 ~ h3
-->
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
<!-- 段落标签 使用p标签来表示一个段落
段落标签会独占一行，并和其他内容会有一个距离
-->
<p>第一次</p>
<p>今天天气真不错</p>
<hr />
<!--
在HTML中，默认将多个空格和换行认为是一个空格
使用br标签来表示一个换行
-->
<p>
床前明月光<br />
疑是地上霜<br />
举头望明月<br />
低头思故乡<br />
</p>
<!-- 水平线，可以在页面的指定位置输出一条水平线 -->
<hr />
<!--加粗：<strong>…</strong>-->
<!--斜体：<em>…</em>-->
</body>
</html>
1.3 列表标签
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>列表</title>
</head>
<body>
<!--
列表类似于购物清单
HTML中一共有三种列表
1.无序列表
- 使用ul标签来创建一个无序列表
- 使用li向无序列表中添加列表项
- 无序列表默认使用 圆点 来作为项目符号
2.有序列表
- 有序列表和无序列表类似，不同的是它使用ol来创建其他的都和无序列表一样
- 有序列表使用有序的序号 作为项目符号
3.定义列表
- 定义列表用来对一些内容做解释说明的
- 使用 dl 来创建一个定义列表
- 在dl中使用dt，来创建一个定义项
- 使用dd来创建一个对定义项的描述
- 列表之间可以互相嵌套，可以在有序列表中放无序列表，也可以在无序列表放有序列表
-->
<ul>
<li>西红柿</li>
<li>大茄子</li>
<li>小辣椒</li>
</ul>
<ol>
<li>桃花源记</li>
<li>岳阳楼记</li>
<li>小石潭记</li>
<li>醉翁亭记</li>
</ol>
<p>菜谱</p>
<ul>
<li>
鱼香肉丝
<ol>
<li>鱼</li>
<li>香</li>
<li>肉丝</li>
</ol>
</li>
<li>宫保鸡丁</li>
<li>青椒肉丝</li>
</ul>
<dl>
<dt>武松</dt>
<dd>景阳冈上的大虎英雄，战斗力99</dd>
<dd>后来打死西门大官人，后逃逸，出家为僧</dd>
<dt>武大</dt>
<dd>著名餐饮企业家，战斗力0</dd>
</dl>
</body>
</html>
1.4 链接标签(a标签)
<a href="path" target="目标窗口位置">链接文本或图像</a>
- 注：href: 链接路径 target:链接在哪个窗口打开,常用值：_self、_blank
1.5 图像标签（照片）
照片标签.png
网友评论