目录
【HTML5】
【概述】：
HTML是一门语言，所有的网页都是用HTML语言编写的
HTML(HyperTextMarkupLanguage):超文本标记语言（由标签构成的语言）
HTML标签都是预定义好的，例如：使用<img>展示图片
W3C标准：网页主要由三部分组成
- 结构：HTML
- 表现：CSS
- 行为：JavaScript
【简单使用】
【步骤】：
- 新建文本文件，后缀名改为.html
- 编写HTML结构标签
- 在<body>中定义文字
例：
<html>
<head>
<title>html 快速入门</title>
</head>
<body>
<font color="red">乾坤未定，你我皆是黑马~</font>
</body>
</html>
【标签分类】
1、基础标签
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是标题h1</h1>
<h2>我是标题h2</h2>
<h3>我是标题h3</h3>
<h4>我是标题h4</h4>
<h5>我是标题h5</h5>
<h6>我是标题h6</h6>
<hr>
<!--
html 表示颜色：
1. 英文单词：red,pink,blue...
2. rgb(值1,值2,值3)：值的取值范围：0~255 rgb(255,0,0)
3. #值1值2值3：值的范围：00~FF
-->
<font face="楷体" size="5" color="#ff0000">传智教育</font>
<hr>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
<hr>
<p>
cccccccccccccccccccccccccccccccccccccc
</p>
<p>
dddddddddddddddddddddddddddddddddddddd
</p>
<hr>
沙柳河水流淌<br>
<b>沙柳河水流淌</b><br>
<i>沙柳河水流淌</i><br>
<u>沙柳河水流淌</u><br>
<hr>
<center>
<b>沙柳河水流淌</b>
</center>
</body>
</html>2、图片、音频、视频标签
img：定义图片
- src：规定显示图像的URL(统一资源定位符)
- height：定义图像的高度
- width：定义图像的宽度
- alt：定义图片属性，方便明白图片含义
audio：定义音频。支持的音频格式：MP3、MAV、OGG
- src：规定的音频URL
- controls：显示播放控件
video：定义视频。支持的音频格式：MP4、WebM、OGG
- src：规定视频的URL
- controls：显示播放的控件
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
资源路径：
1. 绝对路径：完整路径
2. 相对路径：相对位置关系
-->
<img src="../img/a.jpg" width="300" height="500" alt="风景">
<img src="图片网址" width="300" height="400">
<audio src="../img/b.mp3" controls></audio>
<video src="../img/c.mp4" controls width="500" height="300"></video>3、超链接标签
href：指定访问资源的URL
target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页打开
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="网址" target="_self">点我有惊喜</a>
</body>
</html>4、列表标签
type：设置符号
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//有序列表
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
//无序列表
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>5、表格标签
table：定义表格
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing：规定单元格之间的空白
tr：定义行
- align：定义表格行的内容对齐方式
td：定义单元格
- rowspan：规定单元格可横跨的行数
- colspan：规定单元格可横跨的列数
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" width="500">
<tr>
<th>序号</th>
<th>品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/1.png" width="60" height="50" alt="1logo"></td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td>009</td>
<td><img src="../img/2.png" width="60" height="50" alt="2logo"></td>
<td>2</td>
<td>2</td>
</tr>
<tr align="center">
<td>008</td>
<td><img src="../img/3.png" width="60" height="50" alt="3logo"></td>
<td>3</td>
<td>3</td>
</tr>
</table>
<br>
<hr>
<br>
<table border="1" cellspacing="0" width="500">
<tr>
<th colspan="2">品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/三只松鼠.png" width="60" height="50" alt="三只松鼠logo"></td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td rowspan="2">009</td>
<td><img src="../img/优衣库.png" width="60" height="50" alt="优衣库logo"></td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td><img src="../img/小米.png" width="60" height="50" alt="小米logo"></td>
<td>小米</td>
<td>小米</td>
</tr>
</table>
</body>
</html>6、布局标签
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
</body>
</html>7、表单标签
form：定义表单
- action：规定当提交表单时向何处发送表单数据，URL
- method：规定用于发送表单数据的方式
- 1.get：浏览器会将数据直接附在表单的action URL之后。(大小有限制)
- 2.post：浏览器会将数据放到http请求消息体中。(大小无限制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="get">
<input type="text" name="username">
<input type="submit">
</form>
</body>
</html>【注意】：
【action】：
- 指定表单数据提交的URL
- 表单项数据要想被提交，则必须指定其name属性
【method】：
1.get：默认值
- 请求参数会拼接在URL后边
- URL的长度有限制(4KB)
2.post:
- 请求参数会在http请求协议的请求体中
- 请求参数无限制的
8、表单标签—表单项
<input>：表单项，通过type属性控制输入形式
<select>：定义下拉列表，<option> 定义列表项
<textarea>：文本域
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
<input type="hidden" name="id" value="123">
<label for="username">用户名：</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"><br>
性别：
<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="checkbox" name="hobby" value="1"> 旅游
<input type="checkbox" name="hobby" value="2"> 电影
<input type="checkbox" name="hobby" value="3"> 游戏
<br>
头像：
<input type="file"><br>
城市:
<select name="city">
<option>北京</option>
<option value="shanghai">上海</option>
<option>广州</option>
</select>
<br>
个人描述：
<textarea cols="20" rows="5" name="desc"></textarea>
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
</body>
</html>
4192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
