HTML:超文本标记语言
html代码实际上就是一套能够被浏览器识别的规则代码，由一个个标签组成。
后端与前端交互方式：
1、后端直接返回浏览器能够识别的html代码
2、后端返回数据，前端替换html中的指定数据
基本的HTML页面
<!DOCTYPE html> ??<!--始终位于页面的第一行，告诉浏览器这是一个HTML页面--><html lang="en"> ??<!--html标签(只能有一个)，指定语言--><head> ???<!--<head> 和</head>之间为文档的头部 --> ???<meta charset="UTF-8"> ?<!--设置编码类型--> ???<title>Title</title> ????<!--标题--></head><body> ??<!--<body> 和</body>之间为文档的主体部分，也是用户能看到的部分--></body></html>
HTML标签
1、自闭和标签
<meta charset="UTF-8"> 只有开头标签，没有结束标签
2、主动闭合标签
<title></title>
html head
head 标签中的内容都是为浏览器和搜索引擎准备的
<!DOCTYPE html><html lang="en"><head> ???<!--指定编码--> ???<meta charset="UTF-8"> ???<!--每1秒钟刷新一下--> ???<meta http-equiv="refresh" content="1"> ???<!--1秒后跳转到www.baidu.com--> ???<meta http-equiv="refresh" content="1;http://www.baidu.com"> ???<!--关键字检索，网络爬虫就根据这个keywords--> ???<meta name="keywords" content="besttest"> ???<!--网站描述--> ???<meta name="description" content="测试培训"> ???<!--ie打开时以最高兼容模式打开--> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title--> ???<title>金牛座</title> ???<!--rel代表告诉浏览器我要把link作为title的图标--> ???<link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg"> ???<!--引入css样式表--> ???<link rel="stylesheet" href="xxx.css"> ???<!--css样式--> ???<style></style> ???<!--引入js或编写js--> ???<script src="tmp.js"></script></head><body></body></html>
html body
p、br、h、form、div、span、input、label、空格( )、 大于号(>) 、小于号 (<)
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>金牛座</title></head><body><!--p--段落标签--><!--br---换行标签--><p>马云说：<br>人生在世，总是要经历些悲欢离合、人情冷暖，自9月10日宣布一年后将退休后，阿里巴巴董事局主席马云受到了更多的关注，今天马云在达沃斯论坛上对诸多疑问一一作答。</p><!--标题标签 ?h1-h6 ,h1最大 --><h1>标题标签</h1><h2>标题标签</h2><h3>标题标签</h3><h4>标题标签</h4><h5>标题标签</h5><h6>标题标签</h6><!--div是块级标签(伪白板标签) ?无论自己有多大都占满一整行--><div>水电费</div><!--span是行内标签 或 白板标签 或叫 内联标签，没有附着任何css样式 ?自己有多大就占多大位置--><span>水电费</span><!--input标签 type有很多类型，默认为文本框text--><!--type="text" ?placeholder-默认提示--><!--name属性是跟后端交互的key，value属性是跟后端交互的值 ?向后端传的json串{"username":admin,"passwd":"123456"}--><!--placeholder-默认提示--><input type="text" placeholder="请输入用户名：" value="admin" name="username"><!--type="password"密文--><input type="password" placeholder="请输入密码：" ?name="passwd"><!--type="radio"单选--><!--通过name属性控制只能单选，当name相同时，几个选项是互斥的--><span>男</span><input type="radio" name="sex"><span>女</span><input type="radio" ?name="sex"><!--type="checkbox"多选框 ?{"check":[1,2,3]} 默认值checked="checked"--><span>奔驰</span> <input type="checkbox" name="check" ?value="1" ?checked="checked"><span>宝马</span> <input type="checkbox" name="check" value="2"><span>奥迪</span> <input type="checkbox" name="check" value="3"><!--type="file"上传文件--><input type="file"><!--表单标签--><form action="http://www.baidu.com" method="post"> ???<div> ???????<span>用户名：</span> ???????<input type="text" placeholder="请输入用户名"> ???????<label for="i1">用户名</label> ??<!--label扩展input的可点击范围，label和input通过id来关联--> ???????<input id="i1" type="text" placeholder="请输入用户名"> ???</div> ???<div> ??????<span>密  码：</span> ??<!--浏览器会把文本中的多个空格解析成一个--> ???????<input type="password" placeholder="请输入密码"> ???</div><div> ???<!--button如果想要有操作 只能通过js绑定事件来做--> ???<input type="button" value="登录"> ???<!--submit按钮如果和form表单连用则会直接触发请求--> ???<input type="submit" value="注册"> ???<!--reset按钮如果和form表单连用则会直接触发重置操作--> ???<input type="reset"></div></form><!--富文本标签--><textarea></textarea><!--特殊转译符--><!--< 代表< ??> 代表>--><p></p><!--下拉框标签--><select name="s1"> ???<option value="1">中秋</option> ???<option value="2">国庆</option> ???<option value="3" selected="selected">都过不上</option></select><!--分组下拉框--><select> ???<option>请选择城市</option> ???<optgroup label="黑龙江"> ???????<option>哈尔滨</option> ???????<option>牡丹江</option> ???</optgroup> ???<optgroup label="河北"> ???????<option>石家庄</option> ???????<option>秦皇岛</option> ???</optgroup></select><!--超链接标签--><a href="http://www.baidu.com">跳转到百度</a><!--图片标签--><img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg" alt="图片加载失败的文案" title="鼠标悬浮的图案"><!--列表 点的列表--><ul> ???<li>第一列</li> ???<li>第二列</li></ul><!--列表 数字列表--><ol> ???<li>第一列</li> ???<li>第二列</li></ol><!--表格--><table border="1"> ???<thead> ?????<!--thead 表头--> ???<tr> ???????<th>id</th> ???????<th>请求方式</th> ???????<th>请求参数</th> ???????<th colspan="2">操作</th> ???<!--colspan 占几列--> ???</tr> ???</thead> ???<tbody> ?????<!--tbody 表体--> ???<tr> ???????<td>1</td> ???????<td>post</td> ???????<td>{}</td> ???????<td>修改</td> ???????<td>执行</td> ???</tr> ????<tr> ???????<td>1</td> ???????<td>post</td> ???????<td>{}</td> ???????<td>修改</td> ???????<td rowspan="2">执行</td> ??<!--rowlspan 占几行--> ???</tr> ????<tr> ???????<td>1</td> ???????<td>post</td> ???????<td>{}</td> ???????<td>修改</td> ???</tr> ???</tbody></table></body></html>HTML基础之HTML标签
原文地址：https://www.cnblogs.com/HathawayLee/p/9695196.html