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>