HTML5知识简单总结

最新推荐文章于 2024-06-11 00:11:31 发布
最新推荐文章于 2024-06-11 00:11:31 发布
阅读量282 收藏
点赞数 1
分类专栏： JAVAWEB 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18835405/article/details/121116366
版权

目录

1、初识HTML

1.1、什么是HTML

​ Hyper Text Markup Language（超文本编辑语言），超文本包括：文字、图片、音频、视频、动画等
在这里插入图片描述

1.2、HTML发展史

在这里插入图片描述

1.3、HTML5优势

  1. 世界上知名浏览器厂商对HTML5的支持
    • 微软
      • Google
      • 苹果
  2. 市场的需求
  3. 跨平台

1.4、W3C标准

1.W3C

  1. W3C标准包括
    • 结构化标准语言（HTNL、XML）
    • 表现标准语言（CSS）
    • 行为标准（DOM、ECMAScript）

1.5、常见IDE

  • 记事本
  • Dreamweaver
  • IDEA
  • WebStorm
  • …

1.6、HTML基本结构

在这里插入图片描述

2、网页基本信息

  • DOCTYPE声明
  • title标签
  • meta标签

2.1、代码

<!--告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<!--网页的所有内容都要写在html标签内-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签，它用来描述我们网站的一些信息-->
    <!--meta一般用来做SEO也就是网页优化-->
    <meta charset="UTF-8">
    <meta name="keywords" content="ys,宝藏男孩一枚">
    <meta name="description" content="正在好好学习html">
    <!--title标签网页标题-->
    <title>这是我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello World!
</body>
</html>

3、网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号

3.1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级级标签</h4>
<h5>五级级标签</h5>
<h6>六级标签</h6>

<!-- 段落标签 给文字分段-->
<p>我是一个粉刷匠粉刷本领强</p>
<p>我要把那新房子刷得更漂亮</p>
<p>刷了房顶又刷墙刷子象飞一样</p>
<p>我是一个粉刷匠粉刷本领强</p>
<p>哎呀    我地小鼻子变呀变了样</p>
<p>我要把那新房子刷得更漂亮</p>

<!-- 水平线标签-->
<hr/>

<!-- 换行标签-->
我是一个粉刷匠粉刷本领强<br/>
我要把那新房子刷得更漂亮<br/>
刷了房顶又刷墙刷子象飞一样<br/>
哎呀    我地小鼻子变呀变了样<br/>

<!-- 粗体 斜体-->
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<br/>

<!-- 特殊符号 -->
空                              格
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有ys
<!--根据提示来
特殊符号记忆方式
&  ;
-->
</body>
</html>

4、网页特殊标签

4.1、 图像标签

  • JPG

  • GIF

  • PNG

  • BMP（位图）

  • …

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
img学习：
（必填）src：图片地址
            相对地址 ../(推荐使用),绝对地址
（必填）alt：图片名字
-->
<img src="../resources/image/1.jpeg" alt="ys头像" title="悬停文字" width="300" height="300">
</body>
</html>

4.2、链接标签

在这里插入图片描述

4.2.1、代码

4.链接标签.html⬇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--锚标记-->
<a name="top">顶部</a>
<!--
a标签：
（必填）href:表示要跳转到的页面
 target:表示窗体在哪里打开
        _blank 在新标签中打开
        _self 在当前标签下打开（默认）
-->
<a href="1.我的第一个网页.html" target="_blank">点我跳转</a>
<a href="https://www.baidu.com" target="_self">点我跳转百度</a>

<br/>

<a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpeg" alt="ys头像" title="悬停文字" width="300" height="300">
</a>

<!--
锚链接：
1.需要一个锚标记
2.跳转到猫标记
-->
<a href="#top">回到顶部</a>

<!--
功能性链接：
邮件链接：mailto
QQ链接：百度搜索qq推广->推广工具->生成代码
-->
<a href="mailto:360239086@qq.com">联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="https://pub.idqqimg.com/wpa/images/counseling_style_53.png" alt="领取小电影" title="领取小电影"/>
</a>
    
<!--锚标记-->
<br/><a name="down">底部</a>
</body>
</html>

另一个网页的锚链接可跳转到⬆网页的底部位置
<a href="4.链接标签.html#down">跳转到链接标签页面的底部</a>

4.3、 列表

4.3.1、 什么是列表

列表就是信息资源的一种展现形式。它可以使信息条理化，并以列表的样式显示出出来，以便浏览器能更快捷地获得相应的信息。

4.3.2 、列表的分类

  • 无序列表
  • 有序列表
  • 定义列表
4.3.2.1、代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>

<!-- 有序列表 -->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>C/C++</li>
</ol>

<!-- 无序列表
 应用范围：导航，侧边栏...
 -->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>C/C++</li>
</ul>

<!-- 自定义列表
 dl：标签
 dt：列表名字
 dd：列表名称
 应用范围：公司网站底部
 -->
<dl>

    <dt>学科</dt>

    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>C</dd>

    <dt>地点</dt>

    <dd>济南</dd>
    <dd>潍坊</dd>
    <dd>青岛</dd>
    
</dl>

</body>
</html>

4.4 、表格

4.4.1、 为什么使用表格

  • 简单通用
  • 结构稳定

4.4.2、 基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列

4.4.3 、代码

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

<!--表格table
行 tr
列 td
-->
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
<br/>
<table border="1px">
    <!--跨列 colspan-->
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <!--跨行 rowspan-->
    <tr>
        <td rowspan="3">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
    <tr>
        <td>5-1</td>
        <td>5-2</td>
        <td>5-3</td>
        <td>5-4</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

4.5、视频和音频

  • 视频元素
    • video
  • 音频元素
    • audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!-- 音频和视频
（必填）src 视频地址
controls 控制条
✳ html5_video&audio的autoplay属性失效的解决方法
参考博客：https://www.cnblogs.com/isXianYue/p/13554254.html
    标签定义为静音(muted: true)才可以自动播放
-->

<!--<video src="../resources/video/1.mp4" muted autoplay controls></video>-->
<!-- muted 音频自动播放还是不好使 -->
<audio src="../resources/audio/1.wav" muted autoplay controls></audio>
</body>
</html>

5、网页的一些概念

5.1、行内元素和块元素

  1. 块元素
    • 无论内容多少，该元素独占一行
    • （p、h1-h6…）
  2. 行内元素
    • 内容撑开宽度，左右都是行内元素的可以排在一行
    • （a、strong、em…）

5.2、页面结构分析

在这里插入图片描述

5.3、iframe内联框架

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架iframe</title>
</head>
<body>

<!-- bibi分享视频 -->
<!-- <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> -->

<!-- iframe 内联框架
    src: 地址

跨域问题解决，请求头加上 X-Frame-Options属性设置为SAMEORIGIN：页面只能被本站页面嵌入到iframe或者frame中。
后端解决跨域可参考https://blog.csdn.net/weixin_40910372/article/details/100068498
 -->
<!-- <iframe src="http://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe> -->

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点我跳转</a>

</body>
</html>

6、表单相关

6.1、初识post和get请求

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<!-- 表单form
 action：表单提交的位置，可能是网站，也可以是一个请求处理地址
 method：post，get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post方式提交：比较安全，传输大文件
 -->
<h1>注册</h1>
<form action="1.我的第一个网页.html" method="get">
    <!-- 文本输入框：input type="text" -->
    <p>名字：<input type="text" name="username"></p>
    <!-- 密码框：input type="password" -->
    <p>密码：<input type="password" name="pwd"></p>

    <p><input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置"></p>
</form>
</body>
</html>

6.2、表单元素

6.2.1 文本框属性

在这里插入图片描述

6.2.1.1、 文本框和单选框
    <!-- 文本输入框：input type="text"
        value="帅" 默认初始值
        maxlength="8" 最长能写几个字符
        size="30" 文本框的长度-->
    <p>名字：<input type="text" name="username" value="帅" maxlength="8" size="30"></p>
    <!-- 密码框：input type="password" -->
    <p>密码：<input type="password" name="pwd"></p>

    <!--单选框标签
     value 单选框的值
     ✳name 一个组，值要相同要不就不是单选效果了
     -->
    <p>性别：
        <input type="radio" name="sex" value="boy">男
        <input type="radio" name="sex" value="girl">女
    </p>
6.2.1.2、 多选框和按钮
<!--多选框标签
    checkbox
     -->
    <p>爱好：
        <input type="checkbox" name="hobby" value="shopping">买买买
        <input type="checkbox" name="hobby" value="coding">码代码
        <input type="checkbox" name="hobby" value="movie">看电影
        <input type="checkbox" name="hobby" value="money">钱
    </p>


    <!--按钮
    input type="button"
    input type="image" 提交
    input type="submit" 提交
    input type="reset"
     -->
    <p>
        <input type="button" name="button" value="按钮">
        <input type="image" src="../resources/image/1.jpeg" value="image">
    </p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
    </p>
6.2.1.3 、文件域
    <!--文件域
        input type="file"
     -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
6.2.1.4、简单验证滑块搜索框
<!-- 邮箱 -->
    <p>
        邮箱：
        <input type="email" name="mail">
    </p>
    <!-- URL-->
    <p>
        URL：
        <input type="url" name="url">
    </p>
    <!-- 数字-->
    <p>
        商品数量：
        <input type="number" name="number" max="100" min="1" step="1">
    </p>

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

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

6.2.3、列表框和文本域

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

    <!-- 下拉框或列表框 -->
    <p>
        国家：
        <select name="country">
            <option value="China">中国</option>
            <option value="English" selected>英国</option>
            <option value="UK">美国</option>
        </select>
    </p>

6.3、表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled
    <!-- 增强鼠标可用性：点击文字自动跳转到输入框 -->
    <p>
        <label for="mark">点我跳转输入框</label>
        <input type="text" id="mark">
    </p>

6.4、表单初级验证

6.4.1、why表单验证？

  • 减小后端请求的压力
  • 提高安全性

6.4.2、常用方式

  • placeholder 提示信息
  • required 非空判断
  • pattern 正则表达式
    <p>
        名字：
        <input type="text" name="username" maxlength="8" size="30" placeholder="请填写用户名" required>
    </p>
    <!-- 自定义邮箱，正则表达式验证 
    https://blog.csdn.net/qianhaohong/article/details/53435253-->
    <p>
        自定义邮箱：
        <input type="text" name="diymail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>
让代码der一会
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python基础知识点总结
学Python的小白！
08-25 7万+
本文包括python基本知识：简单数据结构，数据结构类型（可变：列表，字典，集合，不可变：数值类型，字符串，元组），分支循环和控制流程，类和函数，文件处理和异常等等。
html表单实验总结,html表单知识的相关总结
weixin_34307029的博客
06-09 2705
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。1. ht...
HTML5 基础知识总结(全)
IT_Holmes的博客
04-22 7100
HTML 一1.文档类型2.字符集3.标签< h1 >到< h6 >4.文本格式化标签（熟记）5.标签属性6.图像标签img 学习HTML推荐使用Sublime Text软件来操作练习，一定要熟练使用这个软件，对以后的无论是工作还是学习都有很大帮助。 1.文档类型<!DOCTYPE> <!DOCTYPE html> 这句活就是告诉我们使用那个html版本。 只需要记住，看到上面这行代码，说明使用的是html5的版本。 2.字符集 <meta chars
HTML网页制作知识总结（简单易学）
m0_74807013的博客
03-18 2344
html制作网页所需要学的知识点
HTML5+CSS、CSS3基础知识点总结
m0_51981718的博客
11-05 1万+
一、选择器 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器（*） 标签选择器 优点 标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。 缺点 不能设置差异化样式，只能选择全部当前标签。 id 选择器与类选择器的区别 类选择器可以被多个元素调用。 id 选择器只能允许一个标签调用。 类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选
HTML5知识点总结
瘦肉的博客
08-02 5468
参照W3Cschool网站上的内容，将HTML5的知识点进行了大致梳理，详情请移步： https://www.w3cschool.cn/html5/ HTML5知识点总结 开始学习HTML5 HTML5浏览器支持 HTML5新元素   标签 描述 &lt;canvas&gt;新元素 &lt;ca...
Java基础知识总结（2021版）
热门推荐
学Java，找哪吒
01-09 25万+
前言 大家好，我是素小暖，2012年毕业，2016年通过培训转行java开发，今天2021年1月9日，转行之路跌跌绊绊，蓦然回首，已经满满的4年工作经验了？但感觉知识还是相当的匮乏，没自信，也许是努力程度还不够吧。很感谢CSDN，因为是它给了我学习的动力，之前写了一篇记录CSDN博客访问量的文章，也许大家感觉很幼稚，但真的很有用，很有效果，仿佛磕了药一样，努力学习，进步。 2020年，是我较为成功的一年，工作上，跳了槽，涨了工资；学习上，啃了几本名著（Effective Java、重构 改善既.
HTML5+CSS3学习总结(完结)
是日前端
06-14 2万+
一、HTML5的语义化 二、CSS3动画 三、CSS3阴影 四、CSS3过渡(非常重要) 五、弹性布局 六、栅格布局 七、渐变 八、媒体查询
前端HTML5十大新特性详细总结
weixin_45709829的博客
04-04 1万+
前端HTML5十大新特性总结 一 必须知道 写前端的都知道，在代码最前面都有这一行代码，大家都知道一定要把这东西写上去。 <!DOCTYPE html> 但是！这是什么玩意儿？为什么要写上去?不写上去会怎么样？很少人去注意到，反正就照写就可以了。 所以，这是个啥玩意儿?这是声明！这是HTML5声明的新特性！ 既然有HTML5，那肯定有HTML4是吧，那HTML4是怎么声明的呢？ HTML4有三种声明方式：Strict（严格模式），Transitional（过渡模式），Frameset（框架模式
HTML页面知识点小总结(巨详细)
bafeiq的博客
02-11 8402
HTML页面最基础的东西总汇，建议刚开始接触前端页面的小伙伴们收藏哦，可以随时拿出来学习或者复习加深印象。
HTML相关知识简单总结记录
03-09
HTML相关知识简单总结记录
HTML的知识点总结 HTML.xmind
05-26
HTML基本知识点总结，它是用xmind总结的，整体看起来思路会比较清晰，对于学习html的小伙伴，希望有所帮助
HTML知识点总结（思维导图）
03-02
HTML知识点总结（思维导图）
html知识点实践经验总结
12-14
可以长传 4.lable可以设置快捷键的 5.ini是简单的配置信息描述，xml是复杂信息描述 6.正则表达式是一种专门用于操作字符串的规则 通过一些符号来表示，简化对字符串操作 常见的操作有 匹配：matc
HTML5的一些简单总结
10-12
自己在学习HTML5的一些笔记，免去到网站上搜索的时间，这里能得到你想要的知识
利用 HTML5 Canvas 实现在线签字功能
最新发布
weixin_74268571的博客
06-11 446
HTML5 的 canvas 元素是一种强大的图形渲染工具,它可以实现各种动画效果，给大家展示的是签字功能的演示实现
移动端适配和响应式页面中的常用单位
Keep trying, keep going
06-10 462
百分比单位是相对于父元素的大小计算的。它可以用于设置宽度、高度、字体大小等属性，使得元素能够随着父元素的大小自动调整。单位也可以用于移动端适配和响应式页面，但由于它是相对于当前元素的字体大小计算的，这可能导致嵌套元素的大小计算变得复杂。这样，当我们需要调整整个页面的大小时，只需修改根元素的字体大小即可。）的字体大小计算的。在实际项目中，我们通常会根据不同的需求和场景，灵活地使用这些单位来实现移动端适配和响应式页面。视口单位在移动端适配和响应式页面中非常实用，因为它们能够使元素随着视口大小自动调整。
自制植物大战僵尸：HTML5与JavaScript实现的简单游戏
m0_73367097的博客
06-08 1913
自制植物大战僵尸
HTML5拖放（Drag and Drop）全面指南：让网页互动起来
艾恩小灰灰的博客
06-06 770
HTML5 引入了许多令人兴奋的新特性，其中之一便是原生支持的拖放（Drag and Drop）功能，它极大地丰富了网页的交互体验，允许用户直接在页面上通过鼠标操作来移动元素。本文将深入浅出地介绍如何在你的网页中实现拖放功能，包括基本概念、API使用、事件处理以及代码示例。
html网页基础知识
08-27
- *3* [HTML基础知识总结](https://blog.csdn.net/ss810540895/article/details/124583264)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值