HTML网页制作详解-优快云博客

这篇博客介绍了网页制作的相关概念，包括Dreamwave格式、HTML元素属性，如align和bgcolor，以及超链接的五种形式和target属性的使用。还讲解了img标签的src、alt属性，列表的创建，HTML实体的应用以及表单的基本概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.相关概念

1.格式 dreamwave

中文测试。。。。这里是测试body测试内容。。。 2.标签在body内

双标签标题，加粗，换行 1-6 ---》小

双标签段落，有换行功效

单标签左到右分割符注释

3，元素的属性
给元素提供更多的属性，大部分的元素属性
语法：<标签属性1=参数1 属性2=参数2>
1）align left，right，center
2) bgcolor ，body的属性设置网页的背景色

4,文本元素属性 b 元素内容加粗 br 换行
如果是p标签中间有间隔 i元素，字体倾斜 del元素删除文字 strong 强调一段文字，效果类似 b标签 u元素，下划线 small元素，超小字体 sub 下标 sup 上标
h ₂0
100m ² ruby,拼音，二姐 (er) (jie)，可能部分浏览器不支持。 make 元素加黄色背景

5超链接
5种形式
1，链接外部网站
2，链接本地文件
3，图片链接
4，电子邮件链接打开电子邮件
5，下载文件链接

	<a href="http://www.baidu.com">baidu</a>
	<br><a href="1.html">1111</a>
	<br><a href="1.html"><img src="abc.jpg"></a>
	<br><a href="mailto:123@13.com">contract me</a>
	<br><a href="abc.jpg">下载</a>

上面的方法在打开新网页时，老的网页会关闭
target 属性
_self :当前位置打开默认值
_blank 新窗口中打开
baidu

6 img 单标签
src 图像来源
alt 如果不能正确打开，显示的文字
width, heigh

百分比是相对于网页而言的，高度百分比无效的

7列表
有序列，无序序列
自定义列表
无序列表前面无数字

列表1
列表2
列表3
列表4

有个type属性文字最前面的符号 disc 黑色实心圆 circle 白色空心圆 square 黑色方块有序列，前面有数字

列表1
列表2
列表3
列表4

其中可以放文字，图片，或链接有type属性，设置排序使用什么数字 start 开始值，后面的++； 8 表格表格的构成， table，外框 tr 行 td 列

3行 3列表格的属性 border 边框粗细 th,是tr的属性，列标题，自动居中，加粗 colspan，横向合并单元格，需要整形参数 name 表格的合并 rowspan ,列项合并，整数参数

9 html 实体
用于输出一些特殊的字符
有些特殊的字符不能直接在网页中直接显示的

10，表单传递参数，数据

13，input元素，（输入框）他是表单的一个字属性指定表单中的内容项，比如输入内容的文本框可以指定表单属性，也可以放在表单的外面。 input元素的属性： type，指定输入框的类型，text单行文本，password密码，submit提交按钮， reset，重置按键，button按键，普通的按键需要和特定的时间关联。 image：图片式按键 hidden:隐藏字段，该内容不显示在页面上，提交其他的一些变量。 email: 是一个邮箱类型，新特性，可能支持有差异 required:表示内容必须填写，不然不能提交。 name：名称，输入内容识别名称，传递参数时候的参数名称 value：默认值，输入框默认填入的内容， maxlength，指定最大长度 placeholder,设置提示信息的。

示例代码

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<title>RoyWang's article</title>
	</head>
	<body>
		
		<h1 align = 'center'>环球人物</h1>
		<h2 align = 'right'>-王源说</h2>
		<hr>
		<h4 align = 'center'>待凛冬离去</h4>
		<h4 align = 'center'>雪融青草</h4>
		<h4 align = 'center'>相信一定有新的相逢</h4>
		<h4 align = 'center'>将温暖延续</h4>
		<!--背景色为绿色，roy应援色-->
		<body bgcolor="0xff1234">
		<br>
		
		<!--网页链接-->
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com" target="_blank">百度2窗口</a>
		<!--本地链接-->
		<a href=2.html>进入网页2</a>
		<!--图片；链接-->
		<a href='http://www.baidu.com'><img src = '1.png'></a>
		<!--邮箱链接-->
		<a href="mailto:2637203892@qq.com">我的邮箱</a>
		<!--本地下载-->
		<a href="1.jpg">下载</a>
		<a href="1.rar">下载文件</a>
		<!--disc 黑色实心圆，circle 白色空心圆，square 黑色方块-->
		<!--列表-->
		<ul> 
		<li align = 'center'><img src = "4.jpg" width = "120" height = "120"><img src = "4.jpg" width = "120" height = "120"></li>
		<li align = 'center'><img src = "4.jpg" width = "120" height = "120"><img src = "4.jpg" width = "120" height = "120"></li>
		</ul>
		<!--表格2x3-->
		<!--表格居中-->
		<style>
		table {margin: auto}
		</style>
		<table border = 1>
		     <tr><td><img src = "4.jpg" width = "120" height = "120"></td><td><img src = "4.jpg" width = "120" height = "120"></td></tr>
		     <tr><td><img src = "4.jpg" width = "120" height = "120"></td><td><img src = "4.jpg" width = "120" height = "120"></td></tr>
		</table>
		
        <form action='https://www.baidu.com/' method='get'>
		用户名:<input type ='text' name='user_name' required='required' placeholder='请输入登录用户名'>
		密码:<input type='password' name='user_pass' required='required' placeholder='请输入登录密码'>
		<input type='submit'>
		</form>

	</body>
</html>

结果示例
在这里插入图片描述