HTML CSS

  1. html

  2. html 代表包含一个网页文档,是一个网页的根元素 html文档中的代码是纯文档  html叫超文本标记语言

  3. head 代表文档的头部,配置网站图标 配置网站标题 配置网页SEO信息 加载外部的JS和CSS  引入外部资源

  4. meta 代表控制信息,通过标签中的属性来提供页面控制,如:charset='UTF-8'控制编码格式  大陆程序员用的基本都是utf-8

  5. title 代表网页标题 用来设置网页标题

  6. body 代表文档的主体,包含数据、主体骨架、布局、样式、行为事件和回调函数 用来存放网页的内容的,我们写的99%的代码 都是在body里面

  7. 框架:

  8. <!DOCTYPE html>
    <!-- lang是语言的标签 en 表示英语 -->
    <html lang="en">
        <head>
    
            <meta charset="utf-8">>
            <title></title>
        </head>
        <body>
            
        </body>
    </html>

  9. h1-6 h1的字体最大 通常用到h3  用来写文字主题

  10. div  是容器标签,代表一个网页的某个区域 class="nav"表示给他这个div起了一个名字  他仅仅就是一个容器,没有什么特殊含义,也没有什么语义  用来布局

  11. hr  水平分割线

  12. br   换行符

  13. p   代表一个段落,包含段落中的内容

  14. strong和b   加粗标签

  15.  i和em        斜体标签 

  16.  u和ins        表示带下划线

  17.  s        表示中划线

  18. del      表示被删除

  19. img     插入图片

  20. span   代表一个行内文本,一般用于需要特别处理的行内文本标记

  21. a   a标签:超链接标签 点一下会跳转到新的页面  接_self 在当前选项卡跳接_blank 打开一个新的选项卡

  22. #    是一个锚点链接

  23. dl     包裹  那么就告诉浏览器 你这个里面是一个自定义列表

  24. dt    是自定义列表的一个小标题

  25. dd   是自定义列表里的内容

  26. ol   有序列表

  27. ul   无序列表

  28. li 代表一个列表项目

  29. table   代表一个表格,包含很多表格元素

  30. tr 代表一行

  31. th 代表表格数据的名称  表头

  32. td   代表每一个表格

  33. button 代表一个按钮

  34. form 代表一个表单,可以内含很多表单组件,一般用于用户数据提交

  35. input 代表一个表单组件,通过type来切换不同功能,一般用于数据的输入

  36. label标签 他会绑定input 帮助我们获取焦点

  37. text 代表文本

  38. password 代表密码输入框,输入的密码会被转换成一个黑点或者星号

  39. number   数字

  40. radio 收单机的意思 表示单选

  41. checkbox 表示多选

  42. checked   默认选中

  43. textarea 表示文本区域

  44. select 代表一个下拉框,包含多个下拉选项  与option使用

  45. option 代表下拉选项

  46.  css       对网页进行布局和美化的 先布局后美

  47. 选择器:

  48. id选择器      #id名{  }  使用id可以快速且唯一的寻找到元素引用 
  49. class选择器    .类名{  }  前面是"."   类和标签属于多对多关系,一个类可以有多个标签
  50. 标签选择器      标签名{ } 前面什么都不要加   通过标签名可以找到文档中所有同名标签
  51. 通配符选择器     *{  }  全选    这种选择器通常配合magran  padding用于消除默认内外边距

  52. 后代选择器    div p{  }   表示div中的所有p都被选中,不论p是div的儿子辈还是孙子辈

  53. 儿子选择器   div>p{ }   表示div中所有p都被选中  但只能选中儿子辈的p

  54. 兄弟选择器    div+p{ }   表示div后紧挨的p被选中

  55.  并集选择器    div~p{ }   表示div都所有标签都会被选中

  56. div, p, li{  }     对多个元素组合执行相同的操作

  57. div.box1{  } 表示文档中,所有class中含有box1的div被选中

  58. 排除选择       ul li:not(box){ }  表示ul中排除类名为box的标签

  59. 属性选择器: [id]{  }  表示有id属性即可        [id][class]{  }表示id和class属性都必须有

  60.                        [id],[class]{  }表示id和class有一个即可   

  61.                        [id="box1"]{  } 表示选中id这个属性 属性值为box1的元素

  62.                        [id^=box]{  }表示选中id属性值以box开头的

  63.                        [id$="1"]{  }表示选中id属性值是以1结尾的元素 

  64.                        [id*="o"]{  }表示选中id属性值中有o的元素

  65.                   [class~="item2"]{ } 使用class一次性起了多个名字 使用~=可以使用其中一个名字

  66. 链接伪类选择器:

  67. 某元素:link{ } 表示当此元素未被访问时的样式(即初始默认样式)

  68. 某元素:hover{ } 表示当鼠标移到此元素上时的样式

  69. 某元素:active{ } 表示当鼠标点击瞬间(未释放鼠标)时的样式

  70. 某元素:visited{ } 表示当此元素被访问过时的样式

  71. 某元素:target表示当我们跳转到锚点后锚点的样式

  72. 位置伪类选择器:

  73. div:nth-child(1){ } 和div同级的第一个元素如果是div的话就被选中 不是就不会选中

  74. div:last-child{  } 表示当前级别最后一个元素

  75. div:first-child{  }表示当前级别第一个元素

  76. div:nth-of-type(1){  }他表示的是每一级别中第一个div被选中 

  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值