资讯专栏INFORMATION COLUMN

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

tunny / 2835人阅读

摘要:标签不只是能链接到其他网页,也能链接到网页中的元素属性让你用对特定的元素进行修饰这些是一个网页设计者的有力武器黑体这节课还是一个文件黑体以下是代码菜鸟教程插入外链菜鸟教程寻找绿色标题在文件内部就不用写地址了

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

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

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


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

 

以下是代码

</>复制代码

  1. 1 <html>
  2. 2 <head>
  3. 3 <title>TESTtitle>
  4. 4 head>
  5. 5 <style>
  6. 6 h1.mh1{
  7. 7 color: green;
  8. 8 }
  9. 9 style>
  10. 10 <body>
  11. 11 <a href = "http://www.runoob.com/" title = "菜鸟教程" target = "_blank">插入外链:菜鸟教程a>
  12. 12 <br>
  13. 13 <a href = "#myh1">寻找绿色标题a>
  14. 14 <h1>我是标题h1>
  15. 15 <br>
  16. 16 <br>
  17. 17 <br>
  18. 18 <h1>我是标题h1>
  19. 19 <br>
  20. 20 <br>
  21. 21 <br>
  22. 22 <h1>我是标题h1>
  23. 23 <br>
  24. 24 <br>
  25. 25 <br>
  26. 26 <h1>我是标题h1>
  27. 27 <br>
  28. 28 <br>
  29. 29 <br>
  30. 30 <h1>我是标题h1>
  31. 31 <br>
  32. 32 <br>
  33. 33 <br>
  34. 34 <h1>我是标题h1>
  35. 35 <br>
  36. 36 <br>
  37. 37 <br>
  38. 38 <h1>我是标题h1>
  39. 39 <br>
  40. 40 <br>
  41. 41 <br>
  42. 42 <h1>我是标题h1>
  43. 43 <br>
  44. 44 <br>
  45. 45 <br>
  46. 46 <h1>我是标题h1>
  47. 47 <br>
  48. 48 <br>
  49. 49 <br>
  50. 50 <h1>我是标题h1>
  51. 51 <br>
  52. 52 <br>
  53. 53 <br>
  54. 54 <h1 id = "myh1" class = "mh1">我是标题h1>
  55. 55
  56. 56 <br>
  57. 57 <br>
  58. 58 <br>
  59. 59 <h1>我是标题h1>
  60. 60 body>
  61. 61 html>
  62. 62

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


它的显示效果

 
点击"寻找绿色标题"  

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

要熟练运用这些东西


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


转载请注明出处  by:M_ZPHr

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1306.html

相关文章

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

    摘要:黑体本系列讲解安全所需要的和黑体安全基础我的第一个网页黑体安全基础初识黑体安全基础初识标签黑体安全基础文件夹管理网站黑体安全基础模块化黑体安全基础嵌套列表黑体安全基础标签拓展和属性的使用黑体安全基础嵌套本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基...

    EscapedDog 评论0 收藏0
  • 使用纯粹JS构建 Web Component

    摘要:它赋予了仅仅使用纯粹的就可以创建可重用组件的能力。我们会用到的来创建我们的用户卡片。在较早版本的浏览器中,我们不能使用来隔离组件。这可以部分归咎于对的影响很大的。你可以在这里阅读第二部分的教程使用纯粹的构建 原文链接:https://ayushgp.github.io/htm...译者:阿里云 - 也树 Web Component 出现有一阵子了。 Google 费了很大力气去推动它更...

    Luosunce 评论0 收藏0
  • 使用纯粹JS构建 Web Component

    摘要:它赋予了仅仅使用纯粹的就可以创建可重用组件的能力。我们会用到的来创建我们的用户卡片。在较早版本的浏览器中,我们不能使用来隔离组件。这可以部分归咎于对的影响很大的。你可以在这里阅读第二部分的教程使用纯粹的构建 原文链接:https://ayushgp.github.io/htm...译者:阿里云 - 也树 Web Component 出现有一阵子了。 Google 费了很大力气去推动它更...

    RayKr 评论0 收藏0
  • 使用纯粹JS构建 Web Component

    摘要:它赋予了仅仅使用纯粹的就可以创建可重用组件的能力。我们会用到的来创建我们的用户卡片。在较早版本的浏览器中,我们不能使用来隔离组件。这可以部分归咎于对的影响很大的。你可以在这里阅读第二部分的教程使用纯粹的构建 原文链接:https://ayushgp.github.io/htm...译者:阿里云 - 也树 Web Component 出现有一阵子了。 Google 费了很大力气去推动它更...

    yuxue 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<