学习HTML5

初识

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

W3C
  • World Wide Web Consortium(万维网联盟)
  • 标准:
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)
基本结构
<!-- DOCTYPE :告诉浏览器,我们用的规范  -->
<!DOCTYPE html>
<html lang="en">
<!-- head 网页头部 -->
<head>
    <!-- meta:描述性标签,用来描述我们网站的一些信息   -->
    <!-- meta:一般用来做SEO   -->
    <meta charset="UTF-8">
    <meta name ="keywords" content="Study study and day day up!">
    <meta name ="description" content="Studying">
    <!-- title 网页标题 -->
    <title>Title</title>
</head>
<!-- body 网页主体 -->
<body>
    Hello,world!
</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>
<p>春风绕过发梢红纱   刺绣赠他  眉目刚烈拟作妆嫁 轰烈流沙枕上白发</p>
<p>杯中酒比划  年少风雅鲜衣怒马  也不过一刹那   难免疏漏儿时檐下</p>
<p>莫测变化  隔却山海  转身从容煎茶  一生长   重寄一段过往</p>
<p>将希冀都流放  可曾添些荒唐  才记得你的模样    一身霜</p>
<p>谁提笔只两行  换一隅你安康   便销得这沧桑  你还在我的心上</p>

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

<!--换行标签-->
手中雕刻生花  刀锋千转蜿蜒成画   盛名功德塔  是桥畔某处人家 <br/>
春风绕过发梢红纱   刺绣赠他  眉目刚烈拟作妆嫁  轰烈流沙枕上白发 <br/>
杯中酒比划  年少风雅鲜衣怒马   也不过一刹那  难免疏漏儿时檐下 <br/>
莫测变化  隔却山海   转身从容煎茶   一生长   重寄一段过往 <br/>
将希冀都流放  可曾添些荒唐   才记得你的模样    一身霜 <br/>
谁提笔只两行   换一隅你安康   便销得这沧桑  你还在我的心上 <br/>
一生长  重寄一段过往  将希冀都流放  可曾添些荒唐   才记得你的模样 <br/>
一身霜  谁提笔只两行  换一隅你安康  便销得这沧桑   你还在我的心上 <br/>

<!--粗体,斜体-->
<h3>字体样式标签</h3>

粗体:<strong>I love you</strong>
斜体:<em>I love you</em>

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

空   格:
<br/>
空&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp格

<br/>
&gt;
<br/>
&lt;
<br/>
&copy; 版权所有

<!--
特殊符号记忆方式
& ;
-->

</body>
</html>
图像标签

常见的图像格式:jpg、gif、png、bmp…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--
src:图片地址(必填)
    相对地址(推荐),绝对地址
    ../  --上一级目录
alt:图片名字(必填)
title:悬停显示文字
width:宽
height:高
-->
<img src="../resources/image/1.jpg" alt="apple" title="悬停文字" width="300" height="400">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

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


<!--a标签
href:必填,表示要跳转的页面
    _blank:在新标签打开
    _self:在自己页面打开

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

<br/>
<a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="apple" title="跳转到我的第一个网页" width="300" height="400">
</a>

<br/>
<a href="1.我的第一个网页.html">
  <img src="../resources/image/1.jpg" alt="apple" title="跳转到我的第一个网页" width="300" height="400">
</a>
<!--锚链接
1、需要一个锚标记
2、跳转到标记
页面间跳转
#
-->
<br/>
<a href="#top">回到顶部</a>

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

<!--功能性连接
邮箱连接:mailto
qq链接:
-->
<a href="mailto:nihaoa@163.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::513"
       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>
<!--有序列表
应用范围:试卷,问答...s
-->

<ol>
  <li>java</li>
  <li>python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C</li>
</ol>

<hr/>
<!--无序列表
应用范围:导航,侧边栏...
-->
<ul>
  <li>java</li>
  <li>python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C</li>
</ul>

<hr/>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容

公司网站底部
-->
<dl>
  <dt>学科</dt>

  <dd>java</dd>
  <dd>python</dd>
  <dd>运维</dd>
  <dd>前端</dd>
  <dd>linux</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
边框 border
背景颜色 bgcolor
行 tr rows
列 td

-->
<table border="1px" bgcolor="aqua">
    <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-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/video/1.MP4" controls autoplay ></video>

<audio src="../resources/audio/1.mp3" controls autoplay></audio>

</body>
</html>
页面结构
  • header 标题头部区域的内容(用于页面或页面中的一块区域)
  • footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
  • section web页面中的一块独立区域
  • article 独立的文章内容
  • aside 相关内容或应用(常用于侧边栏)
  • nav 导航类辅助内容
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

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

<a href="1.我的第一个网页.html" target="hello"> 点击跳转</a>

</body>
</html>
表单form
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>
<h1>注册</h1>

<!--表单form

action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
      get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
      post方式:比较安全,可以传输大文件
-->

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

<!--  文本输入框:input type="text"-->
  <p>名字: <input type="text" name="uasername"></p>
<!--  密码框: input type="password" -->
  <p>密码: <input type="password" name="pwd"></p>

  <p>
    <input type="submit">
    <input type="reset">
  </p>
</form>
</body>
</html>
表单元素格式

type

指定元素的类型:text(默认) password checkbox radio submit reset file hidden image button

name

指定表单元素的名称

value

元素的初始值。type为radio时必须指定一个值

size

指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位。

maxlength

type为text或password时,输入的最大字符数

checked

type为radio或checkbox时,指定按钮是否是被选中

按钮、多选框、列表框、文本域、文件域、搜索框、滑块、简单验证和表单的应用及校验
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>
<h1>注册</h1>

<!--表单form

action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
      get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
      post方式:比较安全,可以传输大文件
-->

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

<!--  文本输入框:input type="text"-->
  <p>名字: <input type="text" name="uasername" value="yeyue" maxlength="8" readonly> </p>
<!--  密码框: input type="password" -->
  <p>密码: <input type="password" name="pwd" value="1234" hidden></p>
  <p>性别:
<!--单选框标签
input type="radio"
value : 单选框的值
name : 表示组
readonly 只读
disabled 禁用
hidden 隐藏
placeholder 提示信息
required 非空判断
pattern 正则表达式
-->
    <input type="radio" value="boy" name="sex" checked disabled><input type="radio" value="girl" name="sex"></p>

<!--
多选框
input type="checkbox"
-->
  <p>爱好:

    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby" checked>敲代码
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" 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/1.jpg">
  </p>

<!--  下拉框,列表框-->
  <p>国家
    <select name="列表名称" >
      <option value="china" selected>中国</option>
      <option value="us">美国</option>
      <option value="eth">瑞士</option>
      <option value="yindu">印度</option>
    </select>
  </p>
<!--  文本域 cols="30" rows="10"-->
  <p>反馈:
    <textarea name="textarea" cols="30" rows="10" placeholder="请输入文本" required></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="email" required>
  </p>
  <p>自定义邮箱:
    <input type="text" name="diyemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
  </p>
<!--  URL-->
  <p>URL:
    <input type="url" name="url">
  </p>
<!--  数字-->
  <p>商品数量:
    <input type="number" name="num" max="100" step="1">
  </p>
<!--

-->
  <p>音量:
    <input type="range" name="voice" min="0" max="100" step="2">
  </p>
<!--  搜索框-->
  <p>搜索:
    <input type="search" name="search" id="mark">
  </p>
<!--  增强鼠标的可用性-->
  <p>
    <label for="mark">你点我试试</label>
  </p>
  <p>
    <input type="submit">
    <input type="reset" value="清空表单">
  </p>
</form>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值