前言: 前端无非就是围绕标签、属性、属性值这三个词展开的.
*HTML基本语法:
1. 常规标签
<标签 属性1="属性值1" 属性2="属性值2"></标签> ???????????# 一个标签可以没有属性也可以有多个属性, 属性和属性之间不分先后顺序.
2. 空标签
<标签 属性1="属性值1" 属性2="属性值2" /> ????????????????# 空标签没有结束标签, 用"/"代替.
*HTML标题: ???<h1>这是一个标题</h1> ???????最重要的(字体最大)
?????????<h2>这是一个标题</h2> ???????次重要的
?????????<h3>这是一个标题</h3> ???????次之
???????????????注: 浏览器会自动地在标题的前后添加空行。
*HTML段落: ??<p>这是一个段落</p>
????????<p>这是另外一个段落</p>
*换行: ???<br> ??
*空格: ???  ????# 右键折叠(folding), 折叠所有, 再展开所有, 空格部分就会全部被折叠起来.
*链接: ???<a href="http://www.runoob.com">这是一个链接</a>
*图像: ???<img src="/images/logo.png" width="258" height="39" />
*音乐: ???<embed src="/static/music.mp3" hidden="true" autostart="true" loop="true"> ???????# <body></body>中添加
?????????注释: hidden=true代表隐藏播放 , autostart=true代表自动播放 , loop=true代表循环播放
*水平线: ?<hr> 标签在 HTML 页面中创建水平线。
*注释: ??{# 注释内容 #}
*加粗: ??<b> 内容 </b>
*斜体: ??<i> 内容 </i>
*<ul></ul> : ??无序列表
*<ol></ol>: ???有序列表
*<li></li> : ??列表内的列表项
*html函数格式: ???{% 循环 %} ?????{{ 内含变量 }} ??????{# 注释 #}
*<meta></meta>: 标签提供关于HTML文档的元数据, 元数据不会显示在页面上，但是对于机器是可读的, 典型的情况是，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据, 标签始终位于head元素中.
*<link></link>: 外链标签, 作用是将较长较多的文件内容放到另一个文件然后再引用进来, 比如一个CSS选择器要设置的属性和属性值太多, 为避免在html文件中占用太多位置, 在另外写一个css文件, 然后再外链到这个html文件里面来.
CSS笔记:
*标签分类: ?1.块级元素; 块级元素默认独占一行, 块级元素可以自定义设置宽度和高度, 不设置宽高的时候默认与父级元素一样宽高, 块级元素一般作为其他元素的容器.
?????????????????==>常见的块级元素有: div, di, dt, dd, ol, ul, li, fieldset, (h1-h6), p, form, hr, colgroup, col, table, tr, td等
???2.内联元素; 始终以行内逐个进行显示, 内联元素不能设置宽度和高度.
???????????3.内联块级元素; 在内联中的块级元素也可以设置宽度和高度.
*CSS选择器: 选择器一般在head内, 写在<style type="text/css">选择器</style> , ?选择指定body内的标签, 对其内容进行修饰配置.
选择器格式: xxx{属性1:属性值1; 属性2:属性值2...;} ???# 属性与属性值之间用冒号相连, 每个属性要空一格并以分号结尾, 由于标签的属性太多了, 不用刻意记, 需要用到的时候查一下就行.
???????????例: ?<style type="text/css">
?????????????????????p{background-color:red; height:200px; width:300px;} ????????# 该选择器对p标签内块级元素的背景颜色、宽度和高度属性设置对应的属性值.
?????????????????????div{background-color:yellow;} ??????????????????????????????# 该选择器对div标签内块级元素的背景颜色属性设置对应的属性值.
????????????????</style>
??????????????????
????????????1.标签选择器 ?2.id选择器 ?3.class选择器 ?4.*通配符(全局选择器) ?5.交集选择器 ?6.并集选择器(群组选择器) ?7.后代选择器 ?8.子选择器 ?9.伪类选择器
????????????????常用的有: ??标签选择器 ==> 语法: 标签名称{属性1:属性值1 属性2:属性值2;}
??????????id选择器 ==> 语法: #id名{属性:属性值;}
???class选择器 ==> 语法: .class类名{属性:属性值;} ???
并集选择器 ==> 语法: 标签1, 标签2, 标签3{属性:属性值;} ????# 标签123...是并集关系, 不是嵌套关系.
后代选择器 ==> 语法: 父元素 子元素{属性:属性值;} ??????????# 子元素是嵌套在父元素内的, 例如:div里面嵌套p.
???????*通配符(全局选择器) ==> 语法: *{属性:属性值;}
*选择器的权重: ?在有多个选择器指向同一个块级元素的时候, 就有一个选择器的优先级的问题了.
id选择器 > class选择器 > 标签选择器 ???
HTML/CSS笔记归纳整理
原文地址：https://www.cnblogs.com/chenbin93/p/9038772.html