HTML5

1.初识HTML

Hyper Text Markup Language 超文本标记语言
超文本：文字、图片、音频、视频、动画
标记：利用标签的语言
2013-5-6-HTML5
W3C（World Wide Web Consortium）万维网联盟
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScrip）

2.网页基本信息

注释：<!— —>
DOCTYPE 告诉浏览器我们使用什么规范
Ctrl+/ 注释的快捷键
meta 描述性标签，描述网站的一些信息，一般用来做SEO

<!--meta描述性标签，一般用来描述我们的网站，用来做SEO-->
    <meta charset="UTF-8">
    <meta content="hi" name="keywords">
    <meta content="你好" name="description">

3.网页基本标签

标题标签h1、h2、h3
段落标签p
换行标签br
水平线标签hr
字体样式标签strong、em
注释和特殊符号
pre标签：保留输入内容原始格式显示，不用输空格和换行
body属性:
- bgcolor背景颜色
- background背景图片

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

<!--段落标签-->
<p>两只老虎两只老虎爱跳舞</p>
<p>一直没有尾巴一直没有耳朵</p>
<p>真奇怪真奇怪</p>

<!--换行标签-->
两只老虎两只老虎爱跳舞  <br/> 一直没有尾巴一直没有耳朵

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

<!--字体样式标签-->
<h1>字体样式标签</h1>
粗体： <strong>i love u</strong>
<br/>
斜体：<em>i love u</em>
<br>
<!--特殊符号-->
空&nbsp;格：<br>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
大于号&gt;
<br>
小于号&lt;
<br>
版权符号&copy;
<!--特殊符号记忆方式

&     ；

-->

4.图像标签

常见的图像格式
1. JPG
2. GIF
3. PNG
4. BMP
5. ……
img标签

<!--
src：图片地址
     相对地址、绝对地址
     ../    代表上一级目录
-->
<img alt="图片名字" src="../resources/image/1.JPG"title="悬停文字"width="300"height="300">

5.超链接标签a

分类
- 文本超链接
- 图像超链接

<a name="top">顶部</a>

<!--快捷键a标签+table

href必须填，表示跳转到哪个页面
target:表示窗口在哪里打开
       _blank 在新页面中打开
       ——self在自己网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点我跳转到页面1</a>
<br>
<br>
<a href="https://www.baidu.com" target="_self">点我跳转到百度</a>
<br>
<br>
<a href="1.我的第一个网页.html">
    <img alt="图片名字" height="300" src="../resources/image/1.JPG" title="悬停文字" width="300">
</a>
<br>
<!--锚链接
1.先要标记名称
2.通过 # 跳转到标记
-->
<a href="#top">回到顶部</a>
<br>
<a name="down">底部</a>
<!--功能型链接
邮件链接：mailto：
QQ链接：在qq推广上自动生成代码，复制到代码里
-->
<a href="mailto:2951986411@qq.com">点击联系我</a>

<!--第三个页面直接跳转到第四个-->
<a href="4.超链接标签.html#down">页面4的底部</a>

6.块元素和行内元素

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

7.列表标签

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

<!--有序列表-->
<ol>
    <li>java</li>
    <li>c</li>
    <li>c++</li>
    <li>pythom</li>
    <li>后端</li>
    <li>前端</li>
</ol>
<hr>
<!--无序列表
应用范围：导航、侧边栏......
-->
<ul>
    <li>java</li>
    <li>c</li>
    <li>c++</li>
    <li>pythom</li>
    <li>后端</li>
    <li>前端</li>
</ul>
<hr>
<!--自定义列表
dl：标签
dt：列表title
dd：列表内容
-->
<dl>
    <dt>语言</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>C</dd>
    <dd>C++</dd>
    <dt>位置</dt>
    <dd>新疆</dd>
    <dd>北京</dd>
    <dd>南京</dd>

8.表格标签

作用：
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行、合并单元格
- 跨列、合并单元格

<!--表格table
行 tr (row)
列 td (data)
-->
<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>

9.媒体元素

视频元素video、音频元素audio

<!--媒体元素：音频和视频
controls 控制开关、暂停、播放的按钮
autoplay 自动播放
-->
<video src="../resources/video/我该用什么把你留住——使用Clipchamp制作.mp4"controls autoplay></video>

<audio src="../resources/audio/福禄寿FloruitShow%20-%20我用什么把你留住.mp3 "controls autoplay></audio>

10.页面结构分析

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

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

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

11.iframe内联框架

<!--&lt;!&ndash;<iframe allowfullscreen="true" border="0"&ndash;&gt;-->
<!--&lt;!&ndash;        frameborder="no" framespacing="0" scrolling="no" &ndash;&gt;-->
<!--&lt;!&ndash;        src="//player.bilibili.com/player.html?aid=925251644&bvid=BV1kT4y1G7KW&cid=179432384&page=1">&ndash;&gt;-->
<!--</iframe>-->

<iframe src="https:\\www.bilibili.com"name="hello" frameborder="0"width="800px"height="400px"></iframe>

<iframe src=""name="hello" frameborder="0"width="800px"height="400px"></iframe>
<a href="1.我的第一个网页.html"target="hello">点击跳转</a>

12.表单语法

用户名、密码、输入框、按钮
form标签属性 method action 必填
- method规定如何发送表单数据，get、post
- action表示向何处发送表单数据

<h1>注册</h1>

<!--表单form
action：提交的位置可以是网站，也可以是一个请求处理地址
method:post\get提交方式
       get方式提交可以在url中看到提交的信息，不安全但高效，不能传输大文件
       post方式提交比较安全，可以传输大文件，但仍然可以被抓包发现
-->
<form action="1.我的第一个网页.html" method="post"></form>
<!--文本输入框 <input type="text">   -->

<p>名字：<input name="username" type="text"></p>
<!--密码框：<input type="password"name="pwd"-->
<p>密码：<input name="pwd" type="password"></p>

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

13.文本框和单选框

表单元素格式
name：与java相关联，程序读取就读取name

<h1>注册</h1>

<!--表单form
action：提交的位置可以是网站，也可以是一个请求处理地址
method:post\get提交方式
       get方式提交可以在url中看到提交的信息，不安全但高效，不能传输大文件
       post方式提交比较安全，可以传输大文件，但仍然可以被抓包发现
value:默认初始值
maxlength:z最长写几个字符
size：文本框长度
-->

<form action="1.我的第一个网页.html" method="post"></form>
<!--文本输入框 <input type="text">   -->

<p>名字：<input maxlength="8" name="username" size="30" type="text" value="请输入用户名"></p>
<!--密码框：<input type="password"name="pwd"-->
<p>密码：<input name="pwd" type="password" ></p>

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

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

14.按钮和多选框按钮

<!--多选框
type：checkbox
-->
<p>爱好
    <input type="checkbox"value="sleep"name="hobby">睡觉
    <input type="checkbox"value="code"name="hobby">敲代码
    <input type="checkbox"value="play"name="hobby">玩
    <input type="checkbox"value="eat"name="hobby">吃
</p>
<!--按钮
type：button
type:image----图片按钮
type:submit---提交按钮
type：reset---重置按钮
-->

<p>按钮
    <input type="button"name="btn1"value="点击变长">
    <input type="image"src="../resources/image/1.JPG">
</p>

15.列表框文本域和文件域

<!--下拉框、列表框
select
selected:默认选中
-->
<p>下拉框：
    <select name="国家" >
        <option value="china">中国</option>
        <option value="usa">美国</option>
        <option value="瑞士"selected>瑞士</option>
        <option value="JP">日本</option>
    </select>
</p>

<!--文本域
textarea
-->
<p>反馈
    <br>
    <textarea name="text1"  cols="50" rows="10">文本内容</textarea>
</p>

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

16.搜索框滑块和简单验证

<!--邮件验证 type:email-->
<p>邮箱：
    <input type="email"name="email">
</p>
<!--URL type:url-->
<p>URl：
    <input type="url"name="url">
</p>
<!--数字 type：number-->
<p>数字：
    <input type="number"name="num"max="100"min="0"step="10">
</p>
<!--滑块 type:range-->
<p>滑块
    <input type="range"name="voice" min="0"max="100"step="2">
</p>
<!--搜索框 type:search-->
<p>搜索
    <input type="search"name="search">
</p>

17.表单的应用

分类
- 隐藏域hidde
- 只读readonly标签
- 禁用disable标签
通过隐藏域传递默认值

<p>名字：<input maxlength="8" name="username" size="30" type="text" value="请输入用户名"readonly></p>
<!--密码框：<input type="password"name="pwd"-->
<p>密码：<input name="pwd" type="password"hidden value="123456"></p>

<p>性别：
    <input name="sex" type="radio" value="boy"disabled>男
    <input name="sex" type="radio" value="girl">女
</p>

<!--增强鼠标可用性
点击“你点我试试”，鼠标即锁定mark的位置
-->
<p>
    <label for="mark">你点我试试</label>
    <input id="mark" type="text">
</p>

18.表单初级验证

常用方式
- placeholder
- required
- pattern

//placeholder一直在输入框中显示起到提示信息作用
<p>名字：<input maxlength="8" name="username" size="30" type="text"placeholder="请输入用户名"></p>

//required 非空判断
<p>名字：<input maxlength="8" name="username" size="30" type="text"placeholder="请输入用户名"required></p>

//pattern 正则表达式
<!--pattern
可以通过脚本之家查找正则表达式
-->
<p>自定义邮箱：
    <input type="text"name="diymail"pattern="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* ">
</p>

本文地址：https://www.xunjs.com/htmlcss/view_12367.html

Tags：学会随笔 HTML