Lemon's blog

HTML学习总结

Record my learning process of HTML.

HTML
字数统计: 2k阅读时长: 9 min
2019/03/24 Share

HTML的基本结构

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<!--文档类型-->
<html lang="zh">
<!--加上lang属性声明语言-->
<head>
<meta charset="UTF-8">
<!--利用UTF-8格式来解析-->
<title></title>
</head>
<body></body>
</html>

HTML——文本

文本标签

1
2
3
4
5
<p>段落标签</p>
<h>标题标签</h>
<br>换行标签（单标签）
<p>&nbsp;&nbsp;&nbsp;xxx</p>
<!--&nbsp;代表空格-->

文本格式化标签

1
2
3
4
5
<strong>文本加粗标签</strong>
<em>斜体标签</em>
<del>删除标签</del>
<span></span>
<p><strong><em><del>phpStudy是一个PHP调试环境的程序集成包</del></em></strong></p>

输出结果：
phpStudy是一个PHP调试环境的程序集成包

HTML_图片

1
2
3
4
5
6
7
<img>图像标签
<img src="">
<!--src属性放图片-->
<img src="" alt="">
<!--alt属性当图片显示不出来时作为可替换文本-->
<img src="" alt="" title="">
<!--title属性 点击图片会出现相应的文字-->

图片格式：

jpg 有损压缩 影响画质 图片小
png 无损压缩 不影响画质 大 有透明通道
gif 动图

图片方式：

  1. 网络图片
  2. 本地图片：
    相对路径：从当前路径算起的路径
绝对路径：从盘符算起的路径

例如：

相对路径：01.jpg
绝对路径：C:\Users\用户名\Pictures\桌面壁纸\01.jpg

HTML——超链接

1
2
3
4
5
6
7
8
9
<a>超链接标签</a>
<a href="" >文本</a>
<!--href属性 填写文件或网页地址-->
<a href="" target="_balnk">文本</a>
<!--target属性保留原来的界面-->
<a href="" target="_balnk">
	<img src="" alt="">
	<!--放图片-->
</a>

例如：

1
<a href="https://www.bilibili.com/" target="_balnk">bilibili</a>

文本超链接

1
2
3
<a href="https://www.bilibili.com/" target="_balnk">
	<img src="u=3745332628,2276842928&fm=27&gp=0.jpg" alt="bilibili">
</a>

图片超链接

书签标签 锚点

1
2
3
4
5
6
7
<a href="#end">回到页面最下面</a>
<p>段落</p>
.
.
.
<p id=end>最后一段段落</p>
<!--直接跳转到最后一个段落-->

如图所示：
锚点

图片的映射

shape属性 形状 circle 园 rect 矩形 poly 多边形
coords属性 坐标点

例如：

1
2
3
4
5
6
7
<img src="2.jpg" alt="" usemap="#bili">
	<map name="bili">地图
		<area shape="circle" coords="184,245,100" href="https://www.bilibili.com/" alt="">可点击区域
		<area shape="rect" coords="" href="https://www.bilibili.com/" alt="">可点击区域
	</map>
<!-- 园coords=“中心坐标，园的半径”-->
<!--矩形coords=“左上角点的坐标，右下角点的坐标”-->

HTML列表

列表有三类
1无序列表：内容列表 ，标签ul+li 无顺序关系
2有序列表：内容列表 标签ol+li 有顺序关系
3自定义列表： 内容标题+内容 列表 标签dl+dt+dd

例如：

1
2
3
4
5
6
7
8
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>

在这里插入图片描述

1
2
3
4
5
6
7
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>

在这里插入图片描述

HTML——表格

1
2
3
4
5
6
7
<table>表格标签</table>
<tr>行标签</tr>
<th>标题标签</th>
<td>内容标签</td>
<table border="">
<td colspan="填写需要的列数"></td>
<td rowspan="填写需要的行数"></td>

colspan属性单元格可横跨的列数
rowspan属性单元格可横跨的行数
border属性加边框

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<tr>
<th>班级</th>
<th>姓名</th>
<th>学号</th>
<th>成绩</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

表格

1
2
加边框
<table border="1">

在这里插入图片描述

1
2
<td colspan=2>1</td>
<td rowspan=2>2</td>

在这里插入图片描述

HTML表单

表单是用来收集用户输入 提交给服务器
http: 超文本传输协议 浏览器和服务器的通讯。
模式： 请求——应答 浏览器主动发起请求 服务器接收
服务器做处理 返回给浏览器 浏览器显示结果。

1
2
3
4
5
<form action="">表单标签</form>
用户名<input type="text" name="自己所取的名字">
密码<input type="password" name="自己设定的密码">
<!--name属性是告诉浏览器 填入的东西是用户名或密码-->
提交按钮<input type="submit">

例如：

1
2
3
4
5
<form action="">
	用户名<input type="text" name="woo">
	密码<input type="password" name="iii">
	<input type="submit">
</form>

在这里插入图片描述

单选框

1
2
<input type="radio" name="">
<!--注意名字要保持一致，否则不是一组-->

例如：

1
2
3
4
<form action="">
	<input type="radio" name="sex">男
	<input type="radio" name="sex">女
</form>

单选框

复选框

1
<input type="checkbox" name="">

例如：

1
2
3
4
<form action="">
	<input type="checkbox" name="sex">男
	<input type="checkbox" name="sex">女
</form>

复选框

下拉框

1
2
3
<select name="">
	<option value="">文本</option>
</select>

例如：

1
2
3
4
5
6
7
8
<form action="">
城市：<select name="城市">
	<option value="">武汉</option>
	<option value="">郑州</option>
	<option value="">北京</option>
	<option value="">广州</option>
</select>
</form>

下拉框

1
2
3
4
5
如果提交服务器则需要
value属性
<input type="" name="" value="">
action属性 提交给网页 可以跳转到该网页
<form action=""></form>

例如：

1
2
3
4
5
6
<form action="https://www.bilibili.com/" >
	用户名<input type="text" name="woo">
	密码<input type="password" name="iii">
	<input type="submit">
</form>
<！--输入用户名和密码后会跳转到指定的网页上-->

在这里插入图片描述
在这里插入图片描述

HTML有两种请求方式

  1. POST

  2. GET
    区别:

        GET    请求会将get的内容会放在网址里面。
    如:![在这里插入图片描述](https://github.com/bealright/bealright.github.io/blob/master/htmlstudyphoto/15.png?raw=true)
POST请求会将post的内容放在http的head里面
如：
![在这里插入图片描述](https://github.com/bealright/bealright.github.io/blob/master/htmlstudyphoto/16.png?raw=true)

    此时网址不发生任何变化
    在这里插入图片描述

    HTML嵌套规则

块元素：独立成一行 可以设置宽高 默认宽高100%

文字类块元素：

1
2
<p></p>标签
<h></h>标签

容器类块元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
标签有：
<div></div>
<table></table>
<tr></tr>
<td></td>
<th></th>
<form></form>
<ul></ul>
<li><li>
<ol></ol>
<dl></dl>
<dt></dt>
<dd></dd>

行元素：不独立成一行。

1
2
3
4
5
6
7
8
标签有：
<a>
<img>
<input>
<strong>
<em>
<del>
<span>

特殊元素：

1
2
<br>
&nbsp;

嵌套规则

一：块元素可以嵌套行元素

1
<div>  <a href=""> </a> </div>

二：行元素可以嵌套行元素

1
<a href="" > <strong> </strong>  </a>

三：行元素不可以嵌套块元素

1
2
<a href=""> <div> </div> </a>
这个便是错误的

四：文字类块元素不可以嵌套块元素

五：容器类块元素 可以嵌套块元素

1
<div><p></p></div>

CATALOG
  1. 1. HTML的基本结构
    1. 1.0.1. HTML——文本
    2. 1.0.2. HTML_图片
    3. 1.0.3. HTML——超链接
    4. 1.0.4. 书签标签 锚点
    5. 1.0.5. 图片的映射
    6. 1.0.6. HTML列表
    7. 1.0.7. HTML——表格
    8. 1.0.8. HTML表单
    9. 1.0.9. 单选框
    10. 1.0.10. 复选框
    11. 1.0.11. 下拉框
    12. 1.0.12. HTML有两种请求方式
    13. 1.0.13. HTML嵌套规则
Total : 55
2020
2019
CTF CSS C++ 命令执行 HTML PHP XML XSS hexo python SQL注入 HTTP请求走私 web 任意文件下载 文件上传 文件包含
MISC web 编程语言学习 Crypto SQL AWD