HTML基础知识入门大全

最新推荐文章于 2024-08-20 19:23:57 发布
最新推荐文章于 2024-08-20 19:23:57 发布
阅读量269 收藏 6
点赞数 2
分类专栏： 前端 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HTDiiii/article/details/141340542
版权

HTML

什么是 HTML

HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。

HTML 标签/元素

在这里插入图片描述

HTML 属性

在这里插入图片描述

第一个 HTML

<!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
<!DOCTYPE html>
<!-- 根标签 -->
<html>
	<!-- 头标签 -->
	<head>
		<!-- 字符集 utf-8/utf-16/GBK/GB2312-->
		<meta charset="utf-8">
		<!-- 标题标签 -->
		<title>这是我的HTML页面</title>
		<!-- 页面内的CSS和JS -->
	</head>
	<body>
		<!-- 页面中也显示的内容 -->
		这是我的第一个页面
	</body>
</html>

段落标签

<!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
<!DOCTYPE html>
<!-- 根标签 -->
<html>
	<!-- 头标签 -->
	<head>
		<!-- 字符集 utf-8/utf-16/GBK/GB2312-->
		<meta charset="utf-8">
		<!-- 标题标签 -->
		<title>这是我的HTML页面</title>
		<!-- 页面内的CSS和JS -->
	</head>
	<body>
		<!-- 页面中也显示的内容 -->
		这是我的第一个页面<br>
		春晓<br/>
		<p>唐·孟浩然
		<p>春眠不觉晓，
		<p>处处闻啼鸟。</p>
		<p>夜来风雨声，</p>
		花落知多少。
	</body>
</html>

在这里插入图片描述

处理字体效果

春晓<br/>
<p>唐·孟浩然
<p>春眠不觉晓，
<p>处处闻啼鸟。</p>
<p style="color: blue;font-family: 楷体;">夜来风雨声，</p>
花落知多少。

图片标签

<img src="./imgs/bj.png" width="300px" title="雪山"/>

在这里插入图片描述

标题标签

<!-- 标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

在这里插入图片描述

水平线/垂直线

<!-- 水平线 -->
<hr />
<!-- 垂直线 -->
<!-- 将水平线旋转90度 -->
<!-- <hr style="transform: rotate(90deg);"/> -->
<hr style="width: 1px; height: 100px;"/>

上标标签/下标标签

<!-- 上标标签/下标标签 -->
H<sub>2</sub>O
2<sup>6</sup>
<!-- 商标实体 -->
&copy;
&copysr;
&reg;

在这里插入图片描述

列表标签

1.1、有序列表

  2. ...................
默认情况下是 1~N 的表示形式。 type 属性改变有序的显示效果 start 属性起始点 
<!-- 有序列表 -->
		Javaweb前端技术
		<!-- start起始点值,都是数值 -->
		<ol start="6">
			<li>HTML5</li>
			<li>CSS3</li>
			<li>JavaScript</li>
			<li>JQuery</li>
			<li>BootStrap</li>
			<li>LayUI</li>
			<li>Vue</li>
		</ol>
		<!-- type指定有序类型 -->
		<ol type="A" start="6">
			<li>HTML5</li>
			<li>CSS3</li>
			<li>JavaScript</li>
			<li>JQuery</li>
			<li>BootStrap</li>
			<li>LayUI</li>
			<li>Vue</li>
		</ol>
		<ol type="i">
			<li>HTML5</li>
			<li>CSS3</li>
			<li>JavaScript</li>
			<li>JQuery</li>
			<li>BootStrap</li>
			<li>LayUI</li>
			<li>Vue</li>
		</ol>

在这里插入图片描述

1.2、无序列表

  • ...................
默认情况下是 实心圆 的表示形式。 type 属性 HTML5 中不可以使用该属性了，使用也是可以正常显示的，因为 HTML 第 5 版本兼容前面所有版本效果。 style="list-style-type: 效果单词;" square 实心方形 circle 空心圆 disc 实心圆，默认效果。 
<!-- 无序列表 -->
<ul style="list-style-type: circle;">
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript</li>
  <li>JQuery</li>
  <li>BootStrap</li>
  <li>LayUI</li>
  <li>Vue</li>
</ul>
<ul style="list-style-type: square;">
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript</li>
  <li>JQuery</li>
  <li>BootStrap</li>
  <li>LayUI</li>
  <li>Vue</li>
</ul>
<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript</li>
  <li>JQuery</li>
  <li>BootStrap</li>
  <li>LayUI</li>
  <li>Vue</li>
</ul>

在这里插入图片描述

1.3、 自定义列表

dt 表示定义列表项标题标签 dd 表示定义列表项描述/内容 
<!-- 自定义列表 -->
<dl>
  <dt>Web前端技术</dt>
  <dd>HTML5</dd>
  <dd>CSS3</dd>
  <dd>JS</dd>
  <dd>Vue</dd>
  <dt>Java后端技术</dt>
  <dd>Servlet</dd>
  <dd>Spring</dd>
  <dd>SpringMVC</dd>
  <dd>Mybatis</dd>
  <dd>SpringBoot</dd>
</dl>

在这里插入图片描述

超链接

文本
锚点格式
首先设置一个到达的 id 属性值，
文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接标签</title>
	</head>
	<body>
		<!-- 锚点 -->
		<a href="./myfrist.html#webqd">myfirst</a>
	</body>
</html>

form 表单

<!-- form表单标签 -->
<!-- 
   action属性提交数据的地址
   method属性是提交数据的方式
 -->
<form action="" method="post">
  <!-- button单独使用就是普通的按钮,在form表单中自动是提交按钮 -->
  <button>提交</button>
</form>

1.1、按钮

按钮标签
按钮标签

<form action="" method="post">
			<!-- button单独使用就是普通的按钮,在form表单中自动是提交按钮 -->
			<button>提交</button>
			<input type="button" value="普通按钮"/>
</form>

1.2、input

<form action="" method="get">
			用户名:<input type="text" value="" name="username" placeholder="请输入用户名"/><br>
			密码:<input type="password" value="" name="userpwd" placeholder="请输入密码"/><br>
			性别:
			<input type="radio" value="nan" name="usersex" id="nan"/>
			<label for="nan">男</label>
			<input type="radio" value="女" name="usersex" id="女"/>
			<label for="女">女</label>
			<input type="radio" value="保密" name="usersex" checked  id="baomi"/>
			<label for="baomi">保密</label>
			爱好:
			<input type="checkbox" value="足球" name="hobby" id="football"/>
			<label for="football">足球</label>
			<input type="checkbox" value="篮球" name="hobby" id="basketball"/>
			<label for="basketball">篮球</label>
			<input type="checkbox" value="乒乓球" name="hobby" id="ppball"/>
			<label for="ppball">乒乓球</label>
			<input type="checkbox" value="羽毛球" name="hobby" id="ymball"/>
			<label for="ymball">羽毛球</label>
			<input type="checkbox" value="游戏" name="hobby" checked id="games"/>
			<label for="games">游戏</label>
			<input type="checkbox" value="电影" name="hobby" checked id="film"/>
			<label for="film">电影</label>
			颜色:
			<input type="color"/>
			日期:
			<input type="datetime-local"/>
			<!-- button单独使用就是普通的按钮,在form表单中自动是提交按钮 -->
			<button>提交</button>
			<input type="button" value="普通按钮"/>
			<input type="submit" value="提交2"/>
			<input type="reset" value="重置"/>
		</form>

1.3、下拉框

-请选择- 多选下拉框 分组 显示值 
学历:
			<select>
				<option>-请选择-</option>
				<option value="大专">大专</option>
				<option value="本科">本科</option>
				<option value="硕士">硕士</option>
				<option value="博士">博士</option>
				<option value="博士后">博士后</option>
			</select>
			<br />
			学历2:
			<!-- multiple表示多选 -->
			<select multiple>
				<optgroup label="小学">
					<option value="一年级">一年级</option>
					<option value="二年级">二年级</option>
					<option value="三年级">三年级</option>
					<option value="四年级">四年级</option>
					<option value="五年级">五年级</option>
					<option value="六年级">六年级</option>
				</optgroup>
				
				<optgroup label="中学">
					<option value="初一">初一</option>
					<option value="初二">初二</option>
					<option value="初三">初三</option>
					<option value="高一">高一</option>
					<option value="高二">高二</option>
					<option value="高三">高三</option>
				</optgroup>
				
				<optgroup label="大学">
					<option value="大专">大专</option>
					<option value="本科">本科</option>
					<option value="硕士">硕士</option>
					<option value="博士">博士</option>
					<option value="博士后">博士后</option>
				</optgroup>
				
			</select>

1.4、文本域

rows 调整高度，即调整多少行
cols 调整宽度，即调整多少列

<textarea rows="10" cols="50"></textarea>

表格

表格一级标签

表格二级标签 表格三级标签 表格四级标签 表格四级标签
rowspan="number" 合并 number 行 colspan="number" 合并 number 列 border-collapse: collapse;表格为细线处理 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
		<style>
			table,th,td
			{
				border: 1px solid black;
				/* 设置边框为细线 */
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<!-- 表格一级标签 -->
		<table>
			<tbody>
				<!-- 表格三级标签 -->
				<tr>
					<!-- 表格四级标签 -->
					<td>1</td>
					<td  colspan="2">tom 21</td>
					<td>男</td>
					<td>本科</td>
					<td>
						<button>删除</button>
						<button>修改</button>
					</td>
				</tr>
				<tr>
					<!-- 表格四级标签 -->
					<td rowspan="2">2 3</td>
					<td>tom</td>
					<td>21</td>
					<td>男</td>
					<td>本科</td>
					<td>
						<button>删除</button>
						<button>修改</button>
					</td>
				</tr>
				<tr>
					<!-- 表格四级标签 -->
					<td>tom</td>
					<td>21</td>
					<td>男</td>
					<td>本科</td>
					<td>
						<button>删除</button>
						<button>修改</button>
					</td>
				</tr>
				<tr>
					<!-- 表格四级标签 -->
					<td>4</td>
					<td>tom</td>
					<td>21</td>
					<td rowspan="2" colspan="2">男 本科</td>
					<td>
						<button>删除</button>
						<button>修改</button>
					</td>
				</tr>
				<tr>
					<!-- 表格四级标签 -->
					<td>5</td>
					<td>tom</td>
					<td>21</td>
					<td>
						<button>删除</button>
						<button>修改</button>
					</td>
				</tr>
				<tr>
					<!-- 表格四级标签 -->
					<td>6</td>
					<td>tom</td>
					<td>21</td>
					<td>男</td>
					<td>本科</td>
					<td>
						<button>删除</button>
						<button>修改</button>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

在这里插入图片描述

媒体标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>媒体标签</title>
	</head>
	<body>
		<audio src="imgs/我走后-小咪.320.mp3" autoplay controls></audio>
		<video src="imgs/726.mp4" controls width="300px"></video>
	</body>
</html>

iframe

内联框架标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>iframe</title>
		<style>
			/* 标签选择器 */
			iframe
			{
				border: 1px solid black;
			}
			
			/* id选择器 */
			#left
			{
				width: 200px;
				height: 466px;
			}
			
			/* class选择器 */
			.top
			{
				position: absolute;
				top: 8px;
				left: 210px;
				height: 60px;
				width: 766px;
			}
			
			.bottom
			{
				position: absolute;
				top: 68px;
				left: 210px;
				height: 406px;
				width: 766px;
			}
			
		</style>
	</head>
	<body>
		<iframe id="left"  src="./left.html"></iframe>
		<iframe class="top" src="a标签.html"></iframe>
		<iframe class="bottom" name="bottom" src="myfrist.html"></iframe>
	</body>
</html>

在这里插入图片描述

HTDiiii
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【网络入门】详解常用的基础网络知识（面试笔试常考内容）
dvlinker的技术专栏
04-26 6万+
本文结合多年来的工作实践，来详细讲述一下作为IT从业人员要掌握的一些基础网络知识。
IT技术入门基础知识
feiqilai_shuang的博客
06-26 2237
经常有同学问，想学技术，却又不知道该学什么，所以接下来我会日常更新一些技术入门知识，让同学们尽可能的对技术本身有个大概了解之后，再做选择。 关于面向过程和面向对象】 百度标准答案： “面向过程”(Procedure Oriented)是一种以过程为中心的编程思想。这些都是以什么正在发生为主要目标进行编程，不同于面向对象的是谁在受影响。与面向对象明显的不同就是封装、继承、类。 “面向对象”(Object Oriented,OO)是软件开发方法。面向对象的概念和应用已超越了程序设计和软件开发，扩展到如数据
HTML基础入门（详细）
weixin_51143430的博客
08-28 3400
HTMLHTML结构2.HTML常见标签2.1注释标签2.2换行符2.3加粗标签2.4文字格式化2.4.1加粗2.4.2倾斜 2.4.3下划线 HTML结构 2.HTML常见标签 2.1注释标签 <!--注释> ctrl快捷键可快速进行注释或取消注释 2.2换行符 2.3加粗标签 2.4文字格式化 2.4.1加粗 2.4.2倾斜 2.4.3下划线 ......
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML5基础知识
qq_46485137的博客
02-13 4805
一、初识HTML HTML：Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等 HTML5的优势： 跨平台、 W3C标准 World Wide Web Consortium（万维网联盟） 成立于1994年，Web及时领域最权威和具影响力的国际中立性技术标准机...
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Python基础知识入门（一）
漫步桔田
10-22 1万+
Python界一名小学生，热心分享编程学习。
HTML零基础入门详细教程
一步一个脚印，踏实努力，向着目标前进
06-08 2826
欢迎来到HTML的零基础入门教程。HTML是构建网页的基础，是Web开发的必备技能之一。在本教程中，我们将介绍HTML的基础知识，包括HTML的基本结构、标签、属性等内容。让我们开始吧！
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
Linux入门的基础知识点
m0_67392409的博客
04-13 1万+
一、Linux操作系统概述 1、发展 1991 Linus Linux 0.0.1版,代码为8K行。现在最新版本为5.12.4。Linux加入了GNU，整体基于GPL协议，允许开源、分享传播、修改。 2、组成 （1）keanel–内核： 核心程序，用于管理硬件设备、系统的线程进程、内存、交换空间、文件系统、精灵进程（守护进程）等。主要实现系统程序与硬件之间的控制管理功能。 （2）Shell： 包裹在内核之外的人机交互界面，用于用户和内核之间打交道的功能，类似于windows的CMD。 通过Shell将输入的
PHP入门基础知识.doc
09-25
【PHP入门基础知识】 PHP是一种广泛使用的开源服务器端脚本语言，尤其适合Web开发，能够嵌入到HTML中。它的全称“PHP：Hypertext Preprocessor”表明它是一种预处理程序，用于处理服务器上的HTML超文本。PHP文件的...
vue基础知识-菜鸟入门
01-03
Vue的基础知识对于任何想要学习或在实际项目中使用Vue的开发者来说至关重要。以下是对压缩包文件中各主题的详细解释： 1. **Vue全局API**: Vue 提供了一套丰富的全局API，如 `Vue.createApp` 用于创建应用实例，`...
HTML5+CSS3入门基础知识
12-29
HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准，旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。本节课程将介绍 HTML5 和 CSS3 的基础知识，...
html&css入门基础知识点.pdf
10-04
HTML和CSS基础知识点 HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
HTML基础知识点入门.pdf
10-10
HTML基础知识点入门的知识点涵盖了HTML的基本结构、常用元素和标签的使用方法、网页布局的编写技巧以及HTML的一些高级特性。 首先，HTML是一种标记语言，它是构成网页内容的主要代码，能够定义网页的结构和内容。...
Java学习Day32：HTML 第二章：黑风山
最新发布
weixin_51721783的博客
08-20 505
我是儿子</a> <p> <a href="#">我是孙子
HTML 基本语法特性与 title 标签介绍
前端基地
08-20 245
本文详细阐述了 HTML 的基本语法特性，涵盖对换行和缩进不敏感（无论标签是否换行及缩进，都不影响页面结构，并通过实例加以说明）、存在空白折叠现象（文字间的空格、换行和缩进会被折叠为一个空格显示，同样有示例展示）以及标签必须严格封闭（以避免错误，如不封闭 title 标签可能导致意外结果，也给出了示例）。此外，还对 title 标签进行了介绍。通过丰富的举例说明，助力读者进一步熟悉 HTML 的这些特性。
vue项目开发记录1：为v-html内的img元素添加点击放大效果
qq_41057206的博客
08-20 104
内容
响应式Web设计:纯HTML和CSS的实现技巧
m0_66995023的博客
08-20 410
使用百分比单位 (%) 或者相对单位 (em, rem) 定义宽度和高度，使元素能够根据容器大小自动调整。使用相对单位 (em 或 rem) 来设置字体大小，以便它们可以根据父元素或根元素的字体大小自动缩放。通过调整字体大小、颜色和间距来创建清晰的视觉层次，帮助用户更容易地导航和理解页面内容。从最基本的功能开始构建网站，然后逐渐添加更复杂的功能，确保所有用户都能访问基本内容。（1）使用不同的设备和浏览器进行测试，确保网站在各种环境下都能良好工作。（2）利用浏览器的开发者工具来模拟不同的屏幕尺寸和设备。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值