一、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1.在网页中html专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
2. 标题标签：
h1~h6 一共有六级标题
从h1到h6重要性递减 h1最重要 h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只有一个h1
一般情况下，标题标签一般只使用到h3，h4~h6很少用
3.在页面中独占一行的元素称为块元素 （block element）
标题标签都是块元素
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
4.hgroup标签用来为标题分组，可以将一组相关的标题的同时放入到group
-->
<hgroup>
<h1>回乡偶书</h1>
<h2>其一</h2>
</hgroup>
<!--
5.p标签表示页面中的一个段落
6.p也是块元素
-->
<p>p标签表示页面中的一个段落</p>
<!--
7.em标签用于表示语音语调的一个加重
strong表示强调，重要内容
在页面中不会独占一行的元素称为行内元素（inline element）
-->
<p>1.今天天气<p>真</p>不错</p>
<p>2.今天天气<em>真</em>不错</p>
<p>3.今天天气<strong>真</strong>不错</p>
<!--
8.blockquote 表示一个长引用
blockquote元素中一般嵌套p元素，用于标记被引用的文本，这些引用文本并不是直接位于blockquote元素中。
如果引文来自在线资源（包括自己网站中的其他地方），那么可以在<blockquote>标签的cite（引用）属性中指明原始来源的URL。
通常浏览器会把blockquote元素呈现为一段左右两侧缩进(40px)的文本。
-->
<blockquote>
<p>这是一个长引用，这是一个长引用。</p>
</blockquote>
<h1>About WWF</h1>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<!--
9.q表示短引用
-->
<p>我说<q>你真好</q></p>
<!--
10.br换行
-->
我
<br>
<br>
我
我
</body>
</html>在这里插入代码片
二、重点，浏览器自动修正，详情见图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
块元素
在网页中一般通过块元素来对页面进行布局
行内元素
行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本什么都能放
例外：p元素中不能放任何块元素
浏览器在解析网页时，会自动对网页中不合乎规范的内容进行修正
比如：标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
代码审查工具：网页点击检查或f12,
-->
<p>
<h1>哈哈哈</h1>
</p>
</body>
</html>在这里插入代码片
三、布局标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
布局标签（结构化语义标签）
header表示网页头部
main表示网页主体部分（一个页面中只会有一个main）
footer表示网页底部
nav表示网页中的导航
aside和主题相关的其他内容（侧边栏）
article表示一个独立的文章
section表示一个独立的区块，上边的标签都不能表示时用section
div没有语义，就用来表示一个区块，目前还是div为主要的布局元素
span是一个行内元素，没有语义，一般用于在网页中选中文字
-->
</body>
</html>
四、列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
html列表分三种
1.有序列表
2.无序列表
3.定义列表
-->
<!--
无序列表，使用ul标签来创建无序列表
使用li表示列表项
最常用的
有序列表，使用ol标签来创建有序列表
使用li表示列表项
定义列表，用dl标签来创建一个定义列表
使用dt来表示定音内容
dd来对内容进行解释说明
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构</dd>
<dd>结构表示网页的结构</dd>
<dd>结构表示网页的结构</dd>
</dl>
<ul>
<li>结构
<ul>
<li>结构</li>
<li>结构</li>
</ul>
</li>
<li>
列表嵌套
</li>
</ul>
</body>
</html>
五、超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到另一个页面
或者是当前页面的其他位置
使用a标签来定义超链接
属性：
href指定跳转的目标路径
值可以是一个外部网站地址，也可以是内部页面地址
超链接是一个行内元素，在a标签中可以嵌套任何元素
除了他自身
./表示当前目录
../表示上一级目录
-->
<a href="http://www.baidu.com">超链接</a>
<br>
<a href="07列表.html">超链接</a>
</body>
</html>在这里插入代码片
六、超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1.target属性，用来指定超链接打开的位置
可选值：_self默认值 在当前页面打开超链接
_blank在一个新页面中打开超链接
-->
<a href="http://www.baidu.com" target="—_blank">超链接</a>
<!--
2.#,点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置
可以跳转到页面指定位置，只需要将href属性设置为 #+目标id属性值
3.id属性（唯一不重复的）
每一个标签都可以添加一个id属性
id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
正常来讲，字母开头
-->
<a href="#bottom">回到底部</a>
<a href="#p3">去第三自然段</a>
<p>走进市场内，各种香味漫天袭来。形状精美的糕点的奶香，澄黄油亮的咸菜的酱香，色泽鲜艳的水果的甜香，田园气息的蔬菜的鲜香，肥美诱人的鱼肉的腥香，外焦里嫩的烧烤的焦香，肆意弥漫的香味一股脑将你团团包围。具有浓郁新疆特色的美食小吃，面食类、烧烤类、凉拌类、以及油炸类、干果类明目凡多，不由得想抓住其中一样大快朵颐。真个是“众香国”里难取舍，挑了这一样，还放不下那一样。</p>
<p>走进市场内，各种香味漫天袭来。形状精美的糕点的奶香，澄黄油亮的咸菜的酱香，色泽鲜艳的水果的甜香，田园气息的蔬菜的鲜香，肥美诱人的鱼肉的腥香，外焦里嫩的烧烤的焦香，肆意弥漫的香味一股脑将你团团包围。具有浓郁新疆特色的美食小吃，面食类、烧烤类、凉拌类、以及油炸类、干果类明目凡多，不由得想抓住其中一样大快朵颐。真个是“众香国”里难取舍，挑了这一样，还放不下那一样。</p>
<p id="p3">走进市场内，各种香味漫天袭来。形状精美的糕点的奶香，澄黄油亮的咸菜的酱香，色泽鲜艳的水果的甜香，田园气息的蔬菜的鲜香，肥美诱人的鱼肉的腥香，外焦里嫩的烧烤的焦香，肆意弥漫的香味一股脑将你团团包围。具有浓郁新疆特色的美食小吃，面食类、烧烤类、凉拌类、以及油炸类、干果类明目凡多，不由得想抓住其中一样大快朵颐。真个是“众香国”里难取舍，挑了这一样，还放不下那一样。</p>
<p>走进市场内，各种香味漫天袭来。形状精美的糕点的奶香，澄黄油亮的咸菜的酱香，色泽鲜艳的水果的甜香，田园气息的蔬菜的鲜香，肥美诱人的鱼肉的腥香，外焦里嫩的烧烤的焦香，肆意弥漫的香味一股脑将你团团包围。具有浓郁新疆特色的美食小吃，面食类、烧烤类、凉拌类、以及油炸类、干果类明目凡多，不由得想抓住其中一样大快朵颐。真个是“众香国”里难取舍，挑了这一样，还放不下那一样。</p>
<p>走进市场内，各种香味漫天袭来。形状精美的糕点的奶香，澄黄油亮的咸菜的酱香，色泽鲜艳的水果的甜香，田园气息的蔬菜的鲜香，肥美诱人的鱼肉的腥香，外焦里嫩的烧烤的焦香，肆意弥漫的香味一股脑将你团团包围。具有浓郁新疆特色的美食小吃，面食类、烧烤类、凉拌类、以及油炸类、干果类明目凡多，不由得想抓住其中一样大快朵颐。真个是“众香国”里难取舍，挑了这一样，还放不下那一样。</p>
<p>走进市场内，各种香味漫天袭来。形状精美的糕点的奶香，澄黄油亮的咸菜的酱香，色泽鲜艳的水果的甜香，田园气息的蔬菜的鲜香，肥美诱人的鱼肉的腥香，外焦里嫩的烧烤的焦香，肆意弥漫的香味一股脑将你团团包围。具有浓郁新疆特色的美食小吃，面食类、烧烤类、凉拌类、以及油炸类、干果类明目凡多，不由得想抓住其中一样大快朵颐。真个是“众香国”里难取舍，挑了这一样，还放不下那一样。</p>
<p>走进市场内，各种香味漫天袭来。形状精美的糕点的奶香，澄黄油亮的咸菜的酱香，色泽鲜艳的水果的甜香，田园气息的蔬菜的鲜香，肥美诱人的鱼肉的腥香，外焦里嫩的烧烤的焦香，肆意弥漫的香味一股脑将你团团包围。具有浓郁新疆特色的美食小吃，面食类、烧烤类、凉拌类、以及油炸类、干果类明目凡多，不由得想抓住其中一样大快朵颐。真个是“众香国”里难取舍，挑了这一样，还放不下那一样。</p>
<p>走进市场内，各种香味漫天袭来。形状精美的糕点的奶香，澄黄油亮的咸菜的酱香，色泽鲜艳的水果的甜香，田园气息的蔬菜的鲜香，肥美诱人的鱼肉的腥香，外焦里嫩的烧烤的焦香，肆意弥漫的香味一股脑将你团团包围。具有浓郁新疆特色的美食小吃，面食类、烧烤类、凉拌类、以及油炸类、干果类明目凡多，不由得想抓住其中一样大快朵颐。真个是“众香国”里难取舍，挑了这一样，还放不下那一样。</p>
<p>走进市场内，各种香味漫天袭来。形状精美的糕点的奶香，澄黄油亮的咸菜的酱香，色泽鲜艳的水果的甜香，田园气息的蔬菜的鲜香，肥美诱人的鱼肉的腥香，外焦里嫩的烧烤的焦香，肆意弥漫的香味一股脑将你团团包围。具有浓郁新疆特色的美食小吃，面食类、烧烤类、凉拌类、以及油炸类、干果类明目凡多，不由得想抓住其中一样大快朵颐。真个是“众香国”里难取舍，挑了这一样，还放不下那一样。</p>
<a id="bottom" href="#">回到顶部</a>
<!--
4.在开发中可以将#作为超链接路径的占位符
-->
<a href="javascript:;">这是一个纯的超链接，点击无反应</a>
</body>
</html>
扫一扫
2365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
