1.HTML快速入门
1.1概述
HTML(HyperText Markup Language):超文本标记语言
超文本:是一种可以显示在 电脑显示器 或 电子设备 上的文本,现时超文本普遍以电子文档的方式存在,其中的文字包含有可以链接到其他字段或者文档的 超链接 ,允许从当前阅读位置直接切换到超链接所指向的文字。
标记:也就是标签。可以使用一系列的标签,将网络上的文档格式统一,使分散的资源连接为一个整体
1.2HTML的组成
HTML页面是由一系列的元素(Element)组成的,而元素是通过标签创建出来的
标签
一般HTML中的标签可分为两大类:
围堵标签:有开始标签和结束标签。如 <html> </html>
自闭和标签:开始标签和结束标签在一起。如 <br/>
属性
HTML的围堵标签可以拥有属性。属性可以让HTML元素拥有更多的信息,属性只能加在开始标签中,通常都是以“属性=值”的键值对形式出现
1.3入门案例
在浏览器上显示一串文字
步骤:
在web目录中新建一个HTML文件
在<body>标签中写入一个<h1>标签,并写上想在浏览器上出现的文字
在<h1>中添加属性align并赋值为center,目的是让内容居中
通过浏览器打开查看效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 align="center">
第一个HTML案例
</h1>
</body>
</html>
效果演示
2.HTML基本语法
2.1注释
跟许多语言一样,HTML也有注释,用来解释说明且注释不会被浏览器解析
格式
<!--注释内容-->
2.2标题标签--<h1></h1> to <h6></h6>
每一个标签里的内容自成一行,字体大小逐级递减,并且HTML中最小只有六级标题
如图所示
代码
效果
在HTML中只存在1到6级标题
2.3换行标签--<br>
在HTML中,对输入的文本进行Enter回车,并不会起到换行效果,而是使用<br>自闭和标签实现换行
代码
效果
2.4图片标签--<img></img>
在浏览器中展示图片
属性:src—指定展示图片文件的位置,可以使用全路径或相对路径
相对路径:以 “.” 开头的路径;“./”代表当前目录,“../”表示上一级目录
width—设置图片的宽度,单位一般为px或百分之几
2.5列表标签
有序列表ol:属性type:改变排序的样式;start:n 从n开始排序
无序列表nl:属性type
2.6表格标签
table:定义表格
- width:宽度
- border:边框
- cellpadding:定义内容和单元格的距离
- cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
- bgcolor:背景色
- align:对齐方式
tr:定义行
- bgcolor:背景色
- align:对齐方式
td:定义单元格
- colspan:合并列
- rowspan:合并行
th:定义表头单元格
- <caption>:表格标题
- <thead>:表示表格的头部分
- <tbody>:表示表格的体部分
- <tfoot>:表示表格的脚部分
2.7特殊字符在HTML里的实现
注意: 实体名称对大小写敏感
2.8表单标签
用于采集用户输入的数据,并和服务器进行交互
属性:
action:指定提交数据的URL
method:指定提交方式,常见的有两种--get、--post。
get:请求参数会在地址栏中显示 ,会封装到请求行中
请求参数大小有限制
不太安全
post:请求参数不会在地址栏中显示,会封装到请求体中
请求参数大小没有限制
较为安全
2.8.1表单项标签
①<input>:可以通过type属性值,改变元素展示的样式
type属性:
text:文本输入框
password:密码输入框(输入的信息会以“*”展示在页面上)
radio:单选框
1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
3. checked属性:可以指定默认值
checkbox:复选框
1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
2. checked属性,可以指定默认值
file:文件选择框
按钮:
submit:提交按钮。可以提交表单
button:普通按钮
image:图片提交按钮,也可以提交表单
src属性指定图片的路径placeholder属性:指定输入框的提示信息,当输入框的内容发生变化时,会自动清空提示信息
label:指定输入项的文字描述信息
label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
<label for="username"> 用户名 </label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
性别:<input type="radio" name="gender" value="male" > 男
<input type="radio" name="gender" value="female" checked> 女
<br>
爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java" checked> Java
<input type="checkbox" name="hobby" value="game"> 游戏<br>
图片:<input type="file" name="file"><br>
②select下拉列表
子元素:option,指定列表项
省份:<select name="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>陕西</option>
</select><br>
③textarea:文本域
cols:指定列数,每一行有多少个字符
rows:默认多少行 (如果超出设定值,会自动扩容)
练习
案例:编写一个注册页面
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<!--定义表单 form-->
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label></td>
<td><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td><label for="checkcode">验证码</label></td>
<td><input type="text" name="checkcode" id="checkcode">
<img src="../../image/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
效果如下图所示: