学习HTML5-CSDN博客

本文链接：https://blog.csdn.net/weixin_47587613/article/details/118559488

初识

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>