HTML常用标签

1. web标准

1.1 web标准的构成

主要包括结构、表现和行为三个方面。

标准 说明
结构 用于对网页元素进行整理和分类（HTML）
表现 用于设置网页元素的外观样式（CSS）
行为 网页模型的定义及交互的编写（JavaScript）

如果将web标准比喻为一只鸟，则

  • 结构=身体
  • 表现=羽毛
  • 行为=动作（飞行、站立等）

1.2 标签关系

双标签关系分为：

  • 包含关系（父子）
  • 并列关系（兄弟）

(1)包含关系

<!--head标签包含title标签-->

<head>

    <title></title>

</head>

(2)并列关系

<!--head标签与body标签并列-->

<head></head>

<body></body>

2. HTML基本结构

标签名 定义
<html></html> html标签
<head></head> 文档的头部
<title></title> 文档的标题
<body></body> 文档的主体 
<!DOCTYPE html>   <!--文档类型声明标签-->

<html lang="en">    <!--en:英语，zh-CN:中文-->

    <head>

        <!--字符集，UTF-8为万国码，统一使用-->

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

</html>

3. HTML常用标签

3.1 标题标签

一个标题独占一行。（块级元素）

<h1>

    一级标题（字号最大）

</h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6>

    六级标题（字号最小）

</h6>

3.2 段落标签

用于将HTML文档分割为若干段落。

特点：

  • 文本在一个段落中会根据浏览器窗口的大小自动换行
  • 段落之间有空隙
<p>

    这是一个段落

</p>

3.3 换行标签

用于强制换行。

特点：

  • 单标签
  • 换行没有像段落那样的空隙
<br>这是换行标签

3.4 文本格式化标签

语义 标签
加粗 <strong></strong>
倾斜 <em></em>
删除线 <del></del>
下划线 <ins></ins>

3.5 盒子标签

用于界面布局。

特点：

  • div一行只能放一个（块级元素）
  • span一行可以放多个（行级元素）
<div>

    这是大盒子

</div>

<span>这是小盒子</span>

3.6 图像标签和路径

(1)图像标签

用于定义页面中的图像。

<!--属性与属性之间用空格分开-->

<img src="图像的url" alt="" title="">
属性 说明
src 图片路径（必须属性）
alt 图像不能显示时的替换文本
title 鼠标放到图像上显示的提示文本
width 设置图像的宽度
height 设置图像的高度
border 设置图像的边框粗细（在CSS中修改）

注：图像的宽和高一般只修改其中一个，另一个会随之调整。

(2)路径

  • 相对路径：文件相对于HTML页面的位置
相对路径分类 符号 说明
同一级 src="文件名"
下一级 / src="同一级文件夹名称/文件名"
上一级 ../ src="../文件名"
  • 绝对路径：完整的路径名称（一般很少用）。eg. C:\\xxx\\xxxx.jpg

注意：绝对路径用“\”分隔，相对路径用“/”分隔。

3.7 超链接标签和链接分类

(1)超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 作用
href 链接目标的url（必须属性）
target 链接页面的打方式。_self：在当前窗口打开（默认值），_blank：在新窗口打开

(2)链接分类

  1. 外部链接：例如http://www.bilibili.com

  2. 内部链接：网站内部页面之间的相互链接，例如index.html

  3. 空链接：#

  4. 下载链接：地址里是一个文件或压缩包

  5. 网页元素链接：在网页中的各种网页元素都可以添加超链接

  6. 锚点链接：可以快速定位到页面中的某个位置

    • 链接：<a href="#名字"></a>

    • 找到目标位置标签，里面添加一个id属性，<h2 id="名字"></h2>

    • 返回顶部：<a href="#"></a>

3.8 注释和特殊字符

(1)注释

<!--这是一行注释-->

(2)特殊字符

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
￥ 人民币 &yen;
版权 &copy;
注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
乘号 &times;
除号 &divide;
² 平方 &sup2;
³ 立方 &sup3;

注：重点记住前三个。

HTML常用标签(上)的更多相关文章

  1. HTML常用标签

    HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...

  2. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  3. HTML常用标签总结

    HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...

  4. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  5. HTML基础（一）——一般标签、常用标签和表格

    第一部分  HTML <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...

  6. 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  7. 前端之常用标签和CSS初识

    外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...

  8. Struts2常用标签

    Struts2常用标签总结 一 介绍 1．Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的 ...

  9. jsp学习--JSP运行原理,九大隐式对象和JSP常用标签

    一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...

随机推荐

  1. Mysql业务设计（物理设计）

    物理设计 根据所选择的关系型数据库的特点对逻辑模型进行存储结构的设计 物理设计: 定义数据库.表及字段的命名规范 选择合适的存储引擎 为表中的字段选择合适的数据类型 建立数据库结构 定义数据库.表及字 ...

  2. python3之range()

    python range() 函数可创建一个整数列表,一般用在 for 循环中. 函数语法(左闭右开) Python3 range() 函数返回的是一个可迭代对象(类型是对象),而不是列表类型, 所以 ...

  3. Agumaster 增加股票表台账页面

  4. ascii unicode utf-8 url编码

    ascii 编码 计算机内部,所有信息最终都是一个二进制值 上个世纪60年代,美国制定了一套字符编码ascii ascii 编码就是定义:英语字符与二进制位之间的关系 unixcs unicode编码 ...

  5. python pickle库

    一.简介: 将文本信息转变为二进制数据流存储在一个文件中,便于下次使用. 二.常用函数: dump(object, file, protocol=None) 必填参数 obj 表示将要封装的对象 必填 ...

  6. javascript事件环微任务和宏任务队列原理

    哈喽!大家好!我是木瓜太香,我又来嘞,今天来说说前端面试中经常别问到的 JS 事件环问题. JS 事件环 JS 程序的运行是离不开事件环机制的,这个机制保证在发生某些事情的时候我们有机会执行一个我们事 ...

  7. Kubernetes-12：Secret介绍及演示

    Secret介绍 Secret存在的意义 Secret解决了密码.token.密钥等敏感数据的配置问题,而不需要把这些敏感数据暴露到镜像或者Pod Spec中,可以以Volume或者环境变量的方式使用 ...

  8. Python中的type(),isinstance,()dir(),的区别

    1.type() type(),获取一个变量的类型,返回值为:<class '类名'>,属于class类型2.isinstance() isinstance(),判断一个对象是否属于某种数 ...

  9. jzoj 3567. 【GDKOI2014】石油储备计划

    Problem Description Input Output 对于每组数据,输出一个整数,表示达到"平衡"状态所需的最小代价. Data Constraint 对于20%的数据 ...

  10. WebSphere MQ常用命令及配置

    WebSphere MQ常用命令及配置 (2012-06-23 23:09:16) 标签: mq命令 杂谈 分类: MQ [导读]WebSphere MQ常用命令及配置 一,队列管理命令 1,创建队列 ...