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/>
<!--特殊符号——&  ;(查百度)-->
空格&nbsp;<br/>
大于&gt;<br/>
小于&lt;<br/>
版权所有&copy;<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