HTML标签
这里介绍一下HTML的基本格式和基本标签的使用
HTML标签分类:
主动闭合标签:(夹着内容)
<title>内容</title>
自闭合标签:不需要后面半部分
<meta charset="UTF-8">
HTML文件由两部分组成:head部分还有body部分
<!DOCTYPE html>
<html lang="en">
<head>
第一部分
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
第二部分
</body>
</html>
HTML基本的标签介绍
head内的:
1、网页标题:
<title>标题</title>
2、自动刷新页面
<meta http-equiv="Refresh" content="3">
3、自动跳转页面
<meta http-equiv="Refresh" content="3;Url=http://www.qq.com"/>
4、设置网页关键词
<meta name="keywords" content="关键字,关键,字"/>
5、设置网页说明
<meta name="description" content="这里是网站的说明"/>
6、支持多个IE内核版本:
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
body内的常用标签:
1、<a></a>超链接标签:点击跳转
<a href="http://www.qq.com">腾讯首页</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
target="_blank"可以新开一个网页打开这个跳转
2、<p></p>段落标签
<p>123</p>
3、<br />是换行, 是空格,>是大于号,<是小于号,注意有分号
<p>1<br />2 3>4<5</p>
4、<h>标题标签
<!--标题标签,1最大-->
<h1>lkk</h1>
<h2>lkk</h2>
<h3>lkk</h3>
<h4>lkk</h4>
<h5>lkk</h5>
<h6>lkk</h6>
5、 <span>白板标签
<!--行内标签,只占一行-->
<span>hello</span>
<span>hello</span>
<span>hello</span>
6、<div>块标签
<!--块级标签,但是一个白板,用的最多-->
<div>1</div>
<div>2</div>
7、注意:标签可以嵌套,标签分为:
块级标签:每一个标签都占一行,如<p>
行内标签:不会换行如<div>
8、<input>系列标签:
普通输入框、密码框,按钮框,提交框:
<!--必须要放到form里面-->
<form action="要写一个URL,数据提交到这里" method="GET">
method=get提交的时候会接到url上给后台发,method=post会放在内容里提交过去
http传会有两部分内容,请求头+请求体(get就是直接放到url请求头里发过去)
<!--普通文本-->
<input type="text" name="user"/>
<!--密码标签-->
<input type="password" name="email"/>
他会把这个打包成一个字典,提交到后台
{'user':'用户输入的用户','email':'电子邮件'}
<!--按钮,只有输入功能-->
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>只有submit才可以提交
</form>
单选框,多选框、上传文件按钮:
<form>
<div>
<p>请选择性别:单选</p>
男:<input type="radio" name="sex" value="1" checked="checked">
女:<input type="radio" name="sex" value="2">
</div>
<div>
<p>请选择爱好:多选</p>
篮球:<input type="checkbox" name="habit" value="1">
足球:<input type="checkbox" name="habit" value="2" checked="checked">
台球:<input type="checkbox" name="habit" value="3" checked="checked">
网球:<input type="checkbox" name="habit" value="4">
</div>
<div>
<p>上传文件</p>
<input type="file" name="fname"/>默认哪都上传不了,要在form表头写上url才可以传输
<input type="file" name="fname"/>
</div>
</form>
多行文本输入:
<textarea name="meno">多行文本输入,默认值写在这里</textarea>
下拉框:
下拉选择框的使用
<select name="city" size="10" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
<optgroup label="陕西省"><!--这是有标题的下拉框,父标题不能选择-->
<option>西安</option>
<option>宝鸡</option>
</optgroup>
</select>
9、放图片
<!--放图片功能-->
<a href="http://www.qq.com"><!--可以把图片加进连接-->
<img src="1.jpg" title="1这里是标题,吧鼠标挪过去显示" style="height: 200px;width: 200px;" alt="图片加载不出来显示这个字"/>
</a>
10、列表
<!--可以变成列表,就是每行一个·-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--可以变成列表,123的形式-->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!--有标题形式的列表-->
<dl>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>
</dl>
11、表格:
<table border="1"><!--边框-->
<tr><!--行-->
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td><a href="http://www.qq.com">第二行第一列跳转到qq官网</a></td>
<td><a href="http://www.baidu.com">第二行第二列跳转到百度官网</a></td>
</tr>
</table>
下面是合并格子的用法
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">1</td>这一个格子占两列(合并单元格)
<td>1</td>
<!--<td>1</td>然后再删掉一个-->
</tr>
下面要把第二行第一个,和第三行第一个合并
<tr>
<td rowspan="2">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<!--<td>1</td>然后再删掉一个-->
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>