html
HTML(HyperText Markup Language) 是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言。
学习HtML其实就是学习标签。
快速入门
- 新建文本文件，后缀名改为
.html - 编写HTML结构标签
- 在
<body>中定义文字。 - HTML内不区分大小写
- HTML标签属性值单双引号
- HTML语法松散
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一次运行WEB</title>
<!--
标签显示内容
-->
</head>
<body>
<h1>Hello world</h1>
<p>I love study</p>
<body>
</html>
文字改颜色
<font color="bule">文字内容</font>
基础标签
| 标签 | 描述 |
|---|---|
<h1>~<h6> |
定义标题 |
<font> |
定义文本中字体，尺寸，颜色(已经过时QAQ) |
<b>，<i>，<u> |
定义粗体文字，斜体文本,文本下划线 |
<center> |
定义文本居中 |
<p> |
定义段落 |
<br> |
定义折行 |
<hr> |
定义水平线 |
html 表示颜色：
- 英文单词：red，pink，bule.......
- rgb(值1，值2，值3)：取值范围：0~255
-
值1#值2#值3：范围：00~FF
标签可以嵌套使用，转义字符可以上网搜索QAQ(毕竟是复习笔记)
小作业
<!-- html5的标识 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>曼彻斯特联足球俱乐部</title>
</head>
<body>
<h1> Manchester United F.C. </h1>
<hr color="red" >
<p> <font color="red"> 曼联 </font> 英文简称“Man Utd”或“MUFC”，
位于英国西北区大曼彻斯特郡曼彻斯特市，隶属于英格兰足球超级联赛。
</p>
<p> 曼彻斯特联的前身是由1878年英国兰开夏郡与约克郡铁路公司的铁路工人们所组建的牛顿希斯LYR足球队。
1902年，牛顿希斯LYR正式更名为曼彻斯特联足球俱乐部。
</p>
<hr color="red" >
</body>
</html>
图片音频视频标签
| 标签 | 描述 |
|---|---|
<img> |
定义图片 |
<audio> |
定义音频 |
<video> |
定义视频 |
img
src:规定显示图像的URL
height:定义图像高度
width:定义图像宽度
audio
src:规定显示音频的URL
controls:显示播放控件
video
src:规定显示视频的URL
controls:显示播放控件
超链接标签&&列表标签
| 标签 | 描述 |
|---|---|
<a> |
定义超链接 |
href:指定访问资源的URL
target:指定打开资源的方式
_self:默认值，在当前页面打开
_blank:在空白页面打开
例子：
<!-- html5的标识 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>曼彻斯特联足球俱乐部</title>
</head>
<body>
<h1> <a href="https://www.manutd.com/" target="_blank" > Manchester United F.C. </a>
</h1>
<hr color="red" >
<p> <font color="red"> 曼联 </font> 英文简称“Man Utd”或“MUFC”，
位于英国西北区大曼彻斯特郡曼彻斯特市，隶属于英格兰足球超级联赛。
</p>
<p> 曼彻斯特联的前身是由1878年英国兰开夏郡与约克郡铁路公司的铁路工人们所组建的牛顿希斯LYR足球队。
1902年，牛顿希斯LYR正式更名为曼彻斯特联足球俱乐部。
</p>
<hr color="red" >
</body>
</html>
列表标签
| 标签 | 描述 |
|---|---|
<ol> |
定义有序列表 |
<ul> |
定义无序列表 |
<li> |
定义列表项 |
type设置项目符号
表格标签&&布局标签
| 标签 | 描述 |
|---|---|
<table> |
定义表格 |
<tr> |
定义行 |
<td> |
定义单元格 |
<th> |
定义表头单元格 |
table
border:规定表格边框的宽度
width:规定表格的宽度
cellspacing:规定单元格之间的空白
tr
align:定义表格的内容对齐方式
td
rowspan:规定单元格可横跨的行数(纵向合并)
colspan:规定单元格可横跨的列数(横向合并)
rowspan，colspan用于合并单元格
例子
<center>
<table border="1" cellspacing="0" width="500">
<tr>
<th>货名</th>
<th>图片</th>
<th>发货地</th>
</tr>
<tr align="center">
<td>球迷版球衣</td>
<td> <img src="../img/1.jpg" height="60" width="60"> </td>
<td>广州</td>
</tr>
<tr align="center">
<td>球员版球衣</td>
<td> <img src="../img/2.jpg" height="60" width="60"> </td>
<td>广州</td>
</tr>
</table>
</center>
课程表例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body>
<center>
<table border="1" cellspacing="0" >
<tr align="center">
<th colspan="2"> </th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center">
<td rowspan="4" > 上午 </td>
<td> 早自习 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
<tr align="center">
<td> 5 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
<tr align="center">
<td> 5 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
<tr align="center">
<td> 5 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
<tr align="center">
<td colspan="7" > 午休 </td>
</tr>
<tr align="center">
<td rowspan="3" > 下午 </td>
<td> 5 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
<tr align="center">
<td> 5 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
<tr align="center">
<td> 5 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
</table>
</center>
</body>
</html>
布局标签
| 标签 | 描述 |
|---|---|
div |
定义HTML文档中的一个区域部分，经常与CSS一起使用，来布局网页 |
div |
用于组合行内的元素 |
表单标签
- 表单：在网页中采集数据，使用
<form>标签定义表单 - 表单项：不同类型的
input元素，下拉列表，文本域。
| 标签 | 描述 |
|---|---|
<form> |
定义表单 |
<input> |
定义表单项，通过type属性来控制输入 |
<label> |
为表单项定义标注 |
<select> |
定义下拉列表 |
<option> |
定义下拉列表的列表项 |
<textarea> |
定义文本域 |
from
action：规定当提交表单时向何处发送表单数据,URL
method：规定用于发送表单数据的方式
get：浏览器会将数据直接附在表单的action URL之后。大小有限制
post：浏览器会将数据放到http请求消息体中。大小无限制。
例如用于登陆界面的使用。
表单项标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="#" method="post">
<!-- for指定到id,点下名字就能指到后面的框框里
name在开发者状态显示 -->
<label for="username"> 用户名： </label>
<input type="text" name="username" id="username"> <br>
<label for="password"> 密码： </label>
<input type="password" name="password" id="password"><br>
<!-- value在开发者状态下的显示值 -->
<input type="radio" name="gender" value="1" id="male">
<label for="male"> 男 </label>
<input type="radio" name="gender" value="2" id="female">
<label for="female"> 女 </label>
<br>
<input type="submit" value="免费注册">
</form>
</body>
</html>