HTML详解-CSDN博客

本文链接：https://blog.csdn.net/2301_79006238/article/details/145687384

HTML基本结构

tab快捷键

<!DOCTYPE html> <!--告诉浏览器我们要使用什么规范-->

<html lang="en">
<head>  <!--head网页头部-->

<!--meta描述标签，描述网站信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="AAAAA土鸡蛋批发张哥">
    <meta name="description" content="学批发土鸡蛋">
    <!--tital网页标题-->
    <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>

<!--换行标签-->
土鸡蛋<br/>
鸡蛋土


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

<!--粗体、斜体-->

<h1>粗体斜体</h1>
<!--粗体-->
<strong>土鸡蛋</strong> <br/>
<!--斜体-->
<em>土鸡蛋</em>

<!--特殊符号-->
空格：&nbsp;&nbsp;A <br/>
大于号：&gt;<br/>
小于号：&lt;<br/>
版权符号：&copy;



</body>
</html>

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--图像标签-->
<!--
../ 表示上一级目录
alt:必填
<img src="地址" alt="图像的代替文字" title="悬停提示文字" width="图像宽度" height="图像高度"/>
-->

<img src=".idea/1.jpg" alt="请刷新" 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>
<!--
href:必填
target:表示窗口在哪里打开
<a href="链接路径" target="目标窗口位置">链接文本或图像</a>
-->
<!--文本链接-->
<a href="demo.html">点击我跳转购买鸡蛋</a>

<hr/>

<!--图片链接-->
<a href="demo.html">
  <img src=".idea/1.jpg" alt="请刷新" title="老张图片" width="300" height="400"/>
</a>

<hr/>
<!--target:_blank在新页面打开，_self:在自己网页打开
-->
<a href="demo.html" target="_blank">点击我跳转购买鸡蛋</a>



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

<!--功能性链接-->
<!--邮件链接：mailto-->
<a href="mailto:1234567890@qq.com">点击发送邮件</a>

</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--有序列表-->
<ol>
  <li>java</li>
  <li>鸡蛋</li>
  <li>蛋鸡</li>
  <li>权威</li>
  <li>土鸡蛋</li>
  <li>AAAAA</li>
</ol>

<hr/>

<!--无序标签-->
<ul>
  <li>java</li>
  <li>鸡蛋</li>
  <li>蛋鸡</li>
  <li>权威</li>
  <li>土鸡蛋</li>
  <li>AAAAA</li>
</ul>

<!--自定义列表
dl:标签
dt：列表名
dd：列表内容
-->
<dl>
  <dt>egg</dt>

  <dd>土</dd>
  <dd>ji</dd>
  <dd>egg</dd>
  
</dl>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--
表格：table
行：tr
列：td
border:边框，引号内填写宽度
-->
<table border="1px">
  <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-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>

</table>

</body>
</html>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
<table border="1px">
  <tr>
    <td colspan="3">学生成绩</td>
  </tr>
  <tr>
    <td rowspan="2">老张</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>

    <td>数学</td>
    <td>100</td>
  </tr>
  <tr>
    <td rowspan="2">老吴</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</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/WIN_20250219_12_48_27_Pro.mp4" controls autoplay></video>

<!--音频-->
<audio src="resources/录音.m4a" controls autoplay></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><h4>网页主体</h4></section>

<footer><h3>网页脚部</h3></footer>

</body>
</html>

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
src:路径
name：框架标识名
宽高选填
-->
<iframe src="http://www.baidu.com" frameborder="0" width="1000px" height="800"></iframe>

<!--<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=68373450&bvid=BV12J41137hu&cid=118499718&p=1"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>-->
</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--
method:规定如何发送表单数据，get、post
  get:不安全，可以在url中看到提交信息，高效，不可提交大文件
  post：安全，可以提交大文件
action：表示向何处发送表单数据,可以是网站也可以是请求处理地址
input:输入框
name:必填，指定表单元素的名称
-->
<form method="post" action="demo.html">
  <p>名字：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="password"></p>
  <p><input type="submit">
    <input type="reset">
  </p>
</form>
</body>
</html>

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlength	type为text或password时,输入的最大字符数
checked	type为radio或checkbox时,指定按钮是否是被选中（默认选中）

单选框

radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
</head>
<body>
<p>性别：
  <input type="radio" value="boy" name="sex"/>男
  <input type="radio" value="girl" name="sex"/>女
</p>
</body>
</html>

按钮和多选框

<p>
  爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="play" name="hobby">玩
    <input type="checkbox" value="phone" name="hobby">手机
</p>

<p>按钮：
    <input type="button" name="btn1" value="点击买鸡蛋">
    <input type="image"src="" >
<!--image也是图片按钮，点击跳转，配合form的action跳转-->
<!--
submit：提交按钮
reset：重置按钮
-->
</p>

下拉框（列表框）、文本域、文件域

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

<p>
  下拉框：
<!--
select：下拉框，内部嵌套option（选项）
selecte选定默认值
-->
  <select name="列表名称" >
    <option value="选择的值">egg</option>
    <option value="选择的值">tuegg</option>
    <option value="选择的值" selected>bigegg</option>
    <option value="选择的值">smallegg</option>
  </select>

<!--  文本域  cols-列 rows-行 -->
<p>
  反馈：
  <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>

<!--文件域-->
<input type="file" name="files">
</p>

</body>
</html>

搜索框滑块、简单验证

<p>
  <!--邮件验证-->
  <input type="email" name="email">
  
<!--URL-->
  <input type="url" name="url">
  
<!--数字-->
  <input type="number" name="num" max="100" min="0" step="10">


<!--滑块-->
  <input type="range" min="0" max="100" name="voice" step="1">
  
<!--搜索框-->
  <input type="search" name="search">
</p>

表单的应用

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

增强鼠标可用性：

<p>
  <label for="mark">点击：</label>
  <input type="text"id="mark">
</p>

表单初级验证

1.安全性
2.减轻服务器压力
常用方式：1.placeholder（提示信息） 2.required（非空判断） 3.pattern（正则表达式）（直接搜索）

 <input type="email" name="email" placeholder="请输入邮箱" required>

HTML详解

HTML基本结构

网页基本标签

图片标签

超链接标签

列表标签

表格标签

音频标签

页面结构

iframe内联框架

表单

单选框

按钮和多选框

下拉框 （列表框）、文本域、文件域

搜索框滑块、简单验证

表单的应用

表单初级验证

下拉框（列表框）、文本域、文件域