当前位置:

首页 > temp > python入门教程 >

Python web开发（三）：HTML常用标签

HTML常用标签

首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。不会再给结构标签指定样式了。

HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

1）标题标签h (熟记)

单词缩写： head 头部. 标题 title 文档标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

标题标签语义：作为标题使用，并且依据重要性递减

其基本语法格式如下：

<h1>标题一共六级选, </h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

显示效果如下：

小结 :

加了标题的文字会变的加粗，字号也会依次变大
一行是只能放一个标题的

2）段落标签p ( 熟记)

单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词

作用语义：

可以把 HTML 文档分割为若干段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。
<hr>
<h3>静夜思</h3>
<p>【作者】李白 【朝代】唐</p>

<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

3）水平线标签hr(认识)

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 同上

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr>是单标签

在网页中显示默认样式的水平线。

课堂练习:新闻页面

https://tech.163.com/20/0609/20/FEN57N6500097U7T.html

4）换行标签br (熟记)

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br>

这时如果还像在word中直接敲回车键换行就不起作用了。

此处有练习题

5）div 和 span标签(重点)

div span 是没有语义的是我们网页布局主要的2个盒子想必你听过 css+div

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

span 跨度，跨距；范围

语法格式：

<h3>静夜思</h3>
<span>【作者】李白 【朝代】唐</span>
<div>床前明月光，</div>
<div>疑是地上霜。</div>
<div>举头望明月，</div>
<div>低头思故乡。</div>

他们两个都是盒子，用来装我们网页元素的，只不过他们有区别，现在我们记住

div 标签用来布局的，但是现在一行只能放一个div
span 标签用来布局的，一行上可以放好多个span

后面后面讲显示模式的时候，会告诉大家

排版标签总结

标签名	定义	说明
	标题标签	作为标题使用，并且依据重要性递减
	段落标签	可以把 HTML 文档分割为若干段落

HTML标签的语义化

所谓标签语义化，就是指标签的含义。

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

根据标签的语义，在合适的地方给一个最为合理的标签。

语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。( 裸奔起来一样好看 )

遵循的原则：先确定语义的HTML ，再选合适的CSS。所以，我们接下来学习html标签，要根据语义去记忆。 HTML网页中任何元素的实现都要依靠HTML标签。

文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

区别：

b 只是加粗 strong 除了可以加粗还有强调的意思，语义更强烈。

剩下的同理...

请同学们重点记住前两组加粗和倾斜后面两组没记住回来查

走过路过不要错过，买不买没关系，到屋里瞧一瞧到屋里看一看，

<br>
本店<b>所有商品都两块</b>，<strong>全场都两块</strong>，
<br>
挑啥都<i>两块</i>，买啥都<em>两块</em>，挑啥拿啥买啥都两块，
<br>
原价<s>十块八块</s>的都两块，两块钱你
<del>买不了吃亏</del>
，你买不了上当，
<br>
<u>真正的清仓</u>，
<ins>真正的甩货</ins>


不用问价也不用讲价，全场都两块，挑啥啥便宜，买啥啥贱！走过路过千万不要错过！

图像标签img (重点)

单词缩写： image 图像

要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。（它是一个单身狗）

语法如下：

<h4>正常的图片：</h4>
<img src="images/timg.jpg" alt="">

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

border 后面我们会用css来做，这里童鞋们就记住这个border 单词就好了

**注意: **

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
任何标签的属性都有默认值，省略该属性则取默认值。
采取键值对的格式 key="value" 的格式

比如:

   <h4>正常的图片：</h4>
    <img src="images/timg.jpg" alt="">
    <hr>

    <h4>带alt替换文本：（图片不能正常显示，就显示文本）</h4>
    <img src="images/timg.jpg" alt="今晚剑不来">
    <hr>

    <h4>带title提示文本：（鼠标放到图片上，显示的文字）</h4>
    <img src="images/timg.jpg" title="请假一天么么哒">
    <hr>

    <h4> 修改图片大小 宽度 width 高度 height </h4>
    <img src="images/timg.jpg" title="请假一天么么哒" width="600" />
    <hr>

    <h4> 带有边框的图片 </h4>
    <img src="images/timg.jpg" title="请假一天么么哒" width="600" border="10" />、

此处有练习题

重点掌握点：

请说出图像标签那个属性是必须要写的？ img src 图片的路径
请说出图像标签中 alt 和 title 属性区别？ alt 图片显示不出，文字就显示 title 鼠标经过图片的时候显示文字

链接标签(重点)

单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释锚, 铁锚的

在HTML中创建超链接非常简单，只需用标签把文字包括起来就好。

语法格式：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

<h4>外部链接:</h4>
<a href="http://www.baidu.com">百度一哈</a>

<h4>内部链接:</h4>
<a href="demo.html">剑来图片</a>

<h4>空链接:</h4>
<a href="#">这里什么都没有</a>
<h4>图片链接：</h4>
<a href="http://www.baidu.com">![](images/timg.jpg)</a>

<hr>
<h4>打开方式</h4>
<a href="http://www.baidu.com" target="_blank">百度一哈 在新的页面打开</a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

外部链接需要添加 http:// www.baidu.com
内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

重点掌握点：

请说出链接标签那个属性是必须要写的？ href
请说出如何新窗口打开这个一个链接网页的？ target=“_blank”

路径(重点、难点)

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

**目录文件夹： **

就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html文件，图片等等。

**根目录 **

页面中的图片会非常多，通常我们再新建一个文件夹专门用于存放图像文件（images），这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。路径可以分为：相对路径和绝对路径

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

路径分类	符号	说明
同一级路径		只需输入图像文件的名称即可，如<img src="baidu.gif" />。
下一级路径	“/”	图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images）
上一级路径	“../”	在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推

相对路径，是从代码所在的这个文件出发，去寻找我们的目标文件的，而我们所说的上一级下一级同一级简单说，就是图片位于 HTML 页面的位置

绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

注意：

绝对路径用的较少，我们理解下就可以了。但是要注意，它的写法特别是符号 \ 并不是相对路径的 /

@拓展阅读

锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

1\. 使用相应的id名标注跳转目标的位置。 (找目标)
  <h3 id="two">第2集</h3> 

2\. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系）  我也有一个姓毕的姥爷..
  <a href="#two">

快速记忆法：

好比找个人办事，首先找到他，然后拉关系，最后看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>
<h3>锚点</h3>

<a href="#one">第1集</a>
<a href="#two">第2集</a>
<a href="#three">第3集</a>

<h4 id="one">第1集</h4>
<p>
    故事发生在新墨西哥州，高中化学老师沃尔特-怀特是一位平凡得不能再平凡的小人物。沃特本是大学研究所化学高材生，并参与过诺贝尔化学奖的合作，但为了过平凡的生活而放弃成为化学家，在一所高中担任化学老师。但是他却被诊断出患了中晚期肺癌。面对突如其来的不幸，他首先想到的是家人未来的生计问题，因为他家中有一位40多岁怀有身孕的妻子和患有轻度脑瘫的儿子。而他是家里唯一的经济来源</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h4 id="two">第2集</h4>
<p>
    和图可之间的冲突让沃尔特与杰西明白了毒品行业之中的危险与血腥，而图可的死亡亦让“师徒”二人失去了唯一的出货渠道，霎时间，沃尔特陷入了手中有货却无销路的窘境之中。杰西决定通过自己的朋友们来扩展销售渠道，虽然短时间内收获颇丰，但接踵而至的意外让杰西明白，这并非长远之举。沃尔特和妻子斯凯勒之间的关系开始变得越来越紧张，而沃尔特癌症的好转为两人的感情带来了一丝希望。杰西遇见了名为简的女房东，两人情愫渐生，可是，简曾经也是一位“瘾君子”，和杰西在一起，她的命运又会何去何从。</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h4 id="three">第3集</h4>
<p>
    金钱的紧缺和癌症的侵袭都不再是沃尔特将要面对的难解问题了，家庭的濒临破碎才是让沃尔特感到心痛的真正原因所在。由于妻子斯凯勒坚定的离婚决心，沃尔特从家中搬出，搬入了新的居所，这也为他和大毒枭古斯之间的合作创造了有利的条件。为了替死去的图可报仇，两位冷面杀手找到了汉克，激烈的交锋后，汉克身负重伤。面对着逐渐失控的一切，沃尔特感到了前所未有的危机，尤其是他的新搭档盖尔，沃尔特明白，一旦盖尔掌握了他独创的制毒技术，自己将很快被古斯除掉。</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

base 标签

语法：

<base target="_blank" />

**总结： **

base 可以设置整体链接的打开状态
base 写到

之间* 把所有的连接都默认添加 target="_blank"

特殊字符（理解）

一些特殊的符号，我们再html 里面很难或者不方便直接使用，我们此时可以使用下面的替代代码。

虽然有很多，但是我们平时用的比较较少，大家重点记住空格大于号小于号就可以了，剩下的回来查阅。

总结：

是以运算符&开头,以分号运算符;结尾。
他们不是标签，而是符号。
HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    楚乔是&nbsp;&nbsp;&nbsp;&nbsp;燕洵&nbsp;&nbsp;&nbsp;&nbsp;的 <br /> &lt;p&gt; 表示一个段落 &lt; &gt; 更多 &gt;&gt;
</body>

</html>

团队约定

推荐：

   <a href="#">more &gt;&gt;</a>

不推荐：

  <a href="#">more >> </a>

出处：https://www.cnblogs.com/qshhl/p/14973982.html

栏目列表