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

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

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常用于包含其他的标签或者普通的文本内容,也是用于网页布局的一种,本身没有任何其他的独特属性
  • 14
    点赞
  • 84
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值