【HTML基础】常用基础标签

什么是HTML？

HTML(HyperText Markup Language,超文本标记语言)，所谓超文本就是指页面内可以包含图片、链接、甚至音乐等非文字元素，HTML不是一种编程语言，而是一种标记语言，会用到一系列的标签，用来描述网页的语言，HTML的文件的后缀名为(.html)。

HTML结构标准

一个HTML文件的基本结构如下所示：

<!doctype html>    声明文档的类型,注意!号两边不能有空格

<html>    根标签

<head>    头标签

    <title>  </title>    标题标签

</head>

<body>    主题标签

</body>

</html>

下面就根据基本结构写一个简单的HTML文件：

<!doctype html>

<html>

<head>

    <title>hello</title>

</head>

<body>

大家好！我是Frank!

</body>

</html>

效果图：

HTML标签和关系分类

单标签，只有一个尖括号：

例如：<!doctyoe html> <!-- 注释标签> <img src="" alt"">

双标签，包含两个尖括号的标签，不带斜线的为标签的开始，带斜线的为标签的结束：

例如：<html></html> <head></head> <title></title>

关系分类：

嵌套关系：head标签和title标签就是一种嵌套关系，<head><title></title></head>;

并列关系：head标签和body标签之间就是并列关系,<head></head><body></body>。

常用单标签

注释标签

可以使用ctrl+/将一行注释，这样浏览器在读取HTML文件的时候，会忽略被注释的行，如下：

<!-- 大家好！我是Frank!     -->

换行标签

<body>

<!-- 大家好！我是Frank!     -->

大江东去，浪淘尽，千古风流人物。<br /> 故垒西边，人道是：三国周郎赤壁。

</body>

效果图：

水平线标签 <hr />

<body>

大江东去，浪淘尽，千古风流人物。<br /> 故垒西边，人道是：三国周郎赤壁。

<hr />

</body>

效果图：

图片标签

<img src="byzx.jpg">

src：图片的来源，可以为相对路径，也可以为绝对路径，建议使用相对路径，在使用相对路径的时候，使用两个点".."跳出当前目录。

alt：替换文本，当图片不显示的时候，就会显示文字。

title：提示文本，鼠标放在图片上会显示的文字。

width：图片的宽度。

height：图片的高度。

<img src="byzx.jpg" alt="白夜追凶" title="白夜追凶剧照" width="300">

效果图：

当指定的路径不正确或者图片被删除的时候,会显示替换文本：

最后注意，当只指定宽度或者高度的时候，同比例放大或者缩小（如果指定的宽度或者高度一样，图片大小不变），如果即指定了高度又指定的宽度且比例与原图片不一样，图片会变形。

超链接

<a href="byzx.jpg" title="白夜追凶" target="_blank">点我啊</a>

href：去往的路径或者是跳转的页面，必填的属性

title：提示文本，鼠标放在超链接上会显示文字

target="_blank"：打开新的页面，不关闭自身的页面，默认target等于"_self"，表示打开新的页面，关闭自身的页面。

target="_self"：在当前页页面打开

target="_parent"：在当前页面的父级页面打开

target="__top"：在当前页面的最顶层页面打开

伪JavaScript：

<a href="byzx.jpg" title="白夜追凶" target="javascrip:;">点我啊</a>  #点击之后运行一段JavaScript代码，或者没有任何反应

效果图：

锚链接

当我们再浏览一个网页的时候，浏览到底部的时候，突然想返回到顶部，就可以使用锚链接来实现了。

1.第一步定义一个锚点

 <p id="here">一场灭门惨案，让原本逍遥浪荡的关宏宇成了在逃的通缉嫌犯。身为刑侦支队队长的双胞胎哥哥关宏峰，誓要查出真相，但出于亲属回避的原则，警队禁止关宏峰参与灭门案的调查工作。关宏峰义愤辞职。调任了代支队长的周巡处于破案压力，也为了追寻关宏宇的下落，设计让离职的关宏峰以“编外顾问”的身份继续参与各大重案要案的调查。而警队所有人都被隐瞒了。由于罹患“黑暗恐惧症”，白天和黑夜出现在警队的“顾问关宏峰”，其实是由孪生兄弟二人白夜分饰，性格迥异的兄弟两人在警队中马脚不断，背负着随时被周巡及各路人马发现的危险，一路侦破了各种大案要案，目的只是想伺机调阅灭门案的案卷查出真相，以还清白……</p>

.......(略)

2.超链接到锚点

<a href="#here">回到顶部</a>

效果图：

空链接

当不清楚链接到哪里的时候，可以使用空链。

<a href="#">空链</a>

效果图：

超链接的优化写法：为整个页面指定target的方式，可以在head里面指定：

<base target="_blank">

超链接可以做下载功能，但不是很推荐：

<a href="Python核心编程(第二版).zip">点此下载</a>

效果图：

常用双标签

文本内容标签

<body>

    <p>今晚的长安街华光溢彩，人民大会堂嘉朋满座，喜气盎然。我们共聚于此，隆重庆祝中华人民共和国成立六十八周年。我代表党中央、国务院，向全国各族人民致以节日祝贺！向港澳同胞、台湾同胞、海外侨胞致以亲切问候！向所有关心和支持中国现代化建设的国际友人表示衷心感谢！</p>

</body>

p标签指定的段落文本上面会空一行。

浏览器显示效果：

标题标签 h1-h6

在一个页面上，h1最好只出现一次。

    <h1>李克强在庆祝建国68周年招待会上致辞</h1>

    <h2>李克强在庆祝建国68周年招待会上致辞</h2>

    <h3>李克强在庆祝建国68周年招待会上致辞</h3>

    <h4>李克强在庆祝建国68周年招待会上致辞</h4>

    <h5>李克强在庆祝建国68周年招待会上致辞</h5>

    <h6>李克强在庆祝建国68周年招待会上致辞</h6>

效果图：

文本标签 文本内容

<font size="6" color="red">李克强在庆祝中华人民共和国成立六十八周年招待会上的致辞</font>

可指定字体大小和字体颜色等。

效果图：

文本加粗标签

或者，建议使用strong。

    <strong>来宾们、朋友们、同志们！</strong>

    <b>来宾们、朋友们、同志们！</b>

效果图：

文本倾斜标签

，建议使用em。

    <em>来宾们、朋友们、同志们！</em>

    <i>来宾们、朋友们、同志们！</i>

效果图：

删除线标签

<del></del> <s></s> 建议使用del。

    <del>干杯！</del>

    <s>干杯！</s>

效果图：

下划线标签

<ins></ins> 建议使用ins。

<ins>六十八年在人类历史上只是短暂一瞬。</ins>  <u>六十八年在人类历史上只是短暂一瞬。</u>

效果图：

上标和下标标签

    <!-- 上标标签sup --><sup>3</sup>

    <!-- 下标标签sub -->

    h<sub>2</sub>0

显示效果：

特殊字符

有的时候我们需要显示某些特殊字符，但是这些字符却被HTML语法所使用，比如尖括号，所以可以用以下字符的代码代替：

列表

无序列表

    <ul type="circle">    #type指定行前面显示的符号，默认为"disc"实心小圆圈，其他："circle"空心小圆圈，"square"小方块

        <li>白夜追凶</li>  #列表项

        <li>无证之罪</li>

        <li>好医生</li>

        <li>美国囧案</li>

    </ul>

效果图：

有序列表

    <ol type="a" start="3">  #type可以为"1,a,A,i,I"，start指定了开始的位置

        <li>白夜追凶</li>     #列表项

        <li>无证之罪</li>

        <li>好医生</li>

        <li>美国囧案</li>

    </ol>

效果图：

自定义列表

    <dl>

        <dt>电视剧排行榜</dt>    #小标题

        <dd>白夜追凶</dd>     #解释标题

        <dd>无证之罪</dd>

        <dd>好医生</dd>

        <dd>美国囧案</dd>

    </dl>

效果图：

其他标签

音乐标签

<embed src="一人饮酒醉.mp3">  #如果想关闭播放的按钮界面，可以加入hidden="ture",隐藏播放按钮界面。

效果图（此处应有声音~~）：

滚动标签

     <marquee behavior="alternate">

         <img src="byzx2.gif" height="200">

     </marquee>

其他的常用属性：

中间的内容可以是文字，图片等，可以设置高度height，宽度width，设置背景颜色bgcolor。

behavior：设置滚动的方式

    alternate:表示在两端之间来回滚；

    scroll:表示由一端滚动到另一端，会重复

    slide:表示由一端滚动到另一端，不会重复

direction：设置滚动方向

    down：向下滚动

    left：向左滚动

    right：向右滚动

    up：向上滚动

loop：设置滚动次数，-1代表一直滚下去

效果图：

iframe

嵌套页面：

<iframe width=100% height=400px src="https://www.baidu.com" frameborder="0"></iframe>

点击切换案例：

label两种用法

老司机推荐使用第二种方法，即直接将input标签放在lable里面~