第三章:HTML的标签

HTML特殊符号

 

空格          
大于号(>)  >
小于号(<)  &lt;
引号         &quot;
版权号©      &copy;

 

HTML超链接 

一、超链接(a标签)

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

  target属性:  _self   _blank  _top 

  锚点应用:  href="#锚点名称"   name="锚点名称"

  

<a href="#diyi">第一章(点击此处会滑动到下面第一章位置)</a>

<a name="diyi">第一章</a><br/>
第一章内容内容<br/>
如果浏览器未出现滚动条,页面点击不会出现任何反应<br/>
只有页面有滚动条时点击时才会滑动到name="diyi"标签所在的位置<br/> 

 

  电子邮件链接

  <a  href=“mailto:邮件地址”>站长邮箱 </a>(注意不能忘了mailto)

-----------------------------------------------------------------------------------

例一:

  创建一个超链接

  在新的浏览器窗口打开链接

  锚点:链接到同一个页面的不同位置

 

HTML常用标签

一、font标签定义文字

  写法:<font size="12" color="red">文字</font>

  size:字体大小   color:字体颜色

---------------------------------------------------------------------------------------------------

二、<p> 标签定义段落

  写法:<p>文字</p>

----------------------------------------------------------------------------------------------------

三、strong/b 加粗标签

  写法:<strong>文字</strong>  用于百度 google优化  <b>文字</b>用于百度优化

  strong b 标签都是加粗标签 但是对于seo优化是有区别的 strong 权重高于 b

----------------------------------------------------------------------------------------------------

四、span标签  /Pre标签

  写法:<span>文字</span>  <pre>文字</pre>

  提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。

          <pre>文字格式按源码的排版来显示,多用于表情

---------------------------------------------------------------------------------------------------

五、<del>标签  /<i>标签

 

  写法:<del>文字</del> 删除标签(多用于商场中商品的 原价:199.00)

         <i>文字</i>  文字斜体

 

 

marquee滚动标签

 

 

<marquee> ... </marquee>(此表情基本不会用到)

<marquee>啦啦啦,我会移动耶!</marquee>

 

设置文字移动方向:

属性:direction

  值:left 左边 , right 右边 , up 上边 , down下面

例:

<marquee direction=left>啦啦啦,我从右向左移!</marquee>

 

<marquee direction=right>啦啦啦,我从左向右移!</marquee>

 

behavior
设定滚动的方式:
alternate: 表示在两端之间来回滚动。
scroll: 表示由一端滚动到另一端,会重复。
slide:  表示由一端滚动到另一端,不会重复。
例:

 

<marquee behavior="alternate">alternate:表示在两端之间来回滚动。 </marquee>
<marquee behavior="scroll">scroll:表示由一端滚动到另一端,会重复。</marquee>
<marquee behavior="slide">slide:  表示由一端滚动到另一端,不会重复。</marquee>
 
以下为上述内容的html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
	<head>
	<!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--当前页面的三要素-->
		<title>标题</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="描述">
		<!-- css js -->
		<style type="text/css">
			p span{color:red;}
		</style>
	</head>


	<body>
		&quot;如果&quot;上天再让我活&nbsp;&nbsp;五百&gt;&lt;年
		版权所有:&copy;绝版菜tudy
		
		<!--href连接地址 target以什么形式打开 
		默认打开方式_self(当前窗口打开) _blank(新窗口打开) _top(一般在框架中应用,嵌入到当前页面)-->
		<a href="http://www.baidu.com" target="_top">百度</a>
		
		<h3>创建锚点:href中的#后对应要滑到的name</h3>
		<a href="#diyi">第一章</a> &nbsp;<a href="#dier">第二章</a> &nbsp;<a href="#disan">第三章</a><br/><br/>
		
		<a name="diyi">第一章</a><br/>
		第一章内容内容<br/>

		<a name="dier">第二章</a><br/>
		第二章内容内容<br/>

		<a name="disan">第三章</a><br/>
		第三章内容内容<br/>
		<br/>
		
		<!--mailto 发送邮件-->
		<a href="mailto:邮件地址">发送邮件</a>
		<br/>
		测试font标签的用法:<font size="12" color="red">文字</font>
		
		<h3>P标签用法 段落标签</h3>
		<!--strong b 标签都是加粗标签 但是对于seo优化是有区别的 strong 权重高于 b-->
		<p>根据当地<strong>政府</strong>下午公布的<b>最新</b>数据,失事的客机上人员共有58人,其中26死、多人失踪。</p>
		<p>另外飞机碰擦一辆出租车<span>导致2人受伤</span>。</p><!--span标签用于控制文本样式-->
		
		<h3>pre标签用法 文字格式按源码的排版来显示 多用于表情</h3>
		<pre>
			我
			  爱
			    你
		</pre>

		删除标签(del)价格:300.00&nbsp;&nbsp;<del>原价:500.00</del>
		<i>斜体标签(i)</i>
		
		<marquee>啦啦啦,我会移动耶!</marquee>
		<marquee direction="right">啦啦啦,我从左向右移!</marquee> 

	</body>
</html>
 

你可能感兴趣的:(html,Web,css,前端开发)