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

HTML起步——学习2

1.HTML元素

1.什么是HTML元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。 HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。

<开始标签> 元 素 内 容 <结束标签>

这就是一个元素:

1 <p>shiyanlou</p>

2.HTML元素语法

HTML元素语法特点:

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性(下面会讲)

3.HTML元素嵌套示例

下面这个例子中有几个元素:

1 <html>
2     <body>
3         <p>let's go to shiyanlou</p>
4     </body>
5 </html>

答案当然是三个<html><body><p></p></body></html>,应该很好理解吧,这就是所谓的嵌套

4.HTML空元素

HTML元素的内容是开始标签与结束标签之间的内容,而某些 HTML 元素具有空内容(empty content),这种元素被叫做空元素。比如说换行符<br>。 但<br>是不规范的写法,早先发布的html规范中<br><hr><img>等标记元素是无需“封闭自身”的,这就造成了html规范本身的不严谨,所以后来参考了更规范的XML语言的语法推出了xhtml。在xhtml中所有类似<br>这样的孤立标签都需要自行封闭,具体的做法就是在标签名字的后面跟个“/”,例如<br/>。从逻辑上讲<br />=<br>...</br>,这样做的目的是为了尽量减少网页的代码量,同时保持逻辑严谨。

扯了这么多就是想说,请保持规范的写法,以后换行请用<br/>

前面我们从示例中看出,<p>标签结束以后也后一个换行的动作,那< p>标签和< br/>标签有什么异同呢?

  • 相同之处是<br>和<p>都是有换行的属性及作用
  • 区别 <br/>是只需一个单独使用,而<p>和< /p>是一对使用
  • <br/>标签是小换行提行(相当于我们平时文本中输入一个回车),<p>标签是大换行(分段,相当与两个回车),各行作用。

看看两个标签的区别 先来个<br/>换行,

1  <p>
2         hello shiyanlou <br/>
3         i am so happy<br/>
4         let's go to shiyanlou.<br/>
5     </p>

再来个<p>< /p>换行

1  <p>long time to see.</p>
2     <p>i am so happy.</p>
3     <p>let's go to shiyanlou.</p>

上述代码效果不同,如若相同,如下使用<br/>:

1  <p>
2         hello shiyanlou <br/><br/>
3         i am so happy<br/><br/>
4         let's go to shiyanlou.<br/><br/>
5     </p>

2.HTML属性

某些标签要想按照作者的意愿来实现在网页上,就得需要一定信息的补充,这信息就叫属性,HTML标签可以加上属性的描述。属性提供了有关 HTML 元素的更多的信息。

关于属性有以下语法规则:

  • 是在 HTML 元素的开始标签中定义。
  • 总是以名称和值对应的形式出现,比如:name="value"。
  • 属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
1 <a href="http://www.shiyanlou.com">shiyanlou</a>

href="http://www.shiyanlou.com",这一部分就叫做< a>标签的属性,是对< a>标签的补充说明,既指向的网页。

3.HTML文本格式化

一般我们在网页中能看见有各种各样的字体、文本样式,这就是文本格式化标签的功劳。下面我们就来学习使用文本格式化标签(比较常用的)

标签描述
< b>(bold)粗体
< big>(big)大字体
< em>(emphasized)强调字
< i>(italic)斜体
< small>(small)小字体
< strong>(strong)加重语气

4.HTML样式

上面我们用了各种各样的标签来使HTML文本格式符合我们的意愿,其实有一个属性能帮助我们减少不少的麻烦。

style 提供了一种改变所有 HTML 元素的样式的通用方法。这里可以将,背景颜色,字体样式,字体尺寸,字体颜色,对齐方式一并定义好。

转载于:https://www.cnblogs.com/changely/p/6690642.html

相关文章:

  • 1.Zabbix 3.0 基础
  • bzoj4823[CQOI2017]老C的方块
  • 工资计算(用SQL来计算)
  • 电梯演说模板练习
  • 优达学城-并行编程-Unit2 硬件内存
  • ajax,json
  • 修饰符
  • 网络中数据的传输过程
  • 如何把你的Windows PC变成瘦客户机
  • codevs 1086 栈(Catalan数)
  • Java设计模式---策略模式
  • 2017BUPT校赛 H-Black-white Tree
  • hibernate之复合主键作为外键的相关配置
  • js中match函数方法
  • 51NOD 1237 最大公约数之和 V3 [杜教筛]
  • 4月23日世界读书日 网络营销论坛推荐《正在爆发的营销革命》
  • CAP理论的例子讲解
  • Docker 1.12实践:Docker Service、Stack与分布式应用捆绑包
  • download使用浅析
  • echarts花样作死的坑
  • js ES6 求数组的交集,并集,还有差集
  • MySQL Access denied for user 'root'@'localhost' 解决方法
  • Netty源码解析1-Buffer
  • SOFAMosn配置模型
  • uva 10370 Above Average
  • 分布式事物理论与实践
  • 给第三方使用接口的 URL 签名实现
  • 扑朔迷离的属性和特性【彻底弄清】
  • 系统认识JavaScript正则表达式
  • 用mpvue开发微信小程序
  • 栈实现走出迷宫(C++)
  • Python 之网络式编程
  • ​​​​​​​​​​​​​​Γ函数
  • # 透过事物看本质的能力怎么培养?
  • #WEB前端(HTML属性)
  • #调用传感器数据_Flink使用函数之监控传感器温度上升提醒
  • (02)Hive SQL编译成MapReduce任务的过程
  • (04)odoo视图操作
  • (13):Silverlight 2 数据与通信之WebRequest
  • (附源码)spring boot基于小程序酒店疫情系统 毕业设计 091931
  • (一)Thymeleaf用法——Thymeleaf简介
  • (一)认识微服务
  • (原創) 如何使用ISO C++讀寫BMP圖檔? (C/C++) (Image Processing)
  • (轉貼) 蒼井そら挑戰筋肉擂台 (Misc)
  • *(长期更新)软考网络工程师学习笔记——Section 22 无线局域网
  • ***测试-HTTP方法
  • ... 是什么 ?... 有什么用处?
  • .NET / MSBuild 扩展编译时什么时候用 BeforeTargets / AfterTargets 什么时候用 DependsOnTargets?
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .net 无限分类
  • .NET 自定义中间件 判断是否存在 AllowAnonymousAttribute 特性 来判断是否需要身份验证
  • .NET文档生成工具ADB使用图文教程
  • @31省区市高考时间表来了,祝考试成功
  • @RequestBody详解:用于获取请求体中的Json格式参数
  • [ vulhub漏洞复现篇 ] Jetty WEB-INF 文件读取复现CVE-2021-34429