当前位置: 首页 > article >正文

【HTML基础】HTML基本语法

HTML语法

  • 1.单标记
  • 2.双标记
  • 3.属性

1.单标记

HTML中是不区分大小写的,空格与回车在其中无效果

HTML中用于描述功能的符号称为“标记”,单标记是其中的一种。

单独使用单标记就可以表达完整的意思,使用一对尖括号将标记名称括起来就能表示一个单标记了。

换行单标记:

<br>

为了展示br单标记的效果,我们来看下面一段代码:

<html><head><meta charset="UTF-8"><title>br标记示例</title></head><body>这是第一行。这是第二行。这是第三行。点赞收藏关注</body>
</html>

网页效果:
在这里插入图片描述

可以发现,代码中看似不同行的内容,在浏览器窗口中被显示在同一行,而这时候br单标签就能实现换行操作。

添加br标记:

<html><head><meta charset="UTF-8"><title>br标记示例</title></head><body>这是第一行。<br>这是第二行。<br>这是第三行。<br>点赞<br>收藏<br>关注</body>
</html>

添加br标记后的网页效果:
在这里插入图片描述

单标签还有:

<HR>
<!=绘制水平线--><BASEFONT>
<!=设置渲染文本时作为默认字体的基础字体值。--><COL>
<!=指定基于列的表格默认属性。-->
.....

2.双标记

双标记由首标记和尾标记两部分构成,必须成对使用
首标记告诉Web浏览器从此处开始执行该标记所表示的功能;
尾标记告诉Web浏览器在此处结束该标记;

注意:左尖括号与右尖括号是任何标记的开始和结束,双标记中结束的标记总是在开始标记前加一个斜杠/

部分双标记示例:

<html>...</html><!=html开始与结束-->
<head>...</head><!=头部内容-->
<body>...</body><!=主体内容-->
<b>...</b><!=加粗-->
<i>...</i><!=斜体-->
<u>...</u><!=下划线字体-->
<p>...</p><!=段落o-->
<s>...</s><!=删除线字体-->

为了展示标记的效果,我们看下面代码:

<html><head><meta charset="UTF-8"><title>标记示例</title></head><body>这是第一行。<br><p>这是一个段落</p><br><b>加粗--</b><i>斜体--</i><u>下划线--</u><s>删除线</s><br><hr><b><i>点赞</i></b><br><s><i>收藏</i></s><br><b><u><i>关注</i></u></b></body>
</html>

网页效果:
在这里插入图片描述

3.属性

HTML使用标记告诉浏览器如何展示网页,在此同时,还可以为标记元素附加一些信息,这些附加信息就是属性。
没有声明属性的标记,不代表没有属性,而是使用的默认属性。

在上文的展示中,我们是到了hr单标签可以在网页中绘制一条水平线,没有声明属性,默认就是实线,颜色是黑色。

<hr>

让我们来为它声明一些属性,改变其形态:

<html><head><meta charset="UTF-8"><title>标记示例</title></head><body><p>这是一个段落</p><br><hr size=50px color=greenyellow><hr><hr size="8px" align ="center" color=red><b><i>点赞</i></b><br><s><i>收藏</i></s><br><b><u><i>关注</i></u></b></body>
</html>

网页效果:
在这里插入图片描述

通过代码中hr标签声明不同属性展示效果的对比,可以明显体会到属性的作用,可以按照爱好调整标签的样式属性。

属性语法基本就是:
属性名与标签名需要空格间隔开,属性值可用 “” 括起来,也可不用。

<标签名称 属性名1 = "属性值" 属性名2 = 属性值>

如果觉得文章实用:
–点赞
–收藏
–关注
在这里插入图片描述

http://www.lryc.cn/news/2419754.html

相关文章:

  • 【CSDN软件工程师能力认证学习精选】吐血整理!140 种 Python 标准库、第三方库和外部工具都有了
  • linux驱动开发扩展--字符设备注册详解
  • 多线程之线程间通讯
  • (4)pokeman_用图片对模型进行测试
  • 什么是TTL电平,什么是CMOS电平
  • “boost::get_property的用法示例“:使用Boost库的get_property方法可以方便地获取C++对象的属性值
  • sockaddr和sockaddr_in结构体、以及inet_ntoa()和inet_addr()函数的用法
  • rownum,row_number區別。 执行顺序
  • 最新BIOS设置中英文对照表
  • P2P原理与实践
  • erpc的设计和工作机制
  • MD5:介绍与应用
  • Win10 VC++6 无法启动此程序,因为计算机中丢失mfc42d.dll 需要提升
  • Vim的全面配置
  • 谈安全测试的重要性
  • Oracle 视图详解
  • 浅谈快速沃尔什变换(FWT)快速莫比乌斯变换(FMT)
  • Android 二级列表控件ExpandableListView 的简单使用
  • FlashFXP的使用
  • stm32平衡小车--(1)JGB-520减速电机+tb6612(附测试代码)
  • Linux磁盘配额(EXT4XFS)
  • html简单网页代码:HTML+CSS茶叶官网网页设计实例 企业网站制作
  • Red5 流媒体技术(初级了解)
  • VRRP原理和配置
  • case when的使用方法
  • 探秘Proton:统一的实时数据分析引擎
  • 不能通过“www.baidu.com”访问百度解决方法
  • Nginx 简单的负载均衡配置示例
  • portlet示例_Java Portlet示例教程
  • C#让程序运行更稳健——异常、调试和测试(代码没看懂)