Html(Hyper text markup language)超文本标记语言
1.基本框架
<html>
<head>
<meta charset="utf-8"/>
<tittle>页面标签</tittle>
</head>
<body>
第一个页面
</body>
</html>
2.标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>二级标签</h3>
...
<h6>六级标签</h6>
3.段落标签
<p>第一个段落</p>
<p>第二个段落</p>
4.换行标签
第一行<br />
第二行
5.div标签
<div>div标签独占一行</div>
6.span标签
<span>span标签1</span>
<span>span标签2</span>
7.图片标签
src 指定图片路径
alt 设置图片的替代文本(图片加载失败时显示)
title 设置图片的提示信息(鼠标悬浮在图片上时显示)
<img src="img.jpg" title="提示文本"/>
<img src="img1.jpg" alt="替代文本"/>
8.超链接标签 (anchor缩写)
href 指定目标url
target 指定链接页面的打开方式_blank新页面打开
_self当前页面打开
<a href="https://www.baidu.com" target="_blank">超链接</a>
9.文本格式化标签
<b>加粗</b><br />
<i>斜体</i><br />
<s>删除线</s><br />
<u>下划线</u>
10.表格标签
table 定义表格
tr 定义行,必须嵌套在table标签中
td 定义单元格,必须嵌套在tr标签中
th 定义表头,必须嵌套在tr标签中
<table border='1'>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
</tr>
</table>
11.列表标签
ul 定义无序列表,ul标签中只能嵌套li标签
ol 定义有序列表,ol标签中只能嵌套li标签
li 定义列表项,一个容纳数据元素的容器
dl 自定义列表,dl标签中只能嵌套dt和dd标签
dt 定义列表头
dd 定义列表项
- 无序列表(列表项没有顺序,常用于展示不关心顺序的数据)
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
- 有序列表
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
- 自定义列表
<dl>
<dt>分类1</dt>
<dd>分类项1</dd>
<dd>分类项1<dd>
<dt>分类2</dt>
<dd>分类项2</dd>
<dd>分类项2<dd>
</dl>
12.表单标签
form 定义表单
input 文本输入框
select 下拉
option 下拉列表项
textarea 文本域
form表单
action 指定表单数据提交的url地址
method 指定提交方式(get/post)
input输入框
type 指定输入框的属性
name 定义元素名,用于后端接受数据
value 设置输入框的值
checked 首次加载时选中
maxlength 最大长度,用于规定输入的字符数量(没啥用,前端源码中随便修改)
input常用属性
text 文本,默认20个字符
password 密码,输入框中的字符将被掩饰
submit 提交按钮,提交表单的数据到服务器
button 普通按钮,常用于触发js函数
file 上传文件按钮
radio 单选按钮
checkbox 复选框
hiden 隐藏输入框
image 提交按钮,图片形式
reset 重置按钮,清空表单内容
<form action="xxx.php" method="get">
用户名:<input type="text" name="username" value="用户名" /><br />
密码:<input type="password" name="passwd" /><br />
性别:男<input type="radio" name="sex" value="1" checked />
女<input type="radio" name="sex" value="2"/><br />
爱好:苹果<input type="checkbox" name="happy" value="1" />
香蕉<input type="checkbox" name="happy" value="2"/><br />
籍贯:<select name="city">
<option value="1">山东</option>
<option value="2">北京</option>
</select><br />
上传头像:<input type="file" name="file" /><br />
留言:<textarea name="text"></textarea><br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
13.HTML特殊字符对照表
字符 | 源代码 |
---|---|
空格 |   |
< | < |
> | > |
" | " |
& | & |