############### 前端学什么？ ################
# 前端三大部分 # HTML，页面内容，学习标签 # CSS，页面样式，学习选择器和属性 # JS，页面动作，学习基础语法和BOM&DOM ################# # jQuery和bootstrap
############### HTML的学习内容 ################
HTML的学习内容 1，文档结构，注释，标签格式， 2，head里面的常见标签，meta，title，style，link，script， 3，body里面的常见标签， 常用标签，div，span，p，img，u，i，s，b，a， 列表，ul，li，ol，dl，dt，dd， 表格，table，thead，tr，th，tbody，tr，td， 表单，input，select，textare， 基本就是这几部分，
############### html文件的结构 ################
# html文件的结构 # <!DOCTYPE html> # 这是标记这是一个html文件 # <html> # <head></head> # <body></body> # </html>
############### html注释 ################
<!--注释内容--> <!--商品列表 开始--> 商品列表相关的html代码 <!--商品列表 结束-->
# 注释是非常重要的一个代码习惯！！
############### html常用的标签 ################
<!DOCTYPE html> <html lang="en"> <!--head 内常用标签
###################################################### <title></title> # 定义网页标题 <style></style> # 定义内部样式 <script></script> # 定义js代码或者引入外部js文件 <link rel="stylesheet" href="test.css"> # 引入外部样式文件 <meta> # 定义网页原信息，原信息是给浏览器看的，不是给客户看的， <meta charset="UTF-8"> # 中文显示 --> <head> <meta charset="UTF-8"> <title>这是第一个html页面</title> <!--<style>--> <!--a{--> <!--color: red;--> <!--}--> <!--</style>--> <script> // alert("hello") </script> <link rel="stylesheet" href="test.css"> </head> <body> <!-- body 内部常用的标签
######################################### <h1></h1>标签 <img src="" alt="">标签 <a href=""></a> 标签 标签里面可以添加属性， --> <a href=""></a> <!--h标签，h1最大，使用的场景就是标题，比如新闻的一级二级三级标题--> <h1>hello</h1> <h2>hello</h2> <h3>hello</h3> <h4>hello</h4> <h5>hello</h5> <h6>hello</h6> hello <!--src是图片地址，alt是图片加载失败的时候给用户一个提示，title是鼠标放上去会显示这个图片title--> <!--id，同一个页面是唯一的，可以没有这个属性，--> <img id="i1" src="http://file02.16sucai.com/d/file/2014/0704/e53c868ee9e8e7b28c424b56afe2066d.jpg" alt="图片加载失败" title="鼠标放上去会显示这个图片title"> <!--href是超链接的地址，target="_blank"，这是在新的浏览器页面打开，不加这个就在本页面打开，不只是可以跳转连接，还可以跳转到另一个a标签--> <a href="http://www.baidu.com" target="_blank">baidu</a> <a href="#a1">跳转到a1</a> <a href="" id="a1">a1标签</a> <!-- b加粗 i倾斜 u下滑线 s删除 p段落 br/换行 hr水平线 --> <b>python</b> <i>python</i> <u>python</u> <s>python</s> <h1>海燕</h1> <p>这是一个段落</p> <br/> <hr> <p>这是一个段落</p> <!-- 特殊字符 1< 小于号 > 大于 © 版权 空格 & & ¥ ￥ ® 注册 这是常用的，还有很多，用到的时候网上查 --> 1< 2> © & ¥ ® <h1> 海 燕</h1> <!-- div标签和span标签
############################################### div标签会换行， span标签不会换行， 这两个标签没有明显的特点，这两个就像是白纸，是我们在html里面用的最多的，改变样式是使用css， 快速复制本行到下一行：ctrl+D ########################## 这两个什么时候使用？ 标签分类： 块级标签，默认占浏览器长度，能设置长和宽，h标签，div标签，p标签，hr标签， 内联标签，根据内容决定长度，不能设置长和宽，比如a标签，u，b,s，i，span，img标签， --> <div>div标签</div> <div>div标签</div> <span>span标签</span> <span>span标签</span> </body> </html>
############### html列表 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--列表--> <!--无序标签 unordered list --> <!-- 前面是黑色的圆圈，可以改变这个样式， type： square：实心方块 circle：空心圆圈 --> <ul type="square"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <!--有序标签 ordered list--> <!-- 前面默认是数字1，可以改变这个， type： I ：罗马数字 A：字母， ... start :3 这是可以指定从第几开始， --> <ol type="I" start="3"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <!--标题列表 definition lists--> <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> </dl> </body> </html>
############### html表格 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--表格--> <!-- 表格：table 属性，border，设置边框，默认是没有边框的，一般不用这个，都是用css来设置， 表头：thead 行：tr，table row 列：th，table header cell 表内容，tbody 行：tr table row 列：td table data cell --> <table border="1"> <thead> <tr> <th>姓名</th> <th>爱好</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>andy</td> <td>11</td> <td>man</td> </tr> <tr> <td>liqian</td> <td>11</td> <td>man</td> </tr> </tbody> </table> </body> </html>
############### 标签的嵌套规则 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 标签的嵌套规则 1，行内标签不能嵌套块级标签， 2，p标签不能嵌套块级标签 --> <!--块级标签div嵌套div，这种是用的最多的，--> <div> <div>嵌套</div> </div> <!--p标签也是块级标签但是不能嵌套块级标签--> <p> <div> 这种嵌套是不行的</div> </p> <!--块级标签可以嵌套行内标签--> <h1><a href=""><i>这种嵌套都是可以的</i></a></h1> </body> </html>
############### html-表单form ################
表单总结： 表单是一个重要内容 input标签的，10种，type：text，submit，email，file，date，radio，CheckBox，reset，button，hidden， name，type和value都在input里面， input-text标签，这种单独说一下，三个独特的设置，readonly，disable，placeholder， input-Redio和CheckBox，还有一个设置就是checked，默认是选中的状态， input-hidden，这种在修改的时候需要传递后端id，但是我们不想要客户修改，就可以隐藏起来，这种要有name和value的， select标签和option标签，这一对，name在select里面，value在option里面，select里面可以设置multiple，就是多选的下拉框了， textarea标签，用来输入大段的文本，还可以设置cols和rows的数量， 所有的这些标签都是行内标签，所以需要用p标签来包裹，独占一行， 最外成就是一个form表单， 注意： 需要输入的内容可以不设置value，只设置name就可以，比如text，email，date，file，testarea， 但是那些需要选中的内容，一定要设置name，也一定要设置value，后端要获取的，比如radio，CheckBox，select，hidden， 还有一些可以不设置name，但是要有value，比如submit，reset，button，这个value就是按钮的名字，
###########################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--form表单 前后端有交互使用form表单， form表单是用来提交数据的， form表单就像是一个容器，本身是不展示什么内容的， input框必须要有name，构成一个键值对，传到后端，后端就可以识别这个键值对， --> <!--写一个注册页面--> <!--action 控制往哪里提交，--> <!--method这个是提交方式，不写默认是get，--> <!--enctype="multipart/form-data"，这个是数据提交的时候格式，有文件的时候，一定是要multipart/form-data， 默认是：application/x-www-form-urlencoded--> <!--autocomplete="off"，H5有自动补全的功能，就是输入内容会有提示，你可以关闭，--> <!--novalidate，加上这个就不做校验了，--> <form action="" method="post" enctype="multipart/form-data" autocomplete="off" novalidate> <!--readonly，这是只读，value是给这个input框增加默认值，--> <!--placeholder这个会默认展示，但是不影响输入，可以使用js，在鼠标点击的时候，这个默认的展示值消失--> <!--disabled，不可用--> <p>用户名： <input name="user" type="text" readonly value="小美"> <input name="user" type="text" placeholder="小美" disabled> </p> <p> <label for="a1">用户名：</label> <input id="a1" name="user" type="text" readonly value="小美"> <input name="user" type="text" placeholder="小美" disabled> </p> <p>密码： <input name="pwd" type="text"> </p> <!--这个email类型模式是会自动校验格式的，如果不做校验，可以增加一个form表单的属性，novalidate--> <p>邮箱： <input name="email" type="email"> </p> <!--比如用户修改一条信息，提交的时候需要有id，但是我又不想用户改id，那就需要把id隐藏--> <p> <input type="hidden" value="hidden"> </p> <!--这种单选框，必须要有name和value，这样构成键值对，才可以--> <!--checked，这是默认选中--> <p>性别： <input name="gender" type="radio" value="1"> 男 <input name="gender" type="radio" value="0"> 女 <input checked name="gender" type="radio" value="0"> 保密 </p> <!--label标签可以不使用，但是标准的写法是使用label标签的， 使用了label标签，点击文字也能选中这个单选按钮，否则必须是点击这个按钮才可以选中 --> <p>性别2： <!--第一种label标签的写法--> <label for="r1"> 男</label> <input id="r1" name="gender" type="radio" value="1"> <!--第二种label标签的写法--> <label> 男 <input name="gender" type="radio" value="1"> </label> <label for="r2">女</label> <input id="r2" name="gender" type="radio" value="0"> <label for="r3">保密</label> <input id="r3" checked name="gender" type="radio" value="0"> </p> <p>爱好： <input name="hobby" type="checkbox" value="lanqiu"> 篮球 <input name="hobby" type="checkbox" value="zuqiu"> 足球 <input name="hobby" type="checkbox" value="shuangseqiu"> 双色球 </p> <p>地址： <!--selected默认选中一个下拉选项--> <select name="address1" id="1"> <option value="bj">北京</option> <option value="sh" selected>上海</option> <option value="gz">广州</option> <option value="sz">深圳</option> </select> <!--multiple，这是设置一个下拉框支持多选--> <select name="address1" id="11" multiple> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> <option value="sz">深圳</option> </select> <select name="address2" id="2"> <optgroup label="北京"> <option value="cy">朝阳</option> <option value="hd">海淀</option> <option value="cp">昌平</option> </optgroup> <optgroup label="上海"> <option value="pd">浦东</option> <option value="hp">黄埔</option> <option value="bs">宝山</option> </optgroup> </select> </p> <p>备注： <textarea name="info" id="" cols="30" rows="10"></textarea> </p> <!--这种文件，后端需要接收，然后使用with open进行存储--> <p>头像： <input name="test" type="file"> </p> <p>生日： <input name="birthday" type="date"> </p> <!--一定要有提交按钮，而且type一定要是submit，否则点击提交是无效的，--> <p> <input type="submit" value="提交"> </p> <!--这个button，可以使用js给他绑定事件--> <p> <input type="button" value="button"> </p> <p> <input type="reset" value="重置"> </p> </form> </body> </html>
############### 结束线 ################
############### 结束线 ################