HTML学习

最新推荐文章于 2024-09-18 09:47:26 发布

Leslie_Waong

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量168

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/Leslie_Waong/article/details/105152291

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是HTML

HTML：Hyper Text Markup Language（超文本标记语言）
超文本：文字、图片、音视频等
W3C：World Wide Web Consortium（万维网联盟）
W3C标准：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
IDEA和Ecplise均可写HTML。
Ecplise为例：

<!-- DOCTYPE:使用规范 -->
<!DOCTYPE html>
<html>
<!-- head:网页头部 -->
<head>
	<!-- meta:描述性标签，一般用来做SEO--> 
	<meta charset="utf-8">
	<!-- title:网页标题 --> 
	<title>文档标题</title>
</head>
<!-- body:网页主体 --> 
<body>
	文档内容......
</body>
 
</html>

网页基本标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>

<!-- Eclipse 注释快捷键：Ctrl+Shift+C -->
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!-- 段落标签 -->

<p>HTML 文档描述网页</p>
<p>HTML 文档包含 HTML 标签和纯文本</p>
<p>HTML 文档也被称为网页</p>

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

<!-- 换行标签 -->
HTML 文档描述网页<br/>
HTML 文档包含 HTML 标签和纯文本<br/>
HTML 文档也被称为网页<br/>

<!-- 粗体、斜体 -->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<br/>
<!-- 特殊符号 &  ; -->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有


</body>
</html>

在这里插入图片描述

图像标签

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!-- img学习
src:图片地址 相对地址 绝对地址
../ 上一级目录
alt:图片名称（必填）
 -->
<img alt="头像" src="../resourse/img/1.jpg" title="Ace" width="192" height="108">
<a href="链接标签.html#down">跳转</a>
</body>
</html>

在这里插入图片描述

链接标签

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>链接标签</title>
</head>
<body>
<a name="top">顶部</a>
<!-- a标签
 href:必填，表示要跳转的页面
 _blank 在新标签中打开
 _self 在自己的网页中打开
-->

<a href="基本标签.html" target="_blank">点击我跳转到页面</a>
<a href="http://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<a href="图像标签.html">
	<img alt="头像" src="../resourse/img/1.jpg" title="Ace" width="192" height="108">
</a>

<p>
	<a href="图像标签.html">
		<img alt="头像" src="../resourse/img/1.jpg" title="Ace" width="192" height="108">
	</a>
</p>
<p>
	<a href="图像标签.html">
		<img alt="头像" src="../resourse/img/1.jpg" title="Ace" width="192" height="108">
	</a>
</p>
<p>
	<a href="图像标签.html">
		<img alt="头像" src="../resourse/img/1.jpg" title="Ace" width="192" height="108">
	</a>
</p>
<p>
	<a href="图像标签.html">
		<img alt="头像" src="../resourse/img/1.jpg" title="Ace" width="192" height="108">
	</a>
</p>
<p>
	<a href="图像标签.html">
		<img alt="头像" src="../resourse/img/1.jpg" title="Ace" width="192" height="108">
	</a>
</p>
<p>
	<a href="图像标签.html">
		<img alt="头像" src="../resourse/img/1.jpg" title="Ace" width="192" height="108">
	</a>
</p>
<p>
	<a href="图像标签.html">
		<img alt="头像" src="../resourse/img/1.jpg" title="Ace" width="192" height="108">
	</a>
</p>
<p>
	<a href="图像标签.html">
		<img alt="头像" src="../resourse/img/1.jpg" title="Ace" width="192" height="108">
	</a>
</p>

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

<!-- 功能性链接 
邮件链接：mailto:
qq链接：qq推广
-->
<a href="mailto:12345678@qq.com">点击联系我</a>
</body>
</html>

在这里插入图片描述

行内元素块元素

块元素：

无论内容多少，该元素独占一行
（p、h1-h6…）
行内元素：
内容撑开宽度，左右都是行内元素的可以排在一行
（a、strong、em…）

列表

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>列表</title>
</head>
<body>
<!-- 有序列表 
应用：试卷、问答...
-->
<ol>
	<li>java</li>
	<li>Python</li>
	<li>c</li>
</ol>
<!-- 无序列表 
应用：导航、侧边栏...
-->
<ul>
	<li>java</li>
	<li>Python</li>
	<li>c</li>
</ul>
<!-- 自定义列表
dt:列表名称
dd:列表内容
应用：公司网站底部
 -->
<dl>
	<dt>语言</dt>
	<dd>java</dd>
	<dd>c</dd>
	<dd>Linux</dd>
	
	<dt>位置</dt>
	<dd>济南</dd>
	<dd>青岛</dd>
	<dd>泰安</dd>
	
</dl>
</body>
</html>

在这里插入图片描述

表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!-- 表格table 
行tr 
列td 
-->

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

</body>
</html>

在这里插入图片描述

视频音频

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>媒体</title>
</head>
<body>
<!-- 音视频 
src:资源路径
controls 控制条
autoplay 自动播放
-->
<!-- <video src="../resourse/video/羽生结弦.mp4" controls autoplay></video> -->
<audio src="../resourse/audio/处处吻.mp3" controls autoplay></audio>
</body>
</html>

在这里插入图片描述

页面结构分析

在这里插入图片描述

<!DOCTYPE html>
<html>
<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>
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!-- iframe内联框架 
src:地址 
w-h:宽高 
-->
<!-- <iframe src="http://www.baidu.com" name="hello" frameboder="0" width="1000px" height="800px"></iframe> -->
<iframe src="" name="hello" frameboder="0" width="1000px" height="800px"></iframe>
<a href ="http://www.baidu.com" target="hello">点击跳转</a>
</body>
</html>

在这里插入图片描述

表单语法

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单form 
action:表单提交的位置 
method: post,get提交方式 
get:在url中会看到我们提交的信息，不安全，高效
post:比较安全，传输大文件
-->
<form action="基本标签.html" method="get">
	<!-- 文本输入框：input type="text" 
	value="好帅" 默认初始值
	readonly 只读
	maxlength="5"  最长写几个字符
	size="30" 文本框的长度
	hidden 隐藏
	-->
	<p>名字：<input type="text" name="uesrname" value="好帅" readonly></p>
	<!-- 密码框：input type="password" -->
	<p>密码：<input type="password" name="password" hidden value="123456"></p>
	<!-- 单选框标签 input type="radio" 
	value：单选框的值 
	name:表示组
	checked 默认选中
	disabled 禁用
	 -->
	<p>
		<input type="radio" value="boy"  name="sex" checked disabled/>男
		<input type="radio" value="girl" name="sex"/>女
	</p>
	<!-- 多选框标签 input type="checkbox" 
	value：单选框的值 
	name:表示组
	 -->
	<p>爱好：
		<input type="checkbox" value="sleepy"  name="hobby"/>睡觉
		<input type="checkbox" value="code"  name="hobby" checked/>代码
		<input type="checkbox" value="girl"  name="hobby"/>女孩
		
	</p>
	<!-- 下拉框
	selected 默认
	 -->
	<p>下拉框：
		<select name="列表名称">
			<option value="选项的值">美国</option> 
			<option value="选项的值">日本</option>
			<option value="选项的值" selected>中国</option>
			<option value="选项的值">韩国</option>
		</select>
	</p>
	<!-- 文本域 -->
	<p>反馈：
		<textarea  name="textarea" rows="5" cols="10">文本内容</textarea>
	</p>
	<!-- 文件域 -->
	<p>
		<input type="file" name="files">
		<input type="button" value="上传" name="upload">
	</p>
	<!-- 邮件标签 -->
	<p>邮箱：
		<input type="email" name="email">
	</p>
	<!-- URL -->
	<p>URL：
		<input type="url" name="url">
	</p>
	<!-- 数字 -->
	<p>商品数量：
		<input type="number" name="number" max="100" min="10" step="1">
	</p>
	<!-- 滑块 -->
	<p>音量：
		<input type="range" name="voice" max="100" min="10" step="2">
	</p>
	<!-- 搜索框 -->
	<p>搜索框：
		<input type="search" name="search" >
	</p>
	<p>
	<!--增强鼠标可用性 
	placeholder="请输入" 提示信息
	required 非空
	pattern 正则表达式
	-->
	<label for="mark">你点我试试</label>
	<input type="text" id="mark" placeholder="请输入" required>
	</p>
	<p>自定义邮箱：
		<input type="text" name="diymail" pattern="^(0?[1-9]|1[0-2])$" >
	</p>
	
	<!-- 按钮标签 
	input type="button" 
	input type="image" 
	input type="submit" 
	input type="reset" 
	 -->
	<p>按钮：
		<input type="button" value="点击变身"  name="button1"/>
		<input type="image" src="../resourse/img/1.jpg" width="192" height="108"/>	
	</p>
	<p>
		<input type="submit" value="提交">
		<input type="reset">
	</p>
	

</form>
</body>
</html>