HTML 常用标签1

HTML 常用标签1

HTML 页面整体构成

用浏览器打开任意一个网页，右键选择查看网页源码，就可以看到网站的HTML代码，总结一下，整体结构如下图：

html页面整体构成

body 标签

用法：

<body>内容</body>

<body> 的常用属性

  • bgColor：网页背景色。如：
<body  bgColor = “red">
  • background：网页背景图片地址。如：
<body  background = “images/01.jpg">

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>这是我们的第一个页面</title>
    </head>
    <body bgColor="#88cc66" background="https://img.php.cn/upload/course/000/000/009/5858c32b29eab172.jpg"> 
        <h1>欢迎加入ppqppl的博客</h1>
        <h2>希望你能够在这里找到自己想要的内容</h2>
    </body>
</html>

HTML文本修饰标记

<b></b>：加粗bold。如：<b>HTML文件</b>
<i></i>：斜体italic。如：<i>HTML文本</i>
<u></u>：下划线underline。如：<u>HTML文本</u>
<s></s>：删除线strike。如：<s>删除线</s>
<sup></sup>上标。
<sub></sub>下标。
<font></font>字体标记
Size：文本大小，取值1-7。1小，7大。
Color：颜色值。
Face：字体，楷体、黑体、宋体。

来看一个下标的实例

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>这是我们的第一个页面</title>
    </head>
    <body>
      <font size="5">X<sup>6</sup> + Y<sub>5</sub> =100</font>  
    </body>
</html>

学了这么多，来写一些好玩的东西吧

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>这是我们的第一个页面</title>
    </head>
    <body bgcolor="#88dd66">
 <font size="7" color="" face="楷体">行路难.其一</font><br>
<font size="4" color="yellow" face="楷体">
金樽清酒斗十千，玉盘珍羞直万钱。<br>
停杯投箸不能食，拔剑四顾心茫然。<br>
</font>
<font size="3" color="red" face="宋体">
欲渡黄河冰塞川，将登太行雪满山。<br>
闲来垂钓碧溪上，忽复乘舟梦日边。<br>
    </font>
<b>行路难！行路难！</b><i>多岐路，今安在？</i><br>
<u>长风破浪会有时，直挂云帆济沧海</u><br>
    </body>
</html>

p 表示一个段落。

  • 常用属性：align：水平对齐方式，取值：left(左)、 center(居中)、 right(右)
  • 举例：<p>ppqppl</p>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
       <p align="left">HTML是一种规范</p>
       <p align="center">是一种标准</p>
       <p align="right">编写网页的一种标准</p>
    </body>
</html>

换行标记 br

换行标记记作 </br> 也可以记作 <br>

水平线标记(单边标记)：hr

  • size：水平线的粗细，单位一般为px。
  • color：水平线的颜色。
  • width：水平线的宽度。
  • noshade：去掉水平线的阴影(在HTML中，noshade是没有值的属性)。如：<hr noshade>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        HTML是一种规范，是一种标准，编写网页的一种标准。
        <hr size="2" color="red" width="80%" noshade>
        超文本：就是网页上不光有文本，还有图片、音乐、视频等。
        <br><br><br><br>
        标注：是一种记号，是一种标志。如：红绿灯
    </body>
</html>

pre 预排版标记

功能：将保留所有的空白字符(空格、换行符)，换句话说：就是原封不动输出。

strong 和 em

有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

通过个实例来看看

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
       <h1>水调歌头·丙辰中秋</h1>
<pre>
朝代：宋代
作者：苏轼
<strong>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</strong>

明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
<em>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</em>
<pre>
    </body>
</html>

<em>的内容在浏览中显示为斜体，<strong>显示为加粗。如果不喜欢这种样式，没有关系，以后可以使用 css 样式去改变它。

posted @ 2022-05-17 16:48  ppqppl  阅读(44)  评论(0)  编辑  收藏  举报