HTML5学习笔记

HTML5笔记

Writing In The Front：

@Auther：纸箱里的猫

@Description：HTML5自用学习笔记

@Last Updated Date：2021.7.20

@Learning Completion Date：2021.7.7

@Writing The Software：Typora

目录

快捷键_idea

注释 ctrl+/

复制上一行 ctrl+d

补全代码 Tab

1. 什么是HTML

1.1 HTML是什么

Hyper Text Markup Language(超文本标记语言)

现已发展到HTML5

1.2 W3C标准

World Wide Web Consorttium（万维网联盟）

成立于1994年，Web技术领域最权威和最具有影响力的国际中立性技术标准机构

W3C标准包括：

结构化标准语言（HTML,XML）

表现标准语言（CSS）

行为标准（DOM文档对象模型、ECMAScript->JS）

1.3 HTML的基本结构

开放标签和闭合标签

1.4 网页的基本信息

注释 ctrl+/

DOCTYPE:告诉浏览器，我们要使用什么规范

head标签代表网页头部

body标签代表网页主体

title标签代表网页标题

meta描述性标签，用来描述网站信息

meta一般用来做SEO SEO:搜索引擎优化

---

2. 网页基本标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>

一级标签

二级标签

三级标签

四级标签

<p>123</p>
<p>456</p>
<p>789</p>

HelloWorld<br>

自闭合标签

<br>是HTML写法。
<br/>是XHTML1.1的写法，也是XML写法。
<br />是XHTML为兼容HTML的写法，也是XML写法。

<hr/>

自闭合标签

<strong>我是粗体</strong>
<em>我是斜体</em>

空格：我 是 空 格
大于号：>
小于号：<
版权符号：©

---

3. 图像标签

常见的图像格式

JPG，GIF，PNG，BMP（位图） 等

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

<img src="../res/image/3.jpg" alt="头像" title="我是悬停文字" width="300" height="300">

---

4. 链接标签

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

文本超链接

图像超链接

a标签

<a href="1.我的第一个网页.html" target="_blank">点击跳转到页面1</a>
<br>
<a href="https://www.baidu.com" target="_self">点击我跳转至百度</a>
<br/>
<a href="https://www.baidu.com" target="_top">
<!-- 图像超链接-->
    <img src="../res/image/3.jpg" alt="头像" title="我是悬停文字" width="300" height="300">
</a>

锚链接

<a name="top">我是顶部</a><a href="#top">跳转至顶部</a>

功能性链接

<a href="mailto:1051201572@qq.com">我的邮箱</a>

5. 行内元素和块元素

块元素

无论内容多少，该元素独占一行

如：p、h

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行

如：a、strong、em

---

小结

HTML的基本结构

W3C组织

HTML的基本标签

图像标签

链接标签

---

6. 列表标签

什么是列表

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

列表的分类

有序列表

<ol>    <li>Java</li>    <li>Python</li>    <li>运维</li>    <li>前端</li>    <li>C语言</li></ol>

<hr/>

无序列表

<ul>    <li>Java</li>    <li>Python</li>    <li>运维</li>    <li>前端</li>    <li>C语言</li></ul>

<hr>

自定义列表

<dl>    <dt>学科1</dt>    <dd>Java</dd>    <dd>Python</dd>    <dd>Linux</dd>    <dd>C</dd>    <dt>地理</dt>    <dd>北京</dd>    <dd>上海</dd>    <dd>广东</dd>    <dd>深圳</dd></dl>

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

---

7. 表格标签

<table border="1px">    <tr>        <!--colspan 跨列-->        <td colspan="4" align="center">1.1</td><!--        <td>1.2</td>--><!--        <td>1.3</td>--><!--        <td>1.4</td>-->    </tr>    <tr>        <!--rowspan 跨行-->        <td rowspan="2">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>

---

8. 媒体元素—视频和音频

视频元素video

音频元素audio

<!--<video src="../res/video/视频01.mp4" controls autoplay></video>--><audio src="../res/audio/SOUND%20FX.wav" controls autoplay></audio>

---

9. 页面结构分析

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

<header>    <h2>网页头部</h2></header><section>    <h2>网页主体</h2></section><footer>    <h2>网页脚部</h2></footer>

---

10. iframe内联框架

用于在网页中加载一个页面

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

<iframe src="https://www.baidu.com" frameborder="0" width="1200px" height="1000px"></iframe>

---

11. 表单语法

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

<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">        <input type="reset">    </p></form>

---

12. ！表单元素格式

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

<!--表单formaction : 表单提交的位置，可以说网站，也可以是一个请求处理地址method : post,get提交方式    get方式提交:我们可以在url中看到我们提交的信息，不安全，但是高效    post方式提交：比较安全，可以传输大文件--><form action="1.我的第一个网页.html" method="get">    <!--    文本输入框 input type="text"    value="1234"    默认初始值    maxlength="4"   最长能写几个字符    size="20"       文本框的长度    readonly    只读，不能改了    disabled    禁用，不可选    -->    <p>名字：<input type="text" name="username" value="admin" readonly></p><!--    密码框 input type="password"-->    <p>密码：<input type="password" name="pwd"></p>    <!--单选框标签    input type="radio"    value   单选框的值,必须要有    name    表示组    checked 默认选中    disabled    禁用，不可选    hidden  隐藏    -->    <p>性别：        <input type="radio" value="boy" name="sex" checked/>男        <input type="radio" value="girl" name="sex" disabled/>女    </p>    <!--  多选框    input type="checkbox"    checked 默认选中    -->    <p>爱好        <input type="checkbox" value="sleep" name="hobby"/>睡觉        <input type="checkbox" value="code" name="hobby" checked/>敲代码        <input type="checkbox" value="chat" name="hobby"/>聊天        <input type="checkbox" value="game" name="hobby"/>打游戏    </p>    <!--  按钮    input type="button" 普通按钮    input type="image"  图片按钮    input type="submit" 提交按钮    input type="reset"  重置按钮    -->    <p>        <input type="button" name="btn1" value="我是按钮"><!--        <input type="image" src="../res/image/3.jpg">-->    </p>    <!-- 下拉框，列表框    <select>    selected    默认选中    -->    <p>下拉框        <select name="列表名称">            <option value="biejing">北京</option>            <option value="shanghai" selected>上海</option>            <option value="guangzhou">广州</option>            <option value="shenzhen">深圳</option>        </select>    </p>    <!-- 文本域    cols="50" rows="10" 行跟列    -->    <p>反馈：        <textarea name="textarea" cols="50" rows="10">            文本内容        </textarea>    </p>    <!-- 文件域    input type="file" name="files"  要有name属性    -->    <p>        <input type="file" name="files">        <input type="button" value="上传" name="upload">    </p>    <!-- 带验证的-->    <!-- 邮件验证-->    <p>邮箱：        <input type="email" name="email">    </p>    <!-- URL-->    <p>URL：        <input type="url" name="url">    </p>    <!-- 数字        step="10" 加数    -->    <p>数字：        <input type="number" name="number" max="100" min="0" step="10">    </p>    <!-- 滑块-->    <p>音量(滑块)：        <input type="range" name="voice" min="0" max="100" step="2">    </p>    <!-- 搜素框-->    <p>搜索：        <input type="search" name="search">    </p>    <!--    增强鼠标可用性    也可以用label包起来，就不用写id了-->    <p>        <label for="mark">点我</label>        <input type="text" id="mark">    </p>    <p>        <input type="submit">        <input type="reset" value="清空表单">    </p></form>

注释都在代码块中

13. 表单的应用

隐藏域 hidden

只读 readonly

禁用 disabled

checked 默认选中disabled    禁用，不可选hidden  隐藏

---

14. 表单的初级验证

在前端进行一些简单的验证或相应的提示信息，减轻服务器的压力，保证数据的安全性

常用方式

placeholder=“请输入用户名” 提示信息

required 非空判断 所填不能为空

pattern 正则表达式

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

---

15. HTML总结

HTML5总结.xmind

---

Extra1.自学视频教程链接

https://www.bilibili.com/video/BV1x4411V75C

Extra2.修改及备注

21.7.12 1.重新排版 2.增加PDF版格式 3.每章节末尾加入水平分割线

21.7.20 1.增加了【Writing In The Front】的描述 2.增加Extra章

---