html +JS 自学

1.1 HTML

1.1.1 htm

一套浏览器认识的规则

开发者：

学习HTML规则

开后台程序：

    -写HTML文件（充当模板的作用）

-数据库获取数据，然后替换到HTML文件的指定位置（web框架）

     本地测试

         -找到文件路径，直接浏览器打开

         -pycharm打开测试

     编写html文件

         -doctype对应关系

         -html标签，标签内部可以写属性（只能有一个html标签）

         -注释：<!--  注释的内容  -->

     20个标签

1.1.2 css

颜色

位置

Meta（metadata informa）

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1.页面编码（告诉浏览器什么是编码）

<meta http-equiv="content-type" content="text/html;charset=utf-8">

2.刷新和跳转

<meta http-equiv="Refresh" content="30">
<meta http-equiv="Refresh" content="5; Url=http://www.baidu.com" />

3.关键词

<meta name="keywords" content="JOY">

4.描述

<meta name="description" content="JOY">

5.X-UA-Compatible

一种依照IE浏览器的开发标准

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

1.2 head

1.2.1 Title

网页头部信息

1.2.2 head标签

<meta   ->编码，跳转，刷新，关键字，描述，IE兼容

<meta http-equiv="X-UA-Compatible" content="IE=IE8;IE=IE7" />

1.2.3 link

1.2.3.1  网站图标

1) CSS

<link rel=”stylesheet” type=”text/css” href=”css/common.css”>

2) icon

<link rel=”shortcut icon” href=”image/favicon.ico”>

1.3 body

1.3.1 网站特殊符号代码

  1. 空格符 &nbsp(连续空格符之间用分号)

https://www.cnblogs.com/bigberg/p/8422573.html

1.3.2 标签

1.3.2.1  块级标签

<p>标签相当于段落

    特点：段落和段落之间有间距

<h1>标签表示标题 h1-----àh6依次变小

特点：字体加大加粗

<div>标签

    特点：白板

1.3.2.2  行内标签

<span>多个标签内容在一行内展示

特点：白板（借助CSS可以改变样式）

1.3.2.3  form标签

<form action="http://192.168.1.160:8888/index" method="POST" enctype="multipart/form-data">

1.3.2.4  Br

<br/>标签表示换行

1.3.2.5  Input系列

Input type=’text’  - name属性，value=’’（默认值）

Input type=’password’ - name属性， value=’’（默认值）

Input type=’submit’ – value=’提交’提交按钮

Input type=’button’ – value=’登录’ 按钮

Input type=’radio’ – 单选框 value,name属性（name相同则互斥）

Input type=’checkbox’ – 单选框 value,name属性（批量获取数据）

Input type=’file’– 依赖form表单属性enctype=’multipart/form-data’

input type="reset" value="重置"

<textarea name="meno"></textarea> -name 属性

1.3.2.6  Select标签

Select标签    - name,内部option value，提交到后台，size，muiltiple

1.3.2.7  a标签

l  跳转

<a href="http://www.baidu.com">百度</a>

l  锚

<a href="#i1">第一章</a>

<a href="#i2">第二章</a>

<a href="#i3">第三章</a>



<div id="i1" style="height:900px;">第一章的内容</div>

<div id="i2" style="height:900px;">第二章的内容</div>

<div id="i3" style="height:900px;">第三章的内容</div>

标签的ID不能重复

1.3.2.8  Img标签

src：图片名及路径

alt：描述

title：主题

<body>

   <a href="http://wuxia.qq.com">

      <img src="tian.PNG" title="tiandao" style="height:900px;weidh:900px;" alt="tianyamingyuedao">

   </a>

</body>

1.3.2.9  列表

ul：>li

ol：>li

dl：>dd/dt

<ul>

    <li>11</li>

    <li>12</li>

</ul>

<ol>

    <li>22</li>

    <li>23</li>

</ol>

<dl>

    <dd>33</dd>

    <dt>34</dt>

</dl>

1.3.2.10  table

<table border="1">

    <tr>

        <td>第一行，第一列</td>

        <td>第一行，第二列</td>

        <td>第一行，第三列</td>

    </tr>

    <tr>

        <td>第二行，第一列</td>

        <td>第二行，第二列</td>

        <td>第二行，第三列</td>

    </tr>

</table>
l  thead

tr

  th

l  tbody

     tr

       td

colspan =’’列合并 数字表示列数

rowspan=’’行合并 数字表示行数

<table border="1">

    <thead>

        <tr>

            <th>表头1</th>

            <th>表头2</th>

            <th>表头3</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

        </tr>

        <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

        </tr>

    </tbody>

</table>

1.3.2.11  label

用于点击文字使得关联的标签获取光标

<label for="passd">密码：</label>

<input id="passd" type="password" name="pwd" />

1.3.2.12  fieldset

legend

1.4 CSS

1.4.1 Style

  1. 标签的style属性
  2. 写在head里面，style标签中写样式

1.4.2 id选择器

#i1{

  background-color: #2459a2;

  height: 48px;

}

1.4.3 class选择器

.名称{

  …

}

<标签 class=’名称’></标签>

1.4.4 标签选择器

<div style="height: 48px;"></div>
div {

    ……

}

所有div设置成此样式

1.4.5 层级选择器（空格）

.c1 .c2 div{

}

1.4.6 组合选择器（逗号）

#c1,.c2,div{

}

1.4.7 属性选择器

对选择到的标签再通过属性再进行一次筛选

.c1[n=”alex”]{100px; height:200px;}

1.4.8 注释

/*    */

1.4.9 优先级

标签上的style优先，编写顺序，最近原则

CSS样式可以写在单独文件中然后引用

<link rel=”stylesheet” href=”cllor. css”/>

1.4.10 边框

宽度    样式    颜色   border: 4px dotted red;

border-left

height：高度 百分比

width：宽度 像素 白百分比

text-align:center  水平方向居中

line-height：垂直方向根据标签高度居中

color：字体颜色

font-size：字体大小

font-weight：字体加粗

1.4.11 float

块级别标签可以堆叠

<div style="clear:both;"></div>

1.4.12 display

display: inline;  转行内标签

display: block;  转块级标签

display:inline-block; 两者属性都有

行内标签：无法设置高度，宽度，padding margin

块级标签：设置高度，宽度，padding margin

1.4.13 padding边距

margin：外边距

padding内边距

1.4.14 position

fixed：绝对定位

absolute：相对定位

relative：

1.4.15 z-index

值的大小决定展示的优先级、

1.4.16 opcity

设置透明度0-1

1.4.17 overflow

hidde：超过范围影藏

auto：超过范围出现滚动条

1.4.18 hover

指针悬浮样式

background –url（）x y

background-position-x

background-position-y

1.5 javascript

1.5.1 代码存在形式

HTML中的script标签

单独写文件 <script src=”js文件路径”</script>

1.5.2 数据类型

数字

      a =18

字符串

      a = alex

      a.chartAt(索引位置)

      a.substring(起始位置，结束位置)

      a.lenght   获取当前字符串长度

列表

字典（数组）

     

布尔类型

条件语句‘’

for 循环

      a = [11,22,33,44]

      for (var item in a ){

console.log(item)

}

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

}

a = [11,22,33,44]

for(var i=0;i<a.length;i=i+1){

}

定时器

      SetInterval(‘func()’, 1000);

<body>

    <div id="u1" style="text-align: center;font-size: 28px;background: cyan;color: red;">

        ABCDEFGHIJKLMNOPQRSTUVWXYZ

    </div>

    <script>

        function func() {

            // 根据ID获取指定标签的内容，定于局部变量接收

            var tag = document.getElementById('u1');

            // 获取标签内部的内容

            var content = tag.innerText;

            var f = content.charAt(0);

            var l = content.substring(1, content.length);

            var new_content = l + f;

            tag.innerText = new_content;

 

        }

        setInterval('func()', 500);

    </script>

</body>

1.5.3 变量

name = ‘a’#全局变量

var name = ‘eric’局部变量

1.5.4 数组

obj.length    数组的大小

obj.push(ele)  尾部追加元素

obj.unshift(ele)  头部插入元素

obj.shift()  头部移除元素

obj.splice(start, deleteCount, value, …)  插入、删除或替换数组的元素

         obj.splice(n, 0, val)  指定位置插入元素

         obj.splice(n, 1, val)  指定位置替换元素

         obj.splice(n,1)  指定位置元素删除

obj.slice()      切片

obj.reverser()    反转

obj.join(sep)   将数组连接起来构建一个字符串

obj,concat(val,…)   s数组连接

1.5.5 函数

1.5.5.1  普通函数

function func() {

}

1.5.5.2  匿名函数

 function func(arg) {

     return arg+1

 

}

 setInterval('func()', 260);

 

 setInterval (function(){

       console.log(123);

},5000)

 

1.5.5.3  自执行函数(创建函数并且自动执行)

function func(arg){

    console.log(arg);

}

// func(1)

func()

(funcation(arg){

         Console.log(arg);

}(1)

1.6 DOM

1.6.1 查找

直接查找

var obj = document.getElement(‘a1’)

间接查找

  文件内容操作：

l  innerText

l  innerHTML

l  value

input value获取当前标中的值

select 获取选中的value值(selectedIndex)

textarea value获取当前标签中的值

搜索框实例

    

创建标签，并添加到HTML中：

  1. 字符串形式
  2. 对象的方式

document.createElement(‘div’)

提交表单

   任何标签通过DOM都可以提交表单

     document.getElementById(‘form’).submit()

 其它：

       console.log()

alert

var v = confirm        v:true false

location.href = “”  重定向，跳转

location.reload   页面刷新

location.href = location.href <====>location.reload.()

                                                                             

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/FireLL/p/13524287.html