HTML常用标签(上)
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)链接分类
外部链接：例如http://www.bilibili.com
内部链接：网站内部页面之间的相互链接，例如index.html
空链接：#
下载链接：地址里是一个文件或压缩包
网页元素链接：在网页中的各种网页元素都可以添加超链接
锚点链接：可以快速定位到页面中的某个位置
链接：<a href="#名字"></a>
找到目标位置标签，里面添加一个id属性，<h2 id="名字"></h2>
返回顶部：<a href="#"></a>
3.8 注释和特殊字符
(1)注释
<!--这是一行注释-->
(2)特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| 版权 | © | |
| 注册商标 | ® | |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| 乘号 | × | |
| 除号 | ÷ | |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
注：重点记住前三个。
HTML常用标签(上)的更多相关文章
- HTML常用标签
HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...
- html常用标签介绍
常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...
- HTML常用标签总结
HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- HTML基础（一）——一般标签、常用标签和表格
第一部分 HTML <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...
- 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
- 前端之常用标签和CSS初识
外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...
- Struts2常用标签
Struts2常用标签总结 一 介绍 1．Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的 ...
- jsp学习--JSP运行原理,九大隐式对象和JSP常用标签
一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...
随机推荐
- 跟着尚硅谷系统学习Docker-【day06】
day06-20200720 p24.dockerfile案例编写-1 1.创建好容器时,进去容器的时候,修改所在的当前目录. 2.新添加命令.支持vim.ifconfig 备注:原来的镜像容器默 ...
- 支持MySQL数据库的agumaster版本
下载地址:https://files.cnblogs.com/files/xiandedanteng/agumaster20200501.zip
- 乔悟空-CTF-i春秋-Misc-爆破3
hehe,第一次用这个,开始CTF刷题之旅 2020.09.02 题目地址 学习 题目分析 下边是题目给的php源码,意思就是进行源码审计,分析出能输出flag的条件. 这东西我是真小白,so,积累经 ...
- Druid连接池配置全攻略
Druid是阿里开源出来的数据库连接池,性能非常好,还自带日志监控. 它的DataSource类为:com.alibaba.druid.pool.DruidDataSource. 由于使用的yaml格 ...
- mariadb 数据库集群配置
mariadb集群配置(主从和多主) mariadb主从 主从多用于网站架构,因为主从的同步机制是异步的,数据的同步有一定延迟,也就是说有可能会造成数据的丢失,但是性能比较好,因此网站大多数用的是 ...
- 灵活使用 SQLAlchemy 中的 ORM 查询
之前做查询一直觉得直接拼 SQL 比较方便,用了 SQLAlchemy 的 ORM 查询之后,发现也还可以,还提高了可读性. 这篇文章主要说说 SQLAlchemy 常用的 ORM 查询方式,偏实践. ...
- 谈谈 Java 中的那些“琐”事
一.公平锁&非公平锁 是什么 公平锁:线程按照申请锁的顺序来获取锁:在并发环境中,每个线程都会被加到等待队列中,按照 FIFO 的顺序获取锁. 非公平锁:线程不按照申请锁的顺序来获取锁:一上来 ...
- 【转】Postgres SQL sort 操作性能调优
这篇文章将以实战的方式结合笔者在项目中真实遇到的情况来讲解.说到SQL,大家可能会遇到一些写法稍微复杂的写法.比如SQL中遇到的有聚合函数sum等,也有遇到使用group by / order by的 ...
- dubbo学习（八）dubbo项目搭建--消费者（服务消费者）
PS: 项目架子以及工程间的maven依赖配置暂时省略,后续看情况可能会单独写一篇文章捋捋框架结构,先马克~ 配置和启动 1.pom文件引入dubbo和zookeeper的操作客户端(此步骤与生产者 ...
- Linux的MySQL安装方法
第一种: APT方式安装 在ubuntu系统的apt软件仓库中,默认存在MySQL数据库 在用户模式下使用命令: apt/apt-get install mysql-server mysql-cli ...