HTML学习笔记（一）

蓝澈1121
139 阅读3分钟

快速认识HTML

  • 何为HTML?
    • 以.html或者.htm结尾的文档被称为html文档。
    • HTML（HyperText Markup Language），是一门超文本标记语言。
    • 超文本是指页面内可以包含图片、链接、音频、视频等非文字元素。
  • HTML的标签写法？
    • HTML是由标签组成的，按照标签是否成对出现，可以将标签分为：
      • 双标签：比如<span></span>，其中<span>被称为开始标签，</span>被称为结束标签，注意html中大多数的标签都是成对出现的。
      • 单标签：比如<br />，是由一个开始标签后加一个/组成。
    • 标签属性
      • 属性是直接写在开始标签中，以属性名="属性值"的方式书写，如果一个标签有多个属性，可以用空格分隔。
      • 比如<font size="12px" color="red">
      • 注意：这些标签只是为了带大家整体感知一下html，大家不认识不用焦虑，下面就由我带大家一步步的入门。
    • html基本网页结构
    <!-- 注释 -->
<!-- 声明当前文档为html5 -->
<!DOCTYPE html>
<html>
  <head>
  <!-- 设置浏览器编码方式为utf-8 -->
    <meta charset="utf-8" />
    <!-- 文档标题 -->
    <title>百度一下，你就知道</title>
  </head>
  <body>
    hello world
  </body>
</html>

HTML常用标签简单介绍

常见标签

标题标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>百度一下，你就知道</title>
    </head>
    <body>
        <!-- align属性控制文本水平位置：left左边（默认），center居中，right右边 -->
        <h1 align="center">你好呀</h1>
        <h2>你好呀</h2>
        <h3>你好呀</h3>
        <h4>你好呀</h4>
        <h5>你好呀</h5>
        <h6>你好呀</h6>
    </body>
</html>

运行结果： image.png

hr横线标签

<!-- width表示线条长短，align表示设置水平位置，size表示线条粗细，color表示线条颜色 -->
<hr width="500px" align="center" size="2px" color="purple"/>

font字体标签

<!-- color表示字体颜色，size表示字体大小 -->
<font color="red" size="20px">蓝澈</font>
<big>大字体</big>
<small>小字体</small>

br换行标签

可能写到这里，大家可能有一个疑惑，换行我直接敲回车不就可以了嘛，但是大家要注意，浏览器在展示效果的时候会将换行和多个空格转化为1个空格，所以你要想实现换行，可以使用此标签。

<!-- br是个单标签 -->
<br />

实体标签

一些特殊符号我们可以使用实体标签将它展示出来

<!-- &copy;表示版权 &nbsp;表示空格 &lt;表示小于 &gt;表示大于 -->
&copy;蓝&nbsp;澈&lt;&gt;

p段落标签

<!-- 特点：独占一行 -->
<p>你好</p>呀

img标签

  • 在学习这个标签之前带大家了解一下路径的两种写法
    • 绝对路径：从根路径往下找（C: D: ）例如下面代码中的第一个img标签用的是绝对路径
    • 相对路径：相对于当前html文档的位置（./表示当前路径，../表示上一级路径），代码中的第二个img标签使用的是相对路径
<!-- src表示图片引用地址，可以写相对路径或者绝对路径-->
<!-- width为图片的宽度，一般是只设置图片的宽或者高其中的一个，另一个让它等比例缩放 -->
<!-- title为鼠标放在图片上时显示的内容,alt为占位符，在图片未加载出来时显示-->
<img src="C:/Users/18154/Desktop/js/2.jpg" width="100px" title="蓝" alt="" />
<img src="img/1.png" alt="暂无" />

居中标签

<center>你好</center>

文本加粗

<!-- strong相比较b标签，有一种突出强调，关键词优化的作用 -->
<strong>你好</strong>
<b>蓝</b>

样式标签

<del>删除线</del>
<u>下划线</u>
<i>文字倾斜</i>
2<sup>3</sup> = 8
log<sub>2</sub>8 = 3

运行结果

image.png

层标签与节标签

主要作用是充当容器

<div>独占一行</div>
<span>内容有多大，它占多大</span>

超链接

属性将
href跳转地址、锚点链接、为空表示跳转到当前页面
target_self(默认)、_blank、窗口名称
<!-- 跳转地址：表示点击www.baidu.com可以在新的窗口中打开百度页面 -->
<a href="http://www.baidu.com" target="_blank">www.baidu.com</a>
<!--锚点链接：#加一个id名，可以跳转到对应id的那个标签所在的位置-->
<a href="#box"">www.baidu.com</a>
<div id="box">
        我是一个盒子
</div>

内联框架

<!--声明一个宽为300px，高为500px的框架，不显示边框，里面显示的内容是src中的网页的内容-->
<!--name属性可以与a标签的target一起使用-->
<iframe name="ifr" src="http://www.taobao.com" frameborder="0" width="300px" height="500px"></iframe>
<!-- 具体怎么联合使用，看下面a标签 -->
<a  href="http://www.baidu.com" target="ifr">www.baidu.com</a>

媒体标签

<!-- video表示视频 audio表示音频 -->
<!-- controls表示是否显示控件，有了它你可以实现视频的播放与暂停以及其它的一些功能 -->
<video src="img/Gi.mp4" width="400px" height="600px" controls></video>
<audio src="1.mp3" controls></audio>

标签按照表现形式分类

行内元素

分类具体标签特点
行内元素span、i、big、small、del、u、a、font、audio、strong内容一行显示，大小由内容决定、不可设置宽高
行内块img、iframe、video可设置宽高，内容一行显示
块元素h1-6、hr、div、center独占一行、可设宽高

注意：标签之间可以嵌套，但是不能相互嵌套，比如<span><a></span></a>，这是一种错误写法，正确写法应该是：<span><a></a></span> 小练习：

avatar
文章
阅读
粉丝