当前位置:首页 > 前端技术 > HTML网页设计常用标签及属性

HTML网页设计常用标签及属性

2022年08月05日 19:32:57前端技术6

在认识标签前,我们先了解了解标签的结构,标签分两大类,一种是单标签,另一种是双标签。
标签的基本结构:

1.单标签:

			1.结构格式:
				<标签名 属性名='属性值' 属性名='属性值' .../>
			2.注意;
				单标签在最后有一个正斜杠 '/'

2.双标签:

			1.结构格式:
				<标签名 属性名='属性值'...>内容</标签名>
			2.注意:
				双标签会分两个部分,左边叫开始标签,右边叫结束标签,结束标签必须有正斜杠'/'

html中标签也可以分为块级标签,内联标签,

    	1.1块级标签:
    	如果两个同样的标签写在一起,出现在不同的行上,这种就叫块级标签,比如说<h1>标签,div标签,
    	特点占据整行或多行,自带换行效果,除了div外,一般的块级标签都会有内外边距,宽度和高度

		1.2内联标签:
	    如果两个同样的标签写在一起,出现在一行则表示这是内联标签,特点是不会占据多余面积,
	  内联标签没有内外边距,但可以通过css来设置,也没有上下边距,没有宽度和高度
	注意:
    	在内联标签中,有一个标签,img标签是有边距和宽度及高度的,叫行内块级标签	

常用的标签介绍:

1.标题标签:
	<h1>标题1[字号最大]</h1>
	<h2>标题2</h2>
	<h3>标题3</h3>
	...
	<h6>标题6</h6>
		标题标签一共有6个级别,即h1~h6,字号从大到小

2.段落标签:
	<p>内容</p>
		代表文章的一个段落

3.换行标签:
	<br/>

4.图片标签:
	<img src="" alt>
		src表示图片路径,可写相对路径,也可以写绝对路径
		alt表示当图片没有时,也就是裂图时描述图片的信息或者替代的文本

5.超链接标签:
	<a href="链接网址">链接的文字或者图片</a>
	注意:
		<a href="url" target= "_blank" title="新建
		的网页的标题">内容</a>

		#target 表示用户点击链接,打开的方式,他的值是固定的
			_self 表示在当前页面打开新的页面,也就覆盖当前的页面[默认值]
			_blank 表示在新建的浏览器窗口中打开一个新的窗口

6.列表标签:
列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单,它是含有语义的,标签结构如下
	1.有序列表:
	    <ol>
	        <li> </li>
	    </ol>

	2.无序列表:
	    <ul>
	        <li> </li>
	    </ul>

		3.自定义列表:
		    <dl>
		        <dt> </dt>
		    </dl>
		列表之间可以进行嵌套使用

7.表格标签
	表格元素及相关样式
		1、<table>标签:声明一个表格

		2、<tr>标签:定义表格中的一行

		3、<td>和<th>标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格

	表格相关样式属性
	border-collapse 设置表格的边线合并,如:border-collapse:collapse;

标签的属性:

		1.属性格式:
			<标签名 属性名='属性值'...>内容</标签>
		2.属性有什么作用?
			描述标签的作用,给用户进行标签的提示或者增加标签的功能

		3.实体字符(具有特性功能的字符)
			1.&nbsp :表示空白字符,即一个空格
			2.&lt :小于号
			3.&gt :大于号

		4.无意义标签div和span
			1.div常用于包含其他的标签,用于表示网页的一整部分内容,一般用于网页的布局
			2.span常用于包含其他的标签或者普通的文本内容,也是用于网页布局的一种,本身没有任何其他的独特属性

作者:行云流水的刘
来源链接:https://blog.csdn.net/sinat_31907813/article/details/82763221

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/18099.html

标签: HTML
分享给朋友:

“HTML网页设计常用标签及属性” 的相关文章

HTML5结构标签

GUIDM在这里祝大家节日快乐! 博主有话说:如果有描述错误之处请大家纠正。让我们可以一起学习一起进步。 个人主页:GUIDM的主页 内容专栏:HTML5干货系列 此块内容为纯纯的干货,略显乏味枯燥,是笔记向的blog。如果觉得还不错,希...

HTML常用标签的用法

HTML常用标签的用法

一、首先要了解一下什么是HTML,HTML(Hyper Text Markup Language,简称:HTML)也叫作超文本标记语言,是一种使用结构化Web网页及其内容的标记语言,HTML文档也叫做Web页面, 下面就来讲讲一些HTML中常用的标签。...

模板引擎 Thymeleaf  动态渲染 HTML

模板引擎 Thymeleaf 动态渲染 HTML

1、添加依赖 <!-- Thymeleaf 模板引擎 --> <dependency> <groupId>org.thymeleaf</gro...

HTML之框架结构标签的简单使用

框架标签的简单使用 框架: 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,简而言之,就是在一个窗口中显示多个页面。 每个页面称之为一个框架。并且每个框架独立于其他的框架。 使用...

HTML5 自动聚焦autofocus属性

原文:https://davidwalsh.name/autofocus 翻译:http://blog.csdn.net/renfufei/article/details/9797419   HTML5 推出了一大堆精彩的东西给我们。 过去我们要...

超链接a标签的属性target的可选值有哪些以及区别

超链接a标签的属性target的可选值有哪些以及区别 1、<a target="_blank"></a> 2、<a target="_parent"></a> 3、<a targ...

html标签汇总

html标签汇总

文章目录 段落处理 图像标签 超链接 注释 特殊字符 表格 列表标签 无序列表 有序列表 自定义列表...

HTML中的Style标签media属性控制打印内容样式

最近项目用到Web页面打印报表的功能,因为我们的项目采用的是HTML的Table方式实现的表格,所以符合javascript中的window.print,了解了下window.print()函数的使用方式。 window.print():用来打印window.documen...

html5 video 视频标签详解

现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从...

HTML-列表标签list与表格标签table

HTML-列表标签list与表格标签table

目录   列表标签 表格标签 列表标签      <ul>无序列表             ...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。