结构层（HTML）

天宇阿

已于 2022-09-02 21:00:23 修改

阅读量548

点赞数

分类专栏： HTML 文章标签：前端

于 2022-05-23 21:08:23 首次发布

本文链接：https://blog.csdn.net/zhao854116434/article/details/124907740

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、HTML的基本结构
- 1.1 概述
二、页面的基本标签
- 2.1 注释
- 2.2 标题标签
- 2.3 段落标签
- 2.4 换行标签
- 2.5 水平标签
- 2.6 字体样式标签
- 2.7 特殊符号
三、图像
- 3.1 img
四、超链接
- 4.1 页面间链接
- 4.2 锚链接
- 4.3 功能性链接
- - 4.3.1 邮箱
  - 4.3.2 QQ
五、行内元素和块信息
- 5.1 块元素
- 5.2 行内元素
六、列表
- 6.1 有序列表
- 6.2 无序列表
- 6.3 自定义列表
七、表格 table
- 7.1 行
- 7.2 列
- 7.3 跨行
- 7.4 跨列
八、媒体元素
- 8.1 音频 audio
- 8.2 视频 video
九、网页的简单布局
- 9.1 头部
- 9.2 脚部
- 9.3 主体
十、内联矿建
- 10.1 iframe
十一、表单
- 11.1 form[post/get]
- 11.2 文本框 text
- 11.3 密码框 password
- 11.4 单选框 radio
- 11.5 多选框 checkbox
- 11.6 按钮 button
- 11.7 下拉框 select
- 11.8 文本域 textarea
- 11.9 文件域 file
- 11.10 滑块 range
- 11.11 搜索框 search
十二、表单的应用
- 12.1 隐藏域 hidden
- 12.2 只读 readonly
- 12.3 禁用 disabled
- 12.4 增强鼠标可用性 label
十三、表单的初级验证
- 13.1 邮箱验证
- 13.2 url验证
- 13.3 数字验证
- 13.4 用户提示 placehoder
- 13.5 非空判断 required
- 13.6 正则表达式 parrent

学习视频来自于：秦疆（遇见狂神说）Bilibili地址
他的自学网站：kuangstudy

用脚步丈量世界,用心感知远方

一、HTML的基本结构

1.1 概述

HTML
Hyper Text Markup Language（超文本标记语言）
优势
浏览器厂商对HTML5支持
市场的需要
跨平台
W3C
World Wide Web Consortum（万维网联盟）
W3C标准包括
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）ECMAScript：JavaScript
页面基础代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>

二、页面的基本标签

2.1 注释

<!-- DOCTYPE:告诉浏览器，我来们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
	<!-- head标签代表网页头部 -->
	<head>
		<!-- meta描述性标签，它用来描述我们网站的一些信息 -->
		<meta charset="utf-8" />
		<meta name="keywords" content="西部开源">
		</meta>
		<meta name="description" content="学习html5">
		</meta>
		<!-- title标签代表网页标题 -->
		<title></title>
	</head>
	<!-- body标签代表网页主体 -->
	<body>
		<h1>Hello World</h1>
	</body>
</html>

2.2 标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.3 段落标签

<p>堂西长笋别开门，堑北行椒却背村。</p>
<p>梅熟许同朱老吃，松高拟对阮生论。</p>
<p>欲作鱼梁云复湍，因惊四月雨声寒。</p>
<p>青溪先有蛟龙窟，竹石如山不敢安。</p>
<p>两个黄鹂鸣翠柳，一行白鹭上青天。</p>
<p>窗含西岭千秋雪，门泊东吴万里船。</p>
<p>药条药甲润青青，色过棕亭入草亭。</p>
<p>苗满空山惭取誉，根居隙地怯成形。</p>

2.4 换行标签

堂西长笋别开门，堑北行椒却背村。<br/>
梅熟许同朱老吃，松高拟对阮生论。<br/>
欲作鱼梁云复湍，因惊四月雨声寒。<br/>
青溪先有蛟龙窟，竹石如山不敢安。<br/>
两个黄鹂鸣翠柳，一行白鹭上青天。<br/>
窗含西岭千秋雪，门泊东吴万里船。<br/>
药条药甲润青青，色过棕亭入草亭。<br/>
苗满空山惭取誉，根居隙地怯成形。<br/>

2.5 水平标签

<hr />

2.6 字体样式标签

粗体

粗体：<strong>i love you</strong>

斜体

斜体：<em>i love you</em>

2.7 特殊符号

空格：&nbsp;<br />
大于：&gt;<br />
小于：&lt;<br />
版权：&copy;<br />

三、图像

3.1 img

常见的图像格式
- JPG
- GIF：动图
- PNG
- BMP：位图

<!-- 
 src=路径（绝对路径，相对路径都可）
 alt="图片加载时显示文字"
 title="鼠标悬停文字"
 width="图片宽"
 height="图片高"
 -->
<img src="img/VCG218c4e8c5fc.jpg" alt="图片加载时显示文字" title="鼠标悬停文字" />

四、超链接

4.1 页面间链接

<!-- a标签
href：必填，表示要跳转页面地址
target：设置打开方式
	_blank：在新标签中打开
	_self：在当前网页打开
-->
<a href="https://www.baidu.com" target="_self">
	<!-- 图片超链接 -->
	<img src="img/VCG218c4e8c5fc.jpg" />
</a>

4.2 锚链接

本页用法

<!-- 1.需要一个标记 -->
<!-- 2.跳转到标记 使用#+名字-->
<a href="#top">回到顶部</a>

标记点：写在你想要跳转的位置

<!-- 标记点 -->
<a name="top">顶部</a>

页面间跳转

<a href="4.页面链接.html#top">跳转</a>

4.3 功能性链接

4.3.1 邮箱

<a href="mailto:854116434@qq.com">邮箱联系</a>

4.3.2 QQ

<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:854116434:52" alt="点击这里给我发消息" title="点击这里给我发消息" /></a>

五、行内元素和块信息

5.1 块元素

无论内容多少，该元素独占一行。
（p、h1-h6）

5.2 行内元素

内容撑开宽度，左右都是行内元素的可以排在第一行。
（a、strong、em…)

六、列表

6.1 有序列表

<ol>
	<li>Java</li>
	<li>Phthon</li>
	<li>C</li>
</ol>

6.2 无序列表

<ul>
	<li>Java</li>
	<li>Phthon</li>
	<li>C</li>
</ul>

6.3 自定义列表

<dl>
	<dt>科目</dt>
	<dd>Java</dd>
	<dd>Phthon</dd>
	<dd>C</dd>
</dl>

七、表格 table

7.1 行

<table>
	<tr>1</tr>
	<tr>1</tr>
	<tr>1</tr>
</table>

7.2 列

<table>
	<tr>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

7.3 跨行

<table border="1px">
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<!-- 跨行：rowspan -->
		<td rowspan="2">1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

7.4 跨列

<table border="1px">
	<tr>
		<!-- 跨列：colspan -->
		<td colspan="2">1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

八、媒体元素

8.1 音频 audio

<audio src="audio/不谓侠 - CRITTY.mp3" controls autoplay></audio>

8.2 视频 video

<!-- autoplay：自动播放 -->
<!-- controls：控制条 -->
<video src="video/18_JDBC管理事务_实现.mp4" controls></video>

九、网页的简单布局

9.1 头部

header
标记头部区域的内容（用于页面或页面中的一块区域）

<header>
	<h2>头部</h2>
</header>

9.2 脚部

footer
标记脚步区域的内容（用于整个页面或页面的一块区域）

<footer>
	<h2>脚步</h2>
</footer>

9.3 主体

section
Web页面中的一块独立区域

<section>
	<h2>主体</h2>
</section>

article
独立的文章内容
aside
相关内容或应用（常用于边栏）
nav
导航类辅助内容

十、内联矿建

10.1 iframe

<!-- 内联框架
 src：地址
 w-h：宽度高度
 -->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
	scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">

十一、表单

11.1 form[post/get]

<!-- 表单form
 action：表单提交的位置，可以是网站，也可以是请求地址
 method：post、get提交方式
 post:提交信息相对安全，传输大文件
 get:可以在url中看见提交信息，不安全，高效
 -->
 <form action="" method="GET">
 </form>

11.2 文本框 text

<!-- 文本框
 value：默认值
 maxlength：输入字符数量
 size：输入框长度
 -->
<p>名字：<input type="text" name="username" value="天坛" maxlength="8" size="20"></p>

11.3 密码框 password

<!-- 密码框 -->
<p>密码：<input type="password" name="password"></p>

11.4 单选框 radio

<!-- 单选
input type:"radio"
value:单选的值
name:代表组
 -->
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女

11.5 多选框 checkbox

<!-- 多选框
input type="checkbox"
value：单选的值
 name：分组
 -->
<p>爱好：
	<input type="checkbox" value="sleep" name="hobby" >睡觉
	<input type="checkbox" value="code" name="hobby" >写代码
	<input type="checkbox" value="chat" name="hobby" >聊天
	<input type="checkbox" value="game" name="hobby" >游戏
</p>

11.6 按钮 button

<!-- 提交按钮 -->
<input type="submit" value="确定">
<!-- 清空按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<button></button>
<!-- 需要配置js使用 -->
<input type="button" name="btn1" value="点击变长">
<!-- 图片按钮和submit效果一样 -->
<input type="image" src="img/VCG218c4e8c5fc.jpg">

11.7 下拉框 select

<!-- 下拉框
 name：下拉框名字
 value：选中的值
 selected：默认选中
 -->
<p>数字
	<select name="number">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3" selected>3</option>
		<option value="4">4</option>
	</select>
</p>

11.8 文本域 textarea

<!-- 文本域
 name：值的名称
 cols：列
 rows：行
 -->
<p>反馈：
<textarea name="te" cols="30" rows="10"></textarea>
</p>

11.9 文件域 file

<!-- 文件域
 -->
<p>
	<input type="file" name="files">
	<input type="button" value="上传" name="upload">
</p>

11.10 滑块 range

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

11.11 搜索框 search

<!-- 搜索框 -->
<p>搜索<input type="search" name="search"></p>

十二、表单的应用

12.1 隐藏域 hidden

<!-- hidden：隐藏域 -->
<p>密码：<input type="password" name="password" hidden></p>

12.2 只读 readonly

<!-- readonly：只读 -->
<p>名字：<input type="text" name="username" value="天坛" readonly></p>

12.3 禁用 disabled

<!-- disabled：禁用 -->
<input type="radio" value="boy" name="sex" disabled>男

12.4 增强鼠标可用性 label

<!-- label for="mark"：点击label域内数字，光标瞬间移动到输入框 -->
<p><label for="mark">名字：</label><input type="text" name="username" value="天坛" id="mark"></p>

十三、表单的初级验证

13.1 邮箱验证

<!-- 邮箱验证 -->
<p>邮箱：<input type="email" name="email"></p>

13.2 url验证

<!-- url验证 -->
<p>url：<input type="url" name="url"></p>

13.3 数字验证

<!-- 数字验证
 max：最大值
 min：最小值
 step：每次变化量
 -->
<p>数字：<input type="number" name="num" max="100" min="0" step="10"></p>

13.4 用户提示 placehoder

<!-- placeholder：输入框显示提示信息 -->
<p>名字：</label><input type="text" name="username"  placeholder="请输入用户名"></p>

13.5 非空判断 required

<!-- required：输入框不能为空 -->
<p><label>名字：</label><input type="text" name="username"  required></p>

13.6 正则表达式 parrent

正则表达式这里只是了解使用，具体以后会学习。

<p>自定义邮箱：
<input type="text" name="diymail" pattern="1+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-z]{2,}$">

天宇阿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
结构层（HTML）

文章目录学习视频来自于：秦疆（遇见狂神说）Bilibili地址他的自学网站：kuangstudy用脚步丈量世界,用心感知远方
复制链接

扫一扫

专栏目录