Web-网页开发2HTML使用_webpage2html-CSDN博客

本文链接：https://blog.csdn.net/weixin_44119390/article/details/94403403

Web -网页开发

网页是基于浏览器的应用程序
B/S : Browser/Server 浏览器与服务器交互模式
C/S ：Client/Server 客户端与服务器交互
组成
1. 浏览器
  1. 代替用户发请求（用户代理）
  2. 解析数据并呈现给用户
2. 服务器
  1. 存储数据
  2. 处理并响应请求
3. 协议
  通信协议，规范数据在传输过程中以何种形式传递
  http(s) : HyperText Transfer Protocal
  超文本传输协议
产品
1. 浏览器
  Chrome - Google
  IE / Edge - Microsoft
  Safari - Apple
  FireFox - Mozilla
  Opera - Opera
  引擎：
  渲染引擎：关系整个页面的渲染
  JS引擎：对JS代码的处理
2. 服务器
  Apache
  Tomcat
  IIS - Internet Information Service
  Nginx

HTML介绍

超文本标记语言（HyperText Markup Language）
是浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容
标签
也称为标记或元素，标记内容
语法：标签以<>为标志，标签名不区分大小写（建议小写）
分类：
双标签：有开始有结束，成对出现
单标签：只有开始标签，没有结束标签

使用

网页文件都以.html 或 .htm 为后缀
添加网页基本结构

	<!doctype html> //文档类型声明
	<html> //文档开始
		<head> //文档头部
			<title>网页标题</title>
			<meta charset="utf-8"> //字符编码
		</head>
		<body> //文档主体
			
		</body>
	</html>//文档结束

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

注意 ：注释不能嵌套使用
```

常用标签

head中常用标签
字符集设置，网页标题设置，选项卡图标设置

body中常用标签
1）标题
2）段落
3）普通文本
4）格式标签
5）图片与超链接

图片

默认按照原始尺寸显示
标签属性：
width/height:手动调整图片大小，取像素值，如果某个方向缺省，图片会等比例拉伸。
title:设置图片标题，鼠标悬停在图片上方时显示
alt:设置图片加载失败时的提示文本

超链接
通过用户点击，能够跳转至其他的资源文件

<a href="">百度</a>
	标签属性：
		href 必填，设置目标文件的URL
		target 设置目标文件的打开方式，默认为_self,在当前窗口打开；可设置为_blank表示新建窗口打开
	特殊取值：
		href="" 为空会造成页面刷新
		href="#" 不刷新页面,但是修改当前页面的URL
		href="javascript:void(0)" 阻止超链接默认的跳转行为，可以自定义添加

6）容器标签

	<div></div>用于页面结构的划分，结合CSS实现网页基本结构和布局

7）列表
1.有序列表（ordered list）

  	<ol>
  		<li>list item 列表项</li>
  		<li>list item 列表项</li>
  		<li>list item 列表项</li>
  	</ol>
  	```
  2.无序列表（unordered list）
  	<ul>
  		<li>list item 列表项</li>
  		<li>list item 列表项</li>
  		<li>list item 列表项</li>
  	</ul>
  3.列表嵌套
  	在列表中嵌套添加内层列表，常见于下拉菜单。注意使用父子关系的嵌套
  	例：
  		<li>
  			<ol>
  				<li></li>
  			</ol>
  		</li>
8）表格
  通过结构化的行和单元格显示数据或辅助排版
  标签：
  	<table></table>:外围结构标签
  	<tr></tr>:table row 表格中的行
  	<td></td>:table data 行中的单元格
  单元格合并：
  	属性只能添加在单元格上
  	跨列合并：colspan="3" 包含自身在内合并3个单元格
  	跨行合并：rowspan="4" 包含自身在内合并4个单元格
  	注意：一旦发生单元格合并，删除多余的单元格，保证表格结构
  表格行分组标签：
  	可以将表格中的若干行划分为一组，表示表头，表尾，表格主体。默认情况下，所有的行都会自动加入表格主体中<tbody></tbody>.
  	表头行分组：<thead></thead>
  	表尾行分组：<tfoot></tfoot>
  	表格主体：<tbody></tbody>
  th标签的使用：
  	th与td用法一致，表示单元格，自带加粗与居中效果	
9）表单
  采集用户信息并且提交给服务器
  1.组成：表单元素和表单控件
  2.表单元素：
  	表单负责发送数据
  	<form action="" method="" enctype="">
  		表单控件
  	</form>
  	标签属性：
  		action:设置数据的提交地址
  		method:设置数据的提交方式，默认使用get提交，涉及二进制数据或加密数据必须使用post方式提交
  		enctype:设置数据传输时的编码类型。默认编码类型对应get方式，将数据转换成字符串以键值对的形式拼接在URL后面，携带传输；涉及二进制数据提交，必须指定post，同时设置编码类型"multipart/form-data".
  3.表单控件：
  	负责收集用户信息或提交功能，重置，普通按钮