1、HTML基础学习

2024-01-27 11:17:10

1、基础知识-HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

2021-11-25 14:41:30 星期四

HTML：关于HTML的Doctype和严格模式与混杂模式

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档

Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档

H5新增的标签

1、语义化标签

section、header、footer、nav
header元素表示一个区域或整个区域的头部区域：放置logo图片、搜索表单等

注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素

nav元素表示导航部分
article元素表示一块独立的内容，必须包含H标签
section元素表示页面中的每一块内容区域都可以使用
aside元素：表示article元素内容之外的信息，内容的辅助信息、侧边栏
footer 标签：定义 section 或 document 的页脚

2、新增的表单新属性

placeholder 占位文本
autofocus 自动获取焦点
autocomplete 自动补全
required 自动验证表单

3、新增的表单

 <input type="range">   滑块
 <input type="date">   日期控件
 <input type="number">  唤醒数字键盘

4、多媒体标签

4.1. 视频
网页中插入视频有两种方法

第一种：将视频文件上传到第三方网站获取其分享代码放到自己的页面中即可

优点：没有兼容性
缺点：有广告植入

第二种:使用H5新增的video方法

<video src="视频路径"></video>

优点：没有广告
缺点：有兼容性，一般运用在手机端

video标签的常用属性

autoplay 自动播放
controls 播放控件
loop 循环播放
video的格式支持 ogg,MP4,webm 不同的浏览器支持的格式不一样，所以出现了一种兼容写法:前提是准备三种格式的视频文件

<video autoplay>
    <source src="视频1.ogg">
    <source src="视频1.mp4">
    <source src="视频1.webm">
    <a href="#">你的浏览器不支持video，点击升级吧</a>
</video>

浏览器会从上到下依次去读，在这个过程中，只要读到自己识别的视频文件就直接播放这个视频文件，并且不会再往后继续读取实测：目前的主流浏览器对Mp4的支持都比较好！！

4.2. 音频
音频的使用和视频的使用基本一致

<audio>
    <source src="音频1.ogg">
    <source src="音频1.mp3">
    <source src="音频1.webm">
    <a href="#">你的浏览器不支持audio，点击升级吧</a>
</audio>

audio标签的常用属性

1.autoplay 自动播放
2.controls 播放控件
3.loop 循环播放

2、 css

css sprites的原理和作用【雪碧图】

CSS Sprites原理

CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位

加速的关键，不是降低重量，而是减少个数

CSS Sprites优点

减少了网页的http请求，从而大大的提高了页面的性能

减少图片的字节，多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和

3、 JavaScript部分

JavaScript中系统方法

JavaScript parseFloat() 函数

定义和用法

parseFloat() 函数可解析一个字符串，并返回一个浮点数。

该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

语法

parseFloat(string)

所有主要浏览器都支持 parseFloat() 函数

提示和注释

注意： 字符串中只返回第一个数字。

注意： 开头和结尾的空格是允许的。

注意： 如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN

实例

使用 parseFloat() 来解析不同的字符串：

document.write(parseFloat("10") + "<br>");
document.write(parseFloat("10.33") + "<br>");
document.write(parseFloat("34 45 66") + "<br>");
document.write(parseFloat(" 60 ") + "<br>");
document.write(parseFloat("40 years") + "<br>");
document.write(parseFloat("He was 40") + "<br>");

10
10.33
34
60
40
NaN

JavaScript isNaN() 函数

isNaN() 函数用于检查其参数是否是非数字值。

如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。

语法

isNaN(value)

document.write(isNaN(123)+ "<br>");
document.write(isNaN(-1.23)+ "<br>");
document.write(isNaN(5-2)+ "<br>");
document.write(isNaN(0)+ "<br>");
document.write(isNaN("Hello")+ "<br>");
document.write(isNaN("2005/12/12")+ "<br>");

false
false
false
false
true
true

JavaScript escape() 函数

编码字符串：
document.write(escape("Need tips? Visit W3School!"));

//  Need%20tips%3F%20Visit%20W3School%21

JavaScript eval() 函数

eval() 函数计算或执行参数。

//实例

var x = 10;
var y = 20;
var a = eval("x * y") + "<br>";
var b = eval("2 + 2") + "<br>";
var c = eval("x + 17") + "<br>";

var res = a + b + c;
document.write(a);  
document.write(b);
document.write(c);

Js中的Call（）和apply（）方法

call和apply都是Function对象的原型方法，它们是把特定的函数当作一个方法绑定到指定的对象上进行调用。

apply和call的方法和功能用法相同

区别是他们传递的参数的方式不同：

call方法则用数值的方式进行传递参数。

apply（）是用数组的方式进行传递参数

而且call（）方法只能接受多个参数列表，

apply（）方法只能接收数组或者伪类数组，数组元素将作为参数传递给被调用的函数。

码农公寓