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常用标签

  1. 段落标签:<p>内容</p> 内容显示出来后,自动换行
   <p>西安邮电大学</p>
   <p>西北政法大学</p>
  1. 行标签:<span>内容</span>内容显示出来后,不会自动换行。
   <span>大唐芙蓉园</span>
   <span>钟楼</span>
  1. 字体标签:<font face="字形" color="颜色" size="字号"> 内容</font>:用来设置字形、字号、文字颜色。
   <font color="red" face="隶书" size="25">
       <p>西安邮电大学</p>
   </font>
  1. 换行标签:<br>一个标签换一行
   三国演义 <br>
   西游记
  1. 水平分割线标签:<hr color="颜色" width="宽度" size="粗细"/>
  2. 标题标签:<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. 文本格式标签:
    (1)字体加粗:<b>内容</b>
    <strong>内容</strong> -------->XHTML的标签(推荐)
   <p>AAAAAA</p>
   <p>
       <b>AAAAAAA</b>
   </p>
   <strong>
       <p>AAAAAAA</p>
   </strong>

(2)斜体:<i>内容</i><em>内容</em>

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

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

(3)删除线:<del>内容</del>

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

(4)下划线:<ins> 内容 </ins><u> 内容 </u>

   <ins>星星会眨眼睛的</ins>
   <br>
   <u>星星会眨眼睛的</u>
  1. 高亮显示标签:<mark>内容</mark>
   <p>我是<mark>高亮</mark>标签哦</p>
  1. 特殊字符标签:
    (1)空格字符:&nbsp; 一般三个空格标签占位一个汉字
    <p>&nbsp;&nbsp;&nbsp;</p>

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

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

(3)版权符号 ©:&copy;

    &copy;星空有限公司

(4)注册商标 ®:&reg;

    &reg;星空有限公司

(5)摄氏温度 °:&deg;

   今天的气温是:30&deg;

(6)加减符号 ±:&plusmn;

   a&plusmn;b

(7)乘号 ×:&times;

   a&times;b

(8)除号 ÷:&divide;

   a&divide;b 

(9)平方 ²:&sup2;     立方 ³:&sup3;

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

(10)下标:<sub>下标内容</sub>

   CO<sub>2</sub>
  1. 图像标签:
    (1)图像格式:
    A、gif:支持动画、透明、无损的图像格式
    B、png:体积小,支持alpha透明,不支持动画
    C、jpg(jpeg):有损压缩的余香格式,体积大,不支持动画,不支持透明,色彩丰富。
    (2)图像标签:<img src="图像全名" alt="提示信息" width="宽度" height="高度"/>
    :这里的"图像全名"是指图像所在的目录(位置)

  2. 路径:
    (1)绝对路径:从根目录(带盘符)开始的路径—>C:/program files/vscode
    (2)相对路径:从当前目录开始的路径
    A、’.’:表示当前目录
    B、’…’:表示当前目录的上一级目录

   <img src="../images/8.png.jpeg" alt="图像加载中..." width="300" height="200">
  1. 列表标签:
    (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>
  1. 超链接标签: <a href="页面的地址">文本或多媒体</a>
    超链接的内容,文本或多媒体,可结合图像标签一起使用。点击链接的图片,跳转到相关网页。
    <a href="d3.html">
        <img src="../images/8.png.jpeg" width="300" height="200">
    </a>
  1. 页面背景:在页面的body中设置
    (1)页面背景颜色:<body bgcolor="颜色">
    (2)页面背景图片:<body backcolor="图像全名">

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

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值