HTML

最新推荐文章于 2025-05-23 12:22:46 发布

冬、不眠的夜

最新推荐文章于 2025-05-23 12:22:46 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zsx2541577860/article/details/89738495

本文介绍Web网页开发，包括B/S、C/S交互模式，浏览器、服务器、协议的作用及相关产品。还详细讲解HTML，如超文本标记语言概念、标签分类与使用，常用标签在head和body中的应用，以及HTML表单控件的分类和属性。

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

一、 Web -网页开发
1. 网页是基于浏览器的应用程序
B/S : Browser/Server 浏览器与服务器交互模式
C/S ：Client/Server 客户端与服务器交互
2. 组成
1. 浏览器
1. 代替用户发请求（用户代理）
2. 解析数据并呈现给用户
2. 服务器
1. 存储数据
2. 处理并响应请求
3. 协议
通信协议，规范数据在传输过程中以何种形式传递
http(s) : HyperText Transfer Protocal
超文本传输协议
3. 产品
1. 浏览器
Chrome - Google
IE / Edge - Microsoft
Safari - Apple
FireFox - Mozilla
Opera - Opera
引擎：
渲染引擎：关系整个页面的渲染
JS引擎：对JS代码的处理
2. 服务器
Apache
Tomcat
IIS - Internet Information Service
Nginx
二、 HTML介绍
1. 超文本标记语言（HyperText Markup Language）
是浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容
2. 标签
也称为标记或元素，标记内容
语法：标签以<>为标志，标签名不区分大小写（建议小写）
分类：
双标签：有开始有结束，成对出现
单标签：只有开始标签，没有结束标签
3. 使用
1. 网页文件都以.html 或 .htm 为后缀
2. 添加网页基本结构
<!doctype html> //文档类型声明
//文档开始
//文档头部
网页标题
//字符编码

//文档主体

			</body>
		</html>//文档结束
	3. 标签嵌套
			在双标签中嵌套添加其他标签，称为标签嵌套
			1. 外层元素称为父元素，内层元素称为子元素
			2. 多层嵌套中，外层元素称为祖先元素，内层元素称为后代元素
				(祖先元素) (祖先/父元素)
				html  ->			head ->			title
								  (直接子元素)		(间接子元素)
			3. 兄弟元素，同级元素之间称为兄弟关系
					head  body 兄弟关系
					meta  title兄弟关系
	4. 单标签与标签属性
		1. 标签的闭合以 / 为标志，单标签只有开始没有结束，可以书写为 ：
			<meta>
			<meta/> 手动在末尾添加/表示闭合
		2. 标签属性
			由属性名和属性值组成，属性值使用"" / ''表示，书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果
			同一个标签中可以添加几组标签属性，使用空格间隔
			示例 ：
				<meta charset="utf-8">
				<img src="" width="" height="">
	5. HTML语法规范
		1. 标签名不区分大小写
				<html> <HTML> <Html> 建议全小写
		2. 双标签如果缺少闭合，不报错，自动添加闭合标签
		3. 标签名书写有误，不报错，对标签的解析会出现问题
		4. 适当缩进和注释增加代码的可读性
			注释 ：
				<!-- 注释内容 -->
			注意 ：注释不能嵌套使用

三、常用标签
1.head中常用标签
字符集设置，网页标题设置，选项卡图标设置
2.body中常用标签
1）~ 4）见代码02-fontTags.html
1）标题
2）段落
3）普通文本
4）格式标签
5）图片与超链接（见03-img.html）
1.图片

默认按照原始尺寸显示
标签属性：
width/height:手动调整图片大小，取像素值，如果某个方向缺省，图片会等比例拉伸。
title:设置图片标题，鼠标悬停在图片上方时显示
alt:设置图片加载失败时的提示文本
2.超链接
通过用户点击，能够跳转至其他的资源文件
百度
标签属性：
href 必填，设置目标文件的URL
target 设置目标文件的打开方式，默认为_self,在当前窗口打开；可设置为_blank表示新建窗口打开
特殊取值：
href="" 为空会造成页面刷新
href="#" 不刷新页面,但是修改当前页面的URL
href=“javascript:void(0)” 阻止超链接默认的跳转行为，可以自定义添加
6）容器标签

用于页面结构的划分，结合CSS实现网页基本结构和布局
7）列表
1.有序列表（ordered list）

list item 列表项
list item 列表项
list item 列表项

2.无序列表（unordered list）

list item 列表项
list item 列表项
list item 列表项

3.列表嵌套
在列表中嵌套添加内层列表，常见于下拉菜单。注意使用父子关系的嵌套
例：

8）表格（见05-table.html）
通过结构化的行和单元格显示数据或辅助排版
标签：

:外围结构标签
:table row 表格中的行
:table data 行中的单元格
单元格合并：（见06-colspan.html）
属性只能添加在单元格上
跨列合并：colspan=“3” 包含自身在内合并3个单元格
跨行合并：rowspan=“4” 包含自身在内合并4个单元格
注意：一旦发生单元格合并，删除多余的单元格，保证表格结构
表格行分组标签：
可以将表格中的若干行划分为一组，表示表头，表尾，表格主体。默认情况下，所有的行都会自动加入表格主体中.
表头行分组：
表尾行分组：
表格主体：
th标签的使用：
th与td用法一致，表示单元格，自带加粗与居中效果
9）表单
采集用户信息并且提交给服务器
1.组成：表单元素和表单控件
2.表单元素：
表单负责发送数据

表单控件

标签属性：
action:设置数据的提交地址
method:设置数据的提交方式，默认使用get提交，涉及二进制数据或加密数据必须使用post方式提交
enctype:设置数据传输时的编码类型。默认编码类型对应get方式，将数据转换成字符串以键值对的形式拼接在URL后面，携带传输；涉及二进制数据提交，必须指定post，同时设置编码类型"multipart/form-data".
3.表单控件：
负责收集用户信息或提交功能，重置，普通按钮

一、HTML-表单控件
分类：
1.文本框与密码框

标签属性：
type:指定控件类型，必填
name:设置控件名称，跟随数据一起发送，必填
value:设置或读取控件的值
placeholder:设置输入框的提示文本
maxlength：设置可输入的最大字符数
readonly:设置输入框只读
2.单选按钮和复选按钮
单选钮
复选钮
注意：
1）一组按钮的控件名称必须保持一致
2）必须指定控件的值，最终提交给服务器
3）设置checked表示默认选中
4）“label for id” 实现控件与文本的绑定
3.文件选择框

二进制数据只能通过post方式提交，同时设置编码类型为 “multipart/form-data”
4.下拉选择框（了解）

河北
河南
山东

5.功能按钮
1）提交按钮：
2）重置按钮：
3）普通按钮：需要自定义功能
4）按钮标签：点我，书写位置不同，功能不同。
表单中书写：等价于submit
表单外书写：等价于普通按钮，需要自定义功能