HTML入门+小练习

最新推荐文章于 2024-09-10 15:12:15 发布
最新推荐文章于 2024-09-10 15:12:15 发布
阅读量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 css 练习素材
01-02
html css 练习素材
HTML练习题
05-07
这是我自己整理出来的HTML练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
从零开始学WEB前端——HTML实战练习
最新发布
2401_87029603的博客
09-10 865
作为一个合格的程序员，熟练的掌握开发工具是必不可少的。这里给大家稍微的讲解一下前端常用的开发工具。VSCode：插件众多，拓展性强；适用于绝大部分前端开发Sublime Text：界面简洁，轻量级启动快速。HBuilder：国产前端开发工具，非常不错的软件，在开发微信小程序和手机APP上非常好用。WebStorm：jetbrains公司旗下的JavaScript开发工具，适合在前端工程化的项目中使用。Dreamweaver：曾经以PS+DW+FW称霸网页领域，号称网页三剑客。
css网页布局小练习，文字案例，小米官网卡片案例
m0_51045721的博客
02-18 1586
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 8532
练习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 1018
前言        近期学习了HTML编程，用表格简单的做了账号登陆与注册的网页练习，可以简单的进行注册界面与登陆界面的来回跳转。 效果如下 代码如下 1、登陆界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </he
简单的HTML练习
XiaoFanMi的博客
10-18 415
实现以下界面: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单的网页</title> </head> <body align="center"> <h1> <font color="red">古诗词欣赏</font> </h1> <hr size
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练习html练习html练习
01-13
html练习 html练习 html练习 html练习 html练习 html练习
html的一些小练习
08-16
html的一些小练习，javascript的一些小应用，
HTML练习
weixin_45454695的博客
10-17 434
这是自己做的一个小练习 1. QQ免费申请 用到了表格嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""&g...
html个人简单练习
min_mmax的博客
08-04 1824
这段时间学习了html基础教程，与书籍相结合，但是实践的较少。 试着用之前学的做一个简单的网页。 今天主要完成了首页页面制作 涉及到导航、链接、图片映射、块级操作、布局、应用音频、表单大约效果就是这样： 刚开始不会调整尺寸，导致会有左右方向的滚动条。 网上搜了搜用<center> 可以使页面居中。就对导航和标题栏进行了居中处理。但是导航栏我现有知识还是不怎么会调整间距，我是手动加了&nbs
HTML基础练习
qq_45021462的博客
07-28 417
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、付费专栏及课程。

余额充值