使用html制作静态网页

article/2025/9/25 7:25:02

网页主要由三部分组成：分别为结构，表现和行为。

XHTML：可扩展文本标签语言，XHTML是一种基于XML的语言。XHTML是一个扮演者类似HTML角色的XML。 HTML提供了六级标题，分别为<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,<h1>字号最大，<h6>最小。

图像类型

优点

缺点

*.jpg

体积小，比较清晰

有损压缩、画面失真

*.gif

支持Internet标准，支持无损耗压缩和透明度

支持有限的透明度，效果不如别的JPG图像

*.bmp

支持24位颜色深度，兼容性好

不支持压缩，容量大

*.png

最新的图像格式，兼有GIF和JPG的优势

部分浏览器不支持

图片标签：<img>标签，这个标签重要属性src，用于指定图片路径；alt，替代文本，当因为网速较慢，或者路径错误等原因导致图像无法显示时将显示该文本信息，width表示图像的宽度，height表示图像的高度。

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片标签示例</title>
</head>
<body>
<img src="../Pictures/tomcat设置.png" alt="配置信息" width="500" height="300"/>
</body>
</html>

此时浏览器效果为


当图片路径错误时将显示为：

段落标签：<p>段落中的文本</p>，换行<br/>,水平线<hr/>

超链接语法：<a href = "url"  target = "目标窗体位置">链接文本或图像</a>锚链接在名字前面加#

target属性常用的取值有_self和_blank，_self表示在自身窗口中打开超级链接文件，而_blank表示在新窗口中打开目标网页。

超级链接分类

1、页面间链接

2、锚链接

3、功能性链接

首先看锚链接

在要插入锚节点的位置写入

<a name = "about"></a>
然后在需要跳转到锚节点位置定义超链接 

<a href="#about">返回锚节点处</a>

特殊符号

字符实体

空格

&nbsp；

大于号

&gt；

小于号

&lt；

双引号

&quo；t

版权符号(©)

&copy；

HTML文档添加注释方法：<!--注释内容-->

常用规范：1、标签名和属性名必须小写。2、HTML标签必须闭合。3、属性值必须用引号括起来，一般情况下建议试用双引号。4、HTML标签必须正确嵌套。5、属性不能简写。6、必须添加文档类型声明。

列表分为三类：无序列表、有序列表、自定义列表


无序列表语法：                       有序列表标签：

<ul>                                  <ol>

  <li>项目一</li>                       <li>项目一</li>

  <li>项目二</li>                       <li>项目一</li>

  <li>项目三</li>                       <li>项目一</li>

</ul>                                 </ol>

无序标签使用方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片标签示例</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</body>
</html>
有须标签 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片标签示例</title>
</head>
<body>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
</body>
</html>

 表格语法：

使用表格的示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>商品列表</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0">
<tr>
<td>商品名称</td>
<td>价格</td>
<td>生产日期</td>
</tr>
<tr>
<td>海尔洗衣机</td>
<td>1800</td>
<td>2014-8-7</td>
</tr>
<tr>
<td>华为手机</td>
<td>1500</td>
<td>2014-8-5</td>
</tr>
</table>
</body>
</html>

表格跨列：colspan 表格跨行：rowspan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>商品列表</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0">
<tr>
<td>商品名称</td>
<td colspan="2">价格</td>
<!--<td>生产日期</td>-->
</tr>
<tr>
<td>海尔洗衣机</td>
<td>1800</td>
<td>2014-8-7</td>
</tr>
<tr>
<td>华为手机</td>
<td>1500</td>
<td>2014-8-5</td>
</tr>
</table>
</body>
</html>

表单语法：

<from action = "表单提交地址" method = "提交方法"></from>

method的取值一般为get或post

表单中使用input标签收集用户信息。

<input name="元素名称" type="类型" value="值" size="显示宽度"maxlength="字符长度" checked="是否选中"/>

type属性表示表单元素的类型，常用的属性值有：


name属性定义表单元素的名称

value属性指定表单元素的默认值

表单中还可以使用<select>标签创建一个下拉列表

使用<textarea>创建一个多行文本框

text示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本输入框</title>
</head>
<body>
<form action="" method="post" name="myform">
<p>  E-mail：<input name="email" type="text" size="20" /></p>
<p>用户名：<input name="userName" type="text" value="张三" size="20" /></p>
</form>
</body>
</html>
password示例 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>密码输入框</title>
</head>
<body>
<form action="" method="post" name="myform">
<p>E-mail：<input name="email" type="text" size="20" /></p>
<p> 密码：<input name="pwd" type="password"  size="22" /></p>
</form>
</body>
</html>

radio示例 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单选按钮</title>
</head>
<body>
<form action="" method="post" name="myform">
<p>性别：
<input name="sex" type="radio" value="女" />女
<input name="sex" type="radio" value="男" checked="checked"/>男
</p>
</form>
</body>
</html>
checkbox示例 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框</title>
</head>
<body>
<form action="" method="post" name="myform">
<p>课程选择：
<input name="course1" type="checkbox" value="C#" />C#   
<input name="course2" type="checkbox" value="JavaScript" checked="checked"/>JavaScript   
<input name="course3" type="checkbox" value="HTML" />HTML   
<input name="course4" type="checkbox" value="Flash"  checked="checked"/>Flash 
</p>
</form>
</body>
</html>
button示例： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
</head>
<body>
<form action="" method="post" name="myform">
<p>E-mail：<input name="email" type="text"  size="18"/></p>
<p> 密码：<input name="pwd" type="password" /></p>
<p> <input name="btn1" type="submit" value="提交" />
<input name="btn2" type="reset" value="重置" />
<input name="btn3" type="button" value="取消" />
</p>
</form>
</body>
</html>
select示例：

在表单中，使用<select>标签定义一个下拉列表，使用<option>标签定义下拉列表中的选项。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表</title>
</head>
<body>
<form action="" method="post" name="myform">
课程选择：
<select name="course">
<option value="C#">C#</option>
<option value="JavaScript">JavaScript</option>
<option value="HTML" selected="selected">HTML</option>
<option value="Flash">Flash</option>
</select>
</form>
</body>
</html>

textarea示例：

可以通过cols和rows控制多行文本域大小，同时我们不能使用它的value设置它的初始值，它的初始值应当放在<textarea>标签和</textarea>之间。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表</title>
</head>
<body>
<form action="" method="post" name="myform">
<textarea name="content" cols="20" rows="10">欢迎阅读本网站的服务协议.....</textarea>
</form>
</body>
</html>

<div>标签相当于一个容器标签，即<div>和</div>之间相当于一个容器。


http://chatgpt.dhexx.cn/article/q8tUjdYn.shtml

相关文章

静态网站简单制作

静态网站简单制作

制作一个简单的静态网站 总体框架&#xff1a; <html> <frameset rows"20%,80%"><frame src"top.html" noresize scrolling"no" name"top"></frame><frameset cols"30%,70%"><frame src…
阅读更多...
用HTML+CSS+JS搭建一个超简单的静态实用网站页面

用HTML+CSS+JS搭建一个超简单的静态实用网站页面

废话少说先上效果图&#xff0c;查看网站请访问→http://110.41.21.119:16001/ 这是一个超简洁的网页&#xff0c;主要特征有&#xff1a; 头部背景颜色渐变效果&#xff1a; <div class"header"><div class"loader"><span style"--i:…
阅读更多...
静态网页入门讲解，制作属于你自己的网页（一）

静态网页入门讲解，制作属于你自己的网页（一）

写在开始 这个系列教程主要针对完全没有接触过网页制作的萌新小伙伴开设的&#xff0c;如果你有一定的网页知识积累&#xff0c;可以果断关闭&#xff01; 网页前端设计中牵涉的内容太多了&#xff0c;基础教程却比较缺乏&#xff0c;所以博主希望能够通过这样一个系列&#…
阅读更多...
最全静态网页模板网站

最全静态网页模板网站

前言 最近好多人私信我&#xff1a;我学了不久前端&#xff0c;想要用一些项目实战来练练手。那么&#xff0c;我以后将定期更新静态网页实战&#xff0c;专用于提供初学者的练习。 那么这次博客为大家提供一些模板网站&#xff0c;希望初学者借鉴和学习优质资源&#xff1a; …
阅读更多...
搭建静态网页

搭建静态网页

day3作业 请给openlab搭建web网站​ 网站需求&#xff1a;​ 1.基于域名[www.openlab.com](http://www.openlab.com)可以访问网站内容为 welcome to openlab!!!​ 2.给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料和缴费网站&#xff0c;基于[www.openlab.com…
阅读更多...
HTML前端静态网页制作

HTML前端静态网页制作

在制作网页之前&#xff0c;首先先分析网页是那些部分组成&#xff0c;可以从以下的代码看出&#xff0c;分为头部、导航栏、logo部分、文字部分等等这些组成。多的不说&#xff0c;直接上代码&#xff0c;本次静态网页代码分为html和css部分。 <!DOCTYPE html> <htm…
阅读更多...
web前端简单静态网页制作

web前端简单静态网页制作

那么Web页面制作基础&#xff0c;能让你掌握什么呢&#xff1f; 1.掌握Web基础知识。 2.掌握HTML5基础知识。 3.掌握CSS基础知识。 网页设计源代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><…
阅读更多...
HTML+CSS制作的纯静态网页

HTML+CSS制作的纯静态网页

刚学完HTMLCSS&#xff0c;一定要按照自己的想法去制作网页&#xff0c;虽然没有交互&#xff0c;但是可以对前面的知识有一个很大的重用&#xff0c;你的知识框架会更加完美。css基础html是勾勒&#xff0c;css是染色&#xff0c;基础的css学完你会有种想写页面的冲动&#xf…
阅读更多...
游戏网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

游戏网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

&#x1f329;️ 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f482; 作者主页: 【进入主页—&#x1f680;获取更多源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;HTML5网页期末作业 (1000套…
阅读更多...
个人介绍网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

个人介绍网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…
阅读更多...
一个简单的静态网页制作（html+css）

一个简单的静态网页制作（html+css）

这是仿照中国高等教育学生信息网写的一个静态网页&#xff08;参考2020年3月份的&#xff09; 这也是我当时辛辛苦苦写了几天的劳动成果&#xff0c;希望大家可以尊重。 截图如下 下面是主要的代码&#xff1a; <!DOCTYPE html> <html> <head> <meta c…
阅读更多...
html实战-制作静态网页

html实战-制作静态网页

教程视频&#xff1a;http://edu.csdn.net/course/detail/535 从42开始 制作的网页&#xff1a;http://www.cnos.co/ 整体思路&#xff1a; 先布局再CSS控制 骨架搭好了&#xff0c;初始化样式&#xff0c; 后再弄CSS样式。注意&#xff1a;将CSS的样式导入到外部样式表时…
阅读更多...
制作静态网页

制作静态网页

首先进行CSS样式布局&#xff0c;根据样图进行块级标签分布&#xff0c;为每一个块级标签设置颜色以查看布局是否正确&#xff0c;最好是每设置一个块级标签颜色就查看一次是否排布正确&#xff0c;这样可以及时发现问题并解决问题&#xff1b;等到每一块区域都划分完成后&…
阅读更多...
API幂等设计

API幂等设计

API幂等就是在新增或更新数据时&#xff0c;如果多次发起同一个请求&#xff0c;只能产生一个结果。如&#xff1a;同一个订单多次提交&#xff0c;只能在数据库产生一个订单数据。我了解的基于redis实现幂等的有两种方式&#xff1a;基于token和基于请求。 基于token认证 参…
阅读更多...
Mysql实现幂等_过幂等性问题

Mysql实现幂等_过幂等性问题

一、什么是幂等？ 幂等性：多次调用方法或者接口不会改变业务状态，可以保证重复调用的结果和单次调用的结果一致。 二、使用幂等的场景 1、前端重复提交 用户注册，用户创建商品等操作，前端都会提交一些数据给后台服务，后台需要根据用户提交的数据在数据库中创建记录。如果用…
阅读更多...
分布式锁实现业务幂等

分布式锁实现业务幂等

1、前言 现如今很多系统都会基于分布式或微服务思想完成对系统的架构设计。那么在这一个系统中&#xff0c;就会存在若干个微服务&#xff0c;而且服务间也会产生相互通信调用。那么既然产生了服务调用&#xff0c;就必然会存在服务调用延迟或失败的问题。当出现这种问题&…
阅读更多...
幂等性组件

幂等性组件

根据上篇文章改进&#xff0c;并做成springbootstarter&#xff0c;依赖于redisson&#xff0c;如果redission已配置&#xff0c;则该组件可开箱即用 接口防重复提交_King_Kwin的博客-CSDN博客_接口防重复提交 本篇已做了较大的改动&#xff0c;可查看代码 idempotent: 幂等…
阅读更多...
java幂等控制_JAVA幂等性实现

java幂等控制_JAVA幂等性实现

什么是幂等&#xff1a; 贴一张百度百科的图&#xff1a; 简单来说幂等保证了只要调用接口成功,外部多次调用对系统的影响是一致的&#xff0c;也就是一个请求多次重试的问题。 需要考虑幂等的场景&#xff1a; 客户端存在多次提交或者超时重试的情况&#xff1b; 分布式架构中…
阅读更多...
幂等问题

幂等问题

点击↑上方↑蓝色“编了个程”关注我~ 每周至少一篇原创文章 这是本公众号的第 34 篇原创文章 最近比较懒&#xff0c;好几周没写文章了。还是没能坚持每周更新&#xff0c;愧对关注我的读者和自己的flag。。。 不过还好调整了过来&#xff0c;还是会继续坚持周更的。毕竟学习是…
阅读更多...
常见的幂等性解决方案

常见的幂等性解决方案

背景 我们实际系统中有很多操作&#xff0c;是不管做多少次&#xff0c;都应该产生一样的效果或返回一样的结果。 get请求一般没有幂等性需求、delete请求一般也没有幂等性需求&#xff0c;post、update视情况而定例如&#xff1a; 前端重复提交选中的数据&#xff0c;应该后…
阅读更多...
推荐文章

Copyright @ 2022~2023