前端之：HTML_html5视频lianjie代码-CSDN博客

本文链接：https://blog.csdn.net/uxiang_blog/article/details/105602503

前言：此笔记根据狂神哔哩哔哩视频所写，转载请自觉注明出处
点击跳转狂神哔哩哔哩

第二阶段

HTML详解

什么是HTML

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

一个网站通过需要通过浏览器来访问，而浏览器访问的是什么呢？访问的就是HTML

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UDqVV13u-1587204049870)(upload\image-20200418175045942.png)]$

</head>
<boday>
    <h3>Hello HTML</h3>              # 文字
   <img src="../1.jpg"/>            # 照片
   <hr/>
   <video scr="../v.swf"></video>   # 视频
</boday>
</html>

HTML发展史

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hWgjcgdn-1587204049891)(upload\image-20200418175105412.png)]$

HTML5的优势

世界知名浏览器厂商对HTML5的支持
- 微软
- Google
- 苹果
- Opera
- Mozilla
市场的需求
跨平台

W3C标准

W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chiniaw3c.org/
W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)

常见的IDE

记事本
Dreamweaver
IDEA
WebStorm
…

HTML基本结构

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1HjdEKhS-1587204049910)(upload\image-20200402000354396.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HBxYK4qI-1587204049915)(upload\image-20200402000409093.png)]$

网页的基本设置

DOCTPE声明
< title >标签
标签

<!-- 告诉浏览器，我们要使用是么规范 -->
<!DOCTYPE html>

<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--mate描述性标签，它来描述我们网站的一些信息-->
    <!--mate一般用来做SEO-->
    <meta charset="UTF-8">

    <!--title网页标签-->
    <title>Title</title>
</head>

<!--body标签代表网页主体-->
<body>
Hello，world！
</body>
</html>

网页基本标签

标题标签
段落标签
换行标签
水平标签
字体样式标签
注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>跑得快 跑得快</p>

<p>一只没有耳朵 一只没有尾巴</p>

<p>真奇怪 真奇怪</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
跑得快 跑得快<br/>

一只没有耳朵 一只没有尾巴<br/>

真奇怪 真奇怪<br/>

<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong>i love you</strong>
<br/>
斜体：<em>i love you</em>>

<br/>
<!--特殊符号-->

空      格
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有狂神

<!--
空格
大于号
小于号
版权符号
特殊符号的记忆方式
&   ;
百度搜索
-->
</body>
</html>

图像标签

常见的图像格式

<img scr="path" alt="text" title="text" width="x" height="y"/>
<!--
scr：图像地址
alt：图像的代替文字
title： 鼠标悬停提示文字
width：图像宽度
height：图像高度
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src ：图片地址
    相对地址（推荐使用），绝对地址
    ../   上一级目录
alt : 图片名字（必填）
-->
<img src="../resources/images/1.jpg" alt=" 飞机" title="悬停文字 " width="519" height="385">
</body>
</html>

链接标签

<a href="path" target="目标窗口位置">链接或图像</a>
<!--
href : 连接路径
target ： 链接在那个窗口打开
目标窗口位置 : 常用值：——self、—blank
-->

文本超链接
图像超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接学习</title>
</head>
<body>

<!--a标签
href ： 必填 ，表示要跳转到那个页面
target : 表示窗口在哪里打开
    _blank : 在新标签中打开
    _self : 在自己的网页打开

-->
<a href="1.我的第一个网页.html" target="_blank"> 点击我跳转页面一</a>>
<a href="https://www.baidu.com" target="_self"> 点击我跳转到百度</a>>

<br/>
<a href about="1.我的第一个网页.html" target="_self ">
    <img src="../resources/images/1.jpg" alt=" 飞机" title="悬停文字 " width="519" height="385">
</a>>
</body>
</html>

超链接

页面间链接
锚链接
功能性连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接学习</title>
</head>
<body>

<!--使用name作为标记-->
<a name="top">顶部</a>>

<!--a标签
href ： 必填 ，表示要跳转到那个页面
target : 表示窗口在哪里打开
    _blank : 在新标签中打开
    _self : 在自己的网页打开

-->
<a href="1.我的第一个网页.html" target="_blank"> 点击我跳转页面一</a>>
<a href="https://www.baidu.com" target="_self"> 点击我跳转到百度</a>>

<br/>
<a href about="1.我的第一个网页.html" target="_self ">
    <img src="../resources/images/1.jpg" alt=" 飞机" title="悬停文字 " width="519" height="385">
</a>>


<!--锚链接
1，需要一个锚标志
2. 跳转到到标记
-->
<a href="#top"> 回到顶部</a>>

<a name="down">down</a>>

<!--功能性链接
邮件链接 ： mailto
QQ链接
-->

<a href="mailto:3142108769@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::52" alt="欢迎加入我的人生" title="欢迎加入我的人生"/>
</a>

</body>
</html>

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- (p、h1-h6…)
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一起
- (a.strong.em)

列表

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围 ： 试卷，问答...
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前段</li>
    <li>C/C++</li>
</ol>

<!--无序列表
应用范围 ：导航，侧边栏
-->
<ul>
    <li>天才</li>
    <li>大佬</li>
    <li>黑客</li>
    <li>凡人</li>
    <li>疯子</li>
</ul>

<!--自定义列表
dl : 标签
dt ：列表名称
dd : 列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux<dt>
    <dd>C</dd>

    <dt>兴趣</dt>

    <dd>打太极</dd>
    <dd>登山</dd>
    <dd>游泳<dt>
    <dd>跳舞</dd>
</dl>

</body>
</html>

表格

为什么是使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

姓名	年龄	爱好
疯子	60	Python
天才	3	Java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr rows
列 td
-->
<table border="lpx">
    <tr>
        <td>学生成绩</td>
    </tr>
    <tr>
        <!--
        rowspan  跨行
        colspan 跨列
        -->
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>120</td>
    </tr>
    <tr>

        <td>数学</td>
        <td>140</td>

    </tr>
    <tr>
        <td rowspan="2">游翔</td>
        <td>语文</td>
        <td>120</td>

    </tr>
    <tr>

        <td>数学</td>
        <td>140</td>

    </tr>

</table>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FeNeqUJM-1587204049926)(upload\image-20200402171937123.png)]$

视频和音频

视频元素
- video
音频元素
- audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src : 资源路径
controls : 控制条
autoplay ：自动播放
-->
<!--<video src="../resources/video/阿离.mp4" controls autoplay></video>-->
<audio src="../resources/audio/诺言.mp3 controls autoplay"></audio>

</body>
</html>

页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或者页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	内容相关或应用（常用于侧边栏）
nav	导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<head>
    <h2>网页头部</h2>
</head>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

iframe内联框架

<iframe scr="path" name="mainFrame"></iframe>
path  : 应用页面地址
mainFrame ： 框架标识名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>

<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="600" height="400">点击跳转百度</iframe>
<a href="https://mp.csdn.net/console/home" target="hello">点击跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=840034966&bvid=BV1S54y1R7SB&cid=171979312&page=26"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>-->

</body>
</html>

表单语法

<form method="post" action="result.html">
    <p> 名字：<input name="name"type="text0"></p>
    <p> 密码：<input name="pass"type="password"></p>
    <p>
        <input type="submit"name="Button" value="提交"/>
        <input type="rest"name="Reset" value="重填"/>
    </p>
</form>

post : 规定如何发送表单数据 常用值：get|post
resut.html : 表示向何处发送表单数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<!--表达from
action ： 表单提交的位置，可以是网站，亦可以是请求处理地址
method ； post，get 提交方式
     get方式提交：我们可以在url中看到我们的提交信息，不安全，高效
     post ： 比较安全， 传输大文件
-->

<from action="1.我的第一个网页.html" method="get">

    <!--文本框输入 ： <input type="text"
     value="狂神好帅" maxlength="8" size="30"-->

    <P>名字 : <input type="text" name="username" ></P>

    <!--密码框 ： <input type="password"-->

    <P>密码 : <input type="password" name="pwd"></P>

    <!--单选框标签
    input type="radio"
    value : 单选框的值
    name  ： 表示组
    -->
    <p>性别 :
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>


    <!--多选框
    input type="checkbox"
    checked 默认选项
    -->
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" checked name="hobby">敲代码
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">游戏

    <!--按钮 ：
    -->
    <p>
    <input type="button" name="btn" value="点击变长" >
<!--    <input type="image" src="../resources/images/1.jpg" >-->
    </p>

    <!--下拉框，列表框
        下拉框 ：option value="china"
         selected ：默认选项
    -->
    <p>国家 ：
        <select name="列表名称" >
            <option value="china">中国</option>
            <option value="us">英国</option>
            <option value="eth" selected>瑞士</option>
            <option value="India">印度</option>
        </select>
    </p>

    <!--文本域  textarea
    cols="30" rows="10"
    -->
    <p>反馈 ：
        <textarea name="textarea"  cols="30" rows="10"></textarea>
    </p>

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

     <!--邮件验证
     -->
    <p>邮箱 ：
        <input type="email" name="emil">
    </p>

    <!--URL
    -->
    <p>URL :
        <input type="URL" name="URL">
    </p>

    <!--数字
    -->
    <p>商品数量 ：
        <input type="number" name="num" min="0" max="100" step="1">
    </p>

    <!--滑块
    input type="range"
    -->
    <p>音量 ：
        <input type="range" name="voice" min="0" max="60" step="1">
    </p>


    <!--搜索框
    input type="search"
    -->
    <p>搜索 ：
        <input type="search" name="search">
    </p>


    <!--增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>

</from>

</body>
</html>

表单元素格式

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须制定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型的1，宽度以像素为单位
maxlength	type为text或password时，输入最大的字符数
checked	type为radio或checkbox时，指定按钮是否被选中