前端基础之HTML
---恢复内容开始---
前端的三大利器：
HTML：真正的将页面展示出来；可比作一个 赤裸的一个人
CSS：用于修饰html标签，比如加一个背景色；css是给html穿什么样的衣服
JS/JavaScript：能够将页面动起来；js赋予这个人的行为，也就是动起来
HTML（超文本标记语言）
html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。html代码就是一大长串字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面。
后端与前端交互方式
1、后端通过直接返回浏览器能够识别的html代码
2、后端返回数据，前端替换html种的指定数据
我们学html，主要也就是学 能够被浏览器所识别的标签规则
html标签：首先我们在pycharm上创建一个html文件，默认创建一个html文件，如下图所示：
1 <!DOCTYPE html> <!--标准的html规则，相当于一个指明，指定下面输出的都是标准的html--> 2 <html lang="en"> <!--html标签(只能一个)，指定语言en；--> 3 <head> <!--头部；标签都是成对出现的；head、body都是主动闭合标签（<a></a>这种格式）--> 4 <meta charset="UTF-8"> <!--指定编码；这个是自闭和标签--> 5 <title>Title</title> <!--浏览器tab标题--> 6 </head> 7 <body> <!--身体；所有页面要展示的东西再body里面写，不能写到head（head中的内容是不被展示的，这是规则也是规范）--> 8 9 </body> 10 </html> 11 <!--两个快速写标签的方法--> 12 <!-- 先写一个<h1,然后反尖角>自动补全--> 13 <!-- 先写h1,然后tab键自动补全-->
标签h1、form、div、span、input、label
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <!-- 标题标签 h1最大 h6最小 只需要记住先出生最大 自带属性 --> 10 <h1>标题标签1</h1> <!--标题标签--> 11 <h2>标题标签2</h2> 12 <h3></h3> 13 <h4>标题标签</h4> 14 <h5>标题标签5</h5> 15 <h6>标题标签6</h6> 16 <div>div标签</div> div是块级标签，无论自己有多大，都沾满屏幕；div是伪白板标签 17 <span>span标签</span> span是行内标签，自己有多大就占多大，又叫内联标签、span也是白板标签，没有任何修饰 18 19 <!--属性：写在标签内部的，也就是<>之间的，写在标签名之后，如下面的type；标签名与属性之间用空格隔开--> 20 <input type="text" placeholder="请输入用户名"> <!--页面显示一个有提示信息的输入框,属性与属性之间用空格隔开--> 21 <input type="text" value="请输入用户名"> <!--value属性是input的默认值属性，如注册的时候弹出记住密码--> 22 <input type="password"> <!--输入的是密文，不在界面上显示--> 23 24 <input type="button" value="登录"> <!--登录按钮--> 25 <input type="submit" value="注册"> 26 <form method="get"> 27 <input type="submit" value="注册"> 28 </form> 29 跟后台交互：1：跟form表单方式,提交了会整个页面刷新，大多数现在都是用异步 2：异步提交方式,ajax 30 submit跟form表单方式连用，可以和后端交互，而button没有(需主动绑定事件) 31 button使用的时候要绑定事件，如下：button主动绑定了一个onclick事件，弹出一个登录成功的对话框 32 <input type="button" value="登录" onclick="alert('登录成功')"> 33 34 <span>男</span><input type="radio" name="sex" checked="checked"> <!--radio,单选；加上checked表示默认选中--> 35 <span>女</span><input type="radio" name="sex"> 36 <span>篮球</span><input type="checkbox" checked="checked" > <!--checkbox,多选;加上checked表示默认选中--> 37 <span>足球</span><input type="checkbox"> 38 <input type="file"> <!--选择上传文件按钮--> 39 <input type="reset"> <!--重置按钮，需要和form表单连用，否则没有意义--> 40 <input type="text" name="username" value="password" > 41 <form method="get"> 42 <input type="text" name="username" value="admin" > 43 <!--跟后台交互，type是指定输入框的类型，name的值是后台的key；写上value是有默认的值，不写value的话提交的表单key是输入框输入的值--> 44 <input type="password" name="passwd" value="123" > 45 <input type="submit" value="登录"> 46 </form> 47 <!--label属性,user通过label映射到了id上：点了用户名可以获取输入框光标--> 48 <label for="user">用户名</label><input type="text" id="user"> 49 </body> 50 51 </body> 52 </html>
a、textarea、select、option标签（select标签包裹着option标签）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>222</title> 6 </head> 7 <body> 8 <!--下拉选择：枚举值：1：乒乓球 （加上了selected表示默认项） 2：篮球 3：足球--> 9 <!--与后端交互，值就是{xxxx:1}--> 10 <select name="xxxx"> 11 <option value="2">篮球</option> 12 <option value="3">足球</option> 13 <option selected="selected" value="1">乒乓球</option> 14 </select> 15 16 <!--a标签:超文本链接标签--> 17 <a href="http://www.baidu.com">跳转到百度</a> <!--属性href可以跳转到任一页面--> 18 <a href="http://www.baidu.com" target="_blank">跳转到百度</a> <!--跳转链接，新打开一个tab页面--> 19 <textarea name="" id="" cols="30" rows="10">多行文本</textarea> <!--上面的input是单行文本，textarea是多行，可换行输入；name、id对应接口里的key--> 20 </body> 21 </html>
---恢复内容结束---
