使用html制作静态网页

最新推荐文章于 2024-08-05 09:23:03 发布
最新推荐文章于 2024-08-05 09:23:03 发布
阅读量3.8k 收藏 12
点赞数 3
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011740475/article/details/38388809
版权

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

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>之间相当于一个容器。

最蓝的海
关注
专栏目录
制作一个简单HTML中华传统文化网页（HTML+CSS）
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
使用HTML和css写静态页面
08-02
作为一个联系的静态页面
HTML5+CSS 静态网页-极米商城
weixin_30647065的博客
03-20 479
需求：用HTML5+CSS渲染做一个极米商城界面 工具：火狐浏览器、谷歌浏览器（IE浏览器次选），HBuilder 试用对象：html5初学者 说明： a：软件HBuilder不需要要配置环境，直接用即可，使用方法和eclipse相似； b：在建立html文件后需要用css去渲染，下面的步骤2、3是同时进行的； c：程序中会使用到许多图标...
HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)（表格布局）
最新发布
weixin_42283461的博客
08-05 970
HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)（表格布局）
HTML语言可以编写静态网页吗,使用html开发静态网页 html静态网页设计大作业
weixin_42635064的博客
05-31 1607
什么是静态web开发(html页面)？什么是静态web开发(html页面)？什么是动态web开发？动态网页技术的发展HTML语言写的html页面动态的web就是运用数据库的web网站静态html怎么调用html页面html 静态页面中引用外部页面没那么方便，主要方法有： 1.使用框架来实现，但是那样占用线程较多，速度慢； 加上它的一些属性可以实现一些透明,无滚动条等具体的效果.大家可以html教程...
HTML网页布局：静态、自适应、流式、响应式
热门推荐
陈小峰（iefreer）的专栏
10-16 2万+
静态即传统Web设计，对于PC设置一个布局，在屏幕宽高
web前端 html+css+javascript游戏网页设计实例 (网页制作课作业)
STU网页设计
10-26 1530
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
使用HTML制作静态网站 中国传统文化 丝绸之路 (学生网页设计作业源码)
08-10
2. **图像处理工具:** 使用Photoshop或其他图像处理软件来处理网页中需要用到的图片素材，确保图片质量的同时，也需确保其格式与大小适合网页使用。 3. **网页开发语言:** HTML5和CSS3是构建现代静态网站的基础，而...
html静态页面源代码 静态网页制作代码【CSS+DIV】
06-27
html静态页面源代码 静态网页制作代码【CSS+DIV】 HTML静态页面(CSS+DIV) 这是期末老师HTML老师布置的。本来要求一个，但我做了三个。 主要是CSS+DIV做的（3个项目）。 对于页面的布局，代码的规格，命名，都很清晰...
一个简单的网页制作期末作业，学生个人html静态网页制作成品代码
08-10
- **技术栈**: 使用了基本的网页开发技术，即HTML、CSS和JavaScript，这三种技术是构建网页的基础。 #### 二、技术细节 - **布局方式**: 使用了DIV+CSS布局方式，这是网页设计中最常见的布局方式之一。通过这种方式...
网上花店网页代码 html静态花店网页设计制作 dw静态鲜花网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
08-10
根据给定文件的信息，我们可以总结出以下几个重要的知识点： ### 知识点一：HTML5期末考核大...通过这个项目，学生们不仅可以掌握基本的网页设计技能，还能了解如何使用不同的工具和技术来增强页面的功能性和美观性。
html+css编写的简单静态页面.rar
10-14
使用html、css、div、float、ul写的一个简单的静态页面
HTML5网站设计模板(静态)
09-26
简单易懂html、css、js网页。个人主页模板 。适合初学者学习的一个自己写的html页面，帮助大家了解html标签，帮助初学者学习CSS样式布局
html5静态页面
02-19
初步了解html5 购 物 车0 件 今日特卖 母婴特卖 全球精选 海外直邮 的士站 正品保障 商品分类
html静态页面示例
08-25
html html静态页面示例 静态页面示例
静态网页经典实例(HTML)
08-26
好东西！经典！ 贵在精，所以说好，还是多余！ 友情提示：关于不知道怎么下载的同志： 1。点击进入下载地址列表 2.再次点击一个绿色的立即下载 欢迎下次在来，请留下您宝贵的的留言，增加你的积分！ 谢谢合作！
使用HTML制作静态宠物网站——蓝色版爱宠之家(HTML+CSS)
08-10
- **图像处理工具**: 如Photoshop，用于处理和优化网页使用的图片。 ### 6. 代码组织 - **HTML文件**: 包含网站的结构信息，通常有一个主页面(index.html)和其他次级页面。 - **CSS文件**: 定义了网站的整体样式和...
03-使用html静态页面展示执行效果
weixin_30735391的博客
02-10 95
使用工作流框架可以做什么事情？写代码呗，没那么简单。 转载于:https://www.cnblogs.com/ZHONGZHENHUA/p/6387805.html
HTML5期末大作业：旅游网页设计与实现——旅游风景区网站HTML+CSS+JavaScript 景点静态网页设计 学生DW静态网页设计
dreamweaver网页设计
11-23 462
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景
轻松入门：静态网页制作教程
制作静态网页是一种基础且重要的网络开发技能，它不涉及服务器端脚本，主要处理静态HTML、CSS和JavaScript内容。本文将逐步教你如何使用Dreamweaver 8这款流行的网页设计工具来创建静态网页。 首先，了解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值