Day1:
H5深入学习课程
-HTML+CSS3 -->简单,杂而多,多测试多项目
-JS/JQ -->原生Js ->JQ ->项目
-Ajax -->PHP/原生Ajax+JQ-Ajax->项目
-H5 –>移动端(IOS,Android,WebApp,微信)->移动端项目
h5中标签的分类主要有 (JS中称为结点也称为元素)
块标签:骨架
内联标签(行内标签):填充骨架
<></>
H5:标签
JS:节点、元素
主用atom编程,其中使用的快捷输入来自github插件安装到atom
H5版本声明
<!DOCTYPE html>
中文编码
<meta charset="UTF-8">
搜索引擎优化
Meta标签中的name设置 keywords description
img 专门用于显示图片 ,img可是设置宽高 。
可替换标签:显示的内容不是由标签内的内容决定的,
而是由其属性决定的。e.g:img,video...
特征:1.可设置宽高
Form表单
Action里面写的是后台文件名
前后台文件放到服务器文件上(www)127.0.0.1
<!-- 设置浏览器兼容模式 --> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- Html标签分为两种--> <!-- 1.块标签 a。独占一行 b。可以设置宽高 --> <!-- 1.div:无语义标签->通俗点,什么都可以显示->一般用于做容器 --> <div style="background:red;height:100px;width:100px;">i am div</div>test <!-- h1-h6 --> <!-- h${我是标题$}*6 --> <h1 style="background:red;">我是标题1</h1> <h2>我是标题2</h2> <h3>我是标题3</h3> <h4>我是标题4</h4> <h5>我是标题5</h5> <h6>我是标题6</h6> <!--ordered list--> <!-- ol>li*3 --> <ol style="background:red;"> <li>1</li> <li>2</li> <li>3</li> </ol> <!--unordered list --> <ul style="background:red;"> <li>1</li> <li>2</li> <li>3</li> </ul> <!--ul/ol/li 都是块标签 --> <!--define list --> <dl style="background:red;"> <!--define title --> <dt>台风鲇鱼</dt> <!--defien description --> <dd>今年国庆</dd> </dl> <!--dl/dt/dd 都是块标签 --> <!--Lorem10 随机十个单词 --> <!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, accusamus. --> <!-- table --> <!-- table是由行构成的,行是由列构成的->二维结构 --> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> <!--段落标签 --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, rerum?</p> <p style="text-indent:2em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, omnis.</p> <!--换行标签 --> <br> <br /> <!--行内标签,在一行内显示 a。在一行内显示 b。不能设置宽高 --> <!--span 无语义行内标签,一般作为容器,内容撑开宽高,换行会增加间距--> <span>我是span</span>test<span>666</span> <!--行内元素的对齐方式? --> <!-- 链接 --> <!-- target属性: _blank : 在新窗口中打开链接 _parent : 在父窗体中打开链接 _self : 在当前窗体打开链接,此为默认值 _top : 在当前窗体打开链接,并替换当前的整个窗体(框架页) --> <!--title 链接说明 --> <a href="http://www.baidu.com" title="百度一下" target="_blank">百度</a> <!--页面内跳转,锚点 --> <a href="">H5+css</a> <a href="#js">js</a> <a href="">php</a> <a href="">移动端</a> <div id="js">锚点</div> <div></div> <div></div> <!--img 专门用于显示图片 ,img可是设置宽高 。 可替换标签:显示的内容不是由标签内的内容决定的, 而是由其属性决定的。e.g:img,video... 特征:1.可设置宽高 --> <!--‘.’ 表示当前路径 --> <!--‘..’ 表示根路径 --> <!--alt 图片加载失败后的说明 title 图片的提示 --> <img src="" alt="" title="" style="width:100px;height:100px;"> <!--var,strong,em 表示强调 --> <!--倾斜 --> <var>我是强调</var> <!--加粗 --> <strong>我是强调</strong> <!--倾斜 --> <em>我是强调</em> <!--var、strong、em:一般情况下会被降级使用span --> <!--i,b h5新增标签 --> <i>斜体</i> <b>加粗</b> <!--表单:一般用于向服务器提交信息 --> <!--method:get/post --> <!--form块标签,input行内标签 内部基本是行内标签--> <!--input 可替换行内标签,可设置宽高 --> <form action="index.php" method="post"> 用户名:<input type="text" name="username" style="width:100px;height:50px;"> 密码:<input type="password" name="pwd"> <input type="submit" value="登陆"> <!--文件浏览 --> <input type="file"> <!--单选框 --> <input type="radio" name="sex">男 <input type="radio" name="sex">女 <!--多选框 --> <input type="checkbox">HTML <input type="checkbox">JS <input type="checkbox">JQ <input type="button" value="按钮"> <br> <input type="submit" value="登陆"> <br> <input type="reset" value="重置"> <!--文本域 cols 列 rows 行 --> <textarea cols="5" rows="40"></textarea> <!--下拉列表 --> <select> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> <option value="">深圳</option> </select> </form>