脚本宝典收集整理的这篇文章主要介绍了HTML笔记,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
名称 | 内核 | 备注 |
---|---|---|
GOOGLE Chrome | chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 webkit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
Firefox | Gecko | 俗称Firefox内核;可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
Safari | WebkIT | Webkit内核;现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)。苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。 |
Edge | Blink | |
IE | Trident | 俗称IE内核;IE、猎豹安全、360极速浏览器、百度浏览器 |
opera | Blink | 现在跟随chrome用blink内核。 |
拓展阅读:
移动端的浏览器内核主要说的是系统内置浏览器的内核。
AndROId手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。
iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的
介绍一下你对浏览器内核的理解?常见的浏览器内核有哪些?
浏览器内核包括两部分,渲染引擎和js引擎。渲染引擎负责读取网页内容,整理讯息,计算网页的显示方式并显示页面;js引擎是解析执行js获取网页的动态效果。 后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。 IE:Trident firefox:Gecko chrome、safari:webkit Opera:Presto Microsoft Edge:EdgeHTML
深度阅读:五大主流浏览器内核的源起以及国内各大浏览器内核总结
Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C 万维网联盟是国际最著名的标准化组织。1994年成立后,至今已发布近百项相关万维网的标准,对万维网发展做出了杰出的贡献。
w3c就类似于现实世界中的联合国。
通过以上浏览器不同内核不同,我们知道他们显示页面或者排版就有些许差异。
遵循web标准可以让不同我们写的页面更标准更统一外,还有许多优点
1、让Web的发展前景更广阔 2、内容能被更广泛的设备访问 3、更容易被搜寻引擎搜索 4、降低网站流量费用 5、使网站更易于维护 6、提高页面浏览速度
构成: 主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
标准 | 说明 | 备注 |
---|---|---|
结构 | 结构用于对网页元素进行整理和分类,咱们主要学的是HTML。 | |
表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS | |
行为 | 行为是指网页模型的定义及交互的编写,咱们主要学的是 Javascript |
理想状态我们的源码: .HTML .css .js
pink老师 一句话说出html作用:
网页是由网页元素组成的 , 这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户了。
所谓超文本,有2层含义:
<img src="timg.jpg" />
门外汉眼中的效果页面
我们要做的html页面
html 总结:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
标签名 | 定义 | 说明 |
---|---|---|
HTML标签 | 页面中最大的标签,我们称为根标签,是文档开始和结束的标记,在它们之间是文档的头部(head)和主体(body); | |
文档的头部 | 定义HTML文档开头部分,内容不会在浏览器窗口显示,包含文档元(meta)数据,配置信息等,是给浏览器看的;注意在head标签中我们必须要设置的标签是title | |
文档的标题 | 让页面拥有一个属于自己的网页标题 | |
文档的主体 | 元素包含可见的网页主体内容;,页面内容 基本都是放到body里面的 | |
<!doctype html> | 文档类型声明 | <!DOCTYPE> 声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。它不是一个html标签只是一个文档声明类型;( 就是告诉浏览器按照HTML5 规范解析页面) |
lang="zh-CN“ | 指定html 语言种类 | zh-CN中文的意思,整个文档的内容以中文为主,如果以英文为主,就写成lang='en' |
charset="UTF-8" | 字符集 | 字符集( Character set))是多个字符的集合。以便计算机能够识别存储各种文字。 在标签内,可以通过标签的 charset属性来规定HTML文档应该使用哪种字符编码;charset常用的值有:GB2312、Big5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符;一般情况下,统一使用UTF-8”编码,尽量统一写成标准的"UTF-8",不要写成"utf-8"或"UTF8"。中文网页需要使用 <meta charset="UTF-8"> 声明编码,否则会出现乱码;有些浏览器是gbk,需手动设置为 <meta charset="gbk"> |
1.html标签是由尖括号包围的关键字,如:<html>,<div>,<span>
等;
2.html标签通常是成对出现,如:<div></div>
,第一个是开始,第二个有斜线的是结束;
3.有些标签是单独呈现的,如:<hr/>、<br/>、<img src="222.png"/>
;
4.标签里面带有若干属性,也有不带的;
白话: 所谓标签语义化,就是指标签的含义。
pink老师 一句话说出语义化目的:
根据标签的语义,在合适的地方给一个最为合理的标签,让结构更清晰。
语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。( 裸奔起来一样好看 )
遵循的原则:先确定语义的HTML ,再选合适的CSS。所以,我们接下来学习html标签,要根据语义去记忆。 HTML网页中任何元素的实现都要依靠HTML标签。
首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。
HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。
排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。
单词缩写: head 头部. 标题 title 文档标题
为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即
标题标签语义: 作为标题使用,并且依据重要性递减
其基本语法格式如下:
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
显示效果如下:
小结 :
单词缩写: paragraph 段落 [ˈpærəgræf] 无须记这个单词
作用语义:
可以把 HTML 文档分割为若干段落
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
<p> 文本内容 </p>
是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。
单词缩写: horizontal 横线 [ˌhɔrəˈzɑntl] 同上
在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,
<hr />是单标签
在网页中显示默认样式的水平线。(基本不用,开发中使用样式border-bottom)
单词缩写: break 打断 ,换行
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签
<br />
这时如果还像在word中直接敲回车键换行就不起作用了。
div span 是没有语义的 是我们网页布局主要的2个盒子 想必你听过 css+div
div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。
span 跨度,跨距;范围
语法格式:
<div> 这是头部 </div> <span>今日价格</span>
他们两个都是盒子,用来装我们网页元素的, 只不过他们有区别,现在我们主要记住使用方法和特点就好了
后面后面讲显示模式的时候,会告诉大家
标签名 | 定义 | 说明 |
---|---|---|
标题标签 | 作为标题使用,并且依据重要性递减 | |
段落标签 | 可以把 HTML 文档分割为若干段落 | |
水平线标签 | 没啥可说的,就是一条线 | |
换行标签 | ||
div标签 | 用来布局的,但是现在一行只能放一个div | |
span标签 | 用来布局的,一行上可以放好多个span |
在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
区别:
b 只是加粗 strong 除了可以加粗还有 强调的意思, 语义更强烈。
剩下的同理...
请同学们重点记住 前两组 加粗 和 倾斜 后面两组没记住回来查
所谓属性就是外在特性 比如 手机的颜色 手机的尺寸 ,总结就是手机的。。
使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸"> </手机>
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
简单解释:
注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。
语法格式:
<!-- 注释语句 --> 快捷键是: ctrl + / 或者 ctrl +shift + /
注释重要性:
pink老师 一句话说出他们:
注释是给人看的,目的是为了更好的解释这部分代码是干啥的, 程序是不执行这个代码的
一般用于简单的描述,如某些状态描述、属性描述等
注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行
推荐:
<!-- Comment Text -->
<div>...</div>
不推荐:
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
标签可定义预格式化的文本。 被包围在标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 ```html此例演示如何使用 pre 标签 对空行和 空格 进行控制**pink老师 一句话说出他们:** > 所谓的预格式化文本就是 ,按照我们预先写好的文字格式来显示页面, 保留空格和换行等。 有了这个标签,里面的文字,会按照我们书写的模式显示,不需要段落和换行标签了。但是,比较少用,因为不好整体控制。 ## 3.6特殊字符 (理解) 一些特殊的符号,我们再html 里面很难或者 不方便直接 使用, 我们此时可以使用下面的替代代码。 <img src="media/zifu.png" /> **虽然有很多,但是我们平时用的比较较少, 大家重点记住 空格 大于号 小于号 就可以了,剩下的回来查阅。** **总结:** 1. 是以**运算符**`&`开头,以**分号运算符**`;`结尾。 2. 他们不是标签,而是符号。 3. HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体 #### 3.6.1团队约定 *推荐:*
more >>
*不推荐:*
more >>
## 3.7 html5发展之路 <img src="media/html5.png" width="600"/> ## 3.8 什么是XHTML XHTML 是更严格更纯净的 HTML 代码。 - XHTML 指**可扩展超文本标签语言**(EXtensible HyperText Markup Language)。 - XHTML 的目标是取代 HTML。 - XHTML 与 HTML 4.01 几乎是相同的。 - XHTML 是更严格更纯净的 HTML 版本。 - XHTML 是作为一种 XML 应用被重新定义的 HTML。 - XHTML 是一个 W3C 标准。 #### 5.7 HTML和 XHTML之间有什么区别? - XHTML 指的是可扩展超文本标记语言 - XHTML 与 HTML 4.01 几乎是相同的 - XHTML 是更严格更纯净的 HTML 版本 - XHTML 是以 XML 应用的方式定义的 HTML - XHTML 是 2001 年 1 月发布的 W3C 推荐标准 - XHTML 得到所有主流浏览器的支持 - XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML,例如它要求标签必须小写,标签必须被正确关闭,标签顺序必须正确排列,对于属性都必须使用双引号等。 # 4.图像 ## 4.1图像标签img (重点) 单词缩写: image 图像 要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签<img />以及和他相关的属性。(它是一个单身狗) 语法如下: ```html <img src="图像URL" />
该语法中src属性用于指定图像文件的路径和文件名,他是img标签的必需属性。
border 后面我们会用css来做,这里童鞋们就记住这个border 单词就好了
**注意: **
- 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
- 采取 键值对 的格式 key="value" 的格式
比如:
正常的<br /> <img src="cz.jpg" width="300" height="300" /><br /> 带有边框的<br /> <img src="cz.jpg" width="300" height="300" border="3" /><br /> 有提示文本的<br /> <img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br /> 有替换文本的<br /> <img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
重点掌握点:
[ ] 请说出 图像标签那个属性是必须要写的?src
[ ] 请说出 图像标签中 alt 和 title 属性区别?
alt:图片不能显示时的替换文本;title:鼠标悬停时提示的内容
实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。
**目录文件夹: **
就是普通文件夹,里面只不过存放了我们做页面所需要的 相关素材,比如 html文件, 图片 等等。
**根目录 **
打开目录文件夹的第一层 就是 根目录
页面中的图片会非常多, 通常我们再新建一个文件夹专门用于存放图像文件(images),这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。路径可以分为: 相对路径和绝对路径
以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。
路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 只需输入图像文件的名称即可,如。 | |
下一级路径 | “/” | 图像文件位于HTML文件同级文件夹下(例如文件夹名称为:images) 如。 |
上一级路径 | “../” | 在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推, 如。 |
**pink老师 一句话说出他们: **
相对路径,是从代码所在的这个文件出发, 去寻找我们的目标文件的,而 我们所说的 上一级 下一级 同一级 简单说,就是 图片 位于 HTML 页面的位置
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。
“D:webimgLOGo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。
注意:
绝对路径用的较少,我们理解下就可以了。 但是要注意,它的写法 特别是符号 并不是 相对路径的 /
单词缩写: anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的
在HTML中创建超链接非常简单,只需用标签把文字包括起来就好。
语法格式:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|---|
href(必须属性) | 用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,__blank为在新窗口中打开方式。 |
<a href="http://www.baidu.COM">百度</a>
< a href=" index.html">首页</a>
<p>
<a href="#C4">查看关于我们。</a>
</p>
<h2>首页</h2>
<p>首页</p>
<h2>新闻</h2>
<p>新闻</p>
<h2>产品</h2>
<p>产品</p>
<h2><a name="C4">关于我们</a></h2>
<p>关于我们</p>
使用对象的不同,网页中的链接可以分为:
< a href="#">首页</a>
<a href="/images/myw3schoolimage.jpg" download="w3logo">下载</a>
<a href="../example/html/lastpage.html">
<img border="0" src="../i/eg_buttonnext.gif" />
</a>
重点掌握点:
语法:
<base target="_blank" />
**总结: **
pink老师 一句话说出他们:
全体链接~ 到 ~ 全体集合 所有链接 以新窗口打开页面 ~ 是
为了让我们页面显示的更加整齐,我们需要学习三个表(表格、表单、列表)
目标:
表格作用:
存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。
因为它可以让数据显示的非常的规整,可读性非常好。
特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是总没有表格来得方便。
ps: 这些地方用表格,你会觉得生活还是那么美好。。。。忍不住想说 PPAP i hava a pen
在HTML网页中,要想创建表格,就需要使用表格相关的标签。
创建表格的基本语法:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
要深刻体会表格、行、单元格他们的构成。
在上面的语法中包含基本的三对HTML标签,分别为 table、tr、td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释
table用于定义一个表格标签。
tr标签 用于定义表格中的行,必须嵌套在 table标签中。
td 用于定义表格中的单元格,必须嵌套在标签中。
字母 td 指表格数据(table data),即数据单元格的内容,现在我们明白,表格最合适的地方就是用来存储数据的。
**总结: **
表格有部分属性我们不常用,这里重点记住 cellspacing 、 cellpadding。
我们经常有个说法,是三参为0, 平时开发的我们这三个参数 border cellpadding cellspacing 为 0
@H_781_1264@
案例1:
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>刘德华</td> <td>男</td> <td>55</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>52</td> </tr>
<tr> <td>张学友</td> <td>男</td> <td>58</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>18</td> </tr>
<tr> <td>刘晓庆</td> <td>女</td> <td>63</td> </tr>
</table>
案例2:
效果图
代码:
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>110</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>120</td>
</tr>
</table>
pink老师 一句话说出他们:
th 也是一个单元格 只不过和普通的 td单元格不一样,它会让自己里面的文字居中且加粗
定义和用法
<table>
<caption>我是表格标题</caption>
</table>
**注意: **
合并单元格是我们比较常用的一个操作,但是不会合并的很复杂。
< td colspan="2"></td>
标签名 | 定义 | 说明 | |
---|---|---|---|
表格标签 | 就是一个四方的盒子 | ||
表格行标签 | 行标签要再table标签内部才有意义 | ||
单元格标签 | 单元格标签是个容器级元素,可以放任何东西 | ||
表头单元格标签 | 它还是一个单元格,但是里面的文字会居中且加粗 | ||
表格标题标签 | 表格的标题,跟着表格一起走,和表格居中对齐 | ||
clospan 和 rowspan | 合并属性 | 用来合并单元格的 |
对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注, 这样更好的分清表格结构
注意:
内部必须拥有 标签!标签 | 描述 |
---|---|
用于定义表格的头部。用来放标题之类的东西。 | |
用于定义表格的主体。放数据本体 。 | |
放表格的脚注之类。 | |
定义用于表格列的属性 | |
定义表格列的组 |
以上标签都是放到table标签
问?
前面我们知道表格一般用于数据展示的,但是网页中还是有很多跟表格类似的布局,如下图~~ 我们用什么做呢?
答:
答案是列表, 那什么是列表? 表格是用来显示数据的,那么列表就是用来布局的。 因为非常整齐和自由
概念:
容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表
特点:
列表最大的特点就是 整齐 、整洁、 有序,跟表格类似,但是他可组合自由度会更高。
<ul>
标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>
标签定义无序列表的基本语法格式如下:
<u1>
<1i>列表项1</1i>
<1i>列表项2</1i>
<1i>列表项3</1i>
</u1>
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的法是不被允许的。<li>
与</li>
之间相当于一个容器,可以容纳所有元素。<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
比如下面这些,新闻是没有顺序的,不用排队,先到先得,后发布先显示。
<ol>
<1i>列表项1</1i>
<1i>列表项2</1i>
<1i>列表项3</1i>
</ol>
所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。
在HTML标签中,<dl>
标签用于定义描述列表(或定义列表),该标签会与<dt>
(定义项目/名字)和
<dd>
(描述每一个项目/名字)一起使用。
其基本语法如下:
<dl>
<dt>名词1</at>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
<dl></dl>
里面只能包含<dt>
和<dd>
。<dt>
和<dd>
个数没有限制,经常是一个<dt>
对应多个<dd>
。用的还可以:
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> |
**无序列表 ** | 无序标签里面只能包含li 没有顺序,使用较多。li理面可以包含任何标签 |
<ol></ol> |
有序列表 | 有序标签里面只能包含li有顺序,使用相对较少。li里面可以包含任何标签 |
<dl></dl> |
自定义列表 | 自定义列表里面只能包含dd和dt。dd和dt里面可以放任何标签 |
我们现在还没有学布局,现在只要保证2个点:
目标:
现实中的表单,类似我们去银行办理信用卡填写的单子。 如下图
**作用: **
表单目的是为了收集用户信息。
在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。
在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。
**表单控件: **
包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息:
一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域:
他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
收集的用户信息怎么传递给服务器?
通过form表单域
目的:
在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
**语法: **
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
注意:
每个表单都应该有自己表单域。我们现在做页面,不写看不到效果,但是 如果后面学 ajax 后台交互的时候,必须需要 form表单域。
语法:
<input type="属性值" value="你好">
常用属性:
用户名: <input type="text" />
密 码:<input type="password" />
用户名:<input type="text" name="username" value="请输入用户名">
用户名:<input type="text" name=“username” />
name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。
name属性后面的值,是我们自己定义的。
radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
上面这个,表示就默认选中了 男 这个单选按钮
属性 | 说明 | 作用 |
---|---|---|
type | 表单类型 | 用来指定不同的控件类型 |
value | 表单值 | 表单里面默认显示的文本 |
name | 表单名字 | 页面中的表单很多,name主要作用就是用于区别不同的表单。 |
checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
注意
目标:
label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
概念:
label 标签为 input 元素定义标注(标签)。
作用:
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢?
<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>
适合单个表单选择
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
pink老师 一句话说出他们:
当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面
<textarea >
文本内容
</textarea>
作用:
通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
---|---|---|---|---|
input type="text" | 文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea | 文本域 | 可以显示多行文本 | 双标签,默认值写到标签中间 | 留言板 |
目的:
如果有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表.
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
以上是脚本宝典为你收集整理的HTML笔记全部内容,希望文章能够帮你解决HTML笔记所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。