day27，28html和javascript学习

最新推荐文章于 2024-07-19 17:45:01 发布

qq_42881999

最新推荐文章于 2024-07-19 17:45:01 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/qq_42881999/article/details/85775408

版权

day27html

html

超文本标记语言 hyper text markup language
俗称网页

<html>
    <head> 
        子标签
    </head>
    <body> 
        子标签
    </body>
</html>

1. head 中的常见标签

文件名字后缀必须是 *.html 或者 *.htm
```html
<title>网页标题</title>

标签表示是网页的标题

<meta charset="字符编码">

告诉浏览器请用这个字符串编码显示网页内容

用来包含网页的脚本

<script></script>

用来包含外部样式表

<link>

2. body 中的标签

1) 标题标签

<h1> <h2> ... <h6>

2) 正文标签

段落标签

<p>

换行

<br>

分割线

<hr>

特殊文字需要转义显示
例如：
< <

>
©

3) 超链接标签

<a href="链接地址">链接文字</a>

图片标签

<img src="图片地址" width="宽度" height="高度">

宽度和高度的单位都是像素

让图片有链接的功能

<a href="链接地址"> <img src="图片地址"> </a>

页面内的链接（锚）
首先在目的地标签添加 id=“唯一编号”, 然后在超链接的 href="#唯一编号"

4) 列表标签

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

5) 表格标签(重点)

<table>
    <thead></thead> <!-- 头 -->
    <tbody> <!-- 体 -->
        <!-- tr 代表行 -->
        <tr> 
            <!-- td 代表列 -->
            <td></td>
            <td></td>
        </tr>  
    </tbody>
    <tfoot></tfoot> <!-- 脚 -->
</table>

table>(thead>tr>td2)+(tbody>tr5>td*2)
表格合并单元格，可以使用td 的属性 colspan（合并列）rowspan（合并行）

6) 表单标签(重点)

接收用户的输入

<!-- 把填写的信息收集起来发送给服务器
        有name属性的表单，会把信息发送给服务器
-->
<form action="http://www.baidu.com">
    文本框 <input type="text" name="username">
    <br>
    密码框 <input type="password" name="password">
    <br>
    按钮 <input type="button" value="点我">
    <br>
    单选框 <!-- name 用来给单选框分组 checked 表示默认勾选-->
    男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" checked value="女">
    <br>
    多选框
    唱歌 <input type="checkbox" name="hobby" checked value="1">
    跳舞 <input type="checkbox" name="hobby" value="2">
    游戏 <input type="checkbox" name="hobby" value="3">
    睡觉 <input type="checkbox" name="hobby" value="4">
    <br>
    <input type="file">
    <br>
    <input type="date" value="2018-12-30">

    <br>
    <input type="submit" value="提交">
    <input type="reset" vlaue="重置">
</form>

7. iframe

内嵌另一个页面

<iframe src="http://www.baidu.com" width="100%" height="500"></iframe>

CSS

层叠(级联)式样式表
cascade style sheet

美化html 网页的

颜色相关的样式

前景色

color: 单词
       rgb(红色, 绿色, 蓝色)  范围从 0~255
       16进制值  格式 `#红绿蓝` 范围从 0~FF       
       rgba(红色, 绿色, 蓝色, 0.0~1.0)
       特殊取值
       白色 rgb(255,255,255)
       黑色 rgb(0,0,0)

背景色

background-color:颜色

背景图

background-image:url(图片地址)
background-repeat: no-repeat(不重复) repeat-x repeat-y 在哪个轴上重复

盒子模型

margin 外间距
margin-left
…
border 边框
border-left 边框宽度边框线类型边框颜色
…
padding 内间距
padding-left 左
padding-right 右
padding-top 上
padding-bottom 下

定位方式

div
position: absolute; /绝对定位/
坐标的原点在左上角
left: x 轴的坐标
top: y 轴的坐标
z-index z 轴坐标取值越大，越靠上

width: 宽度
height: 高度

字体相关

font-size : 字体大小
font-family: 字体种类（电脑上事先需要有这个字体）
font-style:italic; 倾斜
font-weight: bold; 加粗
text-decoration: line-through 贯穿线
text-decoration: underline 下划线

显示隐藏

display: none; 隐藏
display: block; 显示

样式表

1. 类选择器

.名字 之后使用标签的 class=“名字引用”

2. ID选择器

根据标签的id属性来进行匹配
#id值 之后使用标签的 id=“id值”

3. 元素选择器

根据标签的名字进行匹配

优先级: 如果不同的选择器匹配到了同一个元素，

style属性定义的样式最高，id选择器优先级次之，类选择器次之，元素选择器最低,
同级选择器，后定义的优先
可以用 !important 改变优先级，可以把优先级提升到最高

4. 父子选择器

/* 找到一个p标签，并且它的父标签必须是div */
div>p {color:red;}

格式
父标签>子标签

5. 祖先后代选择器

格式
祖先标签后代标签

6. 伪类选择器

按钮鼠标移入改变样式，鼠标移除还原
:hover 移入
:first 匹配选中的第一个
:last 匹配选中的最后一个
:focus 获取焦点时

##day28javascript

Javascript

主要用途：用在浏览器当中, 也可以作为后台开发语言(nodejs)

语法：类似于 java, 简称 js

1. 基本数据类型

Number 数字类型（整数，小数） 1.0 1 -2
String 字符串类型 “字符串1” ‘字符串2’
Boolean 布尔类型 true false
Null 表示空值
Undefined 未定义 (声明了var变量，但没有赋初值时)

2. 变量赋值

所有变量类型都是 var (var 可以存储数字，字符串，布尔 …)
弱类型语言

var i = 10;
var str = "hello, world";

可以利用浏览器提供的 console 对象进行调试输出，例如：

console.log("内容");

3. 基本运算

没有除0异常，除零会出现正负无穷大(Infinity)
如果进行了非法的数字运算，结果是 NaN (Not a Number)
“aaa” - 9 结果就是 NaN
包括字符串转换数字失败时，结果也是NaN 例如 parseInt(“aaa”)
js中的== 比较的是值（不同类型的会转换后比较）所以
1 == '1' 结果是 true
如果既要保证值相等，也要保证类型相等
1 === '1'
可以条件判断中，使用各种类型的值
对于数字类型 0 代表 false，非零代表 true
对于字符串 “” 代表 false，非空串代表 true
null , undefined 代表 false

var i = 0;
if(i) {
    console.log("ok");
} else {
    console.log("not ok");
}

4. js中没有块作用域

for(var i = 0; i < 10; i++) {
    console.log(i);
}
console.log(i);

if(true) {
    var x = 10;
}
console.log(x);

5. 复杂类型

Object 对象类型

定义对象

// {属性名:属性值, 属性名:属性值 ...}
var obj = {"name":"张三", "age": 18};
// 可以简化 {name:"张三", age: 18};
// 动态添加
obj.sex = "男";
// 修改属性
obj.age = 20;
// 删除属性
delete obj.age;

Array 数组类型

定义数组

// [值1, 值2, ... 值n]
var array = [1,2,3,4,5];
// 访问下标为 3  的元素
console.log(array[3]);
// 遍历数组
for(var i = 0; i < array.length; i++) {
    console.log(array[i]);
}
// 修改元素
array[3] = 40;
// 向尾部加入元素
array[5] = 6;
array[9] = 10;
// 向尾部添加元素 .push(元素)
array.push(6);
// 从尾部删除元素 .pop()
array.pop();
// 从中间的某个下标删除元素 splice(下标，个数);
array.splice(1,2); // 代表从下标1开始，删除2个元素
// 拼接数组内的所有元素, 例如
array.join("-"); // 结果就是   1-2-3-4-5

Funtion 函数类型

public static int add(int a , int b) {
return a + b;
}
语法：

function 函数名(参数列表) {
    函数体
    return 返回结果
}

function add(a, b) {
    console.log(arguments);
    return a + b;
}

函数的参数是可变的, 形参和实参的个数可以不一致
例如，调用add(4,5) ==> 9
调用add(4,5,6) ==> 9 // 相当于第三个实参没用上
调用add(4) ==> NaN // b 参数没有赋值，是 undefined 结果是NaN
获取到所有实际参数： arguments

var a = 10; // 全局的变量 a
function test() {
    var a = 5; // 局部的变量 a ，与全局的a互不冲突
    console.log(a);
}

函数内定义的 var 变量才是局部变量，函数外声明的var 都是全局变量

数组遍历

var array = [1,2,3,4,5]; 
// 其中函数的参数 i 是数组内第i个元素
array.forEach( function aaa(i) {
    console.log(i);
} );

匿名函数

array.forEach( function (i) {
    console.log(i);
} );

箭头函数

array.forEach( (i)=>{
    console.log(i);
} );

List<Integer> list = new ArrayList<>(); 

list.forEach( (i)->{
    System.out.println(i);
} );

var array = [4,1,3,2,5,11]; 
array.sort(); // 无参数的sort方法把数组内的数字当做字符串排序

array.sort( function comparator(a,b) {
    // 返回的整数 0 表示 a= b   如果返回负数 a < b  如果返回正数表示 a > b
    if( a > b) {
        return 1;
    } else if (a < b ) {
        return -1;
    } else {
        return 0;
    }
    // return a - b;
});

Date 日期类型

var date = new Date();
console.log(date);
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinute());
console.log(date.getTime());

正则类型

定义正则表达式

var pattern = /正则表达式/;

// 匹配数字 [0-9]  \d
// 匹配所有英文字符 [a-zA-Z]  
// 匹配单词字符 [a-zA-Z0-9_] \w
// 匹配任意 .
// 匹配起始  ^  匹配结束  $
// 匹配次数 {m,n}  最少出现 m 次，最多出现 n 次
//  {m, } 最少出现 m 次, 没有上限
//  {0, } 0到多次 *
//  {1, } 1到多次 +
//  {0,1} 0到1次 ?

密码位数，最少3位，最多10 位, 可以是任意英文字符和数字

var pattern = /^[a-zA-Z0-9]{3,10}$/;

手机号码校验必须是 138或139 打头的

var pattern = /^13[89]\d{8}$/

邮件地址的正则验证
manyhf16@sina.com
manyhf16@163.com.cn

.net
.com
.cn

var pattern = /^\w+@\w+(\.\w+){1,2}$/
var pattern = /^\w+@\w+\.(com|net|org)(\.(cn|en))?$/

字符串

// 连接字符串
var a = "hello";
var b = "world";
a+b;
a.concat(b)
// 搜索某个字符
var c = "abcde";
c.indexOf("cd");
var str = "a,b,c,d,e";
str.split(","); // 根据,号切分为数组

// 找子串
var str = "abcde";
str.substr(2,2);  // 参数1是起始下标，参数2是长度

str.substring(2, 4) // 参数1是起始下标, 参数2是结束下标+1

// 替换字符串
var str = "aaabbbaaa"; // 把 a-->c
str.replace("a", "c");  // 只替换了第一个匹配的

str.replace( /a/g, "c" ); // global(全局的) 替换所有遇到的

var str = "aaabbbaaa"; // aaa-->c     cbbbc
str.replace(/aaa/g, "c");

var str = "<p>aaaaa</p>"; // 把标签去掉， 只留内容
str.replace(/<p>/, "").replace(/<\/p>/,""); // 替换了两次
str.replace(/(<p>|<\/p>)/g, "");

var str = "<p>aap>aaa</p>"; // <span>aaaaa</span>
// 分组替换
/(<p>)(.+)(<\/p>)/g

$1 表示第一个分组
$2 表示第二个分组
...
str.replace(/(<p>)(.+)(<\/p>)/g, "$1");
str.replace(/(<p>)(.+)(<\/p>)/g, "<span>$2</span>");

3. js 操作 html 标签

1. 找到页面元素

先给标签一个id属性，然后根据id的值查找

document (文档对象)
    |- html
        |- head
        |- body
            |-p

// 根据id值查找页面标签
document.getElementById("id值");

可以根据标签名称查找

document.getElementsByTagName("标签名");

根据选择器查找页面元素

document.querySelectorAll("选择器");
// 其中选择器可以是  #id,  .class,  元素, ...

2. 改动标签属性

先找到标签元素，把标签元素看做一个对象, 用对象.属性
例如：
找到 img对象.src
找到 input对象.value

3. 改动标签内容

内容

标签对象.innerText
标签对象.innerHTML
例如：给内容赋值时"<span style='color:red'>aaa</span>"
这时 innerText 会把这段html按照普通文本的方式显示
innerHTML 会把这些html先按照html语法进行解析，解析后显示

4. 添加事件

鼠标单击事件

4.1 方法1

找到标签.事件属性 = function() {}

onclick 鼠标单击事件
onmouseover 鼠标移入事件
onkeydown 按键按下事件
…

document.getElementById("img1").onclick = function (){
    console.log("鼠标单击发生了");
    document.getElementById("img1").src = "2.jpg";
};

4.2 方法2

<script>
function fun1() {
    document.getElementById("img1").src = "2.jpg";
}
</script>

<img src="1.jpg" onclick="fun1()">

4.3 定时器方法

setTimeout(函数, 延时毫秒值);

var i = 0;
function func2() {
    setTimeout(function(){
        func2();
        console.log("ok:" + i);
        i++;
        
    } , 5000);
}

func2()

4.4 常见事件

ondblclick 鼠标双击
onchange value取值发生改变时(主要指表单标签)
onmouseover 鼠标移入
onmouseout 鼠标移出
onfocus 获取焦点
onblur 失去焦点
onkeydown 按键按下
onkeyup 按键松开

qq_42881999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫