html基础

最新推荐文章于 2024-07-24 17:16:26 发布

肩胛骨太过喜悦

最新推荐文章于 2024-07-24 17:16:26 发布

阅读量189

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/heiboya/article/details/127424567

版权

一.html简介

html是指超文本标记语言（hyper text markup language），使用标记标签描述网页。完整的html页面如下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html复习</title>
    </head>
    <body>
        <h1>
            标题
        </h1>
        <p>
            段落
        </p>
    </body>
</html>

<!doctype>声明不是HTML标签，没有结束标签，不区分大小写

二.html标签

标签对大小写不敏感，万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。元素可以设置属性，总是以名称/值对的形式出现，属性值应该始终被包括在引号内，双引号最常用，单引号也可以，如果属性值本身就含有双引号，则必须使用单引号。

<a herf="" target=""></a>

target定义在何处打开，没有使用herf，则不能使用hreflang，media,rel,targe,type属性。

元素里可以添加 ,

title是必须的，base是基本的链接地址，是默认链接，link通常用于链接到样式表，style定义样式文件引用地址，也可以直接添加样式，meta用于指定网页的描述，关键词，修改时间，作者和其他元数据。script用于加载脚本文件。

<img src="" alt="" usemap="">

img中，usemap属性可引用map中的id或name属性

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
 
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

shape是点击区域的形状，coords是坐标。

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在表格中，caption定义表格标题，colgroup对表格的列进行组合，只能在table元素之内，在thead，tbody，tfoot，tr之前使用。对于colgroup中某列定义不同属性，则用col标签。上下合并单元格rowspan，左右合并单元格colspan。单元格边距cell padding创建单元格与其边框之间的空白，单元格间距cell spacing增加单元格之间的距离。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

有序列表ol可以使用type属性，更改序号，无序列表ul可以使用style，更改形状，自定义列表。

块级元素宽度默认100%，常见的块级元素有div、p、h1、ol、ul、dl、tabel、form。常见的行内元素有a、span、i、strong、em、label、cite、code。常见的行内块元素有img、input、select、textarea、button。行内元素不能设置“width”和“height”，内元素在垂直方向上的padding、border、margin的特性和块元素很不一样：padding和border可以设置，但是不参与布局；margin设置都不能设置，行内元素不能包含块元素，除了a元素。

accept-charset	规定用于表单提交的字符编码。
action	规定提交表单时将表单数据发送到何处。
autocomplete	规定表单是否应打开自动完成（填写）功能。
enctype	规定将表单数据提交到服务器时应如何编码（仅供 method=“post”）。
method	规定发送表单数据时要使用的 HTTP 方法。
name	规定表单名称。
novalidate	规定提交时不应验证表单。
rel	规定链接资源和当前文档之间的关系。
target	规定提交表单后在何处显示接收到的响应。

form表单的不同属性，关于get：以名称/值对的形式将表单数据追加到 URL，URL 的长度受到限制（2048 个字符），对于用户希望将结果添加为书签的表单提交很有用，GET 适用于非安全数据，例如 Google 中的查询字符串。关于post：将表单数据附加在 HTTP 请求的正文中，POST 没有大小限制，可用于发送大量数据，带有 POST 的表单提交无法添加书签。

除了input标签外，html还有八个传统表单控件和五个html5新增的表单控件

button    定义按钮  禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
select    定义下拉列表
option    定义下拉列表中的选项
optgroup  定义选项组，用于组合选项
textarea  定义多行的文本输入控件
fieldset  分组表单内的相关控件
legend    定义fieldset标签的标题
label     定义input标签的标注



datalist    定义输入域的选项列表
keygen    定义密钥对生成器，用于生成密钥
output    用于显示计算的结果
progress    用于显示进度(前进量)
meter    用于显示度量(剩余量)

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

noscript提供无法使用脚本时的替代内容。

三.html5

让旧版本的浏览器正确显示元素，可以设置css的display属性值为block。

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

新元素

标签	描述
	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新元素默认没有边框和内容，使用arc画圆时，Math.PI表示180°，圆心平行的右端为0°。

SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

新多媒体元素

标签	描述
	定义音频内容
	定义视频（video 或者 movie）
	定义多媒体资源和
	定义嵌入的内容，比如插件。
	为诸如和元素之类的媒介规定外部文本轨道。

新表单元素

标签	描述
	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
	规定用于表单的密钥对生成器字段。
	定义不同类型的输出，比如脚本的输出。

新的语义和结构元素

标签	描述
	定义页面独立的内容区域。
	定义页面的侧边栏内容。
	允许您设置一段文本，使其脱离其父元素的文本方向设置。
	定义命令按钮，比如单选按钮、复选框或按钮
	用于描述文档或文档某个部分的细节
	定义对话框，比如提示框
	标签包含 details 元素的标题
	规定独立的流内容（图像、图表、照片、代码等等）。
	定义元素的标题
	定义 section 或 document 的页脚。
	定义了文档的头部区域
	定义带有记号的文本。
	定义度量衡。仅用于已知最大和最小值的度量。
	定义导航链接的部分。
	定义任何类型的任务的进度。
	定义 ruby 注释（中文注音或字符）。
	定义字符（中文注音或字符）的解释或发音。
	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
	定义文档中的节（section、区段）。
	定义日期或时间。
	规定在文本中的何处适合添加换行符。

html5拖放，将可拖放的元素draggable属性设置为true，链接和图片默认是可拖动的，不需要 draggable 属性，当拖动时，ondragstart调用函数drag（event），dataTransfer对象主要有两个方法，setData（）和getData（），getData（）可以取setData（）保存的值。

拖动某元素时，将依次触发下列事件：
(1)dragstart:按下鼠标并开始移动时，会在被拖放的元素上触发dragstart事件
(2)drag：触发dragstart事件后，随即就会触发drag事件，元素被拖动期间会持续触发该事件
(3)dragend：当拖动停止时（无论是把该元素放到了有效的放置目标上还是放到了无效的放置目标上），会触发dragend事件
当某个元素被拖动到一个有效的放置目标上时，下列事件会依次触发：
(1)dragenter：只要有拖动元素被拖动到放置目标上，就会触发dragenter事件
(2)dragover：在被拖动元素爱放置目标的范围内移动时，就会持续触发改事件
(3)dragleave 或drop：当被拖动元素拖出了放置目标，将触发dragleave事件，如果元素被放到了放置目标中，则会触发drop，而不会触发dragleave事件。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
    ev.preventDefault();
}
 
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
 
</body>
</html>

ev.target是指触发事件的元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-awZgo5sK-1666238903588)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220714111549351.png)]

在上述中console.log(ev.target),拖拽打开控制台。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZvcoUIF-1666238903589)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220714111739429.png)]

html5使用地理定位

var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
 
function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}

通过navigator.geolocation检测是否支持地理定位，如果支持，运行getCurrentPosition（）方法，getCurrentPosition(successCallback,errorCallback,positionOptions)，successCallback表示函数成功后的回调函数，该函数带有一个参数，对象字面量格式，表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。errorCallback表示返回的错误代码。positionOptions 的数据格式为JSON，有三个可选的属性。

html标签

video标签中没有src属性时，使用source标签，，source标签使用src属性指定多个可选择的文件地址，source标签本身不代表任何含义，不能单独出现。在给video标签动态设置src时，对video元素的id赋值，不是给source。

<video width="300" height="250" controls style="display: none;margin: auto;" id="videos">
        <source type="video/ogg" src=''/>
        <source type="video/mp4" src='' />
        <source type="video/webm" src='' /> 
    </video>
let dom = document.getElementById('videos')
dom.style.display = 'block'
dom.src = fileUrl

html标签与类似。

html5拥有新的input类型，新的输入类型：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week。在pattern属性使用正则表达式规定验证输入字段的模式。readonly规定只读，required规定值必需，disabled规定字段禁用，不能与一起使用，后台接收不到值。

html5的规定输入域的选项列表，中list属性的值与的id属性值相同则完成绑定。

元素在提交表单时，生成私钥储存在客户端，公钥发送到服务器。

元素for属性指定计算结果与元素的关系，以空格隔开。

元素，用于 type=“submit” 和 type=“image”：formaction属性会覆盖元素中的action属性.formenctype 属性覆盖 form 元素的 enctype 属性，仅适用于post表单.formmethod 属性覆盖了元素的 method 属性。formnovalidate 属性会覆盖元素的novalidate属性.formtarget 属性覆盖元素的target属性。

元素multiple属性是boolean属性，可选择多个值。pattern属性描述正则表达式，placeholder描述所期待的值。required属性表示不为空。step属性规定合法数字间隔。

html5web存储。localStorage对象用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。sessionStorage用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index)

可以使用JSON.stringify来存储对象数据，JSON.parse将字符串转换为对象。

html5 web sql：openDatabase方法可以打开已经存在的数据库，不存在则创建：
vardataBase = window.openDatabase(dbname, version, dbdesc, dbsize,function() {});
openDatabasek中五个参数分别为：数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库。

创建表

second.οnclick=function(){
		db.transaction(function (context) {
		context.executeSql('CREATE TABLE song (name VARCHAR,love INT)');
	}, function (error) {
		console.log('创建表失败:[' + error.message + ']');
	}, function () {
		console.log('创建表成功');
	});
		}

插入读取

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
 
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
    msg = '<p>数据表已创建，且插入了两条数据。</p>';
    document.querySelector('#status').innerHTML =  msg;
});
 
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
    var len = results.rows.length, i;
    msg = "<p>查询记录条数: " + len + "</p>";
    document.querySelector('#status').innerHTML +=  msg;
 
    for (i = 0; i < len; i++){
        msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
        document.querySelector('#status').innerHTML +=  msg;
    }
}, null);
});

删除更新

 db.transaction(function (tx) {
      tx.executeSql('DELETE FROM LOGS  WHERE id=1');
      msg = '<p>删除 id 为 1 的记录。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });
 
 db.transaction(function (tx) {
     tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
      msg = '<p>更新 id 为 2 的记录。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });

html5应用程序缓存优势：离线浏览，速度提升，减少对服务器的请求。如需启用应用程序缓存，请在文档的标签中包含 manifest 属性。

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

服务器管理维护manifest.appcache文件，检查manifest清单中是否有无法访问的文件，并及时更新，以免造成损失。
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）。

web worker为js创造多线程环境，主线程运行的同时，worker线程在后台运行，两者不干扰，线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。

web worker

同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

DOM限制：Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

通信联系：Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

脚本限制：Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求

文件限制：Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

主线程采用new命令调用Worker（）。其参数是一个脚本文件，脚本必须来自网络。主线程调用worker.postMessage（）方法向Worker发信息，主线程通过worker.onmessage指定监听函数，接收子线程的消息。Worker完成任务后，主线程可以把它关掉。在Worker线程中，使用后addEventListener或者onmessage监听，听函数的参数是一个事件对象，它的data属性包含主线程发来的数据。Worker内部有加载脚本的方法importScripts（），该方法可以同时加载多个脚本。使用完毕必须关闭Worker。

// 主线程
worker.terminate();

// Worker 线程
self.close();

文件限制：Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

// 主线程
worker.terminate();

// Worker 线程
self.close();

肩胛骨太过喜悦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html基础

html
复制链接

扫一扫