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

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

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

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

 

以下是代码

  1.  <html>
  2.  <head>
  3.  <title>TEST</title>
  4.  </head>
  5.  <style>
  6.  h1.mh1{
  7.  color: green;
  8.  }
  9.  </style>
  10.  <body>
  11.  <a href = "http://www.runoob.com/" title = "菜鸟教程" target = "_blank">插入外链:菜鸟教程</a>
  12.  <br>
  13.  <a href = "#myh1">寻找绿色标题</a>        <!--在文件内部就不用写地址了，直接写#[id名]就可以了-->
  14.  <h1>我是标题</h1>
  15.  <br>
  16.  <br>
  17.  <br>
  18.  <h1>我是标题</h1>
  19.  <br>
  20.  <br>
  21.  <br>
  22.  <h1>我是标题</h1>
  23.  <br>
  24.  <br>
  25.  <br>
  26.  <h1>我是标题</h1>
  27.  <br>
  28.  <br>
  29.  <br>
  30.  <h1>我是标题</h1>
  31.  <br>
  32.  <br>
  33.  <br>
  34.  <h1>我是标题</h1>
  35.  <br>
  36.  <br>
  37.  <br>
  38.  <h1>我是标题</h1>
  39.  <br>
  40.  <br>
  41.  <br>
  42.  <h1>我是标题</h1>
  43.  <br>
  44.  <br>
  45.  <br>
  46.  <h1>我是标题</h1>
  47.  <br>
  48.  <br>
  49.  <br>
  50.  <h1>我是标题</h1>
  51.  <br>
  52.  <br>
  53.  <br>
  54.  <h1 id = "myh1" class = "mh1">我是标题</h1>        <!--id是给标签(或元素)一个ID可以让其他标签对指定ID的元素进行操作-->
  55.  <!--class是给标签划定一个类，可以让其他标签(CSS和JS(javascript)中常用)对指定类中的元素进行操作-->
  56.  <br>
  57.  <br>
  58.  <br>
  59.  <h1>我是标题</h1>
  60.  </body>
  61.  </html>
  62.  <!--
  63.  h1.mh1{            通过类名操作h1
  64.  color: green;
  65.  }
  66.  -->

如你所见我们把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. 1.9 From Native to HTML5

    The mobile technology has become more and more mature, and it has evolved from a ridiculous situatio ...

  2. 使用javamelody进行web监控

    引入maven依赖 <dependency> <groupId>net.bull.javamelody</groupId> <artifactId>ja ...

  3. JavaScript 正则表达式全面总结

    本文适合有 JavaScript 基础 && 面向搜索引擎书写正则的人群. 正则表达式是用于匹配字符串中字符组合的模式.正则表达式的模式规则是由一个字符序列组成的.包括所有字母和数字在 ...

  4. AttributeError: module 'pip' has no attribute 'main'

    Pycharm在运行pip安装模块是报错如下: 解决方法: 找到安装路径下的packaging_tool.py文件修改如下: 我的路径为D:\Program Files\JetBrains\PyCha ...

  5. asp.net mvc学习（Vs技巧与Httpcontext）

    模型绑定分析 博客模拟的表单已经可以包含网站开发过程中遇到的大部分的表单格式了,包含一些数组.对象等等. 1.直接拼接字符串 $.ajax({ url: "/XXX", type: ...

  6. asp.net core系列 32 EF查询数据 必备知识(1)

    一.查询的工作原理 Entity Framework Core 使用语言集成查询 (LINQ) 来查询数据库中的数据. 通过 LINQ 可使用 C#(或你选择的其他 .NET 语言)基于派生上下文和实 ...

  7. [区块链] 密码学中Hash算法（基础）

    在介绍Hash算法之前,先给大家来个数据结构中对hash表(散列表)的简单解释,然后我再逐步深入,讲解一下hash算法. 一.Hash原理——基础篇 1.1 概念 哈希表就是一种以 键-值(key-i ...

  8. Android模拟器Genymotion使用详解

    介绍 Genymotion是一款出色的跨平台的Android模拟器,具有容易安装和使用.运行速度快的特点,是Android开发.测试等相关人员的必备工具. 官网地址:https://www.genym ...

  9. 知其所以然~tcp和udp的区别

    TCP UDP TCP与UDP基本区别 基于连接与无连接 TCP要求系统资源较多,UDP较少: UDP程序结构较简单 流模式(TCP)与数据报模式(UDP); TCP保证数据正确性,UDP可能丢包 T ...

  10. 爬虫入门（四）——Scrapy框架入门：使用Scrapy框架爬取全书网小说数据

    为了入门scrapy框架,昨天写了一个爬取静态小说网站的小程序 下面我们尝试爬取全书网中网游动漫类小说的书籍信息. 一.准备阶段 明确一下爬虫页面分析的思路: 对于书籍列表页:我们需要知道打开单本书籍 ...