HTML知识点
HTML是什么?
HTML是用来描述网页的一种语言,指的是超文本标记语言(HyperText Markup Language),通过标签来标记要显示的网页中的各个部分,HTML的文档也叫web页面。
现在的最新版本是:HTML5,简称H5.
网页的组成部分:
页面由三部分组成:
- 内容(结构):在页面上可以看到的数据(使用html技术实现)
- 表现:指这些内容在页面上的展示形式(CSS技术实现:布局、颜色、大小等)
- 行为:页面元素与输入设备交互的响应(JavaScript)
书写规范
<!DOCTYPE html>
<html> <--表示整个页面的开始-->
<head> <--头信息-->
<meta charset="utf-8" />
<title></title> <--标题-->
</head>
<body> <--页面主题内容-->
</body>
</html> <--表示整个页面的结束-->
标签
- 格式:<标签名>封装的数据</标签名>
- 对大小写不敏感
- 标签都有各自的属性:
1.基本属性:用来修改简单的样式
例:bgcolor=“red” 背景色
2.事件属性:直接设置事件响应后的代码
例:οnclick="alert(‘你好!’) 表示单击事件,是JavaScript语言提供的一个警告框函数。 - 分为单标签和双标签
1.单标签:<标签名/>
例:< br/> 换行
2.双标签:<标签名></标签名>
常用标签
- font标签
是字体标签,定义文本的字体、字体颜色、字体尺寸。
所有属性:
color 颜色
face 字体
size 字体大小 - 特殊字符
常用:
1、空格 通常情况下,HTML会裁掉文档中的空格,假如在文档中连续输入10个及以上空格,HTML会显示一个出来。以下代码表示一个空格
2、<
<
3、>
>
- 标题标签
h1~h6 由大到小表示标题标签
所有属性:
align=“left/right/center” 表示对齐方式(默认左对齐) - 超链接
在网页中所有可以点击跳转的页面
所有属性:
href属性:设置连接的地址
target属性:设置哪个目标进行跳转
其中,target="_self" 表示在当前页面跳转(默认)
target="_blank" 表示打开新页面进行跳转 - 列表标签
有序列表<ol></ol> 无序列表<ul></ul> 列表项<li></li>
- img标签
可以在HTML页面中显示图片
<img width="" height="" src=""> <--src设置图片路径-->
所有属性:
1、width:宽度
2、height:高度
3、border:边框
4、alt:设置当前指定路径找不到图片时,用来代替显示文本内容
这里需要注意一下图片路径的设置
路径分为相对路径、绝对路径
在JavaSE中路径设置
1、相对路径:从工程名开始算
2、绝对路径:盘符目/录/文件名
Web中路径设置
1、相对路径:
一个. :表示当前文件所在目录
两个. : 表示当前文件所在上一级的目录
文件名 : 表示与当前文件所在同一目录的文件 相当于./文件名(./可省略)
2、绝对路径:
正确格式:http://ip地址:port/工程名/资源路径
- 表格标签
<table></table>表格标记
<tr></tr>表格行
<td></td>表格列
在<table>里放<tr>,在<tr>里放<td>
合并单元格使用:<td colspan="合并的单元格数"></td>
<table border="1" align="center"></table> 加边框,居中表格
table中的属性:
1、border 、width、height(设置边框、宽度、高度)
2、align 设置表格相对于页面的对齐方式
3、cellspacing 设置单元格间距
- 跨行跨列表格
在tr标签中设置两个属性
colspan:跨列
rowspan:跨行
当想要同时跨行跨列的时候,同时使用这两个属性 - iframe框架标签
可以在HTML页面打开一个小窗口,去加载一个单独的页面
所有属性
width、height、name、src
iframe和a标签组合使用的步骤:
1、在iframe标签使用name属性定义一个名称
2、在a标签的target属性上设置iframe的name属性的值 - 表单
表单就是HTML页面中用来收集用户信息的所有元素集合,然后将这些信息发送给服务器。
- 文本框
<input type="text">
- 密码框
<input type="password">
- 单选按钮
如选择性别时;
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
checked="checked"表示默认选中
- 下拉选择
如选择籍贯,地区,年龄等等
<select><!--下拉选择-->
<option>选择内容之一</option>
······
</select>
- 复选框
<input type="checkbox">
即:可多选
- 文本域
<textarea rows="(行数)" cols="(列数)">
</textarea>
- 文件上传
<input type="file">
- 提交按钮
<input type="submit">
- 重置按钮
<input type="reset">
- 隐藏域
<input type="hidden"> 用户不需要看到的信息
- 跳转页面
要提前先写一个页面
<form action="跳转页面">
</form>
12.表单提交的细节
form标签中的属性:
action属性设置提交的服务器地址
method属性设置提交的方式GET(默认值)或POST
表单提交的时候,数据没有发送给服务器的三种情况:
1、表单项没有name属性值
2、单选、复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器
3、表单项不在提交的form标签中
GET请求的特点是:
1、浏览器地址栏中的地址是: action属性[+?+请求参数]
请求参数的格式是: name=value&name=value
2、不安全
3、它有数据长度的限制
POST请求的特点是:
1、浏览器地址栏中只有action属性值
2、相对于GET请求要安全
3、理论上没有数据长度的限制
- 其他标签
段落p:默认在段落的上方和下方各空一行(如果有则不空)
块div:会自动换行
span:不会自动换行
label:不会自动换行