Html5

HTML

什么是HTML

  • HTML

    • Hyper Text Markuo Language（超文本标记语言）

image-20210114142847219

HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持

    • 微软

    • Google

    • 苹果

    • Opera

    • Mozilla

  • 市场的需求

  • 跨平台

W3C标准

image-20210114143040901

HTML基本结构

image-20210114144011478

<body>、</body>等成对的标签，分别叫开发标签和闭合标签，单独呈现的标签（空元素），如<hr/>;意为用/来关闭空元素

<!--DOCTYPE:告诉流感其，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页的头部-->
<head>
    <!--meta描述性标签，用来描述我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords"content="李成杰很帅">
    <meta name="description"content="李成杰很帅">
    <!--title网页标题-->
    <title>Title</title>
</head>
<!--body 标签代表网页的主体-->
<body>
helloword
</body>
</html>

网页的基本标签

  • 标题标签

  • 段落标签

  • 换行标签

  • 水平线标签

  • 字体样式标签

  • 注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>我是一只猛兽</p>
<pre>我  是 一 只 猛 兽</pre>
<p>我是一只猛兽</p>
<p>我是一只猛兽</p>
<p>我是一只猛兽</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
我是一只猛兽 <br/>
我  是 一 只 猛 兽 <br/>
我是一只猛兽 <br/>
我是一只猛兽 <br/>
我是一只猛兽 <br/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体 <strong> love</strong>
斜体 <em>love</em>
<br/>
<!--特殊符号-->
空       格：<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
<br/>
&gt;大于号
<br/>
&lt;小于号
<br/>
&copy;版权所有李成杰
</body>
</html>

图像标签

  • 常见的图像格式

    • JPG

    • GIF

    • PNG

    • BMP

    • ......

image-20210114150711251

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习
src:图片地址
相对地址（推荐使用），绝地地址
。。/上一级目录
ale：图片名字（必填）
-->
<img src="../resources/image/lcj.JPG" alt="李成杰照片"title="悬停文字"width="300"height="300">
</body>
</html>

链接标签

image-20210114155641643

  • 文本超链接

  • 图像超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用内部作为标记-->
<a name="top">顶部</a>
<!--a标签学习
href：必填，表示要跳到那个页面
target：表示窗口在哪里打开
_blank 在新标签页打开
—self在自己的网页打开
-->
<a href="1.我的第一个网页.html"target="_blank">点击我跳到页面1</a>
<a href="www.baidu.com">点击跳转百度</a>
<p><img src="../resources/image/lcj.JPG" alt="李成杰"></p>
<p><img src="../resources/image/lcj.JPG" alt="李成杰"></p>
<p><img src="../resources/image/lcj.JPG" alt="李成杰"></p>
<p><img src="../resources/image/lcj.JPG" alt="李成杰"></p>
<p><img src="../resources/image/lcj.JPG" alt="李成杰"></p>
<p><img src="../resources/image/lcj.JPG" alt="李成杰"></p>
<p><img src="../resources/image/lcj.JPG" alt="李成杰"></p>
<!--描点链接
1.需要一个锚标记
2.跳转到标记
qq链接
​
-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接mailto
-->
<a href="mailto:1208642197@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::53" 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>
<hr/>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>
<!--定义列表
dl:标签
动态：列表名称
dd:列表内容
​
-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>C</dd>
    <dt>位置</dt>
    <dd>临沂</dd>
    <dd>兰陵</dd>
    <dd>向城</dd>
</dl>
</body>
</html>

表格

  • 为什么使用表格

    • 简单桶用

    • 结构稳定

  • 基本结构

    • 单元格

    • 行

    • 列

    • 跨行

    • 跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--表格table
行：tr
列：td
-->
<table border="1px"width="300px"height="300px">
    <tr>
        <!--colspan跨行-->
        <td colspan="4">1-1</td>
    </tr>
    <!--rowspan跨行-->
    <tr><td rowspan="2" ></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr><td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

视频和音频

  • 视频元素

    • video

  • 音频

    • audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和
​
​
视频
src：资源路径
controls：控制条
autoplay：自动播放
​
​
-->
<video src="../resources/video/视频文件.mkv" controls autoplay></video>
<audio src="../resources/audio/菊池俊輔%20-%20ひみつ道具登場!!.mp3"controls autoplay></audio>
</body>
</html>

页面结构分析

image-20210114164922585

iframe内联框架

 

image-20210114170155411

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--内联框架
src：地址
w-h宽高
name名字
-->
<iframe name="lcj" frameborder="0"width="1000px"height="800px"></iframe>
​
<a href="http://www.baidu.com" target="lcj">dianji</a>
</body>
</html>

表单语法

image-20210114174611344

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
​
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
pass方式提交：比较安全 ，可以传输大文件
-->
<form action="1.我的第一个网页.html"method="get">
    <!--文本输入框：input type=”text“-->
    <p>名字：<input type="text"name="username"></p>
    <!--密码框 type="password"-->
    <p>密码：<input type="password"name="pwd"></p>
    <p>
        <input type="submit"name="提交">
        <input type="reset"name="重置">
    </p>
</form>
</body>
</html>

表单元素格式

image-20210114175934242

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
​
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
pass方式提交：比较安全 ，可以传输大文件
-->
<form action="1.我的第一个网页.html"method="get">
    <!--文本输入框：input type=”text“
    value="初始值"
    maxlength="8"  最长能写几个字符
    size="30"  文本框长度
    -->
    <p>名字：<input type="text"name="username"></p>
    <!--密码框 type="password"-->
    <p>密码：<input type="password"name="pwd"></p>
    <!--单选框
    type="radio"
    value="boy"：单选框的值
    name="sex" 表示组
    -->
    <p>性别：
        <input type="radio"value="boy"name="sex"/>男
        <input type="radio"value="girl"name="sex"/>女
    </p>
    <!--多选框
    input type="checkbox"
    checked：默认选中
    -->
    <p>爱好：
        <input type="checkbox"value="sleep" name="hobby">睡觉
        <input type="checkbox"value="code" name="hobby" checked>敲代码
        <input type="checkbox"value="game" name="hobby">游戏
        <input type="checkbox"value="girl" 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/lcj.JPG">-->
    </p>
    <!--下拉框，列表框
    -->
    <p>下拉框
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="yindu"selected>印度</option>
            <option value="ruishi">瑞士</option>
        </select>
    </p>
    <!--文本域
    -->
    <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>
    <!--数字-->
    <p>商品数
        <input type="number" name="num" max="100" min="0" step="1">
​
    </p>
    <!--滑块-->
    <p>音量
        <input type="range"name="vpice" min="0" max="100"step="1">
    </p>
    <!--搜索框-->
    <p>
        <input type="search"name="search">
    </p>
    <p>
        <input type="submit"name="提交">
        <input type="reset"name="重置">
    </p>
</form>
</body>
</html>

表单的应用

  • 隐藏域 hidden

  • 只读 readonly

  • 禁用 disabled

<!--增强鼠标可用性 指向一个位置-->
<p>
    <label for="mark">点击</label>
    <input type="text"id="mark"> 
</p>

表单的初级验证

  • 常用方法

    • placeholder 提示信息

    • require 非空判断

    • pattern 正则表达式

<!--placeholder提示信息
require 非空判断
-->
<p>名字：<input type="text"name="username" placeholder="请输入姓名" required></p>
posted @ 2021-01-14 21:05  酷酷的西瓜皮  阅读(91)  评论(0)    收藏  举报