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. LeetCode题解38.Count and Say

    38. Count and Say The count-and-say sequence is the sequence of integers beginning as follows: 1, 11 ...

  2. [Swift]LeetCode113. 路径总和 II | Path Sum II

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

  3. [Bash]LeetCode195. 第十行 | Tenth Line

    Given a text file file.txt, print just the 10th line of the file. Example: Assume that file.txt has ...

  4. java客户端与服务端交互通用处理 框架解析

    一.综述 java 客户端与服务端交互过程中,采用NIO通讯是异步的,客户端基本采用同一处理范式,来进行同异步的调用处理. 处理模型有以下几个要素: 1. NIO发送消息后返回的Future 2. 每 ...

  5. 还在使用SimpleDateFormat？你的项目崩没？

    如果是在多线程环境下,就需要注意了. 要点: 1.加Synchronized同步: 2.使用ThreadLocal: 3.jdk8使用DateTimeFormatter替代SimpleDateForm ...

  6. nginx 关于client_max_body_size client_body_buffer_size配置

    最近生产环境在这两个参数之间遇到过几次坑.这里记录下.client_max_body_sizeclient_max_body_size 默认 1M,表示 客户端请求服务器最大允许大小,在“Conten ...

  7. Spring及SpringBoot @Async配置步骤及注意事项

    前言 最近在做一个用户反馈的功能,就是当用户反馈意见或建议后服务端将意见保存然后发邮件给相关模块的开发者.考虑发邮件耗时的情况所以我想用异步的方法去执行,于是就开始研究Spring的@Async了.但 ...

  8. JVM基础系列第9讲：JVM垃圾回收器

    前面文章中,我们介绍了 Java 虚拟机的内存结构,Java 虚拟机的垃圾回收机制,那么这篇文章我们说说具体执行垃圾回收的垃圾回收器. 总的来说,Java 虚拟机的垃圾回收器可以分为四大类别:串行回收 ...

  9. oracle数据库默认是10次尝试失败后锁住用户

    一般数据库默认是10次尝试失败后锁住用户 1.查看FAILED_LOGIN_ATTEMPTS的值select * from dba_profiles: 2.修改为无限次(为安全起见,不建议使用)alt ...

  10. 【从零开始自制CPU之学习篇04】电容

    电解电容: 多数在1μF以上,直接用数字表示.如:4.7μF.100μF.220μF等等.这种电容的两极有正负之分,长脚是正极. 独石电容: 独石电容器是多层陶瓷电容器的别称, 简称MLCC 读数方法 ...