HTML5/CSS3笔记

时间 2019-11-16

标签 html5 html css3 css 笔记栏目 HTML5 繁體版

原文原文链接

前言: 前端无非就是围绕标签、属性、属性值这三个词展开的. (标签也能够叫作元素, 元素的内容是开始标签与结束标签之间的内容)css

*常规标签
<标签属性1="属性值1" 属性2="属性值2"></标签> # 一个标签能够没有属性也能够有多个属性, 属性和属性之间不分前后顺序.
*空标签
<标签属性1="属性值1" 属性2="属性值2" /> # 空标签没有结束标签, 用"/"代替.html

*HTML标题: <h1>这是一个标题</h1> 最重要的(字体最大)
<h2>这是一个标题</h2> 次重要的
<h3>这是一个标题</h3> 次之
注: 浏览器会自动地在标题的先后添加空行。前端

*align属性: left, right, center(默认是align="left"左对齐)浏览器

*HTML段落: <p>这是一个段落</p> //用p标签不只会换行, 并且上下都会有一行的间距.服务器

*换行: <br> //用br换行标签, 只会换行, 不会有间距.函数

*空格: &nbsp # 右键折叠(folding), 折叠全部, 再展开全部, 空格部分就会所有被折叠起来.oop

*pre元素: <pre>内容</pre> , 其做用是使pre包裹的内容保持原始格式(主要是保持空格和换行)布局

*绝对路径和相对路径字体

绝对路径(与html文档的位置无关): ui

1. 服务器中的位置: http://www.baidu.com/animal/panda.png

2.本地存储中的位置: D:/picture/animal/panda.png

相对路径(与html文档的位置有关):

1.同一个目录下: ./文件名或直接写文件名

2.在当前目录的下级目录下: ./xxx/文件名

3.在当前目录的上级目录下: ../文件名

4.在当前目录的上上级目录下: ../../文件名

*连接: <a href="http://www.runoob.com">这是一个连接</a>

*图像: <img src="/images/logo.png" width="200" height="100" > 注: 路径不区分斜线的方向.

<img src="/images/logo.png" width="25%" height="100" > 注: 图片的宽度属性能够设置百分比, 可是高度是不定的因此不能设置百分比.

*title属性: 当鼠标移动到一个元素上的时候会显示提示说明文字.

*音乐: <embed src="/static/music.mp3" hidden="true" autostart="true" loop="true"> # <body></body>中添加
注: hidden=true表明隐藏播放 , autostart=true表明自动播放 , loop=true表明循环播放

*水平线: <hr> 标签在 HTML 页面中建立水平线。

*注释: Ctrl+/

*加粗: <b> 内容 </b>

*斜体: <i> 内容 </i>

*加下划线: <u>内容</u>

*<ul></ul> : 无序列表
*<ol></ol>: 有序列表

*<li></li> : 列表内的列表项

*html函数格式: {% 循环 %} {{ 内含变量 }} {# 注释 #}

*<meta></meta>: 标签提供关于HTML文档的元数据, 元数据不会显示在页面上，可是对于机器是可读的, 典型的状况是，meta元素被用于规定页面的描述、关键词、文档的做者、最后修改时间以及其余元数据, 标签始终位于head元素中.

*<link></link>: 外链标签, 做用是将较长较多的文件内容放到另外一个文件而后再引用进来, 好比一个CSS选择器要设置的属性和属性值太多, 为避免在html文件中占用太多位置, 在另外写一个css文件, 而后再外链到这个html文件里面来.

*HTML布局: 通常用div来进行网页布局, 不建议使用老式的table布局.

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选择器 > 标签选择器