Html 的语法，结构和常用标签
1.Html介绍
是Hyper Text Markup language(超文本标记语言)的缩写
不是一种编程语言，而是标记语言
2.语法
双标签：
<标签名></标签名>
单标签：
<标签名/>
3.元素和属性
<标签名 属性名=属性值>元素</标签名>
<标签名属性名=属性值/>
2.Html结构
<!DOCTYPE html> 文件为html文件
<html lang="en"> 语言类型：英语
<head></head> 头
<body></body> 主体
</html>
3.html常用标签
1.title
定义浏览器的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSDN</title>
</head>
<body>
</body>
</html>
2.标题和段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSDN</title>
</head>
<body>
<h1>the first title</h1> #标题1
<h2>the first title small</h2>> #小标题
<h1>the second title</h1> #标题2
<p>段落标签p</p>
</body>
</html>
3.水平线与换行符
<hr/>水平线
<br/>换行符
4.常见的转义符
空格：
大于号：>
小于号：<
5.链接
<a href="//baidu.com">点击我，访问百度</a> #没写target则在本窗口中访问百度
<a href="//www.baidu.com"target="_blank">点击我，新窗口访问百度</a> #新窗口访问百度
6.图片标签
img标签：
src 图片的地址
alt 如果图片加载异常，显示的文字
<img src="csdn.png"alt="如果图片加载失败，显示的文字">
7.表格
table标签：
border 边框
width 宽度
tr 行
th 表头
td 普通列
<table border="lpx" width="300px">
<tr>
<th>表头</th>
<th>表头th</th>
</tr>
<tr>
<td>普通列td</td>
<td>普通列td</td>
</tr>
</table>
8.列表
ul 无序列表
ol 有序列表
li 列表项
<ul> #建的列表前面会用实心黑点标注
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<ol> #建的列表前面会用阿拉伯数字标注
<li>无序列表1</li>
<li>无序列表2</li>
</ol>
9.常见的无意义标签
*div标签 占用整行
*span标签 不用占整行，长度取决于内部元素的长度
<div>div标签</div>
<span>span标签</span>
*form标签
action 提交地址
method 请求方式[get（封装在url中，比较不安全）或post（封装在head）默认get]
enctype="multipart/form-data" 如果提交文件,需要添加这个参数
*input标签
1.文本框 type="text"
2.密码框 type="password"
3.单选框 type="radio"
4.复选框 type="checkbox"
5.文件框 type="file"
6.按钮 type="button"
7.提交 type="submit"
8.重置 type="reset"
<form action="#" method="post" enctype="multipart/form-data">
1.用户名（文本框text）:
<input type="text" name="username">
2.密码（密码框password）:
<input type="password" name="password">
<hr/>
3.性别（单选框radio）：
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1">
<hr/>
4.爱好（复选框checkbox）：
学WEB<input type="checkbox" name="hobby" value="Web">
学爬虫<input type="checkbox" name="spider">
</hr>
5.上传头像（文本框file）：
<input type="file" name="img">
6.按钮（button）：
<input type="button" value="空按钮">
7.提交（submit）
<input type="submit" value="提交">
8.重置
<input type="reset" value="重置">
</form>
*下拉框和大文本
下拉框：select和option
大文本：textarea
cols 列数
rows 行数
<form action="#" method="post" enctype="multipart/form-data">
<!--#设置时间下拉选择框-->
<select name="year">
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
<!-- 设置大文本 -->
<textarea name="comment" cols="30" rows="10"></textarea>
</form>
浙公网安备 33010602011771号