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>
效果:
![](https://img.haomeiwen.com/i17253929/9db3ad21e494b8b9.png)
百度新闻列表
<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>
效果:
![](https://img.haomeiwen.com/i17253929/aa417b250e6647fa.png)
图片标签的使用
<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
同时设置,可能会导致图片变形。
![](https://img.haomeiwen.com/i17253929/a2bc52c1d70bd281.png)
补充
<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可以,不要混用
网友评论