body标签 h、p、a、ul、ol、div、img、
想要在网页上展示出来的内容一定要放在body标签中。 把我们之前海燕那一段HTML代码贴过来，保存到一个HTML格式的文件中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飞学城</title>
</head>
<body>
<h1>海燕</h1>
<p>在苍茫的大海上，</p>
<p>狂风卷集着乌云。</p>
<p>在乌云和大海之间，</p>
<p>海燕像黑色的闪电，</p>
<p>在高傲地飞翔。</p>
</body>
</html>
浏览器显示如下：
常用标题标签 h1~h6
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。
因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用css来定义来达到漂亮的显示效果。
标题标签通常用来制作文章或网站的标题。
h1~h6标签的默认样式：
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飞学城</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等... 1. `<b></b>`：加粗 2. `<i></i>`：斜体 3. `<u></u>`：下划线 4. `<s></s>`：删除线 5. `<sup></sup>`：上标 6. `<sub></sub>`：下标
强调用法：
现在如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。 这两个标签都是表示强调，但是两者在强调的语气上有区别:`<em>`表示强调，`<strong>`表示更强烈的强调。 在浏览器中`<em>`默认会用斜体表示，`<strong>`会用粗体来表示。两个标签相比，我们通常会推荐大家使用`<strong>`表示强调
浏览器展示特点：
- 跟普通文本一样，但我们可以通过css来设置当前段落的样式
- 是否又独占一行呢？ 答案是的 块级元素
超链接标签 a，在一行显示，属于行内标签
超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像 <body> <h1> <!-- a链接 超链接 target:_blank 在新的网站打开链接的资源地址 _self 在当前网站打开链接的资源地址 title: 鼠标悬停时显示的标题 --> <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a> <a href="a.zip">下载包</a> <a href="mailto:zhaoxu@tedu.cn">联系我们</a> <!-- 返回页面顶部的内容 --> <a href="#">跳转到顶部</a> <!-- 返回某个id --> <a href="#p1">跳转到p1</a> <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 --> <a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a> </h1> </body>
-------------------------------------
target:_blank 在新的网站打开链接的资源地址 target：_self 在当前网站打开链接的资源地址 title: 表示鼠标悬停时显示的标题 链接其他表现形式： 目标文档为下载资源 例如：href属性值，指定的文件名称，就是下载操作(rar、zip等) 电子邮件链接 前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。 例如：<a href="mailto:zhaoxu@tedu.cn">联系我们</a> 返回页面顶部的空链接或具体id值的标签 例如：<a href="#">内容</a>或<a href="#id值">内容</a> javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。 例如：<a href="javascript:alert()">内容</a> javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a
列表标签 ul，ol
网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容
<ul>:unordered lists的缩写 无序列表 <ol>:ordered listsde的缩写 有序列表
----------------------------------------
<!-- 无序列表 type可以定义无序列表的样式-->
<ul type="circle">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type可以定义有序列表的样式 -->
<ol type="a">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
ol标签的属性： type：列表标识的类型 1：数字 a：小写字母 A：大写字母 i：小写罗马字符 I：大写罗马字符 列表标识的起始编号 默认为1 ul标签的属性： type：列表标识的类型 disc：实心圆(默认值) circle：空心圆 square：实心矩形 none：不显示标识
盒子标签 div
<div>可定义文档的分区 division的缩写 译：区 <div> 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区
分区，类似于android界面开发
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8" > <title>常用标签一</title> </head> <body> <div id="wrap"> <div class="para"> <p style="height: 1000px" id="p1">段落</p> </div> <div class="anchor"> 我是普通的文本 <h1> <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a> <a href="a.zip">下载包</a> <a href="mailto:zhaoxu@tedu.cn">联系我们</a> <a href="#">跳转到顶部</a> <a href="#p1">跳转到p1</a> <a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a> </h1> </div> <!-- <h2>路飞学城</h2> <h3>路飞学城</h3> <h4>路飞学城</h4> <h5>路飞学城</h4> <h6>路飞学城</h6> --> <div class="para"> <!-- 定义段落 通常指文章一段内容 --> <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p> <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p> <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p> </div> <div class="lists"> <!-- 无序列表 --> <ul type="circle"> <li>我的账户</li> <li>我的订单</li> <li>我的优惠券</li> <li>我的收藏</li> <li>退出</li> </ul> <!-- 有序列表 --> <ol type="a"> <li>我的账户</li> <li>我的订单</li> <li>我的优惠券</li> <li>我的收藏</li> <li>退出</li> </ol> </div> </div> </body> </html>
分析上面代码可以下面的层次结构
<div id='wrap'> <div class='para'></div> <div class='anchor'></div> <div class='para'></div> <div class='lists'></div> </div>
我们将文档放在一个父级的区（div）中，它里面包含四块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的，所以div是块级元素。
另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id，
跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=’para n1‘
图片标签 <img/>
一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。 语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" /> 注意：
- src设置的图片地址可以是本地的地址也可以是一个网络地址。
- 图片的格式可以是png、jpg和gif。
- alt属性的值会在图片加载失败时显示在网页上。
- 还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
<div> <span>与行内元素展示的标签<span> <span>与行内元素展示的标签<span> <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px"> <img src="./finance-right.png" alt="人工智能实战" style="width: 200px;height: 200px"> </div>
总结：
1.块级元素 特点：独占一行，可设宽高，如果不设宽度，则是浏览器的宽度 (div p h ul ol li )
2.行内元素 特点：在一行内展示，不能设置宽高，它的宽高时根据内容去填充 (a span )
3.行内块元素 特点：在一行内展示，可设宽高 （img）
---------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飞学城</title>
</head>
<body>
<p>帮助有志向的年轻人
通过努力学习获得
体面的 工作 和 生活！</p>
</body>
</html>
-----------------------------------------------------------------------------------------
总结：
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>常用的标签一</title> </head> <body> 获得体面的 工作和 生 活 获得体面的 工作和生活 <div class="p1"> <p style="height: 2000px;" id="p1">顶部</p> </div> <div class="heading" style="height: 700px"> <!--body相关标签--> <!--heading:标题h1-h6 没有h7 不要随意的通过 h 标签改变文字的大小 h 标签换行了 --> 囊括行业<h2>最前沿</h2>的技术，为你提供最全面、最优质、最精彩的精品专题课程 <!--块级元素：独占一行 可以设置宽高--> <h1>路飞学城</h1><h2>路飞学城</h2> <h3>路飞学城</h3> <h4 style="height: 100px;width: 100px">路飞学城</h4> <h5>路飞学城</h5> <h6>路飞学城</h6> <!--<h7>路飞学城</h7>--> </div> <div class="p1"> <!--段落标签 块级元素 独占一行--> <p><strong>路飞学城</strong>立志帮助有<b>志向</b>的<i>年轻人</i>通过<u>努力学习</u>获得<s>体面</s>的<sup>工作</sup>和<sub>生活</sub>!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p> <p><em>路飞学城</em>立志帮助<br>有志向<br>的年轻人<hr>通过努力学习<hr>获得体面的工作和生活!<hr><span>路飞学员</span>通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p> <p id="p2">我们</p> </div> <div class="anchor" > <!-- a 标签属于行内标签：在一行内展示 --> <!-- _self:默认值：在当前网站啊打开资源 _blank:在新的网站打开资源 --> <a href="https://www.luffycity.com" target="_blank" title="luffy" >路飞学城</a> <a href="a.zip">下载压缩包</a> <!-- a 标签一行显示 设置高度 宽度 不起作用 --> <a href="mailto:zhaoxu@tedu.cn" style="width: 1000px;height: 300px">联系我们</a> <!--返回页面顶部内容--> <a href="#">跳转到顶部</a> <a href="#p1">跳转到顶部的段落标签</a> <a href="#p2">跳转到我们标签</a> <!-- javascript: 是表示在触发<a>默认动作时，执行一段JavaScript代码 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。把a的默认动作取消了 --> <a href="javascript:alert(1)">内容</a> <a href="javascript:">内容吧</a> <!--1. `<b></b>`：加粗--> <!--2. `<i></i>`：斜体--> <!--3. `<u></u>`：下划线--> <!--4. `<s></s>`：删除线--> <!--5. `<sup></sup>`：上标--> <!--6. `<sub></sub>`：下标--> <!----> <!--现在如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。--> </div> <div class="lists"> <!-- ul ol li 块级元素--> <!--无序列表 默认时实心圆disc--> <ul type="square" style="height: 200px;width: 200px"> <li>我的账户 ></li> <li>我的订单 ></li> <li>我的优惠券 ></li> <li>我的收藏 ></li> <li>退出 <</li> </ul> <!--有序列表 默认是数字--> <ol style="list-style: none"> <li style="height: 200px;width: 200px">我的账户 ></li> <li>我的订单 ></li> <li>我的优惠券 ></li> <li>我的收藏 ></li> <li>退出 ></li> </ol> <!-- ol标签的属性： type：列表标识的类型 1：数字 a：小写字母 A：大写字母 i：小写罗马字符 I：大写罗马字符 列表标识的起始编号 默认为1 ul标签的属性： type：列表标识的类型 disc：实心圆(默认值) circle：空心圆 square：实心矩形 none：不显示标识 --> </div> <div class="image"> <!--img 行内块标签 1.在一行内显示 2.可设宽高--> <img src="homesmall1.png" alt="python的图片" style="width: 200px; height: 200px; " /> <img src="homesmall2.png" alt="linux的图片" style="width: 200px; height: 200px" /> </div> <div class="image"> <ul type="none"> <li> <a href="javascript:"><img src="homesmall1.png" alt="python的图片" /></a> </li> <li> <img src="homesmall2.png" alt="linux的图片" style="cursor: pointer" /> </li> </ul> </div> <!-- 总结： 1.块级元素 特点：独占一行，可设宽高，如果不设宽度，则是浏览器的宽度 (div p h ul ol li ) 2.行内元素 特点：在一行内展示，不能设置宽高，它的宽高时根据内容去填充 (a span ) 3.行内块元素 特点：在一行内展示，可设宽高 （img） --> <!-- 小练习： 展示两张图片独占一行，鼠标移上去显示小手的状态！ --> <!-- 其他标签： <br> 换行 <hr> 分割线 特殊符号： 浏览器显示时 会移除源代码中多余的空格和空行；所有连续的空格或空行都会被算作一个空格； 注意：html代码中所有连续的空行（换行）空格 都会被显示为 一个空格 空格： 特殊符号对照表： http://tool.chinaz.com/Tools/HtmlChar.aspx eg: < < > > --> </body> </html>
扫一扫
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
