a标签不只是能链接到其他网页，也能链接到网页中的元素

class属性让你用CSS对特定的元素进行修饰

这些是一个网页设计者的有力武器

这节课还是一个index.html文件

 

以下是代码

 <html>
 <head>
 <title>TEST</title>
 </head>
 <style>
 h1.mh1{
 color: green;
 }
 </style>
 <body>
 <a href = "http://www.runoob.com/" title = "菜鸟教程" target = "_blank">插入外链:菜鸟教程</a>
 <br>
 <a href = "#myh1">寻找绿色标题</a>        <!--在文件内部就不用写地址了，直接写#[id名]就可以了-->
 <h1>我是标题</h1>
 <br>
 <br>
 <br>
 <h1>我是标题</h1>
 <br>
 <br>
 <br>
 <h1>我是标题</h1>
 <br>
 <br>
 <br>
 <h1>我是标题</h1>
 <br>
 <br>
 <br>
 <h1>我是标题</h1>
 <br>
 <br>
 <br>
 <h1>我是标题</h1>
 <br>
 <br>
 <br>
 <h1>我是标题</h1>
 <br>
 <br>
 <br>
 <h1>我是标题</h1>
 <br>
 <br>
 <br>
 <h1>我是标题</h1>
 <br>
 <br>
 <br>
 <h1>我是标题</h1>
 <br>
 <br>
 <br>
 <h1 id = "myh1" class = "mh1">我是标题</h1>        <!--id是给标签(或元素)一个ID可以让其他标签对指定ID的元素进行操作-->
 <!--class是给标签划定一个类，可以让其他标签(CSS和JS(javascript)中常用)对指定类中的元素进行操作-->
 <br>
 <br>
 <br>
 <h1>我是标题</h1>
 </body>
 </html>
 <!--
 h1.mh1{            通过类名操作h1
 color: green;
 }
 -->

如你所见我们把class属性叫做类，class属性的值叫做类名

它的显示效果

 
点击"寻找绿色标题"
 

class让指定的h1变成绿色，id让a元素能锁定到这个特定的h1

要熟练运用这些东西

//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买

转载请注明出处  by:M_ZPHr

最后修改时间：2019-01-17

#WEB安全基础 : HTML/CSS | 0x5a标签拓展和class、id属性的使用的更多相关文章

  1. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  2. #WEB安全基础 : HTML/CSS | 0x9美丽的饮料店

    我带着你,你带着钱,咱们去喝点饮料吧. 老板久仰你的大名,请你帮忙设计一个网站宣传他的饮料店 你要制定一个完美的方案还需要多学点东西 我先帮你设计一下 这是存放网站的文件夹 这是根目录   这是abo ...

  3. web前端基础——初识CSS

    1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣) ...

  4. Web前端基础(4):CSS(一)

    1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  5. #WEB安全基础 : HTML/CSS | 0x6嵌套标签(图片链接)

    嵌套标签我们已经讲一次了,在0X4.1里,我们把列表嵌套了 你觉得文字链接难看得令人作呕,好,你再也不会有这种感觉了   一如既往,一个html文件和一个存放图片的文件夹 index.html的代码, ...

  6. #WEB安全基础 : HTML/CSS | 0x2初识a标签

    教你点厉害玩意,尝尝HTML的厉害! 我为了这节课写了一些东西,你来看看

  7. #WEB安全基础 : HTML/CSS | 0x8CSS进阶

    你以为自己学这么点CSS就厉害了? 学点新东西吧,让你的网页更漂亮 我们只需要用到图片和网页   这是index.html的代码 <html> <head> <title ...

  8. #WEB安全基础 : HTML/CSS | 0x3文件夹管理网站

    没有头脑的管理方式会酿成大灾难,应该使用文件夹管理网站 这是一个典型的管理方法,现在传授给你,听好了 下面是0x3初识a标签里使用的网站的目录,我把它重新配置了一下

  9. Web前端基础(5):CSS(二)

    1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...

随机推荐

  1. 使用 TRESTClient 與 TRESTRequest 作為 HTTP Client 之二 (POST 檔案)

    使用 HTML 进行文件上传,已经是很平常的应用了,在手机App里面,也常常会用到这个作业,例如拍照上传,或是从相簿选取照片上传,都是很常见的. 在 HTML 的 Form 里面,要让使用者选择文件上 ...

  2. 逆天的 GRUB

    参考资料 GRUB 的文档在这里:https://www.gnu.org/software/grub/manual/grub/ Linux 的启动过程和 GRUB 的地位 Linux 系统启动的过程是 ...

  3. 【RL-TCPnet网络教程】第31章 Telnet远程登录基础知识

    第31章      Telnet远程登录基础知识 本章节为大家讲解Telnet (Teletype Network) 的基础知识,方便后面章节的实战操作. (本章的知识点主要整理自网络) 31.1   ...

  4. Apache Storm 核心概念

    前言: Storm读取实时数据流,并传递给处理单元,最终输出处理后的数据. 下图描述了storm的处理数据的主要结构. 元组(Tuple) :       元组是Storm提供的一个轻量级的数据格式, ...

  5. [Swift]LeetCode419. 甲板上的战舰 | Battleships in a Board

    Given an 2D board, count how many battleships are in it. The battleships are represented with 'X's, ...

  6. github pages代码高亮highlighter

    github pages 一直想添加代码高亮 highlighter ,基于 jekyll 3.0 的 rouge 终于搞定了: 下载代码高亮库 在 cmd 中输入: rougify style mo ...

  7. 从源码分析如何优雅的使用 Kafka 生产者

    前言 在上文 设计一个百万级的消息推送系统 中提到消息流转采用的是 Kafka 作为中间件. 其中有朋友咨询在大量消息的情况下 Kakfa 是如何保证消息的高效及一致性呢? 正好以这个问题结合 Kak ...

  8. 『素数 Prime判定和线性欧拉筛法 The sieve of Euler』

    素数(Prime)及判定 定义 素数又称质数,一个大于1的自然数,除了1和它自身外,不能整除其他自然数的数叫做质数,否则称为合数. 1既不是素数也不是合数. 判定 如何判定一个数是否是素数呢?显然,我 ...

  9. 有道云笔记 - Markdown模板(文首附markdown源码，即.md文件)

    有道云笔记 - Markdown模板 附 本文的Markdown源码镜像: https://github.com/yanglr/AlgoSolutions/blob/master/Youdao_Not ...

  10. Chapter 4 Invitations——17

    "Then why —"He shrugged. "I was hoping you were just letting him down easy." “这为 ...