HTML5

已于 2023-06-02 17:12:34 修改
阅读量98 收藏
点赞数
分类专栏： 自学随笔 文章标签： html5
于 2021-04-11 21:54:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43450676/article/details/115596347
版权

HTML(Hyper Text Markup Language)超文本标记语言，超文本包括文字、图片、音频、视屏和动画等等，是用来描述网页的一种语言，值得注意的是：HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签，HTML就是使用标记标签来描述网页的。
自己的理解，设计网页，并且想方设法的将网页做的美观，实用，内容丰富。使用户感到这个网页是好的。

W3C(World Wide Web Consortium)万维网联盟，成立于1994年，Web技术领域最具权威和最具影响力的国际中立性标准机构
http://www.w3.org/
http://www.chinaw3c.org/
网站以.org代表开源

W3C标准包括

  • 结构化标准语言(HTML、XML)
  • 表现标准语言(CSS)
  • 行为标准(DOM、ECMAScript)

IDEA中修改用于HTML展示的浏览器：File>settings>Tools>Web Browsers
可以修改路径path，也可以拖动修改浏览器间上下顺序

在HTML5网页中，表示字号大小也就是字号的常用单位有以px像素为单位，以em为单位，以rem为单位。


<!--DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>

<html lang="en">

<!--head代表网页头部-->
<head>

<!--meta描述性标签，它用来描述我们网站的一些信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="网页关键字">
    <meta name="description" content="网页描述">

    <!--title网页标题-->
    <title>我的第一个网页</title>
</head>

<!--body代表网页主体-->
<body>
Hello Word!
</body>
</html>

网页基本标签

  • 标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
  • 段落标签
<p></p>
  • 换行标签
<br/>
  • 水平线标签
<hr/>
  • 字体样式标签
<strong>粗体</strong>
<em>斜体</em>
  • 注释和特殊符号
注释：<!-- -->
空格：&nbsp;
大于号>:&gt;
小于号>:&lt;
版权号:&copy;

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--学习
src:图片地址（必填）
    有相对地址(推荐使用)和绝对地址（不推荐）两种
    ../   上一级目录

alt:图片名字（必填），当图片加载失败时，会在图片的位置显示图片的名字

其它项，如title（当鼠标悬停在图片上时，会显示在图片上的悬浮文字文字）、width、height等等，选用即可
-->

<img src="../resources/image/cwj.jpg" alt="图片名字" title="悬停文字" width="300" height="300">

</body>
</html>

链接标签

  • 页面间标签
  • 锚标签
  • 功能型标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!--a标签
href为必填，表示要跳转到什么地方，如果不填此属性则无效
target为选填，表示以什么方式打开超链接
    _blank  在新窗口打开
    _self   在本页面覆盖打开,默认打开方式
-->

<!--页面间链接-->
<a href="3.图像标签.html" target="_blank">点击我跳转超链接</a>
<br/>
<a href="https://mp.csdn.net/console/article" target="_self">点击跳转CSDN</a>
<br/>
<br/>
<br/>

<!--锚链接
1、需要一个锚标记
2、跳转到标记
也可以在不同的html页面中进行锚链接跳转，格式为
<a href="所要要跳转到的网页地址#锚标签name">超链接载体</a>
<a href="4.链接标签.html#bottom">点击跳转</a>
-->
<a name="top">锚标记顶部</a>
<br/>
<a href="#bottom">点击跳转到锚标记底部</a>
<p><img src="https://w.wallhaven.cc/full/ex/wallhaven-ex9gwo.png" alt="如果图片加载失败就显示我" title="图片加载成功啦" width="300" height="300"></p>
<p><img src="https://w.wallhaven.cc/full/ex/wallhaven-ex9gwo.png" alt="如果图片加载失败就显示我" title="图片加载成功啦" width="300" height="300"></p>
<p><img src="https://w.wallhaven.cc/full/ex/wallhaven-ex9gwo.png" alt="如果图片加载失败就显示我" title="图片加载成功啦" width="300" height="300"></p>
<p><img src="https://w.wallhaven.cc/full/ex/wallhaven-ex9gwo.png" alt="如果图片加载失败就显示我" title="图片加载成功啦" width="300" height="300"></p>
<!--跳转到锚标记处，为#加上锚标记的name-->
<a href="#top" target="_blank">点击跳转到锚标记顶部</a>
<br/>
<a name="bottom">锚标记底部</a>

</body>
</html>

行内元素和块元素

也叫块标签和行内标签
块元素：无论内容多少，该元素独占一行，如p、h1-h6等
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行，如a、strong、em等

列表标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--有序列表
多应用于试卷，问答
-->
<ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第四</li>
</ol>
<hr/>

<!--无序列表
多应用于导航，侧边栏
-->
<ul>
    <li>无序一</li>
    <li>无序二</li>
    <li>无序三</li>
    <li>无序四</li>
</ul>
<hr/>

<!--自定义标签
dl:标签
dt:列表名称
dd:列表内容
多应用于网站底部
-->
<dl>
    <dt>语言</dt>
    <dd>java</dd>
    <dd>Python</dd>
    <dd>Go</dd>

    <dt>课时</dt>
    <dd>10</dd>
    <dd>8</dd>
    <dd>6</dd>
</dl>

</body>
</html>

表格标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>

<!--
table表格标签
tr:行
td:列
-->

<!--border给表格添加边框属性-->
<table border="1px">
    <tr>
        <!--
            colspan表示此单元格跨列
            align表示内容在单元格中对齐方式
        -->
        <td colspan="3" align="center">学生成绩</td>
    </tr>

    <tr>
        <!--rowspan表示此单元格跨行-->
        <td rowspan="3">小李</td>
        <td>Java</td>
        <td>95</td>
    </tr>

    <tr>
        <td>Python</td>
        <td>90</td>
    </tr>

    <tr>
        <td>Go</td>
        <td>85</td>
    </tr>

    <tr>
        <td rowspan="3">小陈</td>
        <td>Java</td>
        <td>85</td>
    </tr>

    <tr>
        <td>Python</td>
        <td>90</td>
    </tr>

    <tr>
        <td>Go</td>
        <td>95</td>
    </tr>

</table>

</body>
</html>

媒体元素


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>

<!--音频和视频
src：资源路径
controls：控制条，不加此属性，不会显示，添加后可以以进行播放暂停和下载音频和视屏
autoplay：自动播放，添加后页面打开音频和视频会自动播放
-->
<audio src="" controls autoplay></audio>
<video src="" controls autoplay></video>

</body>
</html>

表单标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get 提交方式
        get方式提交：我们可以在url中看到我们提交的信息，不安全，但是高效
        post方式提交：比较安全，可以传输大文件
-->
<form action="1.我的第一个网页.html" method="post">
    <!--
    文本输入框input type="text"
    value=""设置初始默认值
    maxlength=“5” 最长能写几个字符
    size 文本框的长度
    -->
    <p>昵称：<input type="text" name="username" value="请输入您的昵称"/></p>

    <!--密码输入框input type="password"-->
    <p>密码：<input type="password" name="password"/></p>

    <p>
    <!--单选框标签
    input type="radio"
    value:单选框的值
    name:表示组，当为同一组时，只有一个单选框会被选中，比如下方的组name="sex"，如果两个组name不同，则男和女都可以选中
    checked:默认会选中
    -->
        性别：<input type="radio" value="男" name="sex" checked/>男
             <input type="radio" value="女" name="sex"/>女
    </p>

    <p>
    <!--多选框标签
    input type="checkbox"
    -->
        爱好：<input type="checkbox" value="sleep" name="hobby" checked/>睡觉
             <input type="checkbox" value="code" name="hobby"/>代码
             <input type="checkbox" value="game" name="hobby"/>游戏
             <input type="checkbox" value="girl" name="hobby"/>女孩
    </p>

    <p>
    <!--按钮
    input type="button" 普通按钮
    input type="image"  图片按钮，点击会直接跳转至action所指向的地址
    input type="submit" 提交按钮
    input type="reset"  重置按钮
    -->
        <input type="button" value="点击我" name="btn1"/>
        <input type="image" src="../resources/image/cwj.jpg"/>
    </p>

    <p>
    <!--提交按钮input type="submit" value=""提交按钮的值，默认为 提交 -->
        <input type="submit" value="确认提交"/>
    <!--重置按钮input type="reset" value=""重置按钮的值，默认为 重置-->
        <input type="reset" value="确认重置"/>
    </p>

    <!--下拉框，列表框-->
    <p>国家：
        <select name="列表名称" id="select">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="english">英国</option>
        </select>
    </p>

    <!--文本域
    rows 行
    cols 列
    -->
    <p>反馈：
        <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
    </p>

    <!--文件域
    input type="file" name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="btn">
    </p>

    <!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

    <!--URL-->
    <p>URL：
        <input type="url" name="url">
    </p>

    <!--数字-->
    <p>商品数量：
        <input type="number" name="number" max="100" min="0" step="1">
    </p>

    <!--滑块
    input type="range"
    -->
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>

    <!--搜索框-->
    <p>搜索框：
        <input type="search" name="search">
    </p>

    <!--增强鼠标可用性-->
    <p>
        <label for="mark">点我进入文本框：</label>
        <input type="text" id="mark" value="mark" name="mark">
    </p>

    <p>
        隐藏域     hidden
        只读      readonly         加上后文本框为只读，不可修改
        禁用      disabled         加上后将不可以选中，如单选框和复选框
        提示信息   placeholder
        非空判断   required         加上后为必填非空想
    </p>

    <!--正则表达式 pattern
    常用正则表达式网址：https://www.jb51.net/tools/regex.htm
    -->
    <p>自定义密码(由数字/大写字母/小写字母/标点符号组成，四种都必有，8位以上)：
        <input type="text" name="diyMail" pattern="(?=^.{8,}$)(?=.*\d)(?=.*\W+)(?=.*[A-Z])(?=.*[a-z])(?!.*\n).*$">
    </p>

</form>

</body>
</html>
念雪、难忘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
HTML5官方文档中文版
07-18
HTML5官方文档中文版
Wallhaven直接下载「Wallhaven Direct Downloader」-crx插件
03-16
允许您直接从搜索/ tag / random / toplist页面下载Wallhaven上的壁纸 由于Wallbase已死并且被Wallhaven取代，因此扩展程序已进行了更改。对于感兴趣的人，该扩展程序的源代码可在GitHub上找到：) https://github.com/eramdam/WallbaseDirectDownloader *** CHANGELOG *** 1.0.2-修复了错误并改进了文本/图标1.0.1-修复了1.0.0的错误-修改了与Wallhaven一起使用的代码-新图标-更浅的扩展名0.0.8-在墙纸页面上添加了1单击下载按钮（http ：//alpha.wallhaven.cc/wallpaper/*）-该扩展程序不再需要到处访问。 0.0.6.2-现在，如果您在Wallhaven的首选项中禁用了延迟加载，则该扩展程序可以使用。 0.0.6-由于超赞的XMLHttpRequests，该扩展现在可以正确处理PNG格式的墙纸！ 是的，技术！ 0.0.5.1-修复了多个缩略图大小功能0.0.5引入的错误：-添加了对Wallhaven的多缩略图格式的支持，并相应地修复了URL 0.0.4：-将“下载”链接更改为2个图标，然后您可以预览或直接下载壁纸！ 支持语言:English
HTML5 实现动态爱心网页代码
weixin_57038822的博客
11-30 5万+
HTML5 实现动态爱心网页代码 表白女朋友找不到合适的方法？可以试一试动态爱心网页，带你升华感情，一步步走上人生巅峰。 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas爱心</title> <style> html, body { height: 100%; padding: 0; margin: 0; bac
HTML5介绍
weixin_62650212的博客
03-16 1万+
总之，HTML5提供了许多新特性，这些特性使得网页开发更加灵活、高效，并且可以更好地支持多媒体内容。同时，HTML5也提高了网页的语义化，使得搜索引擎可以更好地理解网页内容，这样就可以更容易地实现SEO优化。新的输入类型，例如email、url、tel等，可以使得用户输入更加方便。此外，HTML5还支持新的表单元素，例如日期选择器、颜色选择器等，使得开发者可以更加轻松地创建表单。相对于之前版本，HTML5提供了许多新特性，这些特性不仅使得网页设计更加灵活，同时还为网页开发者提供了更多的控制权和创造力。
一个简单的网页设计HTML5作业
好好读书
06-26 8万+
简单的html设计作业，初次学习，希望指正！
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 37万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
学习HTML5这一篇就够了
轻松的小希
11-25 8万+
目录第一章 HTML5概述1.1、什么是HTML1.2、什么是HTML51.3、本文重要说明1.4、浏览器的版本1.5、选择开发工具第二章 HTML5语法2.1、基本结构2.2、语法规范2.3、标签规范第三章 HTML5标签3.1、标题标签3.2、段落标签3.3、链接标签3.4、图像标签3.5、表格标签3.6、列表标签3.7、分组标签3.8、语义标签3.9、表单标签3.10、框架标签3.11、音频标签3.12、视频标签3.13、其它标签3.14、头部标签第四章 HTML5属性4.1、属性概述4.2、通用属性
HTML5详细介绍及使用
小仙儿
12-03 2万+
HTML5详细介绍及使用 一、HTML5简介 1、HMTL5的定义 在W3C中的定义：HTML 5 是下一代的 HTML，设计HTML5最初目的是为了在移动设备上支持多媒体。HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最核心的超文本标记语言。万维网不等同于互联网，但它是依靠互联网运行的服务之一，万维网又简写为www，它可以实现在互联网...
200行Html5+CSS3+JS代码实现动态圣诞树
知心宝贝的博客
12-20 7万+
一、前言 最近CSDN的热榜出现了很多用Python、C/C++等编程语言实现的圣诞树，这篇文章用前端三大杀手Html5、CSS、Js来实现动态圣诞树 二、
HTML5 二维码扫描
03-16
html5 二维码扫描源代码，javascript源码，jquery.min.js，reqrcode.js，test.html。
HTML5快速参考
10-08
HTML5快速参考书，可作为一个工具书使用，别的不多说，请大家参考
html5七天速成手册
12-21
html5七天速成手册
HTML5指纹识别方法
10-25
HTML5指纹识别方法。HTML5指纹识别方法。HTML5指纹识别方法。
html5论文参考文献合集
sun13212715744的博客
10-23 8160
html5被称为下一代html,是一种网络语言标准，HTML5的设计目的是为了在移动设备上支持多媒体。在移动设备开发HTML5要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。下面我们一起看看近三年最新的"html5论文参考文献范例" 。
【html5】01-了解HTML5
m0_68467925的博客
05-17 627
了解HTML5；引入HTML5目的；HTML5新特性；优缺点
520表白html5爱心代码
最新发布
youyouxiong的博客
05-20 1671
在HTML5中创建一个带有爱心动画的表白页面，可以通过结合CSS3动画和JavaScript来实现。这个示例创建了一个简单的表白页面，其中包含一个动态的爱心和文字。你可以根据自己的需求调整样式和动画效果，以创建一个更加个性化的表白页面。的动画，它会使爱心按照一定的时间间隔进行缩放，产生跳动的效果。类定义了表白文字的样式，包括它的位置、颜色和字体大小。类定义了爱心的样式，包括它的形状和大小。伪元素用于创建爱心的两个部分，并使用。在这个示例中，我们使用了CSS3的。属性来旋转它们，形成爱心的形状。
【博主推荐】HTML5实现520表白、情人节表白模板源码
xcLeigh
05-17 1481
HTML5实现520表白、情人节表白模板源码，520告白程序，情人节表白程序，html爱情表白，html记事本，html表白日记，html书中的爱情，html爱情日记，为爱打造属于自己的爱情小屋，实现书本翻页效果，写上自己的爱情表白日记，每一帧记录彼此的甜蜜瞬间，每一帧都是彼此为爱付出的幸福。背景夜空下的萤火虫，诺言的背景音乐，漂浮的爱情誓言文字，独一份的浪漫，快来为你那个他（她），建立属于自己的爱情纪念册。代码上手简单，代码独立，可以直接使用。也可直接预览效果。
html和html5
08-02
HTML和HTML5有什么区别？ 回答: HTML和HTML5是指代不同的东西。HTML是指超文本标记语言，是一种用于创建网页的标准标记语言。而HTML5是HTML的第五个版本，是对HTML进行了扩展和改进的新一代标准。[1] HTML5相比HTML4...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

念雪、难忘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值