HTML的促进作用
HTML是用以合作开发网页的,它是合作开发网页的词汇
HTML的表述
全名HyperText Mark-up Language,LZ77记号词汇
记号是条码
<条码中文名称></条码中文名称> 比如说 <html></html> <h1></h1>等,条码绝大多数都是成对再次出现的。
LZ77 三层涵义:
即使网页中还能有相片、音频、音音频等文本(胜过文档管制)它还能在网页中重定向到另两个网页,与全世界PS3的网页镜像(超镜像文档)HTML的基本上内部结构
<!DOCTYPE html> <html> <head> <meta charset=“UTF-8”> <title>网页副标题</title> </head> <body> 网页表明文本 </body> </html>第二行<!DOCTYPE html>是文件格式新闻稿
用以选定网页所采用的html的版, 这儿新闻稿的是两个html5的文件格式
<html>…</html>条码是合作开发者在说应用程序
整个网页是从<html>这儿开始的,到</html>结束
也是html文件格式的开始和结束条码
<head>…</head>条码用于表述文件格式的头部
是负责对网页进行设置副标题、编码格式以及引入css和js文件的
<body>…</body>条码是编写网页上表明的文本
网页文件的后缀是.html, 两个html文件是两个网页,html文件用编辑器打开表明的是文档,能用文档的方式编辑它,如果用应用程序打开,应用程序会按照条码描述文本将文件渲染成网页
VS Code 安装
VS Code全拼是 Visual Studio Code 是由微软研发的一款免费、开源的跨平台代码编辑器
目前是前端(网页)合作开发采用最多的一款软件合作开发工具
下载网址:
https://code.visualstudio.com/Download选择对应的安装包进行下载:
安装一切默认
VS Code 的插件安装
Chinese(Simplified) Language Pack for VS Code 中文汉化包open in browser 右击在应用程序打开html常用的HTML条码
1 条码不区分大小写,但是推荐采用小写
2 根据条码的书写形式,条码分为双条码(闭合条码)和单条码(空条码) 2.1 双条码是指由开始条码和结束条码组成的一对条码,这种条码允许嵌套和承载文本,比如说: div条码 2.2 单条码是两个条码组成,没有条码内容, 比如说: img条码
条码的采用形式
成对再次出现的条码条码的嵌套单个再次出现的条码带属性的条码列表条码
无序列表条码(ul条码)有序列表条码(ol条码)网页效果
表格条码
<table>条码:表示两个表格
<tr>条码:表示表格中的一行
<td>条码:表示表格中的列
<th>条码:表示表格中的表头
属性设置
border: 1px solid black:设置边框和颜色
border-collapse: collapse:设置边框合并
网页效果
表单条码
表单用于搜集不同类型的用户输入的数据,然后能把用户数据提交到web服务器
<form>条码 表示表单条码,表述整体的表单区域
两个表单中有很多信息组成,比如说 姓名,爱好,地址等,这些文本有很多其他条码来承载
这些条码称为表单元素条码
网页效果
表单提交
表单用于搜集不同类型的用户输入的数据,然后能把用户数据提交到web服务器
action属性 设置表单数据提交地址method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写两种方式的区别:
“GET”方式 : 没有请求体“POST”方式 : 有请求体表单元素属性设置
name: 表单元素的中文名称,用于作为提交表单数据时的参数名value: 表单元素的值,用于作为提交表单数据时参数名所对应的值<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<!–
姓名 type=”text” 表述单行文档输入框
密码 type=”password” 表述密码输入框
性别 type=”radio” 表述单选框
爱好 type=”checkbox” 表述复选框
照片 type=”file” 表述上传文件
个人描述 <textarea></textarea> 表述多行文档输入框
地址 <select></select> 表述下拉列表
提交 type=”submit” 表述提交按钮
重置 type=”reset” 表述重置按钮
按钮 type=”button” 表述两个普通按钮
–>
<form action=”http://192.168.1.106:8080″ method=”POST”>
<label>姓名:</label>
<input type=”text” name=”username” >
<br>
<label>密码:</label>
<input type=”password” name=”password”>
<br>
<label>性别:</label>
<input type=”radio” name=”sex” value=”1″>男
<input type=”radio” name=”sex” value=”0″>女
<br>
<label>爱好:</label>
<input type=”checkbox” name=”like” value=”睡觉”>睡觉
<input type=”checkbox” name=”like” value=”吃饭”>吃饭
<input type=”checkbox” name=”like” value=”打豆豆”>打豆豆
<br>
<label>照片:</label>
<input type=”file” name=”pic”>
<br>
<label>个人描述:</label>
<textarea name=”desc”></textarea>
<br>
<label>地址:</label>
<select name=”addr”>
<option value=”1″>北京</option>
<option value=”2″>上海</option>
<option value=”3″>广州</option>
<option value=”4″>深圳</option>
</select>
<br>
<input type=”submit” value=”提交”>
<input type=”reset” value=”重置”>
<input type=”button” value=”按钮”>
</form>
</body>
</html>
点击提交:
能看到服务器收到了请求报文。