HTML5/CSS3/JS笔记

HTML笔记:

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

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

*HTML标题:

这是一个标题

最重要的(字体最大)

这是一个标题

次重要的

这是一个标题

次之
注: 浏览器会自动地在标题的前后添加空行。

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

*HTML段落:

这是一个段落

       //用p标签不仅会换行, 而且上下都会有一行的间距.

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

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

*pre元素:  

内容
, 其作用是使pre包裹的内容保持原始格式(主要是保持空格和换行)

*绝对路径和相对路径

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

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

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

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

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

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

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

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

*链接: 这是一个链接

*图像:       注: 路径不区分斜线的方向.

                 注: 图片的宽度属性可以设置百分比, 但是高度是不定的所以不能设置百分比.

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

*音乐: # 中添加
注: hidden=true代表隐藏播放 , autostart=true代表自动播放 , loop=true代表循环播放

*水平线:

标签在 HTML 页面中创建水平线。

*注释:  Ctrl+/

*加粗: 内容

*斜体: 内容

*加下划线: 内容

*

    : 无序列表
    *
      : 有序列表

      *

    1. : 列表内的列表项

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

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

              //3秒钟后自动跳转到百度的网址上去.

      *: 外链标签, 作用是将较长较多的文件内容放到另一个文件然后再引用进来, 比如一个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内, 写在 , 选择指定body内的标签, 对其内容进行修饰配置.
      选择器格式: xxx{属性1:属性值1; 属性2:属性值2...;} # 属性与属性值之间用冒号相连, 每个属性要空一格并以分号结尾, 由于标签的属性太多了, 不用刻意记, 需要用到的时候查一下就行.
      例:

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

      JavaScript笔记:

      *常用的两个输出语句用法: 1.html内容显示document.write()      2.提示信息显示alert()

      *onclick事件的基本用法: 例

      *var声明变量:  例 var x=100;     也可同时定义多个变量: var x=100, y=200, z=300;

      *typeof(): typeof运算符可以查询数据类型, 其返回值可能有number, string, boolean, object, function, undefined

      *字符串的连接: 可以使用"+"进行字符串的连接.

      *null和undefined的区别: null是已定义并初始化, 只是值为空值;  而undefined是未定义或未初始化, 连空值都没有.

      HTML5CSS3

      相关

      标签