HTML基本标签总结

最新推荐文章于 2024-05-20 22:08:52 发布

Y9186

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量175

点赞数 2

文章标签： html html5 css

本文链接：https://blog.csdn.net/iteuko/article/details/120805167

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>网页名称</title>
</head> 
<body><!--基本标签效果-->
<h1>数字</h1>
   <b>123123</b>
<i>123131</i>546876545<del>5412</del>
<u>54132</u>
12154485465<hr>
<br>54445212
5464875<p>164515<p>64985
<h2>文字</h2>
<font face="Times" color="red" size="10">新华社北京10月16日电（记者胡喆）北京时间2021年10月16日0时23分</font>，搭载神舟十三号载人飞船的长征二号F遥十三运载火箭，在酒泉卫星发射中心按照预定时间精准点火发射，约582秒后，
<pre>神舟十三号载人飞船与火箭成功分离，进入预定轨道，
顺利将翟志刚、王亚平、叶光富3名航天员送入太空，飞行乘组状态良好，发射取得圆满成功。</pre>
</body>
</html>

一.常用标签

语法结构：<标签名属性=“名称”> </标签>

加粗标签： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>加粗标签</title>
</head>
<body>
     <b>好</b>
     <strong>好</strong>
  
</body>
</html>

斜体标签： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>斜体标签</title>
</head>
<body>
     <i>好</i>
     <em>好</em>
  
</body>
</html>

下划线标签： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下划线标签</title>
</head>
<body>
     <u>好</u>
     
</body>
</html>

删除标签：<del> </del>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>删除标签</title>
</head>
<body>
     <del>好</del>
  
</body>
</html>

水平分割线：<hr/>(单标签）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>水平分割线标签</title>
</head>
<body>
     我喜欢敲代码<hr>
     我喜欢敲代码
  <!--如何调节水平分割线长度和粗细-->
     我喜欢敲代码<hr width="20" size="20">
  
</body>
</html>

分行： (单标签）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分行标签</title>
</head>
<body>
     我今天早上起来敲代码了<br>
     我很高兴
  
</body>
</html>

注释标签：(放在不同代码的连接处,方便识别）

属性：width=“” size=“”

段落标签：(单标签）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>段落标签</title>
</head>
<body>
     哈哈哈哈哈哈<p>
     哈哈哈哈哈哈
  
</body>
</html>

上标：（单标签）

下标：（单标签）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上标标签,下标标签</title>
<!--x的2次方-->
</head>
<body>
     <sub>x</sub>2
<!--变量多时我们需要用到X1,X2来表示，这时候就需要下标标签-->
     <sup>x</sup>1  
</body>
</html>

随你标签(自取）：<pre></pre>(你输入的什么格式，就给你呈现什么形式。会自动分行）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>随你标签</title>
</head>
<body>
     <pre>
          草  唐.白居易
  离离原上草，一岁一枯荣。
  野火烧不尽，春风吹又生。
</pre>
     
  
</body>
</html>

标准行内标签：

标题标签：<hn>(n的取值1~6 字体大小由大到小加成换行)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标题标签</title>
</head>
<body>
     <h1>标题</h1>
     <h2>标题</h2>
     <h3>标题</h3>
     <h4>标题</h4>
     <h5>标题</h5>
     <h6>标题</h6>
</body>
</html>

位置属性：如：<h1 align="center">标题</h1> 里面的align就是属性此代码可以让标题居中 right居右 left居左） <div>表示盒子自动换行也可使标题位置居中：<div id="demo">标题</div>

字体颜色标签：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>字体颜色标签</title>
</head>
<body>
     <font color="red">爱好打篮球</font>
     <!--三原色法-->
     <font color="#0000FF">爱好打篮球</font>
     
  
</body>
</html>

颜色属性：color 如：字体（中间的字体两字就会变红）

颜色表示法：英语单词red green blue black

三原色法#rrggbb 0~F #000000(六位）

本人才接触，请大神多多指教。