2、HTML 基础知识
一、HTT(PHyper Text Markup Language)即超文本语言。
特点:
1、通过标签来定义的语言,代码都是由标签所组成
2、不区分大小写
3、由<html>开始</html>结束,里面由头部分<head></head>和体部分<body></body>两部分组成,例如
<html>
<head>
<title>Hello Page</title>
</head>
<body>
Hello Word!
</body>
</html>
4、多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能(如<br/>、<hr/>),或者没有要修饰的内容可以在标签内结束。
5、标签中的属性:属性名与属性值之间用"="连接,属性值可以用双引号或单引号或都不用引号,一般会用双引号。
<标签名 属性名="属性值"> 数据内容 </标签名>
<标签名 属性名="属性值" />
二、HTML常用标签
1、<font>:字体标签
<font size=5 color="red">内容</font>
2、<h1><h2><h3>...<h6>:标题标签
<h1>Hello Word!<h1>
3、<img>:图像标签
<img src="图片路径" alt="图片说明文字" height="" width="" />
4、<table>:表格标签
a)、组成:
标题标签:<caption>
表头标签:<th> 本身有居中、加粗特性
行标签:<tr>
单元格标签:<td>
b)、合并行:rowspan="2"
c)、合并列:colspan="2"
5、<a>:超链接标签
<a href="http://www.baidu.com" target="_blank">百度</a>
href属性:可以是url,也可以是本地文件
target属性:指定在哪个窗口打开(本窗口或新建窗口),默认为本窗口中打开
<a name="top">顶部位置</a> 定义一个标记
<a href="#top">回到顶部位置</a> #标记
【注】在使用定位标记时一定要在href值的开始加入"#"
6、<form>:表单。用于与服务器端进行交互
<form method="" action=""></form>
a)、method:属性指定表单提交方式(get或post)默认为get;
aa)、如请求方式为GET方式,则可以在请求的URL地址后以?的形式带上提交给服务器的数据,多个数据之间以&进行分隔,例如:GET /mail/1.html?name=abc&password=xyz
bb)、GET方式的特点:在URL地址后附带的参数是有限制的,其数据容量通常不能超过1K
cc)、如请求方式为POST方式,则可以在请求的实体内容中向服务器发送数据,Post方式的特点:传送的数据量无限制
dd)、Get对于敏感信息不安全; POST对于敏感信息安全。表单提交尽量使用POST
b)、action:属性指定表单提交地址
7、<input>:<input type="" name="" id="" value="" />
a)、type属性:值不同,对应的组件不同
text: 文本框,输入的文本可见
password: 密码框,输入的文本不可见
radio 单选框,当有多个单框时,只能有一个被选中,那么这些单框的name值必须相同
checkbox: 复选框
file: 文件上传,可以进行文件选择的组件
button: 按钮
submit: 提交按钮
reset: 重置按钮
hidden: 隐藏标签,在页面不显示,但在提交的时候随其他内容一起提交至服务端
b)、name属性:指定标签的名称,多个标签可以重名,一般只有radio、checkbox同名
c)、id属性:指定标签的唯一名称,一个页面中每个标签的id不能重名
8、<select>:下拉框标签
<select name="" multiple="multiple" size="">
<option value=""></option>
</select>
每个下拉菜单项由option进行封装。multiple属性可以指定下拉框的显示方式。当使用multiple属性时,size属性可以指定显示数量
9、<textarea>多行文本框:
<textarea name="" id="" cols="30" rows="10"></textarea>
10、<div>:层标签
11、其他:
<p>标签:段落标签
<pre>标签:可以保留数据的原有格式
<b>标签:加粗
<i>标签:斜体
<u>标签:下划线
<sub>标签:下标
<sup>标签:上标
……
更多查找《java web程序开发参考手册 》的第二章目录,里面列得很全,或上 w3school 查询。
【注】表单组件通常都需要定义name和value属性,因为要将数据发送至服务端,服务端只有知道了该name的值才可以对提交的数据进行分别获取。
三、特殊字符:
1、<(<)
2、>(>)
3、&(&)
4、"(")
5、 (空格)
四、实例:
<html>
<head>
<title>HTML练习</title>
</head> <body>
<form action="">
<table border="1" cellspacing="0">
<caption><b>注册信息</b></caption>
<tr>
<td>用户名:</td>
<td>
<input type="text" name="userName" id="userName" value="" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd" id="pwd" value="" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<label><input type="radio" name="sex" value="nan" />男</label>
<label><input type="radio" name="sex" value="nv" />女</label>
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<label><input type="checkbox" name="hobby">旅行</label>
<label><input type="checkbox" name="hobby">运动</label>
<label><input type="checkbox" name="hobby">听歌</label>
<label><input type="checkbox" name="hobby">看书</label>
</td>
</tr>
<tr>
<td>身份证号:</td>
<td>
<input type="text" name="cId" id="cId" />
</td>
</tr>
<tr>
<td>手机号:</td>
<td>
<input type="text" name="phone" id="phone" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
2、HTML 基础知识的更多相关文章
- .NET面试题系列[1] - .NET框架基础知识(1)
很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...
- RabbitMQ基础知识
RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...
- Java基础知识(壹)
写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...
- selenium自动化基础知识
什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...
- [SQL] SQL 基础知识梳理(一)- 数据库与 SQL
SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...
- [SQL] SQL 基础知识梳理(二) - 查询基础
SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...
- [SQL] SQL 基础知识梳理(三) - 聚合和排序
SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...
- [SQL] SQL 基础知识梳理(四) - 数据更新
SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...
- [SQL] SQL 基础知识梳理(五) - 复杂查询
SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...
- APP测试入门篇之APP基础知识(001)
前言 最近两月比较多的事情混杂在一起,静不下心来写点东西,月初想发表一遍接口测试的总结,或者APP测试相关的内容,一晃就月底了,总结提炼一时半会也整不完.放几个早年总结内部培训PPT出来 ...
随机推荐
- QT210 android2.3 和android4.0 烧写编译日记
QT210下载烧录编译android2.3过程 工作环境:ubuntu12.04.5 | QT210开发板光盘 | QT210开发板 android2.3编译环境:gcc version 4.4.7 ...
- Memcached在windows下安装与使用
建议:windows系统下仅为测试所有,生产环境下服务端应使用Linux系统. 本文最后更新于:2014-08-03 18:24 原文:http://www.yaosansi.com/post/mem ...
- 第一次在Django上编写静态网页
新建一个Python Django工程: Win+R进入cmd命令界面,并cd到指定工程目录下,比如我的工程目录是E:\wamp\Apache24\www\ 输入E: 跳转E盘 输入cd wamp\A ...
- Intellij IDEA 自动生成 serialVersionUID
转 Intellij IDEA 自动生成 serialVersionUID 收藏 tonycody 发表于 2年前 阅读 18399 收藏 5 点赞 2 评论 0 使用 Eclipse 或 MyEcl ...
- python高级之网络编程
python高级之网络编程 本节内容 网络通信概念 socket编程 socket模块一些方法 聊天socket实现 远程执行命令及上传文件 socketserver及其源码分析 1.网络通信概念 说 ...
- 导出本地和远程SVN项目, Export remote SVN repository
在有服务器控制权的情况下, 源服务器上 sudo svnadmin dump ironbank/ > ~/ironbank.svn.dump 在目的服务器上 sudo svnadmin crea ...
- C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 所有的基础数据都可以恢复删除
客户的需求如下: 所有基礎信息需要記錄創建人,創建時間,更改人,更改時間,刪除人,刪除時間.有停用基礎信息功能(停用不是刪除,只是暫時停用).基礎信息可以查出已經刪除的信息(有選項可以選擇),有方法把 ...
- MVC之前的那点事儿系列(10):MVC为什么不再需要注册通配符(*.*)了?
文章内容 很多教程里都提到了,在部署MVC程序的时候要配置通配符映射(或者是*.mvc)到aspnet_ISPAI.dll上,在.NET4.0之前确实应该这么多,但是.NET4.0之后已经不要再费事了 ...
- IDEA 分享项目到 Git@OSC/GitHub
前提:新开项目,需要在 Git@OSC 建立版本库管理. 1.当然是先在Git@OSC上创建仓库,拿到Git@OSC仓库的HTTP连接 https://git.oschina.net/*****/** ...
- 吉特仓储管系统(开源WMS)--分享两月如何做到10W+的项目
在此文开篇之处先特别申明,此文在有些人的眼中会有广告的嫌疑,但是本人不想将其作为一个广告宣传的文章,在此提到软件内容部分请大家予以谅解和包含,作为时间不算短的程序员给大家分享一些自己开发吉特仓储管理软 ...