目录
web网页设计
1.什么是web网页?
Web 网页是通过互联网访问的文档,通常由 HTML(超文本标记语言)、CSS(层叠样式表)和 JavaScript 等技术构建而成。
Web 网页具有以下特点:
一、内容呈现
1. 多媒体展示
- 可以包含文本、图像、音频、视频等多种形式的内容,为用户提供丰富的信息和娱乐体验。
- 例如,新闻网页会有文字报道、图片新闻以及相关的视频报道。
2. 动态更新
- 网页内容可以随时更新,保持信息的时效性。新闻网站、博客等经常会发布新的文章和资讯,用户每次访问都可能看到不同的内容。
二、交互性
1. 用户参与
- 用户可以通过表单提交、评论、点赞等方式与网页进行互动。这使得网页不仅仅是信息的展示平台,还成为了用户交流和参与的场所。
- 例如,社交媒体网页允许用户发布动态、评论他人的帖子,进行互动交流。
2. 链接和导航
- 网页之间通过超链接相互连接,用户可以方便地从一个网页跳转到另一个网页,浏览不同的内容。导航栏、菜单等元素帮助用户在网页中快速找到所需的信息。
- 比如,在一个电商网站上,用户可以通过导航栏浏览不同的商品类别,点击商品链接查看详细信息。
三、跨平台访问
1. 多种设备兼容
- 可以在不同的操作系统(如 Windows、Mac、Linux)和设备(如电脑、手机、平板)上通过浏览器访问。
- 随着移动互联网的发展,越来越多的网页采用响应式设计,以适应不同屏幕尺寸的设备。
2. 全球访问性
- 只要有互联网连接,用户可以从世界任何地方访问 Web 网页。这使得信息的传播和共享变得更加便捷和广泛。
- 例如,一个企业的官方网站可以被全球各地的客户访问,了解企业的产品和服务。
2.简单的网页编写
1.格式
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>中文测试。。。。</title>
</head>
<body>
这里是测试body测试内容。。。
</body>
</html>
注意后缀保存为.html
2.标签
在body内
<h1></h1>双标签 标题 ,加粗,换行 1-6 ---》小
<p></p> 双标签 段落,有换行功效
<hr> 单标签 左到右分割符
<!-- -->注释
3,元素的属性
给元素提供更多的属性,大部分的元素属性
语法:<标签 属性1=参数1 属性2=参数2>
1)align left,right,center
2) bgcolor ,body的属性设置网页的背景色
<body bgcolor="0xff1234" bgcolor="0xff1234">
4,文本元素属性
b 元素 <b>内容</b> 加粗
br 换行<br> 如果是p标签中间有间隔
i元素, 字体倾斜<i></i>
del元素 删除文字<del></del>
strong 强调一段文字,效果类似 b标签
u元素,下划线<u></u>
small元素, 超小字体<small></small>
sub 下标<sub></sub>
sup 上标<sup></sup>
<br>h<sub>2</sub>0
<br>100m<sup>2</sup>
ruby,拼音,<ruby>二姐 <rt>(er) (jie)<rt></ruby>,可能部分浏览器不支持。
mark 元素 <mark> </mark> 加黄色背景
5超链接
5种形式
1,链接外部网站<a href="http://www.baidu.com">baidu</a>
2,链接本地文件<br><a href="1.html">1111</a>
3,图片链接<br><a href="1.html"><img src="abc.jpg"></a>
4,电子邮件链接打开电子邮件<br><a href="mailto:123@13.com">contract me</a>
5,下载文件链接<br><a href="abc.jpg">下载</a>
上面的方法在打开新网页时,老的网页会关闭
target 属性
_self :当前位置打开 默认值
_blank 新窗口中打开
<a href="http://www.baidu.com" target="_blank">baidu</a>
6 img 单标签
src 图像来源
alt 如果不能正确打开,显示的文字
width, heigh
<img src="abc.jpg" alt="美女" width="100" height="200">
<img src="abc.jpg" alt="美女" width="50%" height="200%">
百分比是相对于网页而言的, 高度百分比无效的
7列表
有序列,无序序列
自定义列表
1.无序列表 前面无数字
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
有个type属性 文字最前面的符号
disc 黑色实心圆
circle 白色空心圆
square 黑色方块
2.有序列,前面有数字
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
其中可以放文字,图片,或链接
有type属性,设置排序使用什么数字
start 开始值,后面的++;
8 .表格
表格的构成,
table,外框
tr 行
td 列
<table>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
3行 3列
表格的属性
border 边框粗细
th,是tr的属性,列标题,自动居中,加粗
colspan,横向合并单元格,需要 整形参数
<tr><th colspan="3">name</th></tr>
表格的合并
rowspan ,列项合并,整数参数
9 .html 实体
用于输出一些特殊的字符
有些特殊的字符不能直接在网页中直接显示的
10,表单 传递参数,数据
<form></form>
<!-- 表单中重要的字元素 input button -->
<!-- 属性 action,指定表单发送的地址 -->
<!-- 属性 method 发送的方式 get,post -->
<!--get方法 数据会附加到url的后面传递给服务器 默认-->
<!--post,将数据包大包发给服务器,等候服务器来读取 -->
input元素(输入框)他是表单的一个字属性
指定表单中的内容项,比如输入内容的文本框
可以指定表单属性,也可以放在表单的外面。
input元素的属性:
type,指定输入框的类型,text单行文本,password密码,submit提交按钮,
reset,重置按键,button按键,普通的按键需要和特定的时间关联。
image:图片式按键
hidden:隐藏字段,该内容不显示在页面上,提交其他的一些变量。
email: 是一个邮箱类型,新特性,可能支持有差异
required:表示内容必须填写,不然不能提交。
name:名称,输入内容识别名称,传递参数时候的参数名称
value: 默认值,输入框默认填入的内容,
maxlength,指定最大长度
placeholder,设置提示信息的。
更多内容可以去下面网站查找: