网页开发：HTML

最新推荐文章于 2024-07-14 10:34:53 发布
最新推荐文章于 2024-07-14 10:34:53 发布
阅读量345 收藏 1
点赞数
分类专栏： 前端开发 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45366970/article/details/110849159
版权

HTML

（一）基本概念

1.定义
HTML是一种超文本标记语言，用于构建网页的基本框架

2.基本格式

<!--HTML5-->
<!DOCTYPE html>
<html lang="zh-CN">
	<!--头标签-->
	<head>
		<meta charset="UTF-8">	<!--字符集-->
		<meta name="author"content="作者"/>
		<meta name="keywords"content="网页关键词"/>
		<meta name="description"content="网页描述"/>
		<title> The first HTML </title>	<!--网页名称-->
		<!--网页图标-->
	</head>
	<!--主体-->
	<body>
	.....
	</body>

(二）常用标签

1.文本相关标签

（1）标题标签

<h1></h1> <!--一级标题，共有六级-->

（2）字体标签

<strong></strong> <!--字体加粗标签-->

<em></em> <!--字体倾斜标签-->

<del></del> <!--添加删除线标签-->

<ins></ins> <!--添加下划线标签-->

（3）图片标签

<img src="图片链接" 属性/>
height="图片高度" 
weight="图片宽度" 
alt="无图片时，显示提示文字" 
title="点击图片，显示文字"

（4）超链接标签

<a href="链接" target="_self(本页面跳转)/_black(空白页面跳转)"></a>
<a href="#锚点"></a> <!--页面内跳转到指定位置-->

例子:

<!--HTML 基本框架与常用标签-->
<!DOCTYPE html> <!--HTML5-->
<html lang="zh-CN">
	<!--头标签-->
	<head>
		<meta charset="UTF-8">	<!--字符集-->
		<meta name="author"content="作者"/>
		<meta name="keywords"content="网页关键词"/>
		<meta name="description"content="网页描述"/>
		<title> The first HTML </title>	<!--网页名称-->
		<!--网页图标-->
		
	</head>
	<!--身体标签-->
	<body>
		<h1> Hello world!</h1> <!--一级标题，共有六级-->
		<h4>文本相关标签</h4>
		<p id="第一段">第一段</p> <!--分段落标签-->
		<p>第二段</p>
		<strong>字体加粗标签</strong> <br/>
		<em>字体倾斜标签</em> <br/>
		<del>添加删除线标签</del> <br/>
		<ins>添加下划线标签</ins> <br/>
		<h4>图片相关标签</h4>
		<img src="images/img.jpg" alt="无图片时，显示提示文字" title="点击图片，显示文字" height="200"/> <!--图片链接+属性-->
		<h4>超文本链接</h4>
		<a href="http://www.baidu.com" target="_black">baidu</a> <!--链接+跳转方式(_self 本页面跳转,_black 空白页面跳转)-->
		<h4>锚点(页面指定位置跳转)</h4>
		<a href=#第一段>跳转到第一段</a>
		<h4>分块标签</h4>
		<div>分大区</div>
		<span>分小区</span>
	</body>
</html>

2.表格标签

<table  属性>
	<!--表头-->
	<thead>
	</thead>
	<!--表格主体-->
	<tbody>
		<!--第一行-->
		<tr> <td>..</td><!--第一列--> <td>..</td><!--第二列--> .. </tr>
		<!--第二行-->
		<tr> <td>..</td><!--第一列--> <td>..</td><!--第二列--> .. </tr>
		...
	</tbody>
</table>

例子

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>table</title>
	</head>
	<body>
		<h4>表格标签</h4>
		<table align="center" width="300" height="300" border="1" cellspacing="0" cellpadding="1"> <!--表格属性 表格位置 表格宽度 表格高度 表格边框 表格单元格之间距离 表格单元格中元素与边框距离-->
		<!--表头-->
		<thead>
			<tr> <th> 姓名 </th> <th> 性别 </th> <th> 链接 </th></tr>
		</thead>
		<!--表格主体-->
		<tbody>
			<tr> <td> 刘德华 </td> <td> 男 </td> <td> <a href="https://baike.baidu.com/item/%E5%88%98%E5%BE%B7%E5%8D%8E/114923?fr=aladdin" target="_black">百度百科</a> </td> </tr>
			<tr> <td> 张学友 </td> <td> 男 </td> <td> <a href="https://baike.baidu.com/item/%E5%BC%A0%E5%AD%A6%E5%8F%8B/141598?fr=aladdin" target="_black">百度百科</a> </td> </tr>
			<tr> <td> 郭富城 </td> <td> 男 </td> <td> <a href="https://baike.baidu.com/item/%E9%83%AD%E5%AF%8C%E5%9F%8E/149106?fr=aladdin" target="_black">百度百科</a> </td> </tr>
			<tr> <td> 黎明 </td> <td> 男 </td> <td> <a href="https://baike.baidu.com/item/%E9%BB%8E%E6%98%8E/6681?fr=aladdin" target="_black">百度百科</a> </td> </tr>
		</tbody>
		</table>
		
		<h4>合并单元格</h4> <!--合并单元格：行rowspan=“单元格个数"/列colspan="单元格个数"合并,删除多余单元格-->
		<table align="center" width="300" height="300" border="1" cellspacing="0" cellpadding="1">
			<thead>
			</thead>
			<tbody>
				<tr> <td rowspan="2"> </td> <td colspan="2"> </td> </tr>
				<tr> <td> </td> <td> </td> </tr>
				<tr> <td> </td> <td> </td> <td> </td> </tr>
			</tbody>
		</table>
	</body>
</html>

3.列表标签

<!--无序列表-->
<ul>
	<li>无序列表1</li>
	<li>无序列表2</li>
	<li>无序列表3</li>
</ul>

<!--有序列表-->
<ol>
	<li>无序列表1</li>
	<li>无序列表2</li>
	<li>无序列表3</li>
</ol>

<!--自定义列表-->
<dl>
	<dt>列表</dt>
	<dd>列表解释1</dd>
	<dd>列表解释2</dd>
	<dd>列表解释3</dd>
</dl>

4.表单标签

（1）input

<input 属性>
常见属性
type="类型"
 (1)text 文本
 (2)password 密码
 (3)radio 单选框(圆形)
 (4)checkbox 单选框(方形)
 (5)submit 提交表单
name="性质"
value="默认值"
...

(2)select

<select>
	<option></option>
	<option></option>
	<option></option>
	..
</select>

（3）textarea

<textarea></textarea>

例子

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	
	<body>
		<h4>青春不常在,抓紧谈恋爱</h4>
		<table>
			<thead>
			<thead>
			
			<tbody>
				<!--第一行-->
				<tr>
					<td>性别</td>
					<td>
					<input type="radio" name="sex" id="nan" ><label for="nan">男<label>
					<input type="radio" name="sex" id="nv" ><label for="nv">女<label>
					</td>
				</tr>
				
				<!--第二行-->
				<tr>
					<td>生日 </td>
					<td>
						<select>
							<option>--请选择年--</option>
						</select>
						
						<select>
							<option>--请选择月--</option>
						</select>
						
						<select>
						<option>--请选择日--</option>
						</select>
					</td>
				</tr>
				
				<!--第三行-->
				<tr>
					<td>所在地区</td>
					<td><input type="text" value="北京思密达"></td>
				</tr>
				
				<!--第四行-->
				<tr>
					<td>婚姻状况</td>
					<td>
						<input type="radio" name="marri">未婚
						<input type="radio" name="marri">已婚
						<input type="radio" name="marri">离婚 
					</td>
				</tr>
				
				<!--第五行-->
				<tr>
					<td>学历</td>
					<td><input type="text" value="幼儿园"></td>
				</tr>
				
				<!--第六行-->
				<tr>
					<td>喜欢的类型</td>
					<td>
						<input type="checkbox" name="lovetype">妩媚的
						<input type="checkbox" name="lovetype">可爱的
						<input type="checkbox" name="lovetype">小鲜肉
						<input type="checkbox" name="lovetype">老腊肉
						<input type="checkbox" name="lovetype">都喜欢
					</td>
				</tr>
				
				<!--第七行-->
				<tr>
					<td>自我介绍</td>
					<td><textarea>自我介绍</textarea></td>
				</tr>
				
				<!--第八行-->
				<tr>
					<td></td>
					<td><input type="submit" value="免费注册"></td>
				</tr>
				
				<!--第九行-->
				<tr>
					<td></td>
					<td><input type="checkbox">我同意注册条款和会员加入标准</td>
				</tr>
				
				<!--第十行-->
				<tr>
					<td></td>
					<td><a href="" target="_black">我是会员,立即登录</a></td>
				</tr>
				
				<!--第十一行-->
				<tr>
					<td></td>
					<td>
						<h4>我承诺</h4>
						<ul>
							<li>年满18，单身</li>
							<li>抱着严肃的态度</li>
							<li>真诚寻找另一半</li>
						</ul>
					</td>
				</tr>
			<tbody>
		</table>
	</body>
<html>

（三）总结

1.
以上就是HTML的大致基本内容，HTML只是搭建一个网页的框架，真正的要网页更加好看和可以用于后台交互，还需要学习CCS和JaveScript。

2.
遇到各标签的属性时，不会的要多查查

TUTU-Jack
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 实现简易ATM 取款机操作(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 86
JavaScript 实现简易ATM 取款机操作(附完整源码)
使用html语言编写收银系统,蓝色简洁样式html5店铺收银系统网页模板
weixin_42388716的博客
05-31 1897
模板描述：html5店铺收银系统。蓝色简洁样式html5店铺收银系统网页模板html模板下载代码结构1. 引入CSS2. 引入JS3. HTML代码 交接班 新增会员 销售单据 帮助 系统设置 所有功能会员名称：jdy系...
ATM移动终端html代码,js实现简易ATM功能
weixin_36368404的博客
06-10 743
本文实例为大家分享了js实现简易ATM功能的具体代码，供大家参考，具体内容如下案例描述程序根据输入的序号执行相应的业务处理逻辑 :1.存款 2.取款 3.查看余额 4.取卡如果不输入或者错误输入则弹窗提示:你的输入的业务序号有误,请重新输入!里面现存金额 123 元。如果存款，就用输入的存款金额加现存的金额, 之后弹出现有余额的提示框如果取款，就减去取的钱数，之后弹出现有余额的提示框,如果取款的金...
php网页源码学生请假考勤管理系统mysql数据库web结构html布局计算机软件工程
qq_251836457的博客
12-17 2285
一、源码特点 PHP学生请假考勤管理系统是一套完善的web设计系统，对理解php编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。开发环境为PHP APACHE，数据库为mysql5.0，使用php语言开发。 php网页源码学生请假考勤管理系统mysql数据库web结构html布局-管理软件文档类资源-CSDN下载一、源码特点PHP学生请假考勤管理系统是一套完善的web设计系统，对理解php编程开发语言有帮助更多下载资源、学习资料请访问CSDN下载频道.https://...
基于java+swing的员工出差报销管理系统(java+swing+Mysql+lw)
java管理系统
04-06 448
基于java+swing的员工出差报销管理系统(java+swing+Mysql+lw) 项目名称：基于java swing的员工出差报销管理系统 涉及技术：java、java swing、mysql 涉及环境：eclipse（已经配置swing插件，没有的话，购买后会得到配置好的eclipse）、数据可视化工具Navicat 系统功能：完成员工出差申请以及出差完成后的出差报销申请审批流程，涉及角色有员工、部门经理、总经理、财务，财务角色可以进行excel数据的导入导出以及可视化报销数据的查看。 项目特点（
delphi 开发网页利器：DeWeb
01-08
delphi 开发网页利器：DeWeb，可以直接将Delphi程序快速转换为网页应用的工具！使用DeWeb, 开发者不需要学习HTML、JavaScript、Java、PHP、ASP、C#等新知识，用Delphi搞定一切。DeWeb开发的网页支持所有客户端，包括...
HTML静态网页作业
02-15
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它是互联网上应用最广泛的语言，也是构建静态网页的基础。在“HTML静态网页作业”中，我们可以深入探讨以下几个关键知识点： 1. **HTML基本结构**...
Licorne:网页HTML独角兽
03-15
HTML（HyperText Markup Language）是网页开发的基础，用于定义网页的结构和内容。然而，随着Web技术的发展，HTML5引入了许多新的元素和功能，以满足更复杂的设计需求。Licorne很可能就是利用这些新特性，为开发者...
易开发的网页开发系统
08-21
【易开发的网页开发系统】是一款专为简化网页制作流程而设计的开发工具，它旨在降低网页开发的技术门槛，让不熟悉复杂编程语言的用户也能快速构建和编辑网页。这款系统可能包含了一些核心功能，例如可视化编辑器、...
软件开发日志网页模板
01-18
3. **html**：这是一个HTML文件，很可能就是软件开发日志网页模板的主体部分。这个文件包含了网页的结构和内容，开发者可以直接在浏览器中打开查看，或者使用文本编辑器进行编辑和自定义。 在使用这个模板时，...
网页版ATM系统
06-17
开发环境：VS2013 开发平台：Windows8.1 开发所使用数据库: ACCESS 2010
ATM介面網頁化-軟工期末project
05-04
軟體工程課程的期末project 用網頁的方式將ATM介面實體化 配合先前課程模擬整個軟體開發流程
JAVAWEB练习，模拟ATM网页版
12-23
JAVAWEB练习，模拟ATM网页版
HTML-简易ATM机
czswydsg的博客
06-11 1441
ATM.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ATM</title> <script src="ATM1.js"></script> <style> div{ width: 300px; height: 200px; margin: 0 auto; b
实现一个简单的网页模拟ATM机
wg_style的博客
09-22 841
业务需求： 假定卡内初始余额为100元。 初始化页面提示。 用户输入1表示向卡内存钱，弹出新的输入窗口，输入存入金额后，显示存入金额后卡内余额。 用户输入2表示向卡内取钱，弹出新的输入窗口，输入取出金额后，显示取出金额后卡内余额。 用户输入3表示显示卡内余额。 用户输入4表示退出程序。 用户输入除以上四种数字之外的其他内容时，提示，输入错误，请重新输入！ 金额是全局变量，存入取出实时变化。 <!DOCTYPE html> <html> <head> <titl
完整版银行ATM机的实现
qq_42254419的博客
03-23 1218
本文章是模拟银行ATM机，全程手工代码。 代码： 数据库连接及查询设计：（我用的是SQL SERVER2014，具体的数据库名字什么的你们还是要改成自己的） 数据库我就不上传了，具体我定义了6个表，截图如下： Eclipse代码布局： （1）JDBC（连接数据库） package com.mwq.dao.dao; import java.sql.Connection; ...
用js写一个简单的ATM机
ygdwb的博客
05-08 1411
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
html 关闭信息窗口
最新发布
cuisidong1997的博客
07-14 339
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
掌握静态网页开发：HTML、JavaScript与CSS
第2版的第2章专注于静态网页开发技术，这是构建和设计互联网上静态内容的核心技能。静态网页不涉及服务器端脚本处理，而是由浏览器直接解释和呈现，主要技术包括HTML、JavaScript和CSS。 HTML（HyperText Markup ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值