HTML入门+小练习

最新推荐文章于 2024-09-29 16:04:50 发布
最新推荐文章于 2024-09-29 16:04:50 发布
阅读量1.1k 收藏 25
点赞数 2
分类专栏： html 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l2489754250/article/details/129717250
版权

这里写目录标题

了解网页组成

在这里插入图片描述

环境和工具软件

安装sublime Text 3

基础了解

一个完整的网页通常由以下组成部分：

  • DOCTYPE声明：指定网页使用的HTML版本，通常是
  • HTML标签：定义网页的根元素，位于DOCTYPE声明之后。
  • Head标签：包含网页的元数据，如标题、关键字和描述等信息。
  • Meta标签：提供关于网页的信息，如字符集、作者、搜索引擎优化等
  • Body标签：包含网页的主要内容，如文本、图片、视频和音频等。

常用标签

在这里插入图片描述

字体标签

<font></font>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
这是没有用font修饰的字体
<font size="3" face="隶书" color="blue" >
这是用font修饰的字体，字体大小是1-7(size)，这个是3，可以设置type(face),颜色(color)
</font>
</body>
</html>

运行结果：
在这里插入图片描述

段落标签

<p>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
这是没有用P的字符串
这是我的下一段
<p>这是使用p的字符串</p>
</body>
</html>

运行结果：

在这里插入图片描述

<br>换段不换行，换段有段间接，换行没有

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
这是没有用P的字符串
这是我的下一段
<p>这是使用<br>br的字符串</p>
<p>这是没有使用br的
</body>
</html>

运行结果：
在这里插入图片描述

<!–…–>注释标签

<!--这是一段注释,给开发人员看-->

标题标签

<h?>…</h?> 标题 大小1-6

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<h1>这是一个h1标签</h1>
<h2>这是一个h2标签</h2>
</body>
</html>

运行结果：
在这里插入图片描述

图片标签

<img src = “path” alt = "给用户提示 height= width= "/>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<img src="E:\89f37298915b4c01b13ab48877144f3d.png" alt="没有找到图的地址">
</font>
</body>
</html>

运行结果：
在这里插入图片描述

如果地址错误

运行结果：

在这里插入图片描述

表格设计

HTML的表格是一种用于展示数据的标记语言，
它使用表格行（<tr>）和表格列（<td>）来排列和显示数据。
表格通常用于网页上的数据展示，例如产品价格，时间表，排名列表等。

下面是一个简单的HTML表格示例：
<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>20</td>
  </tr>
</table>

运行结果：
在这里插入图片描述

  • <table> 元素：定义了一个表格。
  • <tr> 元素：定义了一个表格中的一行。
  • <th>元素：定义了一个表头单元格，通常会加粗并居中显示。
  • <td> 元素：定义了一个数据单元格。
  • <caption>元素：定义了一个标题
  • colspan （td）属性：定义了一个单元格要跨越的列数。
  • rowspan（td） 属性：定义了一个单元格要跨越的行数。
  • border（tr） 属性：定义了表格的边框
  • width（tr） 属性：定义了表格的宽
HTML的表格是一种用于展示数据的标记语言，
它使用表格行（<tr>）和表格列（<td>）来排列和显示数据。表格通常用于网页上的数据展示，
例如产品价格，时间表，排名列表等。

下面是一个简单的HTML表格示例：
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<table border="1" width="600px">
	<caption>这是一个标题</caption>
  <tr>
    <td colspan="2">姓名与学号</td>
    <td colspan="1">年龄</td>
  </tr>
  <tr>
    <td>小明</td>
    <td>2021402075</td>
    <td>20</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>2021402074</td>
    <td>21</td>
  </tr>
</table>
</body>
</html>

运行结果：
在这里插入图片描述

写出来练习：
在这里插入图片描述

<table border="1" width="600px">
	<caption>商品库存表</caption>
  <tr>
    <th>商品类别</th>
   	<th>商品名称</th>
   	<th>单位</th>
   	<th>数量</th>
  </tr>
  <tr>
    <td rowspan="2">家电类</td>
    <td>冰箱</td>
    <td>台</td>
    <td>520</td>
  </tr>
  <tr>
    <td>洗衣机</td>
    <td>台</td>
    <td>13</td>
  </tr>
  <tr>
    <td>辅料</td>
    <td>插线板</td>
    <td>台</td>
    <td>14</td>
  </tr>
  <tr>
  	<td colspan="4">备注</td>
  </tr>
</table>
</body>
</html>

运行结果：
在这里插入图片描述

规范介绍

在这里插入图片描述

超链接框架设计

HTML中的超链接框架设计是指如何创建链接，让用户可以通过点击文本、图像等元素跳转到其他页面或文档。

超链接的基本语法是：
<a href="URL">链接文本</a>

其中，href 属性指定链接的目标地址，可以是一个网址（http:// 或 https:// 开头）、一个本地文件的相对路径（如 ./folder/file.html）或一个锚点（# 加上锚点名称）。链接文本是用户可见的文本，点击它可以触发跳转。
除了基本语法外，HTML还提供了一些其他的超链接框架，如下：
在新窗口中打开链接：通过设置 target=“_blank”，可以让链接在新的浏览器窗口或标签页中打开，而不是覆盖当前页面。例如：

<a href="http://example.com" target="_blank">打开示例网站</a>

可以运行下面代码观察

<body>
	<a href="https://www.baidu.com/home">这是一个百度链接，覆盖当前窗口</a>
	<a href="https://img-blog.csdnimg.cn/052fecd5e4c14b75ac9f3a68b2f233ec.png" target="_blank">这是一个图片链接,并打开新的窗口</a>
<\body>

邮件链接：可以使用 mailto: 协议创建一个邮件链接，点击链接后会自动打开默认邮件客户端，填好收件人地址。例如：

<a href="mailto:hello@example.com">发送邮件</a>

图像链接：和文本链接类似，可以给图像添加超链接，点击图像可以跳转。例如：

<a href="http://example.com"><img src="example.png" alt="示例图像"></a>
注意，在使用图像链接时，需要将 img 标签放在 a 标签中，以便创建链接。

锚点链接：可以使用 # 符号后面跟随锚点名称来创建一个锚点链接，点击链接后会跳转到当前页面中指定名称的锚点处。

<a href="#section1">跳转到第一章</a>...
<h2 id="section1">第一章</h2>

以上是 HTML 中常见的超链接框架设计，通过它们可以创建各种不同的链接。

表单设计 form

HTML中的表单是一种允许用户输入数据并将其提交到服务器的交互式元素。表单通常包含一个或多个输入字段和一个提交按钮，用户可以在输入字段中输入数据，然后点击提交按钮将数据发送到服务器。

以下是一个简单的HTML表单的示例：
<form>  
<label for="name">Name:</label>  
<input type="text" id="name" name="name"><br><br>  
<label for="email">Email:</label>  
<input type="email" id="email" name="email"><br><br>  
<input type="submit" value="Submit">
</form>

在上面的代码中:

  • <form> 元素定义了一个表单，其中包含两个输入字段和一个提交按钮。
  • <label> 元素用于标识输入字段，for属性与对应的输入字段的 id 属性相对应，以便用户单击标签时，将焦点转移到相应的输入字段。
  • <input>元素是输入字段的实际元素，type 属性指定了输入字段的类型，例如 text 或 email。
  • <br> 元素用于在输入字段之间创建换行。
  • <input> 元素是提交按钮，其 type 属性设置为submit。当用户单击提交按钮时，表单将被提交到服务器，并执行相应的操作，例如保存数据到数据库。

name和id的区别

在HTML中，name和id都是用于标识元素的属性。它们之间的主要区别在于它们的作用和使用场景。
作用
name属性用于向服务器提交表单数据时标识表单字段的名称，以便在后台处理表单数据时进行识别。
id属性用于标识一个唯一的HTML元素，以便在CSS和JavaScript中对该元素进行操作。
使用场景
name属性通常用于表单控件（如文本框、下拉框、单选框和复选框）和表单按钮（如提交按钮和重置按钮）。
id属性可以用于任何HTML元素，包括表单控件、链接、图片等等。

在表单中，除了输入字段和提交按钮外，还有许多其他类型的表单元素，包括：

<select> 元素，用于创建下拉菜单

<textarea> 元素，用于创建多行文本输入字段

<input type=“checkbox”> 和 <input type=“radio”> 元素，用于创建复选框和单选按钮

<input type=“file”> 元素，用于创建文件上传字段

要处理表单提交，可以使用服务器端脚本语言（如PHP或Python）来接收并处理表单数据。在表单中，每个输入字段都有一个 name 属性，该属性定义了该字段在表单中的名称。在服务器端，可以使用该名称来访问提交的数据。
下面是input的可选属性：name,id,value,checked,selected,Python,name
在这里插入图片描述

input的type

  • text: 文本框
  • password: 密码输入栏
  • radio: 单选，name属性用于将单选框分组
  • checkbox: 复选（id一样的可以选多个，checked 列表框默认选项））
  • file: 用于文件的上传
  • select: 列表框，（selected 列表框默认选项）
  • button: 普遍按钮，在当前界面处理，不进后台 name就是button上显示的字
  • submit：当用户单击提交按钮时，表单将被提交到服务器，并执行相应的操作form里面的action后面讲，例如保存数据到数据库。value可以设置submit的值
  • value: 输入（收集，设置）控件的值
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<form>  
<label for="1">文本框</label>
<input type="text" name="文本框" id="1"><br>

<label for="2">密码</label>
<input type="password" name="密码框" id="2"><br>

<label for="3">单选</label>
<input type="radio" name="单选框" id="3">同意
<input type="radio" name="单选框" id="3">不同意<br>

<label for="4">复选框</label>
<input type="checkbox" name="复选框" id="4">加糖
<input type="checkbox" name="复选框" id="4">加珍珠<br>

<label for="5">文件上传</label>
<input type="file" name="文件" id="5"><br>

<label for="cars">选择什么味的奶茶:</label>
  <select id="cars" name="cars">
     <option value="volvo">蜜桃</option>
     <option value="saab">香蕉</option>
     <option value="mercedes" selected="selected">芒果</option>
  </select><br>

<label for="6">提交</label>
<input type="submit" name="提交" id="6">
</form>
</body>
</html>

运行结果
在这里插入图片描述

这些写后面得不到数据应该在input后面在放value属性

<input type="checkbox" name="复选框" id="4" value="加糖">加糖
想上面一样加上value属性才能，让后台知道

隐藏域

隐藏域（）是一种不可见的表单控件，它用于保存表单中的一些数据，但不会在页面上显示出来。通常，隐藏域用于存储需要在后台处理的数据，例如表单的 ID 或状态信息。
总而言之就是一个文本框但是不显示
例如，以下代码创建了一个包含一个隐藏域和一个提交按钮的表单：

<form>
111<input type="hidden" name="form_id" value="123">111
   <input type="submit" value="Submit">
</form>

作用：进行信息传递，不给显示

多行文本框

多行文本框（）是一种 HTML 表单控件，它提供了一个用于输入多行文本的区域。多行文本框通常用于输入大段的文本，例如评论或邮件内容。
使用rows和cols属性来指定文本区域的行数和列数，
在<textarea>标签之间输入默认文本，这样用户进入文本区域时可以看到该文本，例如：

<textarea rows="4" cols="50">
在这里输入文本...
</textarea>

普通列表框

很简单就是<select>里面的一个属性size

<label for="cars">选择什么味的奶茶:</label>
  <select id="cars" name="cars" size="3">
     <option value="volvo">蜜桃</option>
     <option value="saab">香蕉</option>
     <option value="mercedes" selected="selected">芒果</option>
  </select><br>

项目实战

完成下面这个界面，提示没有学CSS可以使用表格来布局
在这里插入图片描述

图片在下面
在这里插入图片描述
答案：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<img src="E:/d.png">
<form>  
<table>
	<tr>
		<td align="right"><label for="user"><font color="blue">请输入用户名：</font></label></td>
		<td><input type="text" id="user"></td>
	</tr>
	<tr>
		<td align="right"><label for="pass">请输入密码：</label></td>
		<td><input type="password" id="pass"></td>
	</tr>
	<tr>
		<td align="right"><label for="pass2">请再次输入密码：</label></td>
		<td><input type="password" id="pass2"></td>
	</tr>
	<tr>
		<td align="right"><label for="sex">性别：</label></td>
		<td><input type="radio" id="sex" name="sex">男
			<input type="radio" id="sex" name="sex">女</td>
	</tr>
	<tr>
		<td align="right"><label for="aihao">兴趣：</label></td>
		<td><input type="checkbox" id="aihao">看书
			<input type="checkbox" id="aihao">跑步
			<input type="checkbox" id="aihao">打球
			<input type="checkbox" id="aihao">看电影</td>
	</tr>
	<tr>
		<td align="right"><label for="birthday">出生年月：</label></td>
		<td><select id="birthday" name="birthday">
     			<option value="2000">2000</option>
     			<option value="2001">2001</option>
     			<option value="2002">2002</option>
     			<option value="2003">2003</option>
     			<option value="2004">2004</option>
     			<option value="2005">2005</option>
     			<option value="2006">2006</option>
     			<option value="2007">2007</option>
     			<option value="2008">2008</option>
     			<option value="2009">2009</option>
     		</select>年
     		<select id="birthday" name="birthday">
     			<option value="1">1</option>
     			<option value="2">2</option>
     			<option value="3">3</option>
     			<option value="4">4</option>
     			<option value="5">5</option>
     			<option value="6">6</option>
     			<option value="7">7</option>
     			<option value="8">8</option>
     			<option value="9">9</option>
     			<option value="10">10</option>
     			<option value="11">11</option>
     			<option value="12">12</option>
     		</select>月
     	</td>
	</tr>
	<tr>
		<td align="right"><label for="Y"><font>输入手机号：</font></label></td>
		<td><input type="text">
			<button>发送验证码</button>
		</td>
	</tr>

	<tr>
		<td align="right"><label for="Y2"><font>输入验证码：</font></label></td>
		<td><input type="text">
			<input type="submit" value="提交注册">
		</td>
	</tr>

	<tr>
		<td align="right"><label for="bei">备注：</label></td>
		<td><textarea rows="4" cols="50">在这里输入文本...</textarea>
		</td>
	</tr>
</table>
</form>
</body>
</html>
HTML练习合集
Sladecousin的博客
04-04 896
【代码】HTML练习合集。
【网页前端设计HTML】HTML练习题（一）
weixin_53597021的博客
07-11 638
二、网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。Presto(Opera前内核) (已废弃)， Opera现已改用Google Chrome的Blink内核。1.网页的形成，网页要依托什么来展示？五大浏览器及其内核是什么？2．如果网页中出现乱码，我们一般使用（ ）来解决。3．下面选项中，属于HTML正确注释方式是（ ）。内核 webkit–>blink。B. //注释内容//默写HTML基本结构。内核：Trident。三、HTML基本结构。
HTML做一个个人博客页面（纯html代码）
最新发布
HTML网页设计
09-29 1026
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
HTML 小练习（静态网页）
weixin_30610755的博客
12-02 1826
js部分做了一些修改css方面没有修改html方面自己做的 参考网址（ http://www.paulineosmont.com/ ）<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Person Website / HR d...
从零开始学WEB前端——HTML实战练习
2401_84434301的博客
04-27 934
项目 1描述项目 1项目 2描述项目 2。
HTML练习题
05-07
这是我自己整理出来的HTML练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
css网页布局小练习，文字案例，小米官网卡片案例
m0_51045721的博客
02-18 1624
1、网页排版 目标效果图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML-简单练习
crraxx的博客
02-24 8803
练习1-李白 要求示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body align = "center"> <h1> 古诗词鉴赏</h1> <hr /> <h2 >静夜思</h2> <a href="
HTML简单练习
海梦初的博客
02-22 1026
前言        近期学习了HTML编程，用表格简单的做了账号登陆与注册的网页练习，可以简单的进行注册界面与登陆界面的来回跳转。 效果如下 代码如下 1、登陆界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </he
简单的HTML练习
XiaoFanMi的博客
10-18 428
实现以下界面: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单的网页</title> </head> <body align="center"> <h1> <font color="red">古诗词欣赏</font> </h1> <hr size
html练习html练习html练习
01-13
html练习 html练习 html练习 html练习 html练习 html练习
html的一些小练习
08-16
html的一些小练习，javascript的一些小应用，
HTML+CSS+JavaScript快速入门+实战演练
01-08
快速入门HTML，你需要了解基本的标签，如`<html>`、`<head>`、`<body>`、`<h1>`至`<h6>`（标题）、`<p>`（段落）、`<a>`（链接）等。此外，还需掌握列表（`<ul>`、`<ol>`和`<li>`）、图像（`<img>`）以及表格（`...
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
这个“Web入门初学者纯静态页面练习”是针对那些刚刚接触Web前端开发的学习者设计的，旨在帮助他们掌握HTML和CSS的基本概念以及布局与浮动的设计技巧。 HTML是网页内容的结构语言，它定义了网页的各个元素，如标题...
(完整word版)HTML5+CSS3从入门到精通自测练习.doc
11-17
HTML5+CSS3从入门到精通自测练习 本资源概括了HTML5和CSS3相关知识点，包括HTML5新特性、基本语法、标签、事件处理、媒体元素、Canvas、SVG、Web Storage、Web Worker、Geolocation、Web Socket等。同时也包含CSS3...
HTML练习
weixin_45454695的博客
10-17 444
这是自己做的一个小练习 1. QQ免费申请 用到了表格嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""&g...
html个人简单练习
min_mmax的博客
08-04 1831
这段时间学习了html基础教程，与书籍相结合，但是实践的较少。 试着用之前学的做一个简单的网页。 今天主要完成了首页页面制作 涉及到导航、链接、图片映射、块级操作、布局、应用音频、表单大约效果就是这样： 刚开始不会调整尺寸，导致会有左右方向的滚动条。 网上搜了搜用<center> 可以使页面居中。就对导航和标题栏进行了居中处理。但是导航栏我现有知识还是不怎么会调整间距，我是手动加了&nbs
HTML基础练习
qq_45021462的博客
07-28 421
HTML基础练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head> <body> <img
微信小程序入门：实现四个网页超链接的HTML练习
资源摘要信息:"微信小程序实训第一天HTML小练习" 知识点一：微信小程序概述 微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序可以在微信内...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值