Html基本概念与常用标签

最新推荐文章于 2024-07-18 18:41:00 发布

星河梦~

最新推荐文章于 2024-07-18 18:41:00 发布

阅读量307

点赞数 6

分类专栏： html入门文章标签： html

本文链接：https://blog.csdn.net/weixin_53186633/article/details/117078588

版权

html入门专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Html(一）

基本概念
- HTML
- Html文件格式
标签的分类
html常用标签

基本概念

HTML

超文本标记语言，带有"<>"的称为标签（标记）

Html文件格式

<html>
          <head>
          </head>
          <body>
          </body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网页</title>
</head>

注：(1)<!DOCTYPE html> ：表示当前文档是Html5的文档
（2）<titel></titel>:表示网页标题

标签的分类

(1)双标签(双体标签)：<开始标签> 内容 </结束标签>
(2)单标签(空标签)：<标签名/>

html常用标签

段落标签：内容 内容显示出来后，自动换行

   <p>西安邮电大学</p>
   <p>西北政法大学</p>

行标签：内容内容显示出来后，不会自动换行。

   <span>大唐芙蓉园</span>
   <span>钟楼</span>

字体标签： 内容:用来设置字形、字号、文字颜色。

   <font color="red" face="隶书" size="25">
       <p>西安邮电大学</p>
   </font>

换行标签： 一个标签换一行

   三国演义 <br>
   西游记

水平分割线标签：<hr color="颜色" width="宽度" size="粗细"/>
标题标签：<hn>内容</hn>
n的取值在1~6之间，数字越小字体越大，并且自动加粗。

   <hr color="red" width="500" size="10">      //水平分割线
   <h1>床前明月光</h1>
   <h2>床前明月光</h2>
   <h3>床前明月光</h3>
   <h4>床前明月光</h4>
   <h5>床前明月光</h5>
   <h6>床前明月光</h6>

文本格式标签：
（1）字体加粗：内容
或内容 -------->XHTML的标签（推荐）

   <p>AAAAAA</p>
   <p>
       <b>AAAAAAA</b>
   </p>
   <strong>
       <p>AAAAAAA</p>
   </strong>

（2）斜体：内容或内容

   <p>
   <i>BBBBBBBB</i>
   </p>

   <p>
   <em>BBBBBBBBB</em>
   </p>

（3）删除线：<del>内容</del>

   <del>星星会眨眼睛吗</del>

（4）下划线：<ins> 内容 </ins>或 内容 

   <ins>星星会眨眼睛的</ins>
   <br>
   <u>星星会眨眼睛的</u>

高亮显示标签：内容

   <p>我是<mark>高亮</mark>标签哦</p>

特殊字符标签：
(1)空格字符：  一般三个空格标签占位一个汉字

    <p>空&nbsp;&nbsp;&nbsp;格</p>

(2)<符号:&It; >符号:>

    a&gt;b    
    <br><br>
    a&lt;b

(3)版权符号 ©：©

    &copy;星空有限公司

(4)注册商标 ®:®

    &reg;星空有限公司

(5)摄氏温度 °:°

   今天的气温是：30&deg;

(6)加减符号 ±:±

   a&plusmn;b

(7)乘号 ×:×

   a&times;b

(8)除号 ÷:÷

   a&divide;b

(9)平方 ²:² 立方 ³:³

   a&sup2;+b&sup2;=c&sup2;
   a&sup3;+b&sup3;=c&sup3;

(10)下标:下标内容

   CO<sub>2</sub>

图像标签：
(1)图像格式：
A、gif:支持动画、透明、无损的图像格式
B、png:体积小，支持alpha透明，不支持动画
C、jpg(jpeg):有损压缩的余香格式，体积大，不支持动画，不支持透明，色彩丰富。
(2)图像标签：<img src="图像全名" alt="提示信息" width="宽度" height="高度"/>
注：这里的"图像全名"是指图像所在的目录（位置）
路径：
(1)绝对路径：从根目录（带盘符）开始的路径—>C:/program files/vscode
(2)相对路径：从当前目录开始的路径
A、’.’:表示当前目录
B、’…’:表示当前目录的上一级目录

   <img src="../images/8.png.jpeg" alt="图像加载中..." width="300" height="200">

列表标签：
(1)无序列表：各个列表项之间没有顺序，是并列的

<ul type="项目符号的类型">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

注：type的取值：disc为默认实心圆点

    <p>四大名著：</p>
    <ul>
        <li>红楼梦</li>
        <li>三国演义</li>
        <li>西游记</li>
        <li>水浒传</li>
    </ul>

(2)有序列表：列表项有先后顺序

<ol type="项目符号" start="开始值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

注：type的取值：‘A’、‘a’、‘1’、‘I’、‘i’
start的取值必须为数字

    <p>西北五省：</p>
    <ol type="A" start="5">
        <li>陕西省</li>
        <li>甘肃省</li>
        <li>宁夏</li>
        <li>青海</li>
        <li>西藏</li>
    </ol>

超链接标签： <a href="页面的地址">文本或多媒体</a>
超链接的内容，文本或多媒体，可结合图像标签一起使用。点击链接的图片，跳转到相关网页。

    <a href="d3.html">
        <img src="../images/8.png.jpeg" width="300" height="200">
    </a>

页面背景：在页面的body中设置
(1)页面背景颜色：<body bgcolor="颜色">
(2)页面背景图片：<body backcolor="图像全名">

本篇仅整理了部分基本标签用法，其他用法请看下一篇。

星河梦~

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
Html基本概念与常用标签

Html(一）基本概念HTMLHtml文件格式标签的分类html常用标签基本概念HTML超文本标记语言，带有"<>"的称为标签（标记）Html文件格式<html> <head> </head> <body> </body></html>注：(1)<!DOCTYPE html> ：表示当前文档是Html5的文档（2）
复制链接

扫一扫