HTML5学习笔记
时间:2021-07-20
本文章向大家介绍HTML5学习笔记,主要包括HTML5学习笔记使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
@(前端基础)[马克飞象, Markdown, 自主学习, 计算机]
HTML5
1. 初识HTML
HTML:Hyper Text Markup Language(超文本标记语言)
1.1 W3C标准
* W3C
* World Wide Web Consortium(万维网联盟)
* 成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
* http://www.w3.org/
* http://www.chinaw3c.org/
* W3C标准包括
* 结构化标准语言(HTML、XML)
* 表现标准语言(CSS)
* 行为标准(DOM、ECMAScript)
1.2 HTML基本结构
<!--!DOCTYPE:告诉浏览器,我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta:描述性标签,他用来描述我的网站的一些信息-->
<meta charset="UTF-8">
<meta name="keywords" content="HTML">
<meta name="description" content="前端基础">
<title>Title</title>
</head>
<body>
</body>
</html>
2. 标签
2.1 网页标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--段落标签——快捷方式:p + Tab-->
<p>故事的小黄花</p>
<p>从出生那年就飘着</p>
<p>童年的荡秋千</p>
<!--水平线标签——自闭合标签-->
<hr/>
<!--换行标签——自闭合标签-->
故事的小黄花<br/>
从出生那年就飘着<br/>
童年的荡秋千<br/>
<!--粗体,斜体-->
<h1>字体样式标签</h1>
<p><strong>I love you!</strong></p>
<p><em>I love you!</em></p>
<br/>
<!--特殊符号——& ;(查百度)-->
空格 <br/>
大于><br/>
小于<<br/>
版权所有©<br/>
</body>
</html>
2.2 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--img 学习
src:图片地址
相对地址,绝对地址
../ 上一级标签
-->
<img src="../resources/img/1.jpg" alt="图片加载失败文字" title="图片悬浮文字" height="1011" width="2000">
</body>
</html>
2.3 链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top"></a>
<!--a标签
href(必填):表示要跳转到的页面
_blank:在新标签中打开
_self:在自己的网页打开
-->
<a href="https:www.baidu.com" target="_blank">百度</a><br/>
<a href="MyWeb02.html">
<img src="Image.png" alt="图片加载失败文字" title="图片悬浮文字" height="1011" width="2000">
</a><br/>
<!--锚链接(可以跨文件使用)
1.需要一个锚标记
2.跳转到标记 #
-->
<a href="#top">回到顶部</a>
<a name="bottom" ></a>
<!--功能性链接
邮件链接:mailto
QQ链接:QQ推广(图片加载不出在两个冒号之间写上QQ号)
-->
<a href="mailto:1346438693@qq.com">联系我们</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1346438693:52" alt="联系我们" title="联系我们"/>
</a>
</body>
</html>
3. 行内元素和块元素
* 块元素
* 无论内容多少,该元素独占一行
* p、h1 - h6...)
* 行内元素
* 内容撑开宽度,左右都是行内元素的可以排在一行
* (a、strong、em ....)
4. 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>前端</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>Java</li>
<li>Python</li>
<li>前端</li>
</ul>
<hr/>
<!--自定义列表
dl;标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>计算机</dt>
<dd>Java</dd>
<dd>Python</dd>
<dt>学科</dt>
<dd>数学</dd>
<dd>英语</dd>
</dl>
</body>
</html>
5. 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px">
<tr>
<!-- 跨行colspan-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!-- 跨列rowspan-->
<td rowspan="2">狂神</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">秦将</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
6. 视频和音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频和视频</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放(谷歌会限制自动播放)
-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/1.mp3" controls ></audio>
</body>
</html>
7. 页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<article>
<h2>独立文章</h2>
</article>
<aside>
<h2>侧边栏</h2>
</aside>
<footer>
<h2>网页脚部</h2>
</footer>
<nav>
<h2>导航栏</h2>
</nav>
</body>
</html>
8. iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--iframe内联框架
name
-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="1000px" name="hello"></iframe>
<a href="MyWeb03.html" target="hello">点我跳转</a>
</body>
</html>
9. 表单
9. 1 表单语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单
action:表单提交的位置,可以是网站,也可以是请求处理地址
method:post,get 提交方式
get方式提交:我们可以在URL中看到我们提交的信息,不安全,高效
post:比较安全,传输大文件
-->
<form action="MyWeb01.html" method="get">
<!-- 文本输入框
value="Jay" 默认初始值
maxlength="8" 最长能写的字符个数
size="30" 文本框长度
-->
<p>名字: <input type="text" name="username"></p>
<!-- 密码框-->
<p>密码:<input type="password" name="password"></p>
<!-- 单选框标签
name:表示组
value:单选框的值
-->
<p>性别:
<input type="radio" value="boy" name="性别" checked>男
<input type="radio" value="girl" name="性别">女
</p>
<!-- 复选框-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby" checked>睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!-- 按钮-->
<input type="button" name="button1" value="get">
<input type="image" src="../resources/image/五五开黑节.jpg" alt="五五开黑节">
<p>
<input type="submit">
<input type="reset">
</p>
<!-- 文件域-->
<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>
<!-- 数字-->
<p>数字:
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!-- 滑块-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="3">
</p>
<!-- 搜索框-->
<input type="search" name="search">
<!-- 下拉框-->
<p>国家:
<select name="列表名称" id="dialog-publisher-value">
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="Switzerland">瑞士</option>
<option value="Japan" selected>日本</option>
</select>
</p>
<!-- 文本域-->
<p>反馈:
<textarea name="feedback" id="bottom-text" cols="50" rows="10">文本内容</textarea>
</p>
</form>
</body>
</html>
9. 2 表单应用
* readonly :只读
* hidden:隐藏
* disabled:禁用
<!-- 增强鼠标可用性:点击文字定位到对应文本框-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
9.3 表单初级验证
* placeholder:信息提示语(输入框控件)
* required:非空判断(输入框控件)
* pattern:正则表达式
原文地址:https://www.cnblogs.com/Jay-Soul/p/15035415.html
- Apache Hbase 快速入门
- Mototrbo TMS 协议分析(数字电台短信协议分析)
- Nginx 反向代理可以缓存 HTTP POST 请求页面吗?
- Spring boot with Hive
- Spring data 如何定义默认时间与日期
- Spring boot with Oauth2
- Elasticsearch Cluster 安装与配置
- 数据库结构版本控制
- 【Golang语言社区】LollipopGo框架之商城项目--路由设置
- "LollipopGo/library/lollipop/common" 测试3
- "LollipopGo/library/lollipop/common" 测试2
- Golang语言并发技术详解
- Golang语言社区--Go基础课程第一节聊聊Go语言
- Spring boot with ELK(Elasticsearch + Logstash + Kibana)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python 函数为什么会默认返回 None?
- 潘粤明的《龙岭迷窟》到底怎么样?我用 Python 得出了一些结论!
- [译]按照EIP-712规范签名完成委托和投票
- 更好Solidity合约调试工具: console.log
- 发现了合自己胃口的公众号,但文章太多翻来翻去真麻烦,还好我学了 Python
- 用 Python 下载抖音无水印视频
- 《民国奇探》的弹幕有点逗比,用 Python 爬下来看看
- MySQL information_schema详解 PARTITIONS
- 如何用 Python 来绘制玫瑰图等常见疫情图
- MySQL information_schema详解 PLUGINS
- 不到 20 行 Python 代码即可制作精美证件照
- 不到 100 行 Python 代码即可实现换脸功能
- 53 道 Python 面试题,帮你成为大数据工程师
- 用 Python 将 QQ 好友头像生成「 五一快乐」
- Jenkins集成Github自动部署