HTML基本元素(一)
HTML基本元素(一)
1.换行符
<br />
Ps:br 是换行(Break)的缩写,文本会在这个标签的地方换行。
实例:
- 第一行<br />第二行
2.段落
<p>这是一个段落</p>
属性 | 说明 |
align | 行对齐方式(left,center,right) |
实例:
- <p>这是第一个段落</p>
- <p>这是第二个段落</p>
- <p>这是第三个段落</p>
3.标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
Ps:<h1>定义最大标题,<h6>定义最小标签
实例:
- <h1>标题1</h1>
- <h2>标题2</h2>
- <h3>标题3</h3>
- <h4>标题4</h4>
- <h5>标题5</h5>
- <h6>标题6</h6>
效果如下:
标题1
标题2
标题3
标题4
标题5
标题6
4.水平线
<hr />元素可用于分隔内容。
属性 | 说明 |
size | 指定线的粗细(px) |
width | 指定线的长度(px或%) |
align | 行对齐方式(left,center,right) |
实例:
- <hr size="5" width="50%" align="center"/>
5.文本格式化
<b>定义粗体文本</b>
<i> 定义斜体文本 </i>
<s>定义删除文本</s>
<del>定义删除文本</del>
<u>定义下划线文本</u>
<sup>定义上标字</sup>
<sub>定义下标字</sub>
效果如下:
定义粗体文本
定义斜体文本
定义删除文本
定义下划线文本
定义上标字
定义下标字
6.预格式文本
<pre>标签可以保留文字在源代码中的格式,使得页面中显示的内容和源代码中的格式一致。
实例:
- <pre>
- 春晓
- 春眠不觉晓,处处闻啼鸟。
- 夜来风雨声,花落知多少。
- </pre>
- 效果如下:
春晓- 春眠不觉晓,处处闻啼鸟。
- 夜来风雨声,花落知多少。
7.字体
<font>这是一段文字</font>
属性 | 说明 |
size | 定义字体大小 |
face | 定义字体 |
color | 定义字体颜色 |
实例:
- <font size="5" face="宋体" color="red">这是一段文字</font>
Ps:三种颜色表达方式
1.16进制的模式:#000000,#ffffff
2.单词模式:red,green,blue
3.RGB模式:rgb(10,20,30) 0-255
8.链接
<a href="http://~">外部链接 </a>
<a href="~.html">内部链接 </a>
<a href="mailto:邮箱地址">邮件链接</a>
<a href="tel:电话号码">一键拨打</a>
<a href="sms:手机号码">一键发送短信</a>
属性 | 说明 |
href | 定义链接地址 |
title | 链接提示信息 |
target | 链接打开方式(_self,_blank,_top) |
Ps:_self 在当前的浏览器窗口打开
_blank 在新建的窗口里面打开
_top 在顶级框架里面打开
9.锚点
锚点标签用于使用户"跳"到文档的某个部分。
<a href="#位置名"> ~ </a>
(此标签放在起始地)
<a name="位置名"> ~ </a>
(此标签放在目的地)
实例:
- <body>
- <a name="top"></a>
- <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>- <a href="#top">回到顶部</a>
- </body>
10.HTML注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。
合理地使用注释可以对未来的代码编辑工作产生帮助。
HTML注释快速生成方式:选中目标+Ctrl+/
如:<!-- This is a comment -->
拓展:两条斜杠 (//) 是 JavaScript 注释符号
如:// This is a comment
HTML基本元素(一)的更多相关文章
- Qt 学习之路:QML 基本元素
QML 基本元素可以分为可视元素和不可视元素两类.可视元素(例如前面提到过的Rectangle)具有几何坐标,会在屏幕上占据一块显示区域.不可视元素(例如Timer)通常提供一种功能,这些功能可以作用 ...
- JMeter基本元素简介
JMeter基本元素简介 一.测试计划 测试计划对象有一个复选框叫做"Functional Testing"(函数测试模式),如果选中,它将使jmeter记录服务端返回的每一个样例 ...
- 【Python 07】汇率兑换1.0-2(基本元素)
1.Python基本元素 (1)缩进:表示代码层次关系(Python中表示程序框架唯一手段) 1个tab或者4个空格 (2)注释:开发者加入的说明信息,不被执行.一个代码块一个注释. # 单行注释(一 ...
- 05. Matplotlib 1 |图表基本元素| 样式参数| 刻度 注释| 子图
1.Matplotlib简介及图表窗口 Matplotlib → 一个python版的matlab绘图接口,以2D为主,支持python.numpy.pandas基本数据结构,运营高效且有较丰富的图表 ...
- 科学计算三维可视化---Mayavi入门(Mayavi库的基本元素和绘图实例)
一:Mayavi库的基本元素 .处理图形可视化和图形操作的mlab模块 .操作管线对象,窗口对象的api (一)mlab模块 (二)mayavi的api 二:快速绘图实例 (一)mlab.mesh的使 ...
- HMM的概述(五个基本元素、两个假设、三个解决的问题)
一.五个基本元素 HMM是个五元组 λ =( S, O , π ,A,B) S:状态值集合,O:观察值集合,π:初始化概率,A:状态转移概率矩阵,B:给定状态下,观察值概率矩阵 二.两个假设 HM ...
- Android UI设计的基本元素有哪些
在android app开发如火如荼的今天,如何让自己的App受人欢迎.如何增加app的下载量和使用量....成为很多android应用开发前,必须讨论的问题.而ui设计则是提升客户视觉体验度.提升下 ...
- Qt Quick 基本元素初体验
Qt Quick 作为 QML 语言的标准库,提供了很多基本元素和控件来帮助我们构建 Qt Quick 应用,这节我们简要地介绍一些 Qt Quick 元素. 一. 基本可视化项 1.1 Item I ...
- BeautifulSoup库的基本元素
BeautifulSoup库 <html> <body> <p class='title'></p> </body> </html&g ...
随机推荐
- Unity3D UGUI之DoTweenAnimation脚本控制动画方法
DOTweenAnimation脚本: Loops循环:-1时即永久循环播放. Loops Type 是选择播放模式. Ease属性里有很多,暂时只知道Linear的效果,其他有待单独写. ID下面可 ...
- CSS篇之动画(2)
animation-name(自定义动画) name为动画名称.不要用中文,尽量用与动画相关的名称.元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 ...
- 分布式数据库中的Paxos 算法
分布式数据库中的Paxos 算法 http://baike.baidu.com/link?url=ChmfvtXRZQl7X1VmRU6ypsmZ4b4MbQX1pelw_VenRLnFpq7rMvY ...
- ABP理论学习之OWIN集成
返回总目录 如果你的应用中使用了OWIN,那么需要在主项目(一般来说是指Web项目)中添加Abp.Owin的nuget包,然后像下面那样在OWIN的 Startup文件中调用 UseAbp()扩展方法 ...
- Hadoop学习笔记—15.HBase框架学习(基础实践篇)
一.HBase的安装配置 1.1 伪分布模式安装 伪分布模式安装即在一台计算机上部署HBase的各个角色,HMaster.HRegionServer以及ZooKeeper都在一台计算机上来模拟. 首先 ...
- 为什么google bazel构建工具流行不起来
作者Jack47 转载请保留作者和原文出处 之前博主写了系列文章Google软件构建工具Bazel原理及使用方法介绍.最近使用了一段时间后,觉得这个东西不是一种通用的构建工具,很难对接到情况复杂的大的 ...
- 【PRINCE2是什么】PRINCE2认证之七大原则(3)
我们先来回顾一下,PRINCE2七大原则分别是持续的业务验证,经验学习,角色与责任,按阶段管理,例外管理,关注产品,剪裁. 第三个原则:明确定义的角色和职责. 项目离不开人员,错误的人来了,合适的人没 ...
- 获取bing.com的图片并在gnome3中设置自动切换
发现 bing.com 上的图片很好看,因此打算每天把 bing.com 的图片下载下来,用作桌面. 需要做的是两个部分,爬取图片到目录和设置目录图片为桌面背景并可以自动切换. 第一部分,下载图片,使 ...
- 薪资至少10K的一道题,你能拿下吗
我所了解的华为: 应届本科生8k+ 应届硕士生10k+ 应届博士生12k+ 看到后什么感想?有没有只恨生不逢时运不佳的感觉? 很多人做3年多甚至更久,才能达到这个薪资水平,还不如一个新生. 在我看来, ...
- 利用免费cdn加速webpack单页应用
回顾现状 在之前的学习过程中,react单页应用经过webpack打包之后会输出大概如下的目录结构,它就是站点的所有前端组成了: 1 2 3 4 5 6 MacBook-Pro:output ba ...