前端·HTML5

作者: Anwfly | 来源:发表于2020-09-21 23:02 被阅读0次

【HTML5核心+实战视频分享】尚硅谷前端HTML5视频_H
2018-03-26
学习规划
FrontEnd - Bear Cambridge
如何学好HTML5？
技术体系成长路线
好程序员web前端培训分享html5和JavaScript的区别
技术人必读的书单
前端HTML5怎么玩？5个动效告诉你！
前端开发风潮下，html5开发培训去哪儿？

一、初识HTML

1. 什么是HTML

Hyper Text Markup Language(超文本标记语言)
超文本包括：文字，图片，音频，视频，动画等

2. w3c标准

World Wide Web Consortium(万维网联盟)
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括：

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

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

结构：HTML描述页面的结构
行为：CSS控制页面中元素的样式
表现：JavaScript响应用户操作

2. 组成

<html>
<!--网页头部-->
<head>
     <!--网页元数据-->
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>我是第一个标签</title>
</head>
<!--网页主体部分-->
<body>
我是第一个标签
</body>
</html>

注意：
<body></body>分别叫开发标签和闭合标签
<hr/>：单独标签，用/来关闭元素

二、网页基本标签

1. 网页基本信息

<!--H5文档申明，不区分大小写-->
<!DOCTYPE html>
<!--根标签：html-->
<html lang="en">
<!--两个子标签：head和body-->
<!--表示头，网页中的元数据，给浏览器看的，让浏览器解析网页-->
<head>
    <!--  编码格式，避免乱码问题  -->
    <meta charset="UTF-8">
    <meta name="description" content="这是一个很好的网站">
    <!--meta主要用于设置网页中的一些元数据，元数据不是给用户看的
     1.charset指定网页的编码格式
     2.name指定数据的名称:keywords表示网站的关键字，可以同时指定多个关键字，使用逗号隔开，description用于指定网站的藐视
     3.content指定数据的内容-->
    <!--  网页标题  -->
    <title>BigFly</title>
</head>
<!--页面内容-->
<body>
</body>
</html>

2. 标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

3.段落标签

单标签不换行，闭合标签才换行

<p></p>

4. 换行标签

一段话</br>

5. 水平线标签

 <hr>

6. 字体样式标签粗体粗体斜体

<strong>粗体</strong></br>
<em>斜体</em>
<del>删除线</del>
<ins>下划线</ins>

7. 注释和特殊符号

注释：
特殊符号：

空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
大于号&gt;
小于号&lt;
版权符号&copy;

8. div和span标签

<div>和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
具体实现：

<div> 这是头部 </div>    
<span> 今日价格 </span>

特点：
1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
2. <span> 标签用来布局，一行上可以多个 <span>。小盒子

三、图像标签

常见的图像格式
JPG、GIF、PNG、BMP
显示图片
<img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="1366"height="768">

属性	属性值	说明
src	图片地址	必须属性，相对地址（推荐使用），绝对地址../返回上一级目录
alt	错误说明	图片加载失败会显示的内容
title	悬停文字	鼠标放到图片上显示的文字
width	像素	宽度
height	像素	高度
border	像素	设置图像的边框的粗细

图像标签注意点：
①图像标签可以拥有多个属性，必须写在标签名的后面。
②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

四、链接标签

<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!-- a标签
href：必填，表示要跳转到那个页面
target：表示窗口在那里打开
_blank 在新标签中打开
_self   在自己的网页中打开
-->
<a href="https://www.baidu.com" target="_blank">点击调转到百度
    <img src="../resources/image/1.jpg" alt="图片加载失败">
</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记-->
<a href="#top">回到顶部</a>
<a name="top">顶部</a>
<!--功能性连接
邮件连接：mailto
QQ链接-->
<a href="mailto:1395950933@qq.com">点击联系我</a>

</body>

行内元素和块元素

块元素：无论内容有多少，元素自己独占一行
例如：

<h1>一级标题</h1>
<p></p>

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

<strong>粗体</strong></br>
<a href="mailto:546513287@qq.com">发送邮件</a>
<em>斜体</em>

五、列表标签

什么是列表

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

列表的分类：

无序列表

<ol>
    <li>java</li>
    <li>HTML</li>
    <li>android</li>
</ol>

有序列表：

<ul>
    <li>java</li>
    <li>HTML</li>
    <li>android</li>
</ul>

定义列表

<!--
dl：标签-define list
dt：列表名称-define title
dd：列表内容-define description
-->
<dl>
    <dt>学科</dt>
    <dd>物联网</dd>
    <dd>全栈</dd>
    <dd>大数据</dd>
    <dt>城市</dt>
    <dd>北京</dd>
    <dd>河北</dd>
    <dd>天津</dd>
</dl>

六、表格

基本结构：单元格、行、列、跨行、跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr table rows
列 td-->
<!--border表格的边框-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</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>
    </tr>
</table>
</body>
</html>

七、视频和音频

<body>
<!--音频和视频
src：资源路径
controls：控制调
autoplay：自动播放-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>
</body>

八、页面结构分析

<title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚步</h2>
</footer>
<!--导航 nav-->
<nav></nav>
</body>
</html>

九、iframe内联框架

<title>内联框架iframe</title>
</head>
<body>
<!--iframe内联框架
src：地址
w-h：宽，高-->
<iframe src="http://www.baidu.com" frameborder="0" width="1000px" height="800px">跳转到百度</iframe>
<iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe>
<a href="https://www.baidu.com" target="change" >点击跳转</a>
</body>
</html>

十、表单

input.png

<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
    post：比较安全，传输大文件-->
<form action="10.表单.html" method="post">
<!--文本输入框 Input type="text"  submit提交按钮 reset重置按钮  -->
    <p>名字：<input type="text" name="username"/></p>
    <p>密码：<input type="password" name="pwd"/></p>
    <p><input type="submit">
        <input type="reset"></p>
</form>

<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
    post：比较安全，传输大文件-->
<form action="10.表单.html" method="post">
<!--文本输入框 Input type="text"  name 输入框的名字
value 默认一个初始化值
maxlength 文本框最大输入字符
size 文本框长度
submit提交按钮 reset重置按钮
 -->
    <p>名字：<input type="text" name="username" value="帅" maxlength="8" size="10"/></p>
    <p>密码：<input type="password" name="pwd"/></p>
<!--单选框按钮  name必须为一致，才能表示为同一组，才能只选择一个
  input标签 类型是radio时，必须有value-->
    <p>
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl"name="sex">女

    </p>
    <p><input type="submit">
        <input type="reset"></p>
</form>
</body>
</html>

十一、单选框多选框

<!--单选框按钮 input type="radio" name必须为一致，才能表示为同一组，才能只选择一个
  input标签 类型是radio时，必须有value
    checked 默认选中-->
    <p>
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl"name="sex">女
<!-- 多选框标签 input type="checkbox"   -->
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="talk" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby" checked/>游戏
        <input type="checkbox" value="eat" 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="resources/image/1.jpg"/>
    </p>
    <p><input type="submit">
        <input type="reset"></p>

十二、下拉框

<!--下拉框 列表框
    <select>
    name是下拉框的名字
    option value 是下拉框可以选择的值
    selected是默认为那个列
-->
<p>国家
    <select name="列表名称" >
        <option value="china" selected>中国</option>
        <option value="us">美国</option>
        <option value="agt">阿根廷</option>
        <option value="md">缅甸</option>
    </select>
</p>

十三、文本域、文件域

<!--    文本域
cols="30" rows="10" 行，，，列
-->
    <p>反馈：<textarea name="textarea"  cols="30" rows="10">文本内容</textarea></p>
<!--    文件域

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

十四、功能验证

<!--  邮箱验证  -->
    <p><input type="email" name="email"></p>
<!--    URL验证-->
    <p><input type="url" name="url"></p>
<!--    数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
    <p><input type="number" name="num" 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>

十五、表单的应用

只读：value=“admin”（先给一个默认值） readonly
禁用：disabled
隐藏：hidden
单词：description 描述 content内容

<!--    增强鼠标可用性-->
   <p> <lable for="mark">点击</lable>
       <input type="text" id="mark"/>
   </p>

十六、表单初级验证

placeholder="请输入用户名"<!--提示属性，类似hint-->
required 非空判断
pattern 正则表达式

十七、基础汇总

<!--告诉浏览器使用的规范-->
<!DOCTYPE html>
<html lang="en">
<!--网页的头部-->
<head>
<!--    meta描述标签，描述网站信息-->
    <meta name="description" content="和狂神学java">
    <meta charset="UTF-8">
    <title>HTML小练习</title>
</head>
<body>
<a name="top">顶部</a>
<!--段落-->
<p>
    <b>你好，世界</b><br/>
    <em>i&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; love you</em>

    &copy;赵东
</p>
<!--水平线-->
<hr/>
<!--src=相对路径 alt=加载失败后显示文字 title=鼠标放在图片上显示的文字 width宽 height高-->
<img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="800" height="600">
<!--锚链接 先使用a标签 定义名字做标记 再想返回标记的地方 a标签 #名字-->
<!-- a标签
href：必填，表示要跳转到那个页面
target：表示窗口在那里打开
_blank 在新标签中打开
_self   在自己的网页中打开
-->
<a href="https://www.baidu.com" target="_blank">点击跳转百度</a>
<!--功能性连接
邮件连接：mailto
QQ链接-->
<a href="mailto:1395950933@qq.com">点击联系我</a>
<!--有序列表
应用范围：试卷，问答。。。-->
<ol>
    <ul>Java</ul>
    <ul>C++</ul>
    <ul>运维</ul>
    <ul>前端</ul>
</ol>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>C++</li>
    <li>运维</li>
    <li>前端</li>

</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
范围：公司网站-->
<dl>
    <dt>学科</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dd>自然</dd>
</dl>
<!--表格table
行 tr rows
列 td
border表格的边框-->
<table border="1px">
    <tr>
<!-- colspan跨列 -->
        <td colspan="4">学习java </td>
    </tr>
    <tr>
<!--rowspan跨行 -->
        <td rowspan="2">java</td>
        <td>前端</td>
        <td>数据库</td>
        <td>Tomcat</td>
    </tr>
    <tr>
        <td>框架</td>
        <td>面向对象</td>
        <td>微服务</td>
    </tr>
</table>
<!--音频和视频
src：资源路径
controls：控制调
autoplay：自动播放-->
<hr/>
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>
<a href="#top">回到顶部</a>
<!--页面结构 header网页头部
            section网页主体
            footer网页脚部-->
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
<!--导航 nav-->
<nav></nav>
<hr>
<!--内联框架 iframe
src：地址
w-h：宽，高-->
<iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe>
<a href="https://www.baidu.com" target="change" >点击跳转</a>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
    get：可以在url中看到我们提交的信息，不安全
    post：比较安全，可传输大文件-->
<form action="1.我的第一个网页.html" method="get">
<!--    文本输入框 Input type=text name输入框名字
value默认初始值
maxlength文本框输入最大字节
size文本框长度
submit提交按钮
reset重置按钮-->
    <p>请注册账号</p>
    <p>名字：<input type="text" name="username" value="帅哥" size="30" maxlength="20" placeholder="请输入用户名" ></p>
    <p>密码：<input type="password" name="pwd"></p>
<!--单选框标签 type=radio input标签类型为radio时必须有value
    checked 默认选中-->
    <p><input type="radio" value="boy" name="sex" checked>男</p>
    <p><input type="radio" value="girl" name="sex">女</p>
<!-- 多选框标签 input type=“checkbox”  -->
    <p><input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="talk" name="hobby">说话
        <input type="checkbox" value="study" name="hobby">学习
        <input type="checkbox" value="eat" 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="../resources/image/1.jpg" width="200" height="160"/>
    <input type="submit"/>
    <input type="reset"/>
</p>
<!--下拉框 列表框    -->
<p>国家
    <select name="列表名称" id="">
        <option value="china" selected>中国</option>
        <option value="us">美国</option>
        <option value="agt">阿根廷</option>
        <option value="md">缅甸</option>
    </select></p>
<!--文本域
cols 行 rows 列-->
    <p>反馈：<textarea name="textarea"  cols="30" rows="10">文本内容</textarea></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>
<!--    数字验证
    max 最大数量
    min 最小数量
    step 每次点击增加或减少的数量-->
    <p>数字：<input type="number" name="num" max="100" min="1" step="1">
        <!--    滑块-->
        音量：<input type="range" name="voice" max="100" min="0" step="2">
    </p>
<!--搜索框-->
    <p><input type="search" name="search"></p>
    <p><input type="submit"></p>
<!--    增强鼠标可用性-->
        <p> <label for="mark"></label>
            <input type="text" id="mark"/>
        </p>


</form>
</body>
</html>

参考视频

【HTML5核心+实战视频分享】尚硅谷前端HTML5视频_H
尚硅谷前端HTML5视频_HTML5核心&&HTML5实战总共包含两套视频核心+实战 ... 一、尚硅谷前端...
2018-03-26
HTML5 今天主要学习HTML5，了解前端知识。 HTML5:HyperText Markup Language...
学习规划
HTML5 学习 Study Map 前端 HTML5 + CCS3 + Javasctript + Jquery...
FrontEnd - Bear Cambridge
@(熊剑桥)[web前端|html5]工作经验：在公司从事web前端、html5开发相关工作。使用H5、css3、...
如何学好HTML5？
想学好HTML5前端开发，首先你要了解什么是HTML5前端，随着全球网络的使用量的增加，HTML5是万维网和的核心...
技术体系成长路线
阶段一：前端与后端前端：react、nodejs、html5 后端： 1、spring体系、zuul...
好程序员web前端培训分享html5和JavaScript的区别
好程序员web前端培训分享html5和JavaScript的区别，HTML5广义上讲是前端开发学科的代名词，包含H...
技术人必读的书单
大前端领域推荐图书 Web前端《HTTP权威指南》《图解HTTP》《HTML5权威指南》《Web设计与前端开发秘籍...
前端HTML5怎么玩？5个动效告诉你！
前端HTML5的确是很强大，它可以实现非常炫酷的粒子动画效果。要知道粒子动画在前端HTML5应用中非常消耗本地资源...
前端开发风潮下，html5开发培训去哪儿？
随着移动互联网的发展，html5前端开发技术的发展势头也很迅猛，html5前端开发人才在市场上属于紧缺的状态，因此...