HTML学习总结
HTML的基本结构
<!DOCTYPE html>
<!--文档类型-->
<html lang="zh">
<!--加上lang属性声明语言-->
<head>
<meta charset="UTF-8">
<!--利用UTF-8格式来解析-->
<title></title>
</head>
<body></body>
</html>
HTML——文本
文本标签
<p>段落标签</p>
<h>标题标签</h>
<br>换行标签（单标签）
<p> xxx</p>
<!-- 代表空格-->
文本格式化标签
<strong>文本加粗标签</strong>
<em>斜体标签</em>
<del>删除标签</del>
<span></span>
<p><strong><em><del>phpStudy是一个PHP调试环境的程序集成包</del></em></strong></p>
输出结果：
phpStudy是一个PHP调试环境的程序集成包
HTML_图片
<img>图像标签
<img src="">
<!--src属性放图片-->
<img src="" alt="">
<!--alt属性当图片显示不出来时作为可替换文本-->
<img src="" alt="" title="">
<!--title属性 点击图片会出现相应的文字-->
图片格式：
jpg 有损压缩 影响画质 图片小
png 无损压缩 不影响画质 大 有透明通道
gif 动图
图片方式：
- 网络图片
- 本地图片：
相对路径：从当前路径算起的路径
绝对路径：从盘符算起的路径
例如：
相对路径：01.jpg
绝对路径：C:\Users\用户名\Pictures\桌面壁纸\01.jpg
HTML——超链接
<a>超链接标签</a>
<a href="" >文本</a>
<!--href属性 填写文件或网页地址-->
<a href="" target="_balnk">文本</a>
<!--target属性保留原来的界面-->
<a href="" target="_balnk">
<img src="" alt="">
<!--放图片-->
</a>
例如：
<a href="https://www.bilibili.com/" target="_balnk">bilibili</a>
<a href="https://www.bilibili.com/" target="_balnk">
<img src="u=3745332628,2276842928&fm=27&gp=0.jpg" alt="bilibili">
</a>
书签标签 锚点
<a href="#end">回到页面最下面</a>
<p>段落</p>
.
.
.
<p id=end>最后一段段落</p>
<!--直接跳转到最后一个段落-->
如图所示：
图片的映射
shape属性 形状 circle 园 rect 矩形 poly 多边形
coords属性 坐标点
例如：
<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
例如：
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
HTML——表格
<table>表格标签</table>
<tr>行标签</tr>
<th>标题标签</th>
<td>内容标签</td>
<table border="">
<td colspan="填写需要的列数"></td>
<td rowspan="填写需要的行数"></td>
colspan属性单元格可横跨的列数
rowspan属性单元格可横跨的行数
border属性加边框
例如：
<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>
加边框
<table border="1">
<td colspan=2>1</td>
<td rowspan=2>2</td>
HTML表单
表单是用来收集用户输入 提交给服务器
http: 超文本传输协议 浏览器和服务器的通讯。
模式： 请求——应答 浏览器主动发起请求 服务器接收
服务器做处理 返回给浏览器 浏览器显示结果。
<form action="">表单标签</form>
用户名<input type="text" name="自己所取的名字">
密码<input type="password" name="自己设定的密码">
<!--name属性是告诉浏览器 填入的东西是用户名或密码-->
提交按钮<input type="submit">
例如：
<form action="">
用户名<input type="text" name="woo">
密码<input type="password" name="iii">
<input type="submit">
</form>
单选框
<input type="radio" name="">
<!--注意名字要保持一致，否则不是一组-->
例如：
<form action="">
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</form>
复选框
<input type="checkbox" name="">
例如：
<form action="">
<input type="checkbox" name="sex">男
<input type="checkbox" name="sex">女
</form>
下拉框
<select name="">
<option value="">文本</option>
</select>
例如：
<form action="">
城市：<select name="城市">
<option value="">武汉</option>
<option value="">郑州</option>
<option value="">北京</option>
<option value="">广州</option>
</select>
</form>
如果提交服务器则需要
value属性
<input type="" name="" value="">
action属性 提交给网页 可以跳转到该网页
<form action=""></form>
例如：
<form action="https://www.bilibili.com/" >
用户名<input type="text" name="woo">
密码<input type="password" name="iii">
<input type="submit">
</form>
<！--输入用户名和密码后会跳转到指定的网页上-->
HTML有两种请求方式
- POST
- GET
区别:
GET 请求会将get的内容会放在网址里面。
如:
POST请求会将post的内容放在http的head里面
如：
此时网址不发生任何变化
HTML嵌套规则
块元素：独立成一行 可以设置宽高 默认宽高100%
文字类块元素：
<p></p>标签
<h></h>标签
容器类块元素：
标签有：
<div></div>
<table></table>
<tr></tr>
<td></td>
<th></th>
<form></form>
<ul></ul>
<li><li>
<ol></ol>
<dl></dl>
<dt></dt>
<dd></dd>
行元素：不独立成一行。
标签有：
<a>
<img>
<input>
<strong>
<em>
<del>
<span>
特殊元素：
<br>
嵌套规则
一：块元素可以嵌套行元素
<div> <a href=""> </a> </div>
二：行元素可以嵌套行元素
<a href="" > <strong> </strong> </a>
三：行元素不可以嵌套块元素
<a href=""> <div> </div> </a>
这个便是错误的
四：文字类块元素不可以嵌套块元素
五：容器类块元素 可以嵌套块元素
<div><p></p></div>
扫一扫
2318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
