前端语言基础篇 之【常用标签详解】

前端语言零基础 — 常用标签

   html 是一种超文本标记语言极为标记语言而非编程语言,主要由标记标签组成,所以熟悉常用的标签是十分必要的下列介绍标记标签的特点及常用的标记标签.

  • HTML 标签是由尖括号包围的关键词,比如 <html> 
  • HTML 标签通常是成对出现的,比如 <b> 和 </b> 
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签 
  • 开始和结束标签也被称为开放标签和闭合标签 

img标签

<img src="图片地址" alt="图片名称"/>

alt是图片的名字,是给百度搜索引擎抓取使用;

<html>
<head>.....</head>
<body>
<div><div>
<img src="n.png" alt=“鱼”>
</body>
</html>

a 标签:链接、下载、锚点
1、a标签链接具体网页地址

<a href="http. 具体网页地址> 标签名称 </a>

2、a标签定义链接打开方式

<base target="_black"/>

3、a标签的下载作用

<a href ="图片ppt背景.ppt"> 下载 </a>

 4、a标签跳转至本网页

<a href="#“> 跳转至本网页 </a>

 常用标签

  • div        块
  • img       图片(单标签)
  • a           链接、下载、锚点
  • h1-h6    标题
  • p           段落
  • strong    强调(粗体)
  • em         强调(斜体)
  • span       区分样式
  • ul           无序列表
  • ol           有序列表
  • li            列表项
  • dl           定义列表
  • dt          定义列表标题
  • dd          定义列表项

常用列表项举例

有序列表

<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
效果:
1. 列表项
2. 列表项
3. 列表项
4. 列表项

无序列表项

<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
效果:
  • 列表项
  • 列表项
  • 列表项

选择符

  • id选择符(#)
  • 群组选择符(,)
  • class选择符(.)
  • 类型选择符(div....)
  • 包含选择符( div p)
  • 通配符(* )

A的四个伪类

伪类:伪类用于被选中的元素添加特殊的效果。比如设置来a标签的特殊表现。

  • link     未访问(默认)
  • hover  鼠标悬停(鼠标滑过)
  • active  链接激活(鼠标按下)
  • visited 访问过后(点击过后)

A的四个伪类的顺序

 link visited hover active

(love hate 记忆方法)

代码案例

 <style>
a:link{ font-size:60px; text-decoration: none; color: green; background; 2.png;}
a:hover{color: red;}
a:active{color:yellow;}
a:visited{color:black;}
</style>
原文地址:https://www.cnblogs.com/chongzixing/p/5779641.html