html的常见标签
编写一篇博客
<h1> ...</h1> ：一级标题
<h2> ...</h2> ：二级标题
<h3> ...</h3> ：三级标题
<h4> ...</h4> ：四级标题
<h5> ...</h5> ：五级标题
<h6> ...</h6> ：六级标题
<p> ... </p>：段落标签，文字会独占一行
<i> ... </i>：文字斜体
<b> ... </b>：文字会出现加粗效果
<br>：换行标记
<hr> ：水平线
：网页显示一个空格
编写一篇博客
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>论数学的重要性</h1>
<i>2019.11.09</i>
<hr />
<p>
今天我打电话叫了个12寸的披萨
</p>
<p>
服务员告诉我
</p>
<p>
12寸没有了，换两个6寸行不行
</p>
<p>
我说可以
</p>
<p>
最后发现我亏了，这个故事告诉我们，<b>数学很重要！</b>
</p>
</body>
</html>
效果：
编写一篇博客
百度新闻列表
<a href = "...">xxx</a> ：超链接
<img src = "..." /> ：图片
无序列表：
<ul>
<li>
列表项目
</li>
</ul>
有序列表：
<ol>
<li>
列表项目
</li>
</ol>
<ol>标签属性
-
type="1"数字排序 -
type="a"和type="A"字母排序 -
type="i"和type="I"罗马数字排序
百度新闻列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度新闻列表</title>
</head>
<body>
<h1>广州新闻 <img src="../img/1.png" /></h1>
<ul>
<li>
<a href="http://pc.nfapp.southcn.com/38/2788354.html">广州发布最新文化发展报告，人均文化消费涨了200</a>
</li>
<li>
<a href="http://pc.nfapp.southcn.com/38/2788358.html">太燃了！法语音乐剧《摇滚红与黑》广州上演</a>
</li>
</ul>
<ol>
<li>
<a href="http://pc.nfapp.southcn.com/38/2788354.html">广州发布最新文化发展报告，人均文化消费涨了200</a>
</li>
<li>
<a href="http://pc.nfapp.southcn.com/38/2788358.html">太燃了！法语音乐剧《摇滚红与黑》广州上演</a>
</li>
</ol>
</body>
</html>
效果：
百度新闻列表
图片标签的使用
<img>标签属性
-
src：源地址 -
title：鼠标放上去时显示 -
alt：图片加载失败时显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="../img/1.jpg" height="300px"/>
<img src="../img/2.jpg" height="300px"/>
<img src="../img/3.jpg" height="300px"/>
</body>
</html>
图片默认从左往右排列，排列受最大的图片宽度和高度影响。
给图片标签只设置width或height属性，就会自动按照图片比例缩放。如果width和height同时设置，可能会导致图片变形。
图片标签的使用
补充
<del> ... </del>给文字添加删除线
<sup> ... </sup>给文字变成上标
<u> ... </u>给文字加下划线
<center> ... </center>把文字居中
表格
<table> ... </table>表格
<tr> ... </tr>表示一行
<td> ... </td>表示单元格
<col>代表一列
属性:
-
border="1px"表格边框属性 -
cellspacing="0"单元格空隙 -
align="center"对齐方式
合并水平单元格：其实就是让一个单元格占多个基本单元格的大小colspan属性
表单提交
<form> ... </form> action属性表示提交地址
<input />：
- 所有提交的数据由input指定,必须设置name属性;
- input按钮的文字由value属性表示；
- input必须放在form标签内才能提交
<input>标签常见类型
-
type="text"文本输入框 -
type="password"密码输入框 -
type="radio"单选框 -
type="checkbox"复选框 -
type="button"普通按钮 -
type="submit"提交按钮 -
type="reset"重置按钮 -
type="file"文件选择框
form表单get请求和post请求
- get请求通常表示获取数据
- post请求通常表示提交数据
- get请求发送的数据都写在地址栏上，用户可见
- post请求发送的数据用户不可见
- get请求不能提交大量数据，post可以，不要混用
