欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5

程序员文章站 2022-06-10 13:57:02
初识HTML 什么是HTML Hyper Text Markup Language(超文本标记语言) HTML5的优势 世界知名浏览器厂商对HTML5的支持 微软 Google 苹果 Opera Mozilla 市场需求 跨平台 W3C标准 W3C World Wide Web Consortium ......

初识html

什么是html

  • hyper text markup language(超文本标记语言)

html5的优势

  • 世界知名浏览器厂商对html5的支持
    • 微软
    • google
    • 苹果
    • opera
    • mozilla
  • 市场需求
  • 跨平台

w3c标准

  • w3c

    • world wide web consortium(万维网联盟)
    • 成立于1994年,web技术领域最权威和最具有影响力的国际中立性技术标准机构
  • 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>