泰州网站建设服务公司,脚上起小水泡很痒是怎么回事,网站代更新,十大跨境电商公司排名目录
1. 什么是HTML
2. 什么是CSS ?
3. 基础标签 样式
3.1 新浪新闻-标题实现
3.1.1 标题排版
3.1.1.1 分析
3.1.1.2 标签
3.1.1.3 实现
3.1.2 标题样式
3.1.2.1 CSS引入方式
3.1.2.2 颜色表示
3.1.2.3 标题字体颜色
3.1.2.4 CSS选择器
3.1.2.5 发布时间字…目录
1. 什么是HTML
2. 什么是CSS ?
3. 基础标签 样式
3.1 新浪新闻-标题实现
3.1.1 标题排版
3.1.1.1 分析
3.1.1.2 标签
3.1.1.3 实现
3.1.2 标题样式
3.1.2.1 CSS引入方式
3.1.2.2 颜色表示
3.1.2.3 标题字体颜色
3.1.2.4 CSS选择器
3.1.2.5 发布时间字体颜色
3.1.3 超链接
3.1.3.1 介绍
3.1.3.2 实现
3.2 新浪新闻-正文实现
3.2.1 正文排版
3.2.1.1 分析
3.2.1.2 标签
3.2.1.3 实现
3.2.2 页面布局
3.2.2.1 盒子模型
3.2.2.2 布局标签
3.2.2.3 盒子模型代码
3.2.2.3 布局实现
4. 表格标签
5 表单标签
5.1 表单
5.1.1 介绍
5.1.2 演示
5.1.3 注意事项
5.2 表单项
5.2.1 介绍
5.2.2 演示
6. 文档查阅 1. 什么是HTML HTML: HyperText Markup Language超文本标记语言。 超文本超越了文本的限制比普通文本更强大。除了文字信息还可以定义图片、音频、视频等内容。 标记语言由标签构成的语言 HTML标签都是预定义好的。例如使用 h1 标签展示标题使用a展示超链接使用img展示图片video展示视频。 HTML代码直接在浏览器中运行HTML标签由浏览器解析。 下面展示的是一段html代码经过浏览器解析呈现的效果如右图所示 2. 什么是CSS ? CSS: Cascading Style Sheet层叠样式表用于控制页面的样式表现。 下面展示的是一段 html代码 及 CSS样式 经过浏览器解析呈现的效果如右图所示 3. 基础标签 样式
那我们在讲解HTML的常见基础标签 及 CSS的基本样式时我们就以 新浪新闻页面 为例来进行讲解这样大家不仅能够知道 常见标签及样式的作用还能够知道具体的应用场景。
新浪新闻的具体页面效果如下 原始页面网址https://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml 而对于这个新浪新闻的页面来说核心内容分为两个部分如下 新浪新闻-标题部分 新浪新闻-正文部分 3.1 新浪新闻-标题实现
3.1.1 标题排版
3.1.1.1 分析
1). 第一部分是一张图片需要用到HTML中的图片标签 img 来实现。
2). 第二部分是一个标题需要用到HTML中的标题标签 h1 ... h6来实现。
3). 第三部分有两条水平分割线需要用到HTML中的 hr 标签来定义水平分割线。
3.1.1.2 标签
1). 图片标签 img A. 图片标签: img
B. 常见属性: src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)备注: 一般width 和 height 我们只会指定一个另外一个会自动的等比例缩放。C. 路径书写方式:绝对路径:1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.pngimg srcC:\Users\Administrator\Desktop\HTML\img\news_logo.png
2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.pngimg srchttps://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png相对路径:./ : 当前目录 , ./ 可以省略的../: 上一级目录 2). 标题标签 h 系列 A. 标题标签: h1 - h6h1111111111111/h1h2111111111111/h2h3111111111111/h3h4111111111111/h4h5111111111111/h5h6111111111111/h6B. 效果 : h1为一级标题字体也是最大的 h6为六级标题字体是最小的。 3). 水平分页线标签 hr
3.1.1.3 实现
1). 打开VsCode选择左侧最底部的 资源管理器然后选择打开文件夹选择打开桌面的 HTML 文件夹
2). 将资料中提供的 图片、音频、视频 文件夹的这三个文件夹里面是图片、音视频素材复制到 HTML 文件夹中。 3). 在VsCode中创建一个新的 html 文件文件的后缀名设置为 .html 4). html 文件创建好之后在其中输入 然后直接回车就可以生成 HTML 的基础结构标签 5). 编写标题排版的核心代码 !-- 文档类型为HTML --
!DOCTYPE html
html langen
head!-- 字符集为UTF-8 --meta charsetUTF-8!-- 设置浏览器兼容性 --meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈中国底气 新思想夯实大国粮仓/title
/head
body!-- img标签: src: 图片资源路径width: 宽度(px, 像素 ; % , 相对于父元素的百分比)height: 高度(px, 像素 ; % , 相对于父元素的百分比)img srcimg/news_logo.png width80%
路径书写方式:绝对路径:1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.pngimg srcC:\Users\Administrator\Desktop\HTML\img\news_logo.png
2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.pngimg srchttps://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png相对路径:./ : 当前目录 , ./ 可以省略的../: 上一级目录--img srcimg/news_logo.png 新浪政务 正文
h1焦点访谈中国底气 新思想夯实大国粮仓/h1hr2023年03月02日 21:50 央视网hr
/body
/html 3.1.2 标题样式
新浪新闻的标题部分的基本排版我们已经完成了然后大家会看到我们编写的一级标题默认字体颜色为纯黑色。 而原始的新浪新闻页面的新闻标题字体并不是纯黑色而是灰黑色 那接下来我们就要来设置这个字体的颜色。 而要设置这个字体的颜色我们就需要通过CSS样式来控制 。
那在HTML的文件中我们如何来编写CSS样式呢此时就涉及到CSS的三种引入方式。 3.1.2.1 CSS引入方式
具体有3种引入方式语法如下表格所示
名称语法描述示例行内样式在标签内使用style属性属性值是css属性键值对h1 stylexxx:xxx;中国新闻网/h1内嵌样式定义style标签在标签内部定义css样式style h1 {...} /style外联样式定义link标签通过href属性引入外部css文件link relstylesheet hrefcss/news.css
对于上述3种引入方式企业开发的使用情况如下 内联样式会出现大量的代码冗余不方便后期的维护所以不常用。 内部样式通过定义css选择器让样式作用于当前页面的指定的标签上。 外部样式html和css实现了完全的分离企业开发常用方式。 3.1.2.2 颜色表示
在前端程序开发中颜色的表示方式常见的有如下三种
表示方式表示含义取值关键字预定义的颜色名red、green、blue...rgb表示法红绿蓝三原色每项取值范围0-255rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)十六进制表示法#开头将数字转换成十六进制表示#000000、#ff0000、#cccccc简写#000、#ccc 3.1.2.3 标题字体颜色 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title焦X访谈XXXX/title!-- 方式二: 内嵌样式 --styleh1 {/* color: red; *//* color: rgb(0, 0, 255); */color: #4D4F53;}/style
!-- 方式三: 外联样式 --!-- link relstylesheet hrefcss/news.css --
/head
bodyimg srcimg/news_logo.png XXXX 正文
!-- 方式一: 行内样式 --!-- h1 stylecolor: red;焦X访谈XXX/h1 --h1焦X访谈XXXX/h1
hr2023年03月02日 21:50 XXXhr
/body
/html 备注: 要想拾取某一个网页中的颜色我们可以借助于浏览器的拾色器插件来完成。【拾色器插件的安装参照资料中提供的文档即可】 3.1.2.4 CSS选择器
顾名思义选择器是选取需设置样式的元素标签但是我们根据业务场景不同选择的标签的需求也是多种多样的所以选择器有很多种因为我们是做后台开发的所以对于css选择器我们只学习最基本的3种。
选择器通用语法如下 选择器名 {css样式名css样式值;css样式名css样式值;
} 我们需要学习的3种选择器是元素选择器id选择器class选择器语法以及作用如下
1.元素标签选择器 选择器的名字必须是标签的名字 作用选择器中的样式会作用于所有同名的标签上 元素名称 {css样式名:css样式值
} 例子如下 div{color: red;} 2.id选择器: 选择器的名字前面需要加上# 作用选择器中的样式会作用于指定id的标签上而且有且只有一个标签由于id是唯一的 #id属性值 {css样式名:css样式值
} 例子如下 #did {color: blue;
} 3.类选择器 选择器的名字前面需要加上 . 作用选择器中的样式会作用于所有class的属性值和该名字一样的标签上可以是多个 .class属性值 {css样式名:css样式值
} 例子如下 .cls{color: green;} 优先级
id选择器#类选择器.标签选择器 3.1.2.5 发布时间字体颜色 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title焦X访谈XXXX/titlestyleh1 {color: #4D4F53;}/* 元素选择器 *//* span {color: red;} *//* 类选择器 *//* .cls {color: green;} *//* ID选择器 */#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}/style
/head
bodyimg srcimg/news_logo.png XXXX 正文h1焦X访谈XXXX/h1hrspan classcls idtime2023年03月02日 21:50/span span classcls央视网/spanhr/body
/html 上述我们还使用了一个css的属性 font-size , 用来设置字体的大小。 但是需要注意在设置字体的大小时单位px不能省略否则不生效。
3.1.3 超链接 在新浪新闻的标题部分当我们点击顶部的 XXXX浏览器将自动在当前窗口访问XXXX首页这个资源http://gov.sina.com.cn/ 当我们点击新闻发布时间之后的 央视网浏览器将会自动打开一个新的标签页然后在新的标签页中访问XXX中的该新闻资源 https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml
那接下来我们就来完善新闻标题部分的这个功能那此时呢我们就需要用到HTML中的超链接的标签 。 3.1.3.1 介绍 标签: a href... target...央视网/a 属性: href: 指定资源访问的url target: 指定在何处打开资源链接 _self: 默认值在当前页面打开 _blank: 在空白页面打开 3.1.3.2 实现 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title焦X访谈XXXX/titlestyleh1 {color: #4D4F53;}#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 , 去除掉 超链接 下面默认的下划线 */}/style
/head
bodyimg srcimg/news_logo.png a hrefhttp://gov.sina.com.cn/ target_selfXXXX/a 正文h1焦X访谈XXXX/h1hrspan idtime2023年03月02日 21:50/span span a hrefhttps://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml target_blankXXX/a/spanhr/body
/html 浏览器打开此页面我们可以看到最终效果超链接的字体以及默认的下划线通过css样式已经调整好了 3.2 新浪新闻-正文实现
3.2.1 正文排版
3.2.1.1 分析 整个正文部分的排版主要分为这么四个部分
1). 视频 (当前这种新闻页面,可能也会存在音频)
2). 文字段落
3). 字体加粗
4). 图片 3.2.1.2 标签
1). 视频、音频标签 视频标签: video 属性: src: 规定视频的url controls: 显示播放控件 width: 播放器的宽度 height: 播放器的高度 音频标签: audio 属性: src: 规定音频的url controls: 显示播放控件 2). 段落标签 换行标签: br 注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签 段落标签: p 如: p 这是一个段落 /p 3). 文本格式标签
效果标签标签(强调)加粗bstrong倾斜iem下划线uins删除线sdel
前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果是没有强调语义的。 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时还带有强调语义。 3.2.1.3 实现 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title焦X访谈XXXX/titlestyleh1 {color: #4D4F53;}#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}p {text-indent: 35px; /* 设置首行缩进 */line-height: 40px; /* 设置行高 */}#plast {text-align: right; /* 对齐方式 */}/style
/head
body!-- 标题 --img srcimg/news_logo.png a hrefhttp://gov.sina.com.cn/ target_self新浪政务/a 正文h1焦X访谈XXXX/h1hrspan idtime2023年03月02日 21:50/spanspana hrefhttps://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml target_blank央视网/a/spanhr!-- 正文 --!-- 视频 --video srcvideo/1.mp4 controls width950px/video!-- 音频 --!-- audio srcaudio/1.mp3 controls/audio --pstrongXXX消息/strong XXXX)/ppXXXX/pimg srcimg/1.jpgpXXXX/pimg srcimg/2.jpgpXXXX/pp idplastXXXX XXX/p
/body
/html 在上述的正文排版实现中还用到了几个CSS属性 text-indent: 设置段落的首行缩进 line-height: 设置行高 text-align: 设置对齐方式, 可取值为 left / center / right 注意事项: 在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符nbsp来生成空格如果需要多个空格就使用多次占位符。 那在HTML中除了空格占位符以外还有一些其他的占位符(了解, 只需要知道空格的占位符写法即可)如下 显示结果描述占位符空格nbsp;小于号lt;大于号gt;和号amp;引号quot;撇号apos; 3.2.2 页面布局
目前新闻页面的基本排版我们都已经完成了但是大家会看到无论是标题部分还是正文部分都是铺满了整个浏览器。 而我们再来看看新浪新闻的原始页面我们会看到新闻网页内容都是居中展示的左边、右边都是一定的边距的。 那接下来呢我们就需要按照这个效果来完成页面布局。 而要想完成这样一个页面布局我们就需要介绍一下CSS中的盒子模型 。 3.2.2.1 盒子模型 盒子页面中所有的元素标签都可以看做是一个 盒子由盒子将页面中的元素包含在一个矩形区域内通过盒子的视角更方便的进行页面布局 盒子模型组成内容区域content、内边距区域padding、边框区域border、外边距区域margin CSS盒子模型其实和日常生活中的包装盒是非常类似的就比如 盒子的大小其实就包括三个部分 border、padding、content而margin外边距是不包括在盒子之内的。 3.2.2.2 布局标签 布局标签实际开发网页中会大量频繁的使用 div 和 span 这两个没有语义的布局标签。 标签div span 特点 div标签 一行只显示一个独占一行 宽度默认是父元素的宽度高度默认由内容撑开 可以设置宽高width、height span标签 一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高width、height 测试 bodydivA A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A /divdivA A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A /divspanA A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A /spanspanA A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A /span
/body 浏览器打开后的效果:
1). div会独占一行默认宽度为父元素 body 的宽度 2). span一行会显示多个用来组合行内元素默认宽度为内容撑开的宽度 3.2.2.3 盒子模型代码
代码如下: !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title盒子模型/titlestylediv {width: 200px; /* 宽度 */height: 200px; /* 高度 */box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */}/style
/headbodydivA A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A /div/body
/html 代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距) 我们也可以通过浏览器的开发者工具清晰的看到这个盒子以及每一个部分的大小 3.2.2.3 布局实现
在实现新闻页面的布局时我们需要做两部操作 第一步需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来方便通过css设置内容占用的宽度比如65%。 第二步通过css为该div设置外边距左右的外边距分别为17.5%上下外边距靠边展示即可为0%。 具体的代码实现如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title焦X访谈XXXXX/titlestyleh1 {color: #4D4F53;}#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}p {text-indent: 35px; /* 设置首行缩进 */line-height: 40px; /* 设置行高 */}#plast {text-align: right; /* 对齐方式 */}#center {width: 65%;/* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上 右 下 左 */margin: 0 auto;}/style
/head
bodydiv idcenter!-- 标题 --img srcimg/news_logo.png a hrefhttp://gov.sina.com.cn/ target_self新浪政务/a 正文h1焦X访谈XXXX/h1hrspan idtime2023年03月02日 21:50/spanspana hrefhttps://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml target_blankXXX/a/spanhr!-- 正文 --!-- 视频 --video srcvideo/1.mp4 controls width950px/video!-- 音频 --!-- audio srcaudio/1.mp3 controls/audio --pstrongXXX消息/strong XXXX/ppXXXX/pimg srcimg/1.jpgpXXXX/pimg srcimg/2.jpgpXXXX/pp idplastXXXX XXX/p /div
/body
/html 浏览器打开此页面最终效果如下 4. 表格标签
场景在网页中以表格行、列形式整齐展示数据我们在一些管理类的系统中会看到数据通常都是以表格的形式呈现出来的比如班级表、学生表、课程表、成绩表等等。 标签 table : 用于定义整个表格, 可以包裹多个 tr 常用属性如下 border规定表格边框的宽度 width规定表格的宽度 cellspacing: 规定单元之间的空间 tr : 表格的行可以包裹多个 td td : 表格单元格(普通)可以包裹内容 , 如果是表头单元格可以替换为 th 演示
代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表格/titlestyletd {text-align: center; /* 单元格内容居中展示 */}/style
/head
bodytable border1px cellspacing0 width600pxtrth序号/thth品牌Logo/thth品牌名称/thth企业名称/th/trtrtd1/tdtd img srcimg/huawei.jpg width100px /tdtd华为/tdtd华为技术有限公司/td/trtrtd2/tdtd img srcimg/alibaba.jpg width100px /tdtd阿里/tdtd阿里巴巴集团控股有限公司/td/tr/table/body
/html 打开浏览器效果如下图所示 整合表格使用 table 标签包裹 , 其中的每一行数据都是一个 tr , 每一行中的每一个单元格都是一个 td , 而如果是表头单元格, 可以使用 th (具有加粗居中展示的效果)。 5 表单标签
5.1 表单
5.1.1 介绍
那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如我们经常在访问网站时出现的登录页面、注册页面、个人信息提交页面其实都是一个一个的表单 。 当我们在这些表单中录入数据之后一点击 提交就会将表单中我们填写的数据采集到并提交 那其实这个数据呢一般会提交到服务端最终保存在数据库中 后面的课程中会讲到。 那其实上述的整个窗口是一个表单而表单是一项一项的这个我们称为表单项 或 表单元素。 表单场景: 表单就是在网页中负责数据采集功能的如注册、登录的表单。 表单标签: form 表单属性: action: 规定表单提交时向何处发送表单数据表单提交的URL。 method: 规定用于发送表单数据的方式常见为 GET、POST。 GET表单数据是拼接在url后面的 如 xxxxxxxxxxx?usernameTomage12url中能携带的表单数据大小是有限制的。 POST 表单数据是在请求体消息体中携带的大小没有限制。 表单项标签: 不同类型的input元素、下拉列表、文本域等。 input: 定义表单项通过type属性控制输入形式 select: 定义下拉列表 textarea: 定义文本域 5.1.2 演示
1). GET方式提交的表单 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单/title
/head
body!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?usernameTomage12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-- form action methodget用户名: input typetext nameusername年龄: input typetext nameageinput typesubmit value提交/form/body
/html 表单编写完毕之后通过浏览器打开此表单然后再表单项中录入值之后点击提交我们会看到表单的数据在url后面提交到服务端格式为?usernameTomage12。 2). POST方式提交表单
将上述的表单提交方式由get改为post !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单/title
/head
body!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?usernameTomage12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-- form action methodpost用户名: input typetext nameusername年龄: input typetext nameageinput typesubmit value提交/form/body
/html 表单编写完毕之后通过浏览器打开此表单然后再表单项中录入值之后点击提交我们会看到表单的数据在url后面提交到服务端格式为?usernameTomage12。 5.1.3 注意事项
表单中的所有表单项要想能够正常的采集数据在提交的时候能提交到服务端表单项必须指定name属性。 否则无法提交该表单项。 用户名: input typetext nameusername 5.2 表单项
5.2.1 介绍
在一个表单中可以存在很多的表单项而虽然表单项的形式各式各样但是表单项的标签其实就只有三个分别是 input: 表单项 , 通过type属性控制输入形式。 type取值描述text默认值定义单行的输入字段password定义密码字段radio定义单选按钮checkbox定义复选框file定义文件上传按钮date/time/datetime-local定义日期/时间/日期时间number定义数字输入框email定义邮件输入框hidden定义隐藏域submit / reset / button定义提交按钮 / 重置按钮 / 可点击按钮 select: 定义下拉列表, option 定义列表项 textarea: 文本域 5.2.2 演示
创建一个新的表单项的html文件具体内容如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单项标签/title
/head
body!-- value: 表单项提交的值 --
form action methodpost姓名: input typetext namename brbr密码: input typepassword namepassword brbr 性别: input typeradio namegender value1 男labelinput typeradio namegender value2 女 /label brbr爱好: labelinput typecheckbox namehobby valuejava java /labellabelinput typecheckbox namehobby valuegame game /labellabelinput typecheckbox namehobby valuesing sing /label brbr图像: input typefile nameimage brbr生日: input typedate namebirthday brbr时间: input typetime nametime brbr日期时间: input typedatetime-local namedatetime brbr邮箱: input typeemail nameemail brbr年龄: input typenumber nameage brbr学历: select namedegreeoption value----------- 请选择 -----------/optionoption value1大专/optionoption value2本科/optionoption value3硕士/optionoption value4博士/option/select brbr描述: textarea namedescription cols30 rows10/textarea brbrinput typehidden nameid value1!-- 表单常见按钮 --input typebutton value按钮input typereset value重置 input typesubmit value提交 br
/form/body
/html 通过浏览器打开上述的表单项html文件最终展示出的表单信息如下 而对于input typehidden是一个隐藏域在表单中并不会显示出来但是在提交表单的时候是会提交到服务端的。 接下来我们就点击提交按钮来提交当前表单看看提交的数据 6. 文档查阅
文档地址: https://www.w3school.com.cn/index.html
