1、实体
在html中预留了一些字符，这些字符是不能在网页中直接使用的，比如<>以及连续空格，当页面加载的时候只会加载出一个空格，为了使用这些预留字符，我们就要在html中使用字符实体
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<title>实体</title>
</head>
<!--
在网页中，编写的多个空格会被浏览器默认解析为一个空格
在HTML中有些时候不能直接书写特殊符号，比如多个连续空格，
比如字母两侧大于和小于号
如果我们需要在网页中书写特殊符号，则可以使用html中的实体（转义字符）
实体的语法：
&实体的名字；
表示空格none break space
>表示大于号 great
<表示小于号 little
©版权符号
-->
<body>
<p>今天 天气真不错</p>
<p>
<h1></h1>
a<b>c
</p>
</body>
</html>
2、meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
meta标签主要用于设置网页中的一些元数据，元数据不是给用户看的
charset：指定网页编码的字符集
name： 指定数据的名称
content：指定数据的内容
keywords: 表示网站的关键字,可以同时指定多个关键字，关键字之间通过英文逗号隔开
description: 用于指定网页的描述。会显示在搜索引擎的搜索结果中，相当于自我介绍
title标签的内容会作为超链接上的文字显示
-->
<meta name="keywords" content="HTMS,前端,CSS">
<meta name="description" content="这是一个非常不错的网站">
<!--
将网站重定向3表示隔多长时间跳转，url表示往哪跳转
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Document</title>
</head>
<body>
</body>
</html>
3、语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
在网页中hrml专门负责网页的结构
所以在使用html标签的时候，关注的应该是标签的语义，而不是他的样式
标题标签
h1-h6 一共六级标题 ctrl+enter，光标回车
虽然字体逐渐变小但是这不是关注的重点，可以通过css来改变样式和大小
我们关注的是它的重要性逐渐递减，h1最重要仅此与title，一般情况下页面中只有1个h1
一般只会用到h3，往后很少用到
在页面中独占一行的元素称为块元素(block element)
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!--
hgroup标签用来给标题分组，可以将一组相关的标题同时放入到hgroup中
-->
<hgroup>
<h1>北月</h1>
<h2>王超</h2>
</hgroup>
<!--
p标签表示页面中的一个段落
p也是一个块元素
-->
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
<!--
em标签表示语音语调的加重<em>真</em>页面显示真的时候会变成斜体（语调重读）
在页面中不会独占一行的元素叫做行内元素（inline element）em就是内元素
strong表示强调，重要内容，显示的是加粗的内容，也是行内元素
-->
<p>今天天气<em>真</em>不错</p>
<p>今天你必须<strong>完成作业</strong></p>
<!-- blockquote表示一个长引用，块元素 -->
鲁迅说过：<blockquote>这句话我没说过</blockquote>
<!-- q表示的是短引用，是一个行内元素 -->
子曰:<q>学而时习之</q>
<!-- br标签表示页面中的换行 -->
<br>
今天天气真不错
</body>
</html>
4、行内元素和块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
块元素(block element)
在页面中一般通过块元素对页面来进行布局
行内元素(inline element)
主要用来包裹文字
一般情况下会在块元素内放行内元素，不会在行内元素中放块元素
块元素当中什么都可以放
但是p元素中不能放任何的块元素
浏览器在解析网页时，会自动对不符合规范的内容进行修正
修正的不是网页源码，修改的网页的内存结构，通过elements可以显
示网页在内存里的结构
比如：
标签写在了根元素的外部，
p元素中嵌套块元素
根元素中出现了head和body除外的子元素
-->
<p>
<h1>haha</h1>
</p>
</body>
</html>
<h1>我就要写在外面</h1>
5、常见的结构化元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- html5新增的
布局标签（结构化语义标签）
header表示网页头部
mian表示网页主体部分(一个网页中只有一个main)
footer表示网页的底部
nav 表示网页中的导航
aside 表示和主题相关的内容
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div没有语义，就是用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何的语义，一般用于在网页中选中文字
-->
<header>我是头部</header>
<main>我是主体</main>
<footer>我是底部</footer>
<nav>我是一个导航可有可无</nav>
<aside>我可以表示侧边栏</aside>
<span>我是一个行内元素</span>
</body>
</html>
6、列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
列表(list)：成组出现，比如购物清单
1、铅笔
2、尺子
3、橡皮
html中也可以创建列表
1、有序列表：使用ol标签来创建无序列表，使用li表示列表项，呈现状态是数字
2、无序列表：使用ul标签来创建无序列表，使用li表示列表项,呈现状态是圆点
3、定义列表：使用dl来定义一个列表
使用dt来表示定义的内容，使用dd来对内容进行解释说明
列表之间可以互相嵌套
-->
<ul>
<li>铅笔</li>
<li>尺子</li>
<li>橡皮</li>
</ul>
<ol>
<li>铅笔</li>
<li>尺子</li>
<li>橡皮</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</body>
</html>
7、超链接的介绍以及使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到其他页面
或者是当前页面中的其他位置
使用a标签来定义超链接
href 指定跳转的路径
-可以是外部网站的地址比如百度
-也可以写一个内部页面的地址
alt+shift+上箭头表示向上复制，下表示向下复制
超链接也是一个行内元素，在a标签中可以嵌套任何元素，除了它自身
-->
<a href="https:www.baidu.com"><div>超链接</div></a>
<br>
<a href="studyweb\06语义化标签.html">超链接2</a>
<a href="06语义化标签.html">超链接3</a>
</body>
</html>
7.1相对路径(超链接的跳转规则)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
网址就相当于绝对路径，类似百度等，想往哪个网站跳，就复制网址就可以跳转
当我们需要跳转到服务器内部的页面时，一般我们都会使用相对路径
相对路径一般都使用.或者..开头
./
../
./可以省略不写，如果不写./也不写../则相当于写了./
./表示当前文件所在的目录
../表示当前文件所在目录的上级目录
想往哪个服务器内部页面跳转，就用./或者../找到文件相对路径.html就可以跳转
-->
<a href="https://www.baidu.com">超链接</a>
<br>
<a href="06语义化标签.html">超链接3</a>
</body>
</html>
7.2跳转到页面的相对位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
target属性，用来指定超链接打开的位置。可选值。
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
输入Lorem在tab键可以随机生成英文
-->
<a href="#bottom">去底部</a>
<br>
<a href="06语义化标签.html" target="_blank">超链接1</a>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, iure nulla, amet sapiente impedit hic provident minus, voluptatum rem itaque minima reprehenderit. Reiciendis molestiae dolorum ab, libero perspiciatis perferendis architecto?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, iure nulla, amet sapiente impedit hic provident minus, voluptatum rem itaque minima reprehenderit. Reiciendis molestiae dolorum ab, libero perspiciatis perferendis architecto?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, iure nulla, amet sapiente impedit hic provident minus, voluptatum rem itaque minima reprehenderit. Reiciendis molestiae dolorum ab, libero perspiciatis perferendis architecto?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, iure nulla, amet sapiente impedit hic provident minus, voluptatum rem itaque minima reprehenderit. Reiciendis molestiae dolorum ab, libero perspiciatis perferendis architecto?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, iure nulla, amet sapiente impedit hic provident minus, voluptatum rem itaque minima reprehenderit. Reiciendis molestiae dolorum ab, libero perspiciatis perferendis architecto?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, iure nulla, amet sapiente impedit hic provident minus, voluptatum rem itaque minima reprehenderit. Reiciendis molestiae dolorum ab, libero perspiciatis perferendis architecto?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, iure nulla, amet sapiente impedit hic provident minus, voluptatum rem itaque minima reprehenderit. Reiciendis molestiae dolorum ab, libero perspiciatis perferendis architecto?</p>
<!-- 在开发中可以将#作为超链接的路径的占位符使用 ，但是它也会往顶部跳转-->
<a href="#">这是一个新的超链接</a>
<!-- 可以使用javascript:;来作为href的属性，此时点击超链接什么也不会发生 -->
<a href="javascript:;">这是没作用的占位超链接1</a>
<a href="">这是没作用的占位超链接2</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, iure nulla, amet sapiente impedit hic provident minus, voluptatum rem itaque minima reprehenderit. Reiciendis molestiae dolorum ab, libero perspiciatis perferendis architecto?</p>
<!-- 可以直接将将href属性设置为#，这样点击超链接之后，页面不会发生跳转
，而是转到当前页面的顶部的位置
可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
id属性(唯一不重复的相当于身份证，每个标签都可以添加一个id属性)
id属性是元素的唯一标识，同一个页面中不能出现重复的id属性，区分大小写
-->
<a id="bottom" href="#">回到顶部</a>
</body>
</html>
2296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
