h5入门基本标签的认识和掌握

    xiaoxiao2023-03-24  7

    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>

    转载请注明原文地址: https://ju.6miu.com/read-1200243.html
    最新回复(0)