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总结
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章