HTML(超文本标记语言),它使用标签来定义文本的显示方式,简单来说HTML就是一种文本文件,里面的内容超出一般文本文件的表示,它是用来控制显示格式和对内容进行排版的
标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>菜鸡</title>
</head>
<body>
<p>西伯利亚大尾巴狼<p>
<h1>小奶狗<h1>
<div>
<a href="https://cn.bing.com/?mkt=zh-CN&mkt=zh-CN" target="_blank">链接</a>
</div>
<div id="log"><img src='E:/blog/themes/gal/source/imgs/slide/background3.jpg' style="width: 70%">
</div>
</body>
</html>
<p>这是分段</p>
<h1>这是大标题</h1>
<p>中的p就是标签,且是开始标签,</p>是结束标签,开始、结束标签和内容组成完整的元素,
标签,它的作用范围是下一个和它层次对应的结束标签</p>
<a href="https://cn.bing.com/?mkt=zh-CN&mkt=zh-CN" target="_blank">链接</a>>
hre和target是标签的属性
<p/>空元素可以在开始标签中关闭,也可以<p></p>
在HTML中使用单独标签
标签名可以使用大小写,但是推荐小写
标签会被解析成一个有层次的DOM树,不要出现标签交错的现象。
HTML文档内容
- 文档声明:<! IDOCTYPE html>声明文档类型,这个是Html5的声明方式。
- 根标签:html标签是根标签
- 头部:head标签就是头部,一般写meta信息
- 正文:body标签才是游览器显示的正文部分
常用标签
链接
<a href="https://cn.bing.com/?mkt=zh-CN&mkt=zh-CN" target="_blank" onclick="alert('nonono')">链接</a>
href属性,指定链接
target属性,指定是否在本窗口打开。_blank就是指新窗口打开链接
onclick是点击事件,其中可以写一个js函数或脚本执行,很多HTML标签都支持很多事件属性,常见有onclick、ondblclick、onkeydown、onkeyup等
图片
<img src='E:/blog/themes/gal/source/imgs/slide/background3.jpg' style="width: 70%">
图片标签,src指定图片路径
标题
<h1>-<h6>,标题标签,默认h1字体最大,h6字体最小
图层
<div id="logo" class="logo"></div>
id属性,标签的唯一标识
class属性,样式表定位并附加样式
列表
- 无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- 有序列表
<ol>
<li>比特犬</li>
<li>狸花猫</li>
</ol>
表格
HTML表格的基本解构:
<table>…</table> 定义表格
<th>…</th>:定义表格的标题栏
<tr>…</tr>:定义表格的行
</td>…</td>:定义表格的列
<table border="1">
<tr>
<td>名字</td>
<td>体型</td>
</tr>
<tr>
<td>秋天犬</td>
<td>小型犬</td>
</tr>
<tr>
<td>狸花猫</td>
<td>小型猫</td>
</tr>
</table>
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="awm.js"></script>
<style>
td {padding: 5px}
</style>
</head>
<body>
<p>西伯利亚大尾巴狼<p>
<h4>小奶狗<h4>
<ul>
<li>秋田犬</li>
<li>中华田园猫</li>
</ul>
<ol>
<li>比特犬</li>
<li>狸花猫</li>
</ol>
<table border="1">
<tr>
<td>名字</td>
<td>体型</td>
</tr>
<tr>
<td>秋天犬</td>
<td>小型犬</td>
</tr>
<tr>
<td>狸花猫</td>
<td>小型猫</td>
</tr>
</table>
<div id="logo" class="logo"></div>
<div>
<a href="https://cn.bing.com/?mkt=zh-CN&mkt=zh-CN" target="_blank" onclick="alert('nonono')">链接</a>
</div>
<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" value="movie"> 电影
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
<div id="log"><img src='E:/blog/themes/gal/source/imgs/slide/background3.jpg' style="width: 70%">
</div>
</body>
</html>
特别注意:
表单控件如果想要提交数据,必须使用name 属性,否则不能提交到服务端
form标签的重要属性
- action,表单数据submit提交到那里
- method,提交的方法,常用POST
- enctype,对提交的数据编码
- application/x-www-form-urlencoded,在发送前编码所有字符
- 空格转化为"+"加号,特殊符号转换为ASCII HEX值
- multipart/form-data,不对字符编码,在使用包含文件上传控件的表单时,必须使用该值
- text/plain,空格转换为"+"加号,但不对特殊字符编码。
- application/x-www-form-urlencoded,在发送前编码所有字符