目录
什么是HTML?
html是一种前端语言, 在浏览器中, 我们看到的页面内容就是由html来表示的
什么是HTML标签?
html标签:html是一种标签语言, 由一个左括号'<'和一个右括号'>'以及内容组成的称为一个标签 例如:<p>则被称为一个p标签
标签类型
1.单标签:由一个标签组成, 而不需要闭合标签 例如:<meta>, <hr />
2.双标签:由'开始标签'和'结束标签'组成 例如 <head> </head>
HTML基本模板
html基本框架:
<!DOCTYPE html>声明文档,告知浏览器html版本
前后闭合的html标签, 声明闭合内部内容均为html标签
head标签, 表示html代码的头部, 内部有title(标题), meta(页面元信息)等标签
body标签, 表示html代码的身体部分, 一般页面所呈现的具体内容则由body内的标签来表示
框架示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML常用标签
单标签:
<hr /> 水平线标签
<br /> 换行标签
双标签(以下标签均需要闭合):
<h1>: 标题 (用h 和 数字表示, 数字越小, 标题的字体越小)
<p>: 段落标签
<span>: 行内内容标签, 可以用于文字的控制
<div>: 块级元素
<a>: 超链接标签 从一个页面跳转到另一个页面
<img>: 在页面中引入图片资源
<tr>:行标签
<td>:列标签
<input>:表单
注释:
<!--
注释 不会显示在前台页面, 但是会出现在源代码中
-->
特殊字符(实体):
空格: 实体编号:  
< 小于号: < 实体编号: <
> 大于号: > 实体编号: <
" 双引号: " 实体编号: "
' 单引号: ' 实体编号: '
HTML表格
<table></table> 定义表格
<tr></tr> 定义行
<td></td> 定义列
属性: colspan="数字" 跨多少列rowspan="数字"跨多少行
表格示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table></table> 定义表格
<tr></tr> 定义行
<td></td> 定义列
<table border="1">
<tr>
<td>1,1 </td>
<td>1,2 </td>
<td>1,3 </td>
</tr>
<tr>
<td rowspan="2">2,1 </td> <!-- 横跨2行 -->
<td colspan="2">2,2 </td> <!-- 横跨2列 -->
</tr>
<tr>
<td>3,2 </td>
<td>3,3 </td>
</tr>
</table>
</body>
</html>
效果图:
HTML表单
什么是表单?
搜索框
登录框
文件上传
注册
留言板
表单的作用:
向服务器提交信息
搜集用户信息
如何定义一个表单
<form></form>
form的属性有:
action 数据提交到服务器的url, 如果为空, 提交到当前页面, 也可以采用绝对路径和相对路径
method 提交方法 Get Postenctype
1.application/x-www-form-urlencoded 默认值, 特殊字符等都可以提交
2.multipart/form-data 上传文件时, 必须要写
表单控件(元素)
表单本身是一个框架, 表单里会有很多控件(元素)
<input /> 单标签
type 属性:
password 密码框
text 文本框
radio 单选框
checkbox 复选框
reset 重置按钮
file 文件域
hidden 隐藏内容
下拉列表<select>
<select>
<option>xxxxx内容</option>
<select>
文本域 <textarea>
示例:<textarea name="xy"></textarea>
HTML_iframe
作用:在一个页面中包含另一个页面
用法示例:
<iframe src="https://www.bilibili.com/" ></iframe>
显示效果: