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. 干货分享：Neutron的PPT，帮助你理解Neutron的各种细节

    深入解析Neutron http://files.cnblogs.com/popsuper1982/Neutron.pptx 经典的三节点部署 架构 怎么理解? 更加深入:Tap Interface ...

  2. webpack 解决 semantic ui 中 google fonts 引用的问题

    semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...

  3. 深入理解Spring Redis的使用 (三)、使用RedisTemplate的操作类访问Redis

    上一篇说了RedisTemplate对注解事务的支持,以及提供的序列化器. 事务需要开启enableTransactionSupport,然后使用@transactional注解,里面直接通过回调的c ...

  4. 流媒体协议（一）：HLS 协议

    一.HLS 概述 HLS 全称是 HTTP Live Streaming,是一个由 Apple 公司提出的基于 HTTP 的媒体流传输协议,用于实时音视频流的传输.目前HLS协议被广泛的应用于视频点播 ...

  5. [Swift]LeetCode435. 无重叠区间 | Non-overlapping Intervals

    Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...

  6. [Swift]LeetCode464. 我能赢吗 | Can I Win

    In the "100 game," two players take turns adding, to a running total, any integer from 1.. ...

  7. VMware Workstation下安装Linux

    下载VMware Workstation thunder://QUFodHRwczovL2Rvd25sb2FkMy52bXdhcmUuY29tL3NvZnR3YXJlL3drc3QvZmlsZS9WT ...

  8. json对象和json字符串

    Javascript字符串与JSON字符串的最大区别在于,JSON字符串必须使用双引号(单引号会导致语法错误) 与Javascript的对象字面量相比,JSON对象有两个地方不一样.首先,没有声明变量 ...

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

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

  10. 初探Google Guava

    Guava地址:https://github.com/google/guava 第一次接触我是在16年春github上,当时在找单机查缓存方法,google guava当初取名是因为JAVA的类库不好 ...