HTML
- 前言
- 一、HTML是什么？
- 二、HTML的相关用法
- 1.制作一个网站的登录网页
- 2.HTTP协议
- 3.点击图片中的某一点可以实现网页跳转
- 4.表格布局
- 5.列表
- 三.HTML5中新增加的标签
- 1.视频和音频
- 2.常用的但是意义不明确的标签
- 3.多窗口框架
- 总结
前言
随着科技的不断提升，前端代码学习这门技术也越来越重要，很多人都开启了学习之旅，本文就介绍了关于HTML的基础内容。
一、HTML是什么？
HTML 是用来描述网页的一种语言。
二、HTML的相关用法
1.制作一个网站的登录网页
需要的代码如下：
Method=“请求方式” 例如:<input type=" " name=" "> Text ----文本框
Password ----密码框
Submit ----提交按钮
Radio ----单选框
Checkbox ----多选框
Reset 重置按钮
Button 普通的按钮
Select 标签 选择框
多选时 使用multiple属性
文本域：textarea rows 表示行数， cols 表示列数
<br/>----换行
Align=“center” 表示居中 left 居左 right 居右
div标签---- 网页的分区的显示
<p>----控制行
body标签中 bgcolor ----背景颜色
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blackpink</title>
</head>
<body bgcolor="#ccc">
<div align="center">
<h1>blink</h1>
<form action="1.html" method="post">
<p>用户名：<input type="text" name="username"> <br/> </p>
<p>密码：<input type="password" name="psw"> <br/> </p>
<p>请选择您的性别：
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</p>
<p>
请选择组合中喜欢的人
<input type="checkbox" name="hobby" value="jisoo"/>jisoo
<input type="checkbox" name="hobby" value="jennie"/>jennie
<input type="checkbox" name="hobby" value="rose"/>rose
<input type="checkbox" name="hobby" value="lisa"/>lisa
</p>
<p>
请选择你所在的城市
<select>
<option value="重庆">重庆</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="四川">四川</option>
</select>
</p>
<p>
请选择你自认为的代号
<select multiple="multiple">
<option value="吃货">吃货</option>
<option value="宅男">宅男</option>
<option value="懒虫">懒虫</option>
<option value="开心果">开心果</option>
<option value="笨笨熊">笨笨熊</option>
</select>
</p>
<p>
<textarea cols="50" rows="1">
这家伙很懒，什么都没有留下。
</textarea>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</div>
</body>
</html>如上述代码所示，就可以得到一个登录的窗口，图片如下.
填写上述信息后点击提交就可以实现跳转，进入下一个网页
2.HTTP协议
HTTP协议中有两种请求：
Get请求和Post请求
1.两种请求方式都是能够让后台接受到数据的.
2.Get请求不安全，会把name属性的值暴露在地址栏上， 地址栏默认大小为64kb.
Post请求安全 ，不会在地址栏上暴露name属性的值
3.点击图片中的某一点可以实现网页跳转
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blackpink</title>
</head>
<body>
<img src="D:S/1.jpg" alt="lisa" usemap="#one">
<map id="one" name="one">
<area
shape="circle"
coords="90,247,10"
href="https://www.baidu.com/">
</area>
</map>
</body>
</html>结果如下图所示:
当点击猫的左眼时，会跳转到百度网页。
4.表格布局
表格布局：
通过表格来对网站进行整体的布局，这种布局目前来讲已经被淘汰了
主要使用的就是表格的标签
Table ----表格
Tr ----表行
Th ----表头
Td -----表元
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body text="pink">
<h1>blackpink视频(成功)</h1>
<hr/>
<table width="1700px">
<tr>
<td> Kill this love</td>
<td> SHow you like that</td>
<td>Don't know what to do</td>
<td>SO HOT</td>
<td>DDU-DU-DDU-DU</td>
<td>Ice Cream</td>
<td style="padding-right:60px;padding-left:120px;"><a href=D:\Program Files (x86)\3.html">更多">>">></a></td>
</tr>
</table>
<table width="1260px" border="1px">
<tr>
<td><a href="https://haokan.baidu.com/v?pd=wisenatural&vid=7994395648249109330"><img src="D:/66.png" width="210px"></a></td>
<td><a href="https://v.qq.com/x/page/g3111zxj2pn.html"><img src="D:/33.png" width="210px"></a></td>
<td><a href="https://haokan.baidu.com/v?pd=wisenatural&vid=5838819010057755445"><img src="D:/77.png" width="210px"></a></td>
<td><a href="https://haokan.baidu.com/v?pd=wisenatural&vid=6687471762012000240"><img src="D:/6.jpg" width="210px"></a></td>
<td><a href="https://haokan.baidu.com/v?pd=wisenatural&vid=5673316066091184828"><img src="D:/22.png" width="210px"></td>
<td><a href="https://www.bilibili.com/video/av202535045/"><img src="D:/44.png" width="210px"></a></td>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>这个代码结合前面的图片跳转的代码，结果如下所示：
当点击图片后就会跳转相应的视频。
5.列表
列表分为无序，有序和定义列表。
1.无序适应场景 ： 论坛新闻项 ，展开闭合 ，导航。
2.有序的属性为reverse，其中type类型中可以使用数字， 字母 以及罗马数字。
其中X的平方和X2也可以打出来哦
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul type="square">
<li>jisoo</li>
<li>jennie</li>
<li>rose</li>
<li>lisa</li>
</ul>
<ol type="I">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<dl>
<b><dt>black</dt></b>
<i><dd>黑色的</dd></i>S
<b><dt>pink</dt></b>
<i><dd>粉色的</dd></i>
</dl>
X<sub>2</sub>
X<sup>2</sup>
</body>
</html>结果如下所示：
三.HTML5中新增加的标签
1.视频和音频
视频----<vedio><video src="video/........." controls="controls"></video> 相应的可以放出视频。
音频----<audio><audio src="C:\Users\admin\Music\BLACKPINK - How You Like That.mp3" controls="controls"></audio> 这时点进去就会开始放BLACKPINK的 How You Like That。
2.常用的但是意义不明确的标签
<nav>----导航<slide>----侧栏<header>----头部<footer>----底部<label> ----标记标签 通常和表单中的文本框<span> ----用于修饰文本
这些可以增加代码的可读性.
3.多窗口框架
一个页面可以显示多个窗口
4.0 版本<frameset> ----多窗口
注意：如果要使用frameset标签那么它不能和body标签连用
5.0版本中<iframe> ----内嵌窗口
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset rows="15%,*,15%">
<frame src="2.html"></frame>
<frameset cols="25%,*">
<frame src="3.html"></frame>
<frame src="4.html"></frame>
</frameset>
<frame src="6.html"></frame>
</frameset>
</html>总结
