HTML

HTML

简介

HTML(Hyper Text Markup Language)中文译为“超文本标记语言”，hyper的语气似乎要更强些。HTML不是一种编程语言，而是一种标记语言，它提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。

发展

HTML主要是由W3C、WHATWG、IETF三个组织负责开发HTML5是第5次重大修改。

HTML 1.0 -- 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)

HTML 2.0 -- 1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2 -- 1996年1月14日，W3C推荐标准

HTML 4.0 -- 1997年12月18日，W3C推荐标准

HTML 4.0 -- 1999年12月24日，W3C推荐标准(微小改进)

XHTML 1.0 -- 发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

XHTML 1.1 -- 于2001年5月31日发布

HTML5.0 2014年10月28日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成

标准HTML界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

  • 标记/标签格式：

    ​ 一般：<标记名> </标记名>

    ​ 特殊：<标记名>

  • <!DOCTYPE html>：页面声明。用以向浏览器表示该页面以HTML5解析，首句必须是此。

  • <html> </html>：页面的根标签。

  • <html lang="en">：lang指代该HTML文件使用的语言，en表示英文、zh表示中文。

  • <head> </head>：页面的头部，一般用于配置信息以及页面标题设置。

  • <meta >：用于配置页面相关信息，例如内核和编码集。

  • <title> </title>：指定页面标题。

  • <body> </body>：页面主体，所有页面展示内容都写在这里。

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

HTML基础标签

a标签：超链接标签

<a href="跳转的页面地址">文本内容</a>
  • href是Hypertext Reference的缩写，即超文本引用。用以指定URL。

img标签：图片标签

<img src="图片地址" width="宽度" height="高度"/>
  • scr属性：值是图片URL，此为必需属性。
  • width和height：分别为宽度和高度，建议只设置一个，另一个可按比例自适应。

h标签：标题标签

<h1>h1文本内容</h1>
<h2>h2文本内容</h2>
<h3>h3文本内容</h3>
  • h后的数字是标题级别，数字越小，级别越高，字体越大。

p标签：段落标签

<p>段落内容</p>
  • 每个p标签都独占一行
  • 无首行缩进

br标签：换行标签

<br>
  • 一个br换一行

特殊符-空格

&nbsp;
  • 一个特殊字符一个空格

表格

基础标签

<table borderl="1" width="200" height="300" align="right">
    <th align="center">
        <th align="left" width="100" height="200"></td>
    </th>
	<th align="center">
    	<td align="left" width="100" height="200"></td>
    </th>
</table>

  • <table> </table>：表示一个表格

  • border：表格边框宽度，默认为0

  • <tr></tr>：一个tr表示表格中的 一行，自身不包含单元格，单元格需要td来表示

  • <td></td>：一个td表示一个单元格，td需写在tr里面

  • <th></th>：表示表格标题行中的一个单元格，与td相比只是会自动加粗而已。

  • width height：表格、行、单元格均可设置宽度和高度。

  • align：表格、行、单元格均可设置对齐方式，默认为left，另外可为right、center。

  • 示例

    <h2>实现一个3行3列的表格</h2>
<table border="1">
    <tr>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
    </tr>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
</table>

    效果如下：

    001

表格扩展

  • 合并单元格

    • colspan：合并同一行的单元格，跨列合并三个单元格示例：

      <td colspan="3"></td>
      002

    • rowspan：合并同一列的单元格，跨行合并两个单元格示例：

      <td rowspan="2"></td>
      003

    • 单元格间距

      • cellspacing：控制单元格间距离

      • cellpadding：控制单元格与边框距离

        <table cellspacing="2" cellpadding="10"> </table>

列表

无序列表

  • <ul> </ul>：定义无序列表

  • <li> </li>：定义列表项

  • 示例如下：

    <ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
</ul>
    004

有序列表

  • <ol> </ol>：定义有序列表

  • <li> </li>：定义列表项

  • 示例如下：

    <ol>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
</ol>
    005

定义列表

  • 定义列表由标题和正文表示

  • <dl> </dl>：定义定义列表

  • <dt> </dt>：标题

  • <dd> </dd>：正文

  • 示例：

    <dl>
    <dt>中国</dt>
    <dd>中华人民共和国</dd>
    <dt>美国</dt>
    <dd>美利坚合众国</dd>
    <dt>英国</dt>
    <dd>大不列颠及北爱尔兰联合王国</dd>
</dl>
    006

列表嵌套

<h2>嵌套列表</h2>
<ul>
    <li>
        第一个列表项
        <ul>
            <li>二级目录第一个列表项</li>
            <li>二级目录第二个列表项</li>
            <li>
                二级目录第三个列表项是有序列表
                <ol>
                    <li>第一个列表项</li>
                    <li>第二个列表项</li>
                    <li>第三个列表项</li>
                </ol>
            </li>
            <li> <a href="http://www.baidu.com">二级目录第四个列表项是个超链接</a> </li>
        </ul>
    </li>
    <li>第三个列表项</li>
    <li>第四个列表项</li>
    <li>
        第五个列表项是定义列表
        <dl>
            <dt>中国</dt>
            <dd>中华人民共和国</dd>
            <dt>美国</dt>
            <dd>美利坚合众国</dd>
            <dt>英国</dt>
            <dd>大不列颠及北爱尔兰联合王国</dd>
        </dl>
    </li>
    <li>第六个列表项</li>
</ul>
007

表单

from

  • <form> </form>：定义表单

  • method：指定提交方式，默认为get，还可为post

  • action：指定表单提交路径。一般为服务器IP，也可为页面(用于查看效果)

    <form action="index.html"> </form>
<!-- 当点击表单里的按钮时，会把数据提交到index.html -->

表单元素

<input> </input>：各种框，可由type属性指定

  • type属性：

    • type="text"：输入框，此为input框的默认值，可由value或placeholder属性指定其默认值。

      • placeholder样式可修改

        input::placeholder{
    color:cornflowerblue;
}
input:focus::placeholder{
    color:blue;
}

    • type="password"：密码框，输入自动隐藏。

    • type="radio"：单选框，同一name属性的单选框只能选一个，可由checked属性指定默认。

    • type="checkbox"：多选框，可由checked属性指定默认。

    • type="button"：按钮，无提交功能，ps：HTML5有专门的按钮标签。

    • type="submit"：按钮，可进行表单提交。

    • type="reset"：按钮，可进行重置表单。

    • 示例：

      <form action="index.html">
    输入框：<input type="text" value="可指定默认值"><br>
    密码框：<input type="password"><br>
    单选框：可默认<input type="radio" name="a" checked> &nbsp;&nbsp;
    	   只可单选<input type="radio" name="a" ><br>
    多选框：也可<input type="checkbox" checked> &nbsp;&nbsp;
    默认<input type="checkbox" checked> &nbsp;&nbsp;
    可以<input type="checkbox"> &nbsp;&nbsp;
    多选<input type="checkbox"><br>
    按钮：<br>
    <input type="button" value="没啥用的小破按钮"><br>
    <input type="submit" value="可以提交的按钮"><br>
    <input type="reset" value="可以重置的按钮">
</form>
      008
<select> </select>：下拉菜单

  • <option> </option>：下拉菜单的选项，可由selected属性指定默认

  • 示例

    <form action="index.html">
    <select>
        <option value=""> 选项一</option>
        <option value="" selected> 选项二</option>
        <option value=""> 选项三</option>
    </select>
</form>
    009
<textarea> </textarea>：文本域

  • cols：列数

  • rows：行数

  • value：可设置默认文本

  • 示例：

    <form action="index.html">
    文本域：<br>
    <textarea cols="30" rows="10" value="可设置默认文本"></textarea>
</form>
    010

HTML5新标签

背景

HTML4代码嵌套过深，阅读不便、代码含义不明确、不利于SEO。HTML5是2014年推出的HTML新版本。内增了很多新标签用于规范HTML的页面内容代码结构。

  • SEO(search engine optimize)搜索引擎优化：利用技术手段和搜索引擎的规则提高网站在有关搜索引擎内的自然排名。影响因素有加载速度、关键词、代码结构、页面内容。

新标签

  • <header> </header>：表示头部区域，是一个块级元素。

  • <nav> </nav> ：表示页面的链接导航，是一个块级元素，常用于上一页、下一页或友情链接。

  • <footer> </footer>：表示页面尾部，用于显示版权信息、友情链接、块级元素。

  • <main> </main>：表示页面的主体，块级元素，一个页面只有一个< main >。

  • <section> </section>：表示一个模块的标题部分，或者文章中的章节、页眉、页脚等区域。

  • <article> </article> ：用于表示完整的模块，可复用， 其本身是一个块级元素。

  • <aside> </aside>：页面的非主要区域，比如侧边栏，其本身也是一个块级元素。

  • <hgroup> </hgroup>： 用于带有副标题的标题部分，其本身也是块级元素。

表单标签

  • <datalist> </datalist>：指带默认几个选择的输入框。

    • 示例：

      <datalist id="url-list">
      <option value="">www.baidu.com</option>
      <option value="">www.qq.com</option>
      <option value="">www.163.com</option>
</datalist>

  • HTML5对input进行了扩展

    • type="email"：邮箱

    • type="color"：颜色

    • type="date"：日期

    • type="range"：范围

    • type="number"：数字

    • 示例：

      <form action="index.html">
    数字： <input type="number"> <br>
    颜色: <input type="color"> <br>
    日期： <input type="date"><br>
    范围： <input type="range"><br>
    邮箱:  <input type="email"><br>
    <button>提交</button>
</form>
      011

    • <button> </button>：HTML5实现按钮，可提交

      • 一般浏览器会给button默认边框012
      • border: 1px solid #ccc;：一般都用灰色细边框替代012

表格标签

  • <tbody> </tbody>：对应表格中的主要区域
  • <thead> </thead：对应表格的头部
  • <tfoot> </tfoot>：对应表格的尾部

应用标签

  • <canvas> </canvas> ：HTML5提供的一种绘图技术，需借助JavaScript来实现。

  • <video> </video>：视频标签，用于播放视频。

    <video src="视频文件的路径" coutrols autoplay muted loop>
    <source src="媒体/test.MP4" type="video/ogg">
</video>
    • controls:是否显示控制工具
    • autoplay:缓存后自动播放
    • muted:静音播放
    • loop:循环播放

  • <audio> </audio>：音频标签，用于播放音频。

    <audio src="视频文件的路径" controls autoplay muted loop>
    <source src="媒体/夜曲.MP3" type="audio/mp3">
</audio>
    • controls:是否显示控制工具
    • autoplay:缓存后自动播放
    • muted:静音播放
    • loop:循环播放

  • <source> </source>：作为音频或视频的备用资源。

HTML5应用

本地存储

概念

一个程序需要保存用户数据或程序数据一般是用的服务器进行保存。但在前端部分，如果我们想要保存数据，在HTML5之前，可以通过cookie等技术来保存数据，但因其安全性差，及数据保存容量很小，所以HTML5新增了本地存储，可以实现在本地存储大量的数据。

HTML5新增了localStorage以及sessionStorage以及配套的API来实现通过JavaScript将数据保存到本地。

HTML5是根据保存时间的不同分为localStorage以及sessionStorage的。

localStorage

localstorage保存的数据有效期限是永久，即关闭浏览器后重新打开依然可以使用。

//1. 保存数据
localStorage.setItem('属性名','属性值');
//2. 读取数据
localStorage.getItem('属性名');
//3. 删除某个数据
localStorage.removeItem('属性名');
//4. 删除所有数据
localStorage.clear();

//例子：
localStorage.setItem('input','123456');
var data = localStorage.getItem('input');
console.log(data);输出123456

sessionStorage

功能上跟localstorage是完全一样，但有效期不是永久，保存到当前标签关闭时。

//1. 保存数据
sessionStorage.setItem('属性名','属性值');
//2. 读取数据
sessionStorage.getItem('属性名');
//3. 删除某个数据
sessionStorage.removeItem('属性名');
//4. 删除所有数据
sessionStorage.clear();

//例子：
sessionStorage.setItem('input','123456');
var data = sessionStorage.getItem('input');
console.log(data);输出123456

localStorage和sessionStorage的区别

  • localstorage保存的数据是永久保存的。
  • sessionStorage保存的数据是临时数据，标签页关闭后，数据会消失。
  • 无论localStorage还是sessionStorage，都只能保存字符串格式的数据。

拖拽

HTML5增强了JavaScript对于DOM元素的操作，额外的提供了专属的事件以及配套的API来实现拖拽操作。

实现流程

  1. 给被拖拽的HTML标签设置draggable="true"，让标签可以被拖拽。

    <div draggable="true"> </div>

  2. 给放置标签添加dragover事件，取消事件默认行为，以此来取消不可放置的限制。

    <div ondraggable="allow(event)"> </div>
<script>
    function allow(e){
        e.preventDefault();
    }
</script>

  3. 给放置标签设置drop事件，当拖拽操作结束后会针对放置元素触发该事件。

    <div ondrop="dropHTML(event)"> </div>
<script>
    function dropHTML(e){
        //函数体
    }
</script>

  4. 实现数据在事件之间传递

    //1.在事件中保存数据
event对象名.dataTransfer.setData("属性名","属性值");
//2.在另一个事件中读取数据
event对象名.dataTransfer.getData("属性名");//属性值
//例子：
document.body.addEventListener('dragstart',function (e){
e.dataTransfer.setData("class","item1");
});
document.body.addEventListener('drop',function (e){
  var className  e.dataTransfer.getData("class");
  console.log(className); //输出 item1
});

相应API

  • draggstart：当拖拽操作发生时，拖拽元素会触发该事件。

    • 一般我们在该事件中利用e.dataTransfer.setData保存拖拽元素的id或class，在发生放置事件(drop)的标签上利用e.dataTransfer.getData来获取保存的数据。

  • offsetX/Y：获取鼠标在某个标签中的偏移量.offsetX指的是鼠标和标签左边的距离，.offsetY即鼠标和标签顶部的距离。

    event对象名.offsetX
event对象名.offsetY
posted @   AncilunKiang  阅读(105)  评论(0)  编辑  收藏  举报
相关博文：
· jQuery
· CSS记录
· HTML-常用标签
· HTML（HyperText Markup Language）
· HTML | HTML简介
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示