HTML5

初识HTML

什么是HTML

  • Hyper Text Markup Language(超文本标记语言)

HTML5的优势

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

W3C标准

  • W3C

  • W3C标准包括:

    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)
<!-- DOCTYPE:告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页的头部-->
<head>
    <!--meta代表网页的描述-->
    <meta charset="UTF-8">
    <meta name="keyWords" content="小董的网页">
    <meta name="description" content="慎思之、笃行之">

    <!-- title代表网页的标题-->
    <title>我的第一个网页</title>
</head>
<body>
Hello World!
<!--body代表网页的主题-->
</body>
</html>

网页的基本标签

标题标签

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

<!--标题标签-->
<h1>一级标签</h1>
<h2>一级标签</h2>
<h3>一级标签</h3>
<h4>一级标签</h4>
<h5>一级标签</h5>
<h6>一级标签</h6>
<!--段落标签-->
<p>两只老虎,两只老虎,</p>
<p>跑得快,跑得快,</p>
<p>一只没有眼睛,一只没有尾巴,</p>
<p>真奇怪!</p>
<p>真奇怪!</p>
<p>两只老虎,两只老虎,</p>
<p>跑得快,跑得快,</p>
<p>一只没有耳朵,一只没有尾巴,</p>
<p>真奇怪!真奇怪!</p>
<!--水平标签-->
<hr/>

<!--换行标签-->
两只老虎,两只老虎,<br/>
跑得快,跑得快,<br/>
一只没有眼睛,一只没有尾巴,<br/>
真奇怪!<br/>
真奇怪!<br/>
两只老虎,两只老虎,<br/>
跑得快,跑得快,<br/>
一只没有耳朵,一只没有尾巴,<br/>
真奇怪!真奇怪!<br/>

<!--字体标签-->
粗体:<strong> 我是粗体 </strong>
<br/>
斜体:<em> 我是斜体 </em>
<!--注释和特殊服符号 空格、大于、小于、版权-->
空格:我 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你
<br/>
大于:&gt;
<br/>
小于:&lt;
<br/>
版权所有:&copy;版权所有
<!--
&    ;
百度
-->
</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
src :图片地址(必填)
    相对地址(推荐使用),绝对地址;
    ../   上一级目录
alt :图片名字(必填)
-->
<img src="../resources/image/tang.jpg" alt="米老鼠" title="悬停文字" width="300" height="300">
</body>
</html>

链接标签

  • 网址链接
  • 锚链接
  • 功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--
    href :表示网页的地址
    target:表示网页在那个窗口打开
        _blank :在新的窗口打开网页
        _self :在当前窗口打开网页
-->
<a name="top">顶部</a>

<a href="1.firstPage.html" target="_blank"> 到第一网页区 </a>
<a href="https://www.baidu.com" target="-_self"> 跳转到百度去 </a>
<br/>
<br/>
<p>
  <a href="1.firstPage.html">
    <img src="../resources/image/tang.jpg" alt="米老鼠" title="悬停文字" width="300" height="300">
  </a>
</p>


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

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

<!--功能性链接
    邮件链接:mailto
    qq链接

-->
<a href="mailto:45334544@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>


<ul>
  <li>Java</li>
  <li>Python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C/c++</li>
</ul>
<!--自定义列表
    dl:标签
    dt:列表名称
    dd:列表内容
-->
<dl>
  <dt>学科</dt>
  <dd>java</dd>
  <dd>Python</dd>
  <dd>运维</dd>
  <dd>前端</dd>
  <dd>C</dd>

  <dt>国家</dt>
  <dd>中国</dd>
  <dd>德国</dd>
  <dd>美国</dd>
  <dd>俄国</dd>
</dl>


</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<table border="1px">
<!--表格table
    tr:行
    td:列
-->
  <tr>
    <!--colspan:跨列-->
    <td colspan="4">1-1</td>
  </tr>

  <tr>
    <!--rowspan:跨行-->
    <td rowspan="3">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>

  <tr>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>

</table>
</body>
</html>

媒体元素

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

</body>
</html>

页面结构分析

元素名 描述
header 标题头部区域的内容(用于页面或者页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或者页面中的一块区域)
section web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或者应用
nav 导航类辅助内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header>
  <h2>网页头部</h2>
</header>
<section>
  <h2>网页主题</h2>
</section>
<footer>
  <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
<!--iframe 内联框架
    src:地址
    w-d:宽度、长度
-->
<iframe src=""  name="hello" frameborder="0" height="800px" width="1000px"></iframe>

<a href="https://www.cnblogs.com/Running-Man/p/14848232.html" target="hello"> 点击跳转 </a>

</body>
</html>

表单


表单元素格式

type 指定元素的类型:text、password、checkbox、radio、submit、reset、file、hidden、image、button,默认为text
name 指定表单元素的名称
value 元素的初始值,type为radio时,必须指定一个值
size 指定表单元素的初始宽度
maxlength type为text或者password时,输入的最大字符数
checked type为checkbox或者radio时,指定按钮是否是被选中

表单的应用

  • 隐藏 hidden
  • 只读readonly
  • 禁用disabled

表单的初级验证

  • 为啥要验证

  • 常用方式:

    • placeholder :文本框提示信息
    • required :必须填写
    • pattern :正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h2>注册</h2>
<!--表单:form
    action:表单提交的位置,可以是网站,也可以是一个请求处理的地址
    method:get、post提交方式(显示、隐式)
            get提交方式,可以在url中直接看到,不安全,高效
            post:比较安全,大文件
-->
<form action="1.firstPage.html" method="get">
    <!--文本输出狂:input type="text"
    value="小尼姑" 文本框初始值
    maxlength="8"  最长能写几个字符
    size="20"      文本框的长度
    -->
    <p> 用户:<input type="text" name="userName" placeholder="请输入用户名"></p>

    <!--密码输出狂:input type="password"-->
    <p>密码:<input type="password" name="pwd" value="12345" required></p>

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

    <p>爱好:
        <input type="checkbox" value="read" name="hobby">读书
        <input type="checkbox" value="game" name="hobby">打游戏
        <input type="checkbox" value="swim" name="hobby">游泳
        <input type="checkbox" value="football" 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/tang.jpg">-->
    </p>
    
    <!--下拉框 -->
    <p>国家:
        <select name="列表名字" id="">
            <option value="China">中国</option>
            <option value="USA">美国</option>
            <option value="Japan">日本</option>
            <option value="Indian">印度</option>
        </select>
    </p>
    
    <!--文本框-->
    <p>反馈:
        <textarea name="textarea" id="1" cols="30" rows="10">文本内容</textarea>
    </p>
    
    <!--文件域-->
    <p>
        <input type="file">
        <input type="button" name="upload" value="上传">
    </p>

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

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

    <!--数字-->
    <p>商品数量:
        <input type="number" name="voice" min="0" max="100" step="10">
    </p>

    <!--滑块-->
    <p>voice:
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <!--搜索框-->
    <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>
</form>
</body>
</html>

HTML5

上一篇:vue使用element-ui上传多张图片 (照片墙)


下一篇:CSS3 width的min/max-content、fill-available以及fit-content