跟我一起学前端

最新推荐文章于 2022-11-28 16:23:04 发布

键盘上行走的猿

最新推荐文章于 2022-11-28 16:23:04 发布

阅读量330

点赞数

分类专栏：前端开发文章标签： html 前端开发

本文链接：https://blog.csdn.net/qq_45142260/article/details/102997913

版权

前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

行属性标签

a 超链接标签
href 属性设置超链接跳转的地址
target 属性设置跳转地址的打开方式
_blank 新标签页打开
_self 当前页打开 (默认值)
例如

<a href="http://www.baidu.com" target="_self">百度</a>

设置锚点使用a标签设置跳到锚点

<a href="#你要跳到的元素id"></a>

如果不设置元素id，则回到顶部的效果

<a href="#">回到顶部</a>

例如：

		<div id="ads">新闻标题</div>
		<div style="height: 1000px;"></div>
		<a href="#ads">回到ads</a>
		<a href="#">回到顶部</a>

	a 标签设置空链接
	
		1.<a href="###">空链接</a>
		2.<a href="JavaScript:voida(0);">js设置空链接</a>

使用a标签下载资源

如果要下载文件，需要先对资源进行压缩，然后再在href中设置该压缩文件路径

span 标签是一个没有意义的标签，如果在网页中有特殊标记则可以使用该标签
i ，em ，strong ， var ，b 都是可以起到强调作用的标签
i ， em ， var 都是斜体标签，em的语义化权重高
strong ， b 都是文字加粗，strong 表示强调
例如

<i>一句话 i</i><br />
		<em>一句话 em</em><br />
		<strong>一句话 strong</strong><br />
		<b>一句话 b</b><br />
		<var>一句话 var</var><br />

q 引用标签，用来引用一句话，他和blockquote的区别是q标签引用的是一句话，blockquote标签引用一段话
例如

古人云:<q>同一个世界同一个梦想</q>。

pre ，code 标签
pre 把用户所有的操作全部渲染，格式化输出（老标签）
code 代码标签，用来包裹一段代码（不常用）
例如

		<pre>
			床前明月光
			更上一层楼
		</pre>
		<p>
			床前明月光
			更上一层楼
		</p>
		<code>&lt;h1&gt;登鹳雀楼&lt;/h1&gt;</code>

img 标签，用来显示图片
img 标签是一个单标签
src 属性：用来设置图片的路径
1.图片路径分为三种
2.网络路径
3.绝对路径
4.相对路径（最常用）
./ 当前文件所在的路径
…/ 当前文件所在的路径的上一级文件路径
一次类推
…/…/ 上一级的上一级
在实际开发中，如果所设置的路径为当前路径，则可以省略
alt属性的作用
1.当网页无法加载图片资源时，作为替换的文本显示在页面上
2.通过alt可以网络知道当前图片的内容
width 设置宽度，不带单位
height 设置高度，不带单位
一般在实际开发中，只给图片设置一个宽或者一个高，让对应的宽或者高按照比例自动缩放，这样渲染出来的图片实质上即为按比例自动缩放的图片
例如：

		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571119572112&di=07e41984f80449354f07d3c9215f7b01&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn19%2F80%2Fw960h720%2F20180804%2F89e6-hhhczfa4959225.jpg" alt="才徐坤"/>
		<img width="200" height="200" src="鲁班.jpg" alt="鲁班"/>
		<img width="200" src="鲁班.jpg" alt="鲁班" title="鲁班"/>

标签的 title 属性设置图片的标题
该属性在各个标签上都可以使用，当鼠标悬浮在标签上的时候，该属性的值就会显示出来，有利于seo优化

标签分类总结：
1.块属性标签（块元素）
a.独自占据页面的一行空间，并且可以通过css设置宽和高，设置宽和高以后仍然独自占一行
b.可以设置上下padding和上下margin
2.行属性标签（行元素）
a.标签横向排列，在同一行展示，不支持宽和高的设置，并且他的宽高有自身的内容撑开
b.不可以设置上下padding和上下margin