HTML快速学习

最新推荐文章于 2024-02-29 13:59:43 发布

发热的嘤嘤怪(2003计科胜胜同学)

最新推荐文章于 2024-02-29 13:59:43 发布

阅读量305

点赞数

分类专栏： html快速学习文章标签： html 学习 javascript 前端

本文链接：https://blog.csdn.net/o676448/article/details/127208893

版权

html快速学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML快速学习

一. 介绍
二. 快速入门
三. 基础标签
- 案例：公司简介
四. 图片、音频、视频标签
五. 超链接标签
- - 超链接标签
六. 列表标签
七. 表格标签
八. 布局标签
九. 表单标签

一. 介绍

HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有很多网页
在这里插入图片描述

这些都是网页展示出来的效果。而HTML也有专业的解释

HTML(HyperText Markup Language)：超文本标记语言

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。
标记语言：由标签构成的语言之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成。我们在浏览器页面右键可以查看页面的源代码，如下

可以看到如下内容，就是由一个一个的标签组成的

这些标签不像XML那样可以自定义，HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析，然后展示出对应的效果。例如我们想在浏览器上展示出图片就需要使用预定义的 img 标签；想展示可以点击的链接的效果就可以使用预定义的a 标签等。

W3C标准

W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：
- 结构：对应的是 HTML 语言
- 表现：对应的是 CSS 语言
- 行为：对应的是 JavaScript 语言
HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果。

二. 快速入门

需求：编写如下图效果的页面:
在这里插入图片描述

要实现这个页面，我们需要从以下三步进行实现

新建文本文件，后缀名改为 .html
页面文件的后缀名是 .html，所以需要该后缀名
编写 HTML 结构标签
HTML 是由一个一个的标签组成的，但是它也用于表示结构的标签

html标签是根标签，下面有 head 标签和 body 标签这两个子标签。而 head 标签的 title 子标签是用来定义页面标题名称的，它定义的内容会展示在浏览器的标题位置，如下图红框标记

body 标签的内容会被展示在内容区中，如下图红框标记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>菜徐琨</title>
	</head>
	<body>
		<p>鸡你太美，哎呦~你干嘛，树枝666</p>
	</body>
</html>

在访问其他网站页面时会看到字体颜色是五颜六色的，我们可以该字体颜色吗？当然可以了
font 标签就可以使用，该标签有一个 color 属性可以设置字体颜色

如：就是将文字设置成了红颜色。那么我们只需要将需要变成红色的文字放在标签体部分就可以了，如下：

总结：

HTML 文件以.htm或.html为扩展名
HTML 结构标签
HTML 标签不区分大小写
如上案例中的 font 写成 Font 也是一样可以展示出对应的效果的。
HTML 标签属性值单双引皆可
如上案例中的color属性值使用双引号也是可以的。
HTML 语法松散
比如 font 标签不加结束标签也是可以展示出效果的。但是建议同学们在写的时候还是不要这样做，严格按照要求去写

三. 基础标签

基础标签就是一些和文字相关的标签，如下：

标签	描述
<h1> ~ <h6>	定义标题，h1最大，h6最小
<font>	定义文本的字体、字体尺寸、字体颜色
<b>	定义粗体文本
<i>	定义斜体文本
<u>	定义文本下划线
<center>	定义文本居中
<p>	定义段落
<br>	定义折行
<hr>	定义水平线

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
&gt ;	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
		不断行的空白

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<!--页面字符集-->
		<meta charset="utf-8" />
		<!--弹窗标题-->
		<title>菜徐琨</title>
	</head>

	<body>
		<!--定义标题 h1~h6-->
		<h1>标题1~h1</h1>
		<h2>标题2~h2</h2>
		<h3>标题3~h3</h3>
		<h4>标题4~h4</h4>
		<h5>标题5~h5</h5>
		<h6>标题6~h6</h6>
		<!--水平标签-->
		<hr />
		<!--段落标签 p-->
		<p>
			<!--字体标签(类型，尺寸，大小)-->
			<font face="仿宋" size="3" color="red">鸡你太美，哎呦~你干嘛，树枝666</font>
			<!--换行标签-->
			<br />
			<!--加粗，斜体，下划线-->
			<b>菜</b>
			<i>徐</i>
			<u>坤</u>
		</p>
		<!--文本居中-->
		<center>时长两年半</center>
	</body>
</html>

案例：公司简介

案例如图：
在这里插入图片描述
具体代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>公司简介</h1>
<hr color="yellow" />
<p>
<font color="red">传智教育</font>(股票代码 003032)，隶属江苏传智播客教育科技股份有限公司，注册资本4亿元，是第一个实现A股IPO的教育企业，
公司致力于培养高精尖数字化人才，主要培养人工智能、python+大数据开发、智能制造、软件、互联网、区块链等数字化专业人才及数据分析、网络营销、新媒体等数字化应用人才。
公司由一批拥有10年以上开发管理经验，且来自互联网或研究机构的IT精英组成，负责研究、开发教学模式和课程内容。
公司具有完善的课程研发体系，一直走在整个行业发展的前端，在行业内竖立起了良好的品质口碑。
</p>
<p>
民族振兴靠人才，中华民族正处于伟大复兴之路上，要赢得国际竞争，需要拥有大量的科技人才，我们将肩负起民族使命，在三尺讲台诲人不倦
著书立说，为科技行业培养出大量的优秀人才，促进民族伟大复兴！我们的使命是：<b>为中华民族伟大复兴而讲课，为千万学生少走弯路而著书。</b>
</p>
<p>
探索教育之路，长途漫漫。传智教育希望可以通过自己的努力，寻找出一条更符合人类自然成长规律的教育之路，建立起一个新的教育生态环境，让中国的家长和孩子们在现有的教育体系之外，
再多一些选择的机会。因此“<b>探索教育本源，开辟教育新生态</b>”便成为了所有传智人为之奋斗的终极愿景，也是所有传智人共同努力的目标。
为此，15年来，传智人不曾有一丝懈怠，相信在传智人的不懈努力下，大道不远，终在脚下。
</p>
<hr color="yellow" />

<center><font color="darkgray">江苏传智播客教育科技股份有限公司<font><br /></center>
<center><font color="darkgray">版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882<font></center>
	</body>
</html>

四. 图片、音频、视频标签

标签	描述
<img>	定义图片
<audio>	定义音频
<video>	定义视频

img：定义图片
src：规定显示图像的 URL（统一资源定位符）
height：定义图像的高度
width：定义图像的宽度
audio：定义音频。支持的音频格式：MP3、WAV、OGG
src：规定音频的 URL
controls：显示播放控件
video：定义视频。支持的音频格式：MP4, WebM、OGG
src：规定视频的 URL
controls：显示播放控件

尺寸单位：
height属性和width属性有两种设置方式：

像素：单位是px
百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

资源路径：
图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径。此处的图片，音频，视频就称为资源。资源路径有如下两种设置方式：

绝对路径：完整路径
这里的绝对路径是网络中的绝对路径。格式为：协议://ip地址:端口号/资源名称。
如：

<img src="https://th.bing.com/th/id/R33674725d9ae34f86e3835ae30b20afe?
rik=Pb3C9e5%2b%2b3a9Vw&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f2
0180626%2f4c8157d07c14a30fd76f9bc110b1314e.jpg&ehk=9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2b
a14T0%3d&risl=&pid=ImgRaw" width="300" height="400">

相对路径：相对位置关系
- 找页面和其他资源的相对路径。
  ./ 表示当前路径
  ../ 表示上一级路径
  ../../ 表示上两级路径
- 如模块目录结构如下

<!--在该页面找a.jpg，就需要先回到上一级目录，该级目录有img目录，进入该目录就可以找到 a.jpg图片-->
<!--          <img src="../img/a.jpg" width="300" height="400">               -->
<!--该页面和aa.jpg 是在同一级下，所以可以直接写 图片的名称，也可以写成 ./aa.jpg-->
<!--          <img src="aa.jpg" width="300" height="400">               -->


<img src="../img/a.jpg" width="300" height="400">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>

在浏览器展示的效果如下：
在这里插入图片描述

五. 超链接标签

超链接标签

标签	描述
<a>	定义超链接，用于链接到另一个资源

href：指定访问资源的URL
target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--在当前页打开-->
		<a href="https://www.csdn.net/" target="_self">CSDN</a>
		
		<!--在空白页打开-->
		<a href="https://www.csdn.net/" target="_blank">CSDN</a>
	</body>
</html>

如图演示：
在这里插入图片描述

六. 列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项

type：符号类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--有序列表-->
		<ol type="I">
			<li>菜</li>
			<li>徐</li>
			<li>坤</li>
		</ol>
		<!--无序列表-->
		<ul>
			<li>时长两年半</li>
			<li>唱跳</li>
			<li>rap</li>
		</ul>
	</body>
</html>

七. 表格标签

标签	描述
<table>	定义表格
<tr>	定义行
<td>	定义单元格
<th>	定义表头单元格

table：设置符号的类型
table：定义表格
- width：宽度
  - border：边框
  - cellpadding：定义内容和单元格的距离
  - cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
  - bgcolor：背景色
  - align：对齐方式
- tr：定义行
  - bgcolor：背景色
  - align：对齐方式
- td：定义单元格
  - colspan：合并列
  - rowspan：合并行
- th：定义表头单元格
- < caption >：表格标题

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格标签</title>
	</head>
	<body>
		<table border="1" align="center">
			<tr align="center">
				<th>id</th>
				<th>name</th>
				<th>sex</th>
				<th>address</th>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>菜徐琨</td>
				<td>26</td>
				<td>鸡村</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>鸡哥</td>
				<td>8</td>
				<td>篮球村</td>
			</tr>
			
			<tr align="center">
				<td colspan="2">2</td>
				<td>8</td>
				<td>篮球村</td>
			</tr>
			<tr align="center">
				<td>3</td>
				<td>鸡哥3</td>
				<td>9</td>
				<td>篮球村3</td>
			</tr>
			<tr align="center">
				<td rowspan="2">4</td>
				<td>鸡哥4</td>
				<td>10</td>
				<td>篮球村4</td>
			</tr>
			<tr align="center">
				<td>鸡哥5</td>
				<td>11</td>
				<td>篮球村5</td>
			</tr>
		</table>
	</body>
</html>

八. 布局标签

标签	描述
<div>	定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页
<span>	用于组合行内元素。

这两个标签，一般都是和css结合到一块使用来实现页面的布局。
div 标签在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div>我是div</div>
  <div>我是div</div>
  <span>我是span</span>
  <span>我是span</span>
</body>
</html>

在这里插入图片描述

九. 表单标签

表单标签效果大家其实都不陌生，像登陆页面、注册页面等都是表单。
在这里插入图片描述

像这样的表单就是用来采集用户输入的数据，然后将数据发送到服务端，服务端会对数据库进行操作，比如注册就是将数据保存到数据库中，而登陆就是根据用户名和密码进行数据库的查询操作。

1. 表单标签概述

表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

标签	描述
<form>	定义表单
<input>	定义表单项，通过type属性控制输入形式
<label>	为表单项定义标注
<select>	定义下拉列表
<option>	定义下拉列表的列表项
<textarea>	定义文本域

form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。如下图就是不同的表单项标签展示出来的效果。
在这里插入图片描述

2. form标签属性

action：规定当提交表单时向何处发送表单数据，该属性值就是URL以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
method ：规定用于发送表单数据的方式
method取值有如下两种：
- get：默认值。如果不设置method属性则默认就是该值请求参数会拼接在URL后边url的长度有限制 4KB
- post(安全)：浏览器会将数据放到http请求消息体中请求参数无限制的

3. 代码演示

由于表单标签在页面上没有任何展示的效果，所以在演示的过程是会先使用 input 这个表单项标签展示输入框效果。
代码如下：
在这里插入图片描述

从效果可以看到页面有一个输入框，用户可以在数据框中输入自己想输入的内容，点击提交按钮以后会将数据发送到服务端，当然现在肯定不能实现。现在我们可以将 form 标签的 action 属性值设置为 # ，将其将数据提交到当前页面。还需要注意一点，要想提交数据， input 输入框必须设置 name 属性。
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="#">
			<input type="text" name="name" />
			<input type="button" value="提交"/>
		</form>
	</body>
</html>

在这里插入图片描述

当在form表单标签中添加method属性时候，属性值为postt时更安全

从上图可以看出数据并没有拼接到 URL 后，那怎么看提交的数据呢？我们可以使用浏览器的开发者工具来查看

按照如上步骤操作能看到如下页面

重新提交数据后，可以看到提交的数据，如下图

3. 表单项标签

表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：

< input >：表单项，通过type属性控制输入形式
input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样

type 取值	描述
text	默认值。定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮

：定义下拉列表，定义列表项
如下图就是下拉列表的效果
< textarea >：文本域
如下图就是文本域效果。它可以输入多行文本，而 input 数据框只能输入一行文本。

注意：

以上标签项的内容要想提交，必须得定义 name 属性。
每一个标签都有id属性，id属性值是唯一的标识。
单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

代码演示：

<!DOCTYPE html>
<html lang="en">

	<head>
	
		<meta charset="UTF-8">
		<title>Title</title>
	</head>

	<body>
	
		<form action="#" method="post">
			<input type="hidden" name="id" value="123">
			<label for="username">用户名：</label>
			<input type="text" name="username" id="username"><br>
			<label for="password">密码：</label>
			<input type="password" name="password" id="password"><br>    性别：
			<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
			<input type="radio" name="gender" value="2" id="female"> <label for="female">女
</label>
			<br>    爱好：
			<input type="checkbox" name="hobby" value="1"> 旅游
			<input type="checkbox" name="hobby" value="2"> 电影
			<input type="checkbox" name="hobby" value="3"> 游戏
			<br>    头像：
			<input type="file"><br>    城市:
			<select name="city">
			
				<option>北京</option>
			
				<option value="shanghai">上海</option>
			
				<option>广州</option>
				</select>
			<br>    个人描述：
			<textarea cols="20" rows="5" name="desc"></textarea>
			<br>
			<br>
			<input type="submit" value="免费注册">
			<input type="reset" value="重置">
			<input type="button" value="一个按钮">
		</form>
	</body>

</html>

在浏览器的效果如下：
在这里插入图片描述

发热的嘤嘤怪(2003计科胜胜同学)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML快速学习

HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有很多网页这些都是网页展示出来的效果。而HTML也有专业的解释需求：编写如下图效果的页面:要实现这个页面，我们需要从以下三步进行实现在访问其他网站页面时会看到字体颜色是五颜六色的，我们可以该字体颜色吗？当然可以了font 标签就可以使用，该标签有一个 color 属性可以设置字体颜色基础标签就是一些和文字相关的标签，如下：案例：公司简介案例如图：具体代码演示：四. 图片
复制链接

扫一扫