资讯专栏INFORMATION COLUMN

HTML常用标签

Pink / 485人阅读

摘要:属性值为要合并的行数代码示例被合并的单元格页面效果如何去掉单元格之间的空白默认表格的单元格之间都有的空白,如果想去掉空白,可以在开始标记中设置属性代码示例被合并的单元格页面效果其他表格内的标签除了和表格内常用的还有其他标签

一、文本类标签 1.段落

代码示例:

这是一段段落文字

网页效果:

QA:如何让一段文字居中?

代码示例:

这是一段段落文字

页面效果:

align属性值参考:

属性值 说明
left 文字左对齐
center 文字居中对齐
right 文字右对齐

QA:如何让一段文字换行?

在需要换行的内容里后面添加换行标签

代码示例:

这是一段
段落文字

页面效果:

关于


元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

2.标题

代码示例:

这是1号标题

这是2号标题

这是3号标题

这是4号标题

这是5号标题
这是6号标题

页面效果:

标题很重要

请确保将标题标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

3.内容

标签被用来组合文档中的行内元素

代码示例:

这是文字内容
这是另外的文字内容

页面效果:

4.有序列表

代码示例:

  1. 香蕉
  2. 苹果
  3. 橘子

页面效果:

QA:列表序号可不可倒序?

代码示例:

  1. 香蕉
  2. 苹果
  3. 橘子

页面效果:

==常用的有序列表属性:==

5.无序列表

代码示例:

  • 奔驰
  • 宝马
  • 奥迪

页面效果:

常用的无序列表属性:

二、图片

代码示例:


页面效果:

属性解释:

src :图片地址,可以是网络地址,类似:http://test.hawklu.com/youdaoImg/img.png可以是本地地址,类似 ../image/logo.png ,本地地址可以使用绝对路径或相对路径,==一般建议使用相对路径==

alt :图片异常(图片丢失或应用路径错误)时显示的提示文字

三、超级链接

超级链接,几乎所有的网页上都有超级链接,通常用于从一个网页跳转到另一个网页。也可以用于页面内的定位。

代码示例:

这是一个超级链接

页面效果:

点击前

属性解释:

href :要跳转的目标地址,通常网络地址,类似:http://www.baidu.com

target :目标地址的打开方式,可以是新窗体打开,也可以覆盖自身

四、表格

常见表格,通常用来处理数据。


代码示例:

1-1 1-2 1-3
2-1 2-2 2-3

页面效果:

备注:
上述代码中,为了使表格能够清晰可见,设置了表格属性 border="1" ,表示单元格边框宽度为1


如果要实现无边框表格,可以使用下面代码:

1-1 1-2 1-3
2-1 2-2 2-3

页面效果:

(1)单元格列合并(横向合并)

在需要合并的收个单元格添加属性 colspan="2" 然后删除被合并的单元格。

属性值为要合并的列数

代码示例:

1-1 1-3
2-1 2-2 2-3

页面效果:

(2)单元格行合并(纵向向合并)

在需要合并的收个单元格添加属性 rowspan="2" 然后删除被合并的单元格。

属性值为要合并的行数

代码示例:

1-1 1-2 1-3
2-2 2-3

页面效果:

QA:如何去掉单元格之间的空白?

AS:默认表格的单元格之间都有2px的空白,如果想去掉空白,可以在table开始标记中设置属性 cellspacing="0"

代码示例:

1-1 1-2 1-3
2-2 2-3

页面效果:

其他表格内的标签

除了 表格内常用的还有其他标签,

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52941.html

相关文章

  • 沃土前端系列 - HTML常用标签

    摘要:由于网页中不仅包含普通文本,还包含超文本,故被称作超文本描述语言。是的缩写,中文的意思是超文本标记语言,它是制作网页的标准语言。 html是什么 HTML是Hyper Text Markup Language的缩写,中文的意思是超文本标记语言,它是制作网页的标准语言。由于网页中不仅包含普通文本,还包含超文本,故被称作超文本描述语言。那什么是超文本呢?所谓超文本,就是指图像、视频、动画、...

    lbool 评论0 收藏0
  • HTML常用标签

    摘要:提示判断版本决定是否显示,使用如下请升级浏览器参考链接标签代码参考自绿叶学习网,网址部分代码参考自菜鸟教程,网址如有侵权,请联系删除 HTML之常用标签 介绍了前端中常用的标签,讲解了行内元素和块元素的区别,同时重点解释了语义化的意义! html标签 html控制页面结构,良好的页面结构有利于seo优化 html常用标签 ...

    余学文 评论0 收藏0
  • 第三天·HTML常用标签

    摘要:如果希望某段文本强制换行显示,就需要使用换行标签在中直接敲回车来换行是不起作用的。标签的属性用于指定超链接目标的。这是因为标识符几乎可以用在所有的标签中。 一·- 单词缩写:headHTML的-代表了六个等级的标题,其中标签比较重要,因此要尽量少用。一般是给logo使用,或者是页面中最重要的标题。 Heading level 1 Heading level 2 Heading leve...

    guqiu 评论0 收藏0
  • HTML5常用标签分类

    HTML5常用标签分类 标签(空格分隔): HTML 前端开发 [TOC] 一.HTML文档标签 : 定义文档类型. : 定义HTML文档. : 定义文档的头部.(头部内包含) (1). ``: 定义元素可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词. (2). ``:定义页面上的所有链接规定默认地址或默认目标. (3). ``: 定义文档的标题. (4). ``: 定...

    canopus4u 评论0 收藏0
  • 常用HTML标签详解与总结

    摘要:今天,我们就来详细介绍常用的标签。标签对文字字符进行换行处理。标签加入水平分割线。标签语义强调,表示重视。标签有序列表标签。即定义描述,用于添加该名词的具体解释。标签用来显示图片。默认内容标签下拉列表,以和两个标签配合完成。 对于很多HTML初学者来说,记忆和掌握标签是一门很难搞的功课。今天,我们就来详细介绍常用的HTML标签。对于标签的掌握,更多的是要通过练习,熟能生巧。 stlye...

    DobbyKim 评论0 收藏0
  • html常用标签整理

    摘要:主要通过样式为其赋予不同的表现标签用来定义内联行内元素,并无实际的意义。html文档结构 1 DOCTYPE html> 2 <html lang="zh-CN"> #这个lang表示语言,zh-CN中文的意思,整个文档的内容以中文为主,如果以英文为主,就写成lang=en 3 4 <head> 5 <meta charset...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<