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. HTML标题 段落 样式

    HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. <h1> 定义最大的标题.<h6> 定义最小的标题. 注释:默 ...

  2. Echarts 几个常用图

    最近公司业务上的 需求,要求做一些图表,我们技术框架上选择方便使用的Echarts. 下面是效果图: 下面是具体代码: <!DOCTYPE html> <html> <h ...

  3. numpy.random 常用函数详解之排列乱序篇(Permutations)

    1.numpy.random.shuffle(x) 参数:填入数组或列表. 返回值:无. 函数功能描述:对填入的数组或列表进行乱序处理,shape保持不变. 2.numpy.random.permut ...

  4. 怎么使用zepto.js的tap事件引起的探索

    前言:   在使用zepto.js之前,你首先要知道它是什么?为什么要使用它?以及它和jquery有什么区别? ①:简单来说zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与j ...

  5. [Swift]LeetCode873. 最长的斐波那契子序列的长度 | Length of Longest Fibonacci Subsequence

    A sequence X_1, X_2, ..., X_n is fibonacci-like if: n >= 3 X_i + X_{i+1} = X_{i+2} for all i + 2 ...

  6. Android开发：Android虚拟机启动错误Can't find 'Linux version ' string in kernel image file

    Android启动出错,虚拟机报错信息如下: Starting emulator for AVD 'test' emulator: ERROR: Can't find 'Linux version ' ...

  7. Java高级开发工程师面试笔记

    最近在复习面试相关的知识点,然后做笔记,后期(大概在2018.02.01)会分享给大家,尽自己最大的努力做到最好,还希望到时候大家能给予建议和补充 ----------------2018.03.05 ...

  8. spark Could not write all entries

    使用 spark 将 dataFrame 储存到 elasticsearch 出现如下报错: Caused by: org.elasticsearch.hadoop.EsHadoopException ...

  9. 分享几个 SpringBoot 实用的小技巧

    前言 最近分享的一些源码.框架设计的东西.我发现大家热情不是特别高,想想大多数应该还是正儿八经写代码的居多:这次就分享一点接地气的: SpringBoot 使用中的一些小技巧. 算不上多高大上的东西, ...

  10. 「造个轮子」——设计 HTTP 请求全局上下文

    前言 本次 Cicada 已经更新到了 v1.0.3. 主要是解决了两个 issue,#9(Boss线程数好像设置有误 ) #8(怎么返回纯字符串内容不要JSON格式?). 所以本次的主要更新为: C ...