第一章 HTML基础
- 定义:超文本标记语言(Hyper Text Markup Language),是一种标签语言,不是编译型语言,也不是编程语言。
- 超文本: 比普通文本功能更加强大,可以添加各种样式
- 标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行
- b/s和c/s:b/s维护方便,c/s便携性差,维护成本高
1. HTML常用标签
(1) 标题标签
<h></h>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
(2) 段落标签
<p></p>
<p>
快乐池塘栽种了梦想就变成海洋,鼓的眼睛大嘴巴
</p>
(3) 换行标签
<br />
(4) 列表标签
无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
- type: disc、square、circle
有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
- type: 1,a ,A,I
- start : 指定是起始索引
(5) 图片标签
<img></img>
- a. src 指定图片路径
- b. width 图片宽度
- c. height 图片高度
- d. alt 图片加载有问题时提示
<img src="./my.png" width="100px" height="100px" alt="图片无法加载" />
- 注意:src路径中,./表示当前目录,…/表示上一级目录,当图片路径找不到或者其他原因导致找不到图片,alt设置提示信息
(6) 超链接标签
<a></a>
<a href="http://www.baidu.com">百度啊</a>
2. 表格
<table>
<tr>
<td></td>
</tr>
</table>
-
tr : 每行
-
td : 每个单元格
-
rowspan : 跨行
-
colspan : 跨列
-
border : 每个单元格的外框
-
需求1:设计一个三行三列,外边框为1px的表格
-
需求2:
3. 表单
<form action="login.jsp" method="提交方式" name="表单名称" >
各种表单控件
</form>
-
提交方式:默认是get,但是post提交方式不但保密性好,还可以提交大量的数据。
-
表单的构成
-
表单控件(一般内嵌在form表单、table表格中)
`<!—input 标签用来创建表单项,type 值就是收集的数据的类型 -->`
-
- 提示信息
- 表单域
综合案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册新用户</title>
</head>
<body>
<form action="#" method="post">
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名:</td>
<!-- 1.文本输入框控件 -->
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td align="right">密码:</td>
<!-- 2.密码输入框控件 -->
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td align="right">性别:</td>
<!-- 3.单选输入框控件 -->
<td>
<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女
</td>
</tr>
<tr>
<td align="right">兴趣:</td>
<!-- 4.复选框控件 -->
<td>
<input type="checkbox" name="interest" value="file" />看电影
<input type="checkbox" name="interest" value="code" />敲代码
<input type="checkbox" name="interest" value="game" />玩游戏
</td>
</tr>
<tr>
<td align="right">头像:</td>
<!-- 5.文件上传控件 -->
<td>
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<!-- 6.提交按钮控件 -->
<input type="submit" value="注册" />
<!-- 7.重置按钮控件 -->
<input type="reset" value="重填" />
</td>
</tr>
<tr>
<td align="right">地区:</td>
<!-- 8.下拉框控件 -->
<td>
<select name="area">
<option value="武汉">武汉</option>
<option value="孝感">孝感</option>
<option value="孝昌">孝昌</option>
<option value="云梦">云梦</option>
</select>
</td>
</tr>
<tr>
<td align="right">评论:<br /></td>
<td>
<!-- 多行文本标记 -->
<textarea cols="60" rows="5">
评论时,请文明用语
</textarea>
<br />
<input type="submit" value="提交" />
</td>
</tr>
</table>
</form>
</body>
</html>
4. 最重要的元素Div和span
div是Division,分割、区域
-
(1) div : 块级元素,占用网页的一行
-
(2) span : 内联元素,占用自身大小,主要用来为选中文字设计样式
5. 转义字符
空格:
大于:>
小于:<