HTML学习笔记-1

（一）:first-child和：first-of-type

:first-child第一个元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>选择器</title>
  6.     <style type="text/css">
  7.         p:first-child{
  8.             color: red;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <p>sssssssss</p>
  14.     <p>ddddddddd</p>
  15. </body>
  16. </html>

:first-of-type第一个某种类型元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>选择器</title>
  6.     <style type="text/css">
  7.         /*.div1 :first-child{
  8.             color: red;
  9.         }*/
  10.         .div1 :first-of-type{
  11.             color: red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="div1">
  17.         <h2>我是班长</h2><!-- 在第一个div中h2中是第一次出现的类型 -->
  18.         <h1>我是班长的朋友</h1><!-- 在第一个div中h1中是第一次出现的类型 -->
  19.         <div class="div1">
  20.             <h1>我是学位</h1><!-- 在第二个div中h1中是第一次出现的类型 -->
  21.             <h2>woshiss</h2><!-- 在第二个div中h2中是第一次出现的类型 -->
  22.         </div>
  23.         <h2>s;a;dlkl;</h2><!-- 在第一个div中h2中是第二次出现的类型 -->
  24.         <h1>dsdpppp</h1><!-- 在第一个div中h1中是第二次出现的类型 -->
  25.     </div>
  26. </body>
  27. </html>

（二）：only-child和:only-of-type

:only-child只有一个孩子才会变

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>选择器</title>
  6.     <style type="text/css">
  7.         .div1 :only-child{
  8.             color: red;
  9.         }
  10.         /*.div1 :first-of-type{
  11.             color: red;
  12.         }*/
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- div不是有一个孩子，不会变红 -->
  17.     <div class="div1">
  18.         <h2>我是班长</h2>
  19.         <h1>我是班长的朋友</h1>
  20.         <div class="div1">
  21.             <h1>我是学位</h1>
  22.             <h2>woshiss</h2>
  23.         </div>
  24.         <h2>s;a;dlkl;</h2>
  25.         <h1>dsdpppp</h1>
  26.     </div>
  27. </body>
  28. </html>

:only-of-type一种类型只有一个的时候才会变

在第一个div中h2有三个h1有一个所以h1会变

在第二个div中h1/h2都是一个

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>选择器</title>
  6.     <style type="text/css">
  7.         /*.div1 :only-child{
  8.             color: red;
  9.         }*/
  10.         .div1 :only-of-type{
  11.             color: red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="div1">
  17.         <h2>我是班长</h2>
  18.         <h1>我是班长的朋友</h1>
  19.         <div class="div1">
  20.             <h1>我是学位</h1>
  21.             <h2>woshiss</h2>
  22.         </div>
  23.         <h2>s;a;dlkl;</h2>
  24.         <h2>dsdpppp</h2>
  25.     </div>
  26. </body>
  27. </html>

表单的伪类

(一）input:required

  1. input:require{
  2. border:solid 1px red
  3. }
  4. ###(二）input:optional###
  6. input:optional{
  8. border:solid 1px red
  10. }

(三）input:valid

  1. input:valid{
  3. background-color：white;
  5. border:solid 1px red;
  7. outline:none;
  9. }

(四）input:invalid

  1. input:valid{
  3. background-color：white;
  5. border:solid 1px green;
  7. outline:none;
  9. }

类元素

（一）:before和:after

  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <meta charset="utf-8"/>
  9.     <title>选择器</title>
  11.     <style type="text/css">
  13.         p{
  15.             font-size: 2em;
  17.         }
  19.         p:before{
  21.     content: "";
  23.     display: inline-block;
  25.     width: 1.5em;
  27.     height: 1.5em;
  29.     border-radius:50%;
  31.     position: relative;
  33.     top: 45px;
  35.     left: 15px;
  37.     background-color: #C39;
  39.         }
  41.         p:after{
  43.     content: "";
  45.     display: inline-block;
  47.     width: 1.5em;
  49.     height: 1.5em;
  51.     border-radius:50%;
  53.     position: relative;
  55.     top: 45px;
  57.     left: 15px;
  59.     background-color: #C39;
  61.         }
  63.     </style>
  65. </head>
  67. <body>
  69. <p>>-<</p>
  71. </body>
  73. </html>

权重

  1. ！important  权重：无穷
  3. 内联样式（style属性)  权重：1000
  5. id   100
  7. class/属性选择器/伪类  10
  9. 标签选择器/伪元素 1
  11. 通配符 0

文本-初步-字体

（一）设置字体名称

font-family属性，定义文本的字体

  1. body{font-family:sans-serif;}
  3. h1{font-family:Georgis,serif}

（二）设置字体倾斜

font-style属性，最常用于倾斜文本

三个属性值

  • normal：文本正常显示

  • italic：文本倾斜显示

  • oblique：文本倾斜显示

例子

  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <meta charset="utf-8"/>
  9.     <title>选择器</title>
  11.     <style type="text/css">
  13.         p.normal{
  15.             font-style: normal;
  17.         }
  19.         p.italic{
  21.             font-style: italic;
  23.         }
  25.         p.oblique{
  27.             font-style: oblique;
  29.         }
  31.     </style>
  33. </head>
  35. <body>
  37.     <p class="normal">wewewew</p>
  39.     <p class="italic">wewewew</p>
  41.     <p class="oblique">wewewew</p>
  43. </body>
  45. </html>

（三）设置字体加粗

font-weight属性，设置粗细

  • 使用bold关键字可以设置粗体

  • 关键字100-900为字体指定9级加粗，100最细，900最粗，400相当于normal，700相当于bold

例子

  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <meta charset="utf-8"/>
  9.     <title>选择器</title>
  11.     <style type="text/css">
  13.         p.normal{
  15.             font-weight: bold;
  17.         }
  19.         p.italic{
  21.             font-weight: normal;
  23.         }
  25.         p.oblique{
  27.             font-style: 900;
  29.         }
  31.     </style>
  33. </head>
  35. <body>
  37.     <p class="normal">wewewew</p>
  39.     <p class="italic">wewewew</p>
  41.     <p class="oblique">wewewew</p>
  43. </body>
  45. </html>

（四）设置字体大小

font-size，所有css单位都可以作为值

###（五）组合定义###

font属性，设置组合字体样式，必须设置字体与大小

字体必须放在最后，因为字体是可以设置多个的

  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <meta charset="utf-8"/>
  9.     <title>选择器</title>
  11.     <style type="text/css">
  13.         p{
  15.             font:bold italic 40px Georgia;
  17.         }
  19.     </style>
  21. </head>
  23. <body>
  25.     <p class="normal">wewewew</p>
  27.     <p class="italic">wewewew</p>
  29.     <p class="oblique">wewewew</p>
  31. </body>
  33. </html>

html颜色

  1. p{color:red}
  3. p{color:#ffff}
  5. p{color:rgb(0,0,255)}//红绿蓝
  7. p{color:rgba(0,0,255,0.5)}//红绿蓝，透明度
  9. p{color:transparent;}//完全透明

html单位

  1. %：百分比
  3. in：英寸
  5. cm:厘米
  7. mm：毫米
  9. em：1em等于当前字体尺寸，2em等于当前字体的两倍
  11. ex：一个ex是一个字体的x-height。（x-height通常是字体尺寸的一半)
  13. pt:磅（1pt等于1/72英寸）
  15. PC：12点活字
  17. Px：像素

HTML5的重要内容-1的更多相关文章

  1. 取消chrome浏览器下input和textarea的默认样式；html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  2. 将HTML5 Canvas的内容保存为图片借助toDataURL实现

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

  3. HTML5+CSS3新增内容总结！！！！！绝对干货

    说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容: CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴 ...

  4. HTML5的核心内容

    开发者可以放心地使用html5的理由 兼容性.HTML5在老版本的浏览器可以正常运行,同时支持HTML5的新浏览器也能正常运行HTML4,用HTML4创建出来的网站不是必须全部重建的. 实用性.HTM ...

  5. 将HTML5 Canvas的内容保存为图片

    主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现 HTML + JavaScript的代码很简单. 代码如下: <html> <meta http- ...

  6. 学习笔记之html5相关内容

    写一下昨天学习的html5的相关内容,首先谈下初次接触html5的感受.以前总是听说html5是如何的强大,如何的将要改变世界.总是充满了神秘感.首先来谈一下我接触的第一个属性是  input的里面的 ...

  7. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  8. HTML最新标准HTML5小结

    写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...

  9. HTML5和CSS3基础教程(第8版）-读书笔记

    第1章 网页的构造块 一个网页主要包括以下三个部分: n        文本内容(text content):在页面上让访问者了解页面内容的纯文字. n        对其他文件的引用(referen ...

  10. 深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

随机推荐

  1. elasticSearch初步学习反思

    转自自己的qq空间 2022年11月29日 每次找到新技术就会发癫 把业务整理完了 看着elasticSearch开始发癫 TM的把所有的一切都塞给它 反正全标记索引要啥拿啥 狠狠地获取就完了 思来想 ...

  2. 利用Spire.Pdf实现PDF添加印章的操作

    在一些文档处理中,我们需要对PDF盖上公司的印章操作,本篇随笔介绍利用Spire.Pdf实现PDF添加印章的操作,如全章和骑缝章的处理. 1.实现效果和处理代码 有时候,需要在特定的位置盖章,以及各个 ...

  3. 看element源码学到的小技巧

    中午无休的时候有点无聊, 看了一下昨天clone 的 element-ui 源码, 发现很多优雅之处, 记录一下让我直接用到项目中的一个点 那就是绝对定位的元素放到body 里面的 同级.这么做的好处 ...

  4. Node: Module not found: Can't resolve 'xlsx'

    报错信息 解决方案 npm install xlsx --save 参考链接 https://github.com/securedeveloper/react-data-export/issues/8 ...

  5. opencv-python中 boundingRect（cnt）以及cv2.rectangle用法

    矩形边框(Bounding Rectangle)是说,用一个最小的矩形,把找到的形状包起来.还有一个带旋转的矩形,面积会更小,效果见下图 首先介绍下cv2.boundingRect(img)这个函数 ...

  6. python中的注释noqa: F401

    在Python中,"noqa: F401" 是一个特殊的注释指示.它主要用于在静态代码检查工具(例如Flake8)运行时,告知工具忽略特定的 "F401" 错误 ...

  7. 从浏览器架构认识BOM和DOM

    浏览器架构 JavaScript运行在浏览器,BOM就是连接JavaScript代码和浏览器的桥梁,而DOM就是用来操作各种标签元素的. BOM包括 window.history.location.d ...

  8. 日志监控平台搭建（Loki+promtail+grafana）

    搭建Loki+promtail+grafana日志监控平台,可以直接在grafana的UI界面查看系统应用日志,使日志查看起来更方便.快捷.   Loki:主服务器,负责存储日志和处理查询. Prom ...

  9. [MAUI]在.NET MAUI中实现可拖拽排序列表

    .NET MAUI 中提供了拖放(drag-drop)手势识别器,允许用户通过拖动手势来移动控件.在这篇文章中,我们将学习如何使用拖放手势识别器来实现可拖拽排序列表.在本例中,列表中显示不同大小的磁贴 ...

  10. [语音识别] 基于Python构建简易的音频录制与语音识别应用

    语音识别技术的快速发展为实现更多智能化应用提供了无限可能.本文旨在介绍一个基于Python实现的简易音频录制与语音识别应用.文章简要介绍相关技术的应用,重点放在音频录制方面,而语音识别则关注于调用相关 ...