HTML/CSS/JS学习笔记

2017-09-20 本文已影响96人 Cluas

随笔

由于前段时间在学习django框架，学习过程中迫切的发现前端知识也是必不可少的一部分，所以就想了很多办法来学习前端知识。上w3cschool，百度各种知识，看实体书啦等。总体给我感觉特别的乱，立马意识到这或许是浪费时间，而且人的精力有限，不可能去把这些东西全部记住。所以我最终选了一种有针对性的方法，学会那些个最常用知识，比如常用的html标签，常用的css属性，常用的javascript用法。这其中又把重心偏向于js，这个让网页动起来的工具，废话不多说，开始总结巩固知识。

HTML

HTML通俗来讲就是一套规则，浏览器认识的规则。作为用户可以不关心规则就看到一些精美的网页跟一些神奇的动态效果及功能，而我们作为开发者，必须去学习HTML规则。在我们开发后台程序的时候：

HTML文件起着一个模版的作用
- 数据库获取数据，然后渲染到这个模版（使用Django等web框架）
  我们可以非常容易的本地测试HTML代码：
- 用浏览器打开文件
- 直接用ide打开测试

我们开始编辑HTML文件，现在很多编辑器在创建文件的时候都直接默认添加了一些头文件，还是非常方便的。

我们来看下基本的标签跟内容：

<html> 标签内部可以写属性一个HTML文件只能有一个这个标签
注释： <!— 注释的内容—!>
说到标签，HTML标签大体分为两类。
一种是自闭合标签，如：<meta charset=“UTF-8”> ;
另一种是主动闭合标签，如：<title>这是自闭合标签</title>
我们接着来看常用的几个标签：
<head>

<meta> 用于编码、跳转、刷新、关键字、描述、IE兼容（ <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />）
<title>标签
<link />可以用来设置图标
<style />对应样式表 <script>对应Javascript

<body>

 1. 特殊：&nsbp  图标&gt； <
 2. <br />换行
 3. 块级标签（就是在浏览器占了一行的）
         1. \<div\>白板没任何东西 
         2. \<h\>理解为加大加粗就好了
         3. \<p\>段落，段落之间有差距
 4. 行内标签(没占一行自己去浏览器试试就理解了
         1. \<span\>白板
         2. 以上两种类型其实可以相互转换 在style里设置

<input>系列 + <form>标签

         1. input type='text'     - name属性，value=“输入值” 
         2. input type='password' - name属性，value=“输入值” 
         3. input type='submit'   - value='提交' 提交按钮，表单
         4. input type='button'   - value='登录' 按钮
         5. input type='radio'    - 单选框 value，
         6. checked="checked"，name属性（name相同则互斥）
         7. input type='checkbox' - 复选框 value, 
         8. checked="checked"，name属性（批量获取数据）
         9. input type='file'     - 依赖form表单的一个属性 
         10. enctype="multipart/form-data"
         11. input type='rest'     - 重置
         12. \<textarea \>默认值\</textarea\>  - name属性
         13. select标签            - name,内部option value, 提交到后台，size，multiple

<a>用来跳转链接： href=“某个链接地址（也可以是标签id）”
<img> src 资源地址 alt提示信息吧 title图片标签

列表系列

 ul
     li
 ol
     li
 dl
     dt
     dd

表格

    table
        thead
          tr
          th
        tbody
          tr
          td
        colspan = ''
        rowspan = ''

<label>点击名字使得关联的标签获取光标
```html <label for="username">用户名：</label> <input id="username" type="text" name="user" />
标签之间可以任意嵌套，标签存在的意义，可以供CSS操作，可以供JS操作。
我们可以用Chrome按F12（windows）or ALT+COMMAND+I（macOS）来调试查看。

CSS

有三种方法来写样式：

在标签上设置style属性：
- background-color: #2459a2;
- height: 48px；
- …

编写在head里面 style标签中：

- id选择区
      #i1{
    background-color: #2459a2;
    height: 48px;
      }
    - class选择器 
          .名称{
        ...
          }   
          <标签 class='名称'> </标签>
    - 标签选择器
        div{
        ...
        }
        所有div设置上此样式
    - 层级选择器（空格） 
           .c1 .c2 div{
           }
    - 组合选择器（逗号)
        #c1,.c2,div{
           }
    - 属性选择器 
           对选择到的标签再通过属性再进行一次筛选
           .c1[n='alex'](#){ width:100px; height:200px; }
    - PS:
        优先级，标签上style优先，编写顺序，就近原则

写在单独文件中

 <link rel=“stylesheet” href=“common.css” /\>

下面来看常用的CSS

注释：／* */
边框：宽度，样式，颜色 (border: 4px dotted red;)

大小

height        高度 百分比
width          宽度 像素，百分比
text-align:ceter 水平方向居中
line-height 垂直方向根据标签高度
color     字体颜色
font-size 字体大小
font-weight 字体加粗

float浮动属性
让标签浪起来，块级标签也可以堆叠
老子管不住：
<div style="clear: both;"></div>
使用以上样式就可以让父级标签接管

display

 display: none; -- 让标签消失
 display: inline;
 display: block;
 display: inline-block;
  具有inline,默认自己有多少占多少
  具有block，可以设置无法设置高度，宽度，padding  margin
 行内标签：无法设置高度，宽度，padding  margin
 块级标签：设置高度，宽度，padding  margin

padding margin(0,auto)

position:

 a. fiexd =\> 固定在页面的某个位置
 b. relative + absolute
 \<div style='position:relative;'\>
 \<div style='position:absolute;top:0;left:0;'\>\</div\>
 \</div\>
 opcity: 0.5 透明度
 z-index: 层级顺序   
 overflow: hidden,auto
 hover
 background-image:url('image/4.gif'); # 默认，div大，图片重复访
 background-repeat: repeat-y;
 background-position-x:
 background-position-y:

JavaScript

跟Java是两种无关系的语言，浏览器具有JS解释器
Javascript的代码有两种存在形式：

Head中

    <script>
    //javascript代码
    alert(123);
    </script>

    <script type="text/javascript">可以默认不写
    //javascript代码
    alert(123);
    </script>

文件中
<script src='js文件路径'> </script>
PS：JS代码需要放置在 <body>标签内部的最下方（因为浏览器是逐行解释，这样显示效果更快）
注释：
当行注释 //
多行注释 /* */

变量：
name=‘test’ — 全局变量
var name = ‘test’ —局部变量
写JS代码：
html文件中编写
临时，浏览器终端 console
基本数据类型
数字
a = 1；
字符串
a = ‘test’
a.charAt(索引位置)
a.substring(起始位置，结束位置）联想python切片
a.lenght 获取字符串长度
列表（数组）
a =[1,2,3]
字典（对象）
a = {‘k1’: ‘v1’, ‘k2’: ‘v2’}
布尔值：
小写true false
for循环

循环时，循环的元素是索引不同于python

a = [11,22,33,44]
for(var item in a){
console.log(item);
}
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}

不支持字典的循环

 for(var i=0;i\<10;i++){

 }

 a = [11,22,33,44]
 for(var i=0;i\<a.length;i=i+1){

 }

条件语句
if(条件){

}else if(条件){

}else{

}

== 值相等
=== 值和类型都相等
&& and
|| or
函数
function 函数名(a,b,c){

}

函数名(1,2,3)
DOM

找到标签

获取单个元素        document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合
b. 间接
tag = document.getElementById('i1')
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

操作标签

 a. innerText

 获取标签中的文本内容
 标签.innerText

 对标签内部文本进行重新复制

 标签.innerText = ""

 b. className
 tag.className = 直接整体做操作
 tag.classList.add('样式名')   添加指定样式
 tag.classList.remove('样式名')   删除指定样式

 PS：

 \<div onclick='func();'\>点我\</div\>
 \<script\>
 function func(){

 }

 \</script\>

 c. checkbox  
 获取值
 checkbox对象.checked
 设置值
 checkbox对象.checked = true

HTML/CSS/JS学习笔记

随笔

HTML

我们开始编辑HTML文件，现在很多编辑器在创建文件的时候都直接默认添加了一些头文件，还是非常方便的。

CSS

JavaScript

猜你喜欢

热点阅读