HTML基础

2022-11-24 0 1,089

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

选择对应的安装包进行下载:

HTML基础

安装一切默认

HTML基础
HTML基础

VS Code 的插件安装

Chinese(Simplified) Language Pack for VS Code 中文汉化包open in browser 右击在应用程序打开html
HTML基础

常用的HTML条码

1 条码不区分大小写,但是推荐采用小写

2 根据条码的书写形式,条码分为双条码(闭合条码)和单条码(空条码) 2.1 双条码是指由开始条码和结束条码组成的一对条码,这种条码允许嵌套和承载文本,比如说: div条码 2.2 单条码是两个条码组成,没有条码内容, 比如说: img条码

条码的采用形式

成对再次出现的条码条码的嵌套单个再次出现的条码带属性的条码
HTML基础

列表条码

无序列表条码(ul条码)有序列表条码(ol条码)
HTML基础
HTML基础

网页效果

表格条码

<table>条码:表示两个表格

<tr>条码:表示表格中的一行

<td>条码:表示表格中的列

<th>条码:表示表格中的表头

属性设置

border: 1px solid black:设置边框和颜色

border-collapse: collapse:设置边框合并

HTML基础
HTML基础

网页效果

表单条码

表单用于搜集不同类型的用户输入的数据,然后能把用户数据提交到web服务器

<form>条码 表示表单条码,表述整体的表单区域

两个表单中有很多信息组成,比如说 姓名,爱好,地址等,这些文本有很多其他条码来承载

这些条码称为表单元素条码

HTML基础
HTML基础
HTML基础

网页效果

HTML基础

表单提交

表单用于搜集不同类型的用户输入的数据,然后能把用户数据提交到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>

HTML基础

点击提交:

HTML基础

能看到服务器收到了请求报文。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务