前端基础——超链接、常用标签及文件路径及便签语义化 

<a href="1_标签.rar">百度</a>
<!--
	a 链接
    	href 页面地址的话 (跳转页面)
        	 压缩包（就会下载）	
-->

锚点

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<a href="http://www.sohu.com/#sogou-search">搜狐</a> 表示将某个网页上某个id作为锚点
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<!--
	href 写的是个id的话，点击之后会直接跳转到id所在的位置 锚点
-->

新窗口打开　

<a href="http://www.baidu.com" >百度</a>
<a href="http://www.qq.com" target="_blank">qq</a>
<!--
	target="_blank" 新窗口打开
    target="_self" 当前窗口打开
-->

base标签

<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/all.css"/>
		<base target="_blank" href="http://www.baidu.com/" /> 
		<!--base 标签是优化写法，作用是让所有页面都在新窗口打开-->
		<!--若是base后面加上网址，看下面标签中百度href，就可以简单的些了-->
	</head>
	<body>
		<div><a href="index.html" target="_self">百度</a></div> 可以简化URL的写法
		<div id="div1">
			<a href="www.qq.com">qq</a>  <!--这样的写法就是错误的，会把base中href的url在前面加上-->
			<a href="http://www.qq.com/">qq</a>  <!--所以必须写全http才可以成功访问到-->
		</div>

　　当a标签有颜色属性的时候，就不会继承父级颜色

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#div1{
				color: blue; 
			}
			#div1 a{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<a href="www.qq.com">qq</a>  <!--当a标签有颜色属性的时候，就不会继承父级颜色-->
		</div>
	</body>

常用标签　

section 版块 用于划分页面上的不同区域,或者划分文章里不同的节

header 页面头部或者版块（section）头部

footer 页面底部或者（section）底部

nav 导航 （包含链接的的一个列表）

article 用来在页面中表示一套结构完整且独立的内容部分

可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。

aside 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

1，被包含在<article>中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等

2，在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

  • h1-h6 标题
  • ul 无序列表
  • ol 有序列表
  • li ul或者ol的列表项
  • dl 定义列表
  • dt 定义列表的项目
  • dd 对dt展开的描述扩展
  • p 段落
  • time 时间
  • em 强调一个词或者一段话
  • strong 强调一个词或者一段话
  • img 图片
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<header></header>
<section>
	<header></header>
    <footer></footer>
</section>
<footer></footer>
</body>

路径计算

<img src="img/pic/img.jpg" />
<!--
	绝对路径 (xx区xx路xx号)
    	-线上的绝对路径
        -线下的绝对路径通常不会使用
    相对路径
    	
-->

　　

<img src="../../img.jpg" /> <!--../ 即为向上一个目录-->

　　

标签语义化

合理使用标签，什么标签用在什么位置，对SEO友好

posted @ 2018-03-01 22:50  千行路  阅读(319)  评论(0)    收藏  举报