html常用标签
html
HTML(超文本标记语言——HyperText Markup Language),它使用标签来定义文本的显示方式
标签tag
- 开始、结束标签和内容组成完整的元素
- 如
<a href="https://monkeyjerry.top" target="_blank">我的主页</a>
- href和target是标签的属性
- 容器标签,如
<p></p>
,在其中间可以插入其他标签 - 单独标签,如
<br><img>
等,在他们中则不能插入其他标签 - 标签可是使用大小写,推荐用小写
- 标签会被解析成一个层次的DOM树
html文档结构
- 文档声明:
<!DOCTYPE html>
声明文档类型(HTML5的声明方式) - 根标签:html标签
- 头部:head
- 内部可以写meta信息、title网页标题、script脚本、样式表等标签
<meta charset="utf-8">
定义网页编码格式为utf-8
- 正文:body标签
常用标签
链接
如<a href="https://monkeyjerry.top" target="_blank" onclick="alert('即将新开页打开我的个人主页')">我的主页</a>
- href属性,指定链接
- target属性,指定是否在本窗口中打开,
_blank
指在新窗口打开链接 - onclick是点击事件,等号后面往往写一个js函数或脚本执行
- 很多HTML标签都支持很多事件属性,常见有
onclick、ondblclick、onkeydown、onkeyup、onkeypress、onmousedown、onmousemove、onmouseover、onsubmit、onchange
等等 - 后面写的函数称作事件响应函数或事件回调函数
- 很多HTML标签都支持很多事件属性,常见有
- 默认情况下,超链接点击后会发起一个HTTP GET请求
图片
如<img src="https://www.baidu.com/img/dong_8f1d47bcb77d74a1e029d8cbb3b33854.gif" alt="baidu_logo">
- src指定图片路径
- 图片会发起一个HTTP GET请求
标题
<h1>~<h6>
- 现在用的少
图层
如<div id="logo" class="logo"></div>
- id属性,标签的唯一标识
- class属性,常用于样式表定位并附加样式,具体样式控制可参考常用CSS选择器
- 目前
<div>
标签加上CSS,被广泛用于网页布局中
列表
- 无序列表
<ul>
<li>Java</li>
<li>Python</li>
</ul>
- 有序列表
<ol>
<li>Java</li>
<li>Python</li>
</ol>
表格
- HTML表格的基本结构
<table>…</table>
:定义表格<tr>…</tr>
:table row,定义表格的行<th>…</th>
:table header cell,定义表格的标题列即表头(文字默认加粗)- 现在th用的少,表格表头是否字体加粗,都用css控制
<td>…</td>
:table data cell,定义表格的数据单元
<table border="1">
<tr>
<th>1,1</th>
<th>1,2</th>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
<tr>
<td colspan="2">占2列</td>
</tr>
</table>
表单
- 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my html</title>
<script src="jquery.js"></script>
<style>
td { padding: 5px}
</style>
</head>
<body>
<form action="" method="POST" enctype="application/x-www-form-urlencoded">
<table border="1" style="border-collapse: collapse">
<tr>
<td colspan="2">用户注册</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="用户名"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" id="gender" checked value="M">男
<input type="radio" name="gender" id="gender" value="F">女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="interest" id="interest" value="music">音乐
<input type="checkbox" name="interest" id="interest" checked value="movie">
电影
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
- 表单控件如果要提交数据,必须使用name属性,否则不能提交到服务端
- form标签
- action:表单数据submit提交到哪里
- method:提交的方法,常用POST
- enctype:对提交的数据编码,
application/x-www-form-urlencoded
表示在发送前编码所有字符(默认),空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值;multipart/form-data
表示不对字符编码,在使用包含文件上传控件的表单时,必须使用该值;text/plain
表示空格转换为 "+" 加号,但不对特殊字符编码