温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Html5,Css初学总结

发布时间:2020-07-20 05:46:55 来源:网络 阅读:372 作者:时光x86_002 栏目:移动开发

网页制作

HTML

一、通用模板:

<!DOCTYPE html>

<html lang=”en”>

   <head>

       <meta  charset=”UTF-8”/>

       <title>文档标题</title>

       <link  rel="shortcut icon"  href="img\wujiaoxing.ico"/>        <!- -设置标签页图标- ->

       <link  rel=”stylesheet”   href=”url”/>        <!--外接样式表-->

   </head>

    <body>

                  <header  role=”banner”>

    <nav  role=”navigation”> 页眉  </nav>

</header>

                  <main  role=”main”> 

<article>

       <section>

<p>主要内容</p>

                             </section>

</article>

    </main>      

    <aside  role=”complementary” >附注栏的其他内容</aside>

                  <footer  role=”contentinfo”>页脚(如:版权)</footer> 

   </body>

</html>


二、网页三要素:

            1. 元素标签:

(1) 同行显示:

        <a> (链接标签) </a>

        <em>(斜体标签)</em>

        <strong>(粗体标签)</strong>

        <code> 标记代码</code>

(2) 换行显示:

        1. <h2> (标题1标签) </h2>

        2. <h3> (标题2标签) </h3>

        3. <article> (文章标签)</article>

        4. <p> (段落标签) </p>

                     5.<main></main>:一个页面最多使用一次!不能放置header; footer ; aside; article

        6. <header> </header>

        7. <footer> </footer>

        8. <hr> (分隔线标签) </hr>

        9. <div>容器标签换行是 <div> 固有的唯一格式表现</div>

        10. <section> 区块 </section>

(3) 未知:

        1.<img> (图像标签) </img>

        2.<font> (字体标签) </font>

        3.<b> (粗体标签) </b>

        4.<i> (斜体标签) </i>

        5.<u> (下划线标签) </u>

        6.<sup>(上标标签) </sup>

        7.<sub>(下标标签) </sub>

        8<audio>   </audio>

        9.<video>    </video>

        10.<li> 列表</li>

        11.<ol type=”a ” start=” 3”>

            <li>有序列表</li>

            <li>有序列表</li>

            <li>有序列表</li>

        </ol>

        12.<ul type=”disc/circle/square”>

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

 

</ul>

13<ins>添加内容(表现为加下划线)</ins>

14.<del>删除内容(表现为加删除线)</del>

15.<cite>标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。按照惯例,引用的文本将以斜体显示。

</cite>

16. <figure>标签规定独立的流内容(图像、图表、照片、代码等等)。</figure>

2. 属性:

                    <a>: href; title;

                    <img>: src; width; height; alt

        3. 值:

 

三、其他:

        4. 注释:

   如:<!-- 我是被注释内容,并且在浏览器中不会显示 --> 

        5.学习相关链接:

    网页转义符号HTML代码大全:http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

         HTML 系列教程:http://www.w3school.com.cn/h.asp

  各类标签及其用法:http://www.w3school.com.cn/tags/tag_doctype.asp

        6.链接锚链接:链接到某一页面的特定区域。

 

 

CSS

   模板:Selector(选择器){

                           Attribute(属性): value() ;

              }     //  种元素

              Color#000000(黑色)/#ffffff(白色)

   注:单斜杆表示或者!

1.链接样式:

      a:link{

          color: blue;

      }       /*链接激活前的外观*/

      a:hover{

          color: orange;

}      /*鼠标指向链接时的外观*/

      a:hover{

          color: red;

}      /*激活链接后的外观*/

 

2.文本样式

    字体:

        font-family: Geneva,Tahoma,sans-serif;        /*字体类型,三选一*/

        font-style: italic/normal;              /*斜体和正体二选一*/

        font-weight: bolder/bold/normal/lighter;        *更粗/正常/更细/三选一*/

        font-size: 16px/1em;        /*字体大小,默认1em=16px*/

        line-height:16px        /*行高*/

    字间距word-space:length(4px或其他);

 字偶距 letter-space:length(4px或其他);

 添加缩进text-indent: length(2em或其他);

 对齐文本text-align: left/right/center/justify(两端对齐);

 修改文本大小写:text-transform: uppercase()/lowercase()/none;  

 装饰文本:text-decoration: underline/overline/through/none;

            (下划线/上划线/删除线/)

        3.元素显示方式display: block/inline/;    (换行/行内显示)

        4.元素可见性visibility: visible/hidden;

        5.边框border-style :dashed/solid/dotted ;   (虚线/实线/点划线)

border -width:

border -color:

border:2px solid red;

border-radius:length;  //边框圆角半径

  6./内边距margin-top/-bottom:length;

                    Paddinglength;

                    Padding-top/bottom/left/right:length;

       7.元素浮动:float:left/right/none;

       8.清除浮动:clear:left/right;

       9.处理溢出:overflow: visible/hidden/scroll/auto;

  10.修改指针形状:cursor: pointer/default/crosshair/move/wait/help;

       11.列表标记:

                        list-style-type:disc/circle/square….;

                        /*  

                            disc:圆点;circle:圆圈;square:方块;decimal:数字;

                        upper-alpha:大写字母。

    */

   12.有序列表:

                    <ol start=”2”>2开始编号</ol>

                     List-style-position: inside/outside;


  13.fieldset(表单):

                    表单字段(type属性值)text/email/password/url/submit/radio()/checkbook(复选)

                <input type=”text” placeholder=”提示信息”>

     单选框:

                            <p>

                        <input type="radio" id="tankzx" name="school" value="T"/>

                                 <label for="tankzx" >tk</label>

                             </p>

     复选框: 

                            <p>

    <input type="checkbox" id="tank" name="学校" value="TZ"/>

                                  <label for="tank" >tk</label>

                             </p>

     列表框:

                            <p>

                <label for="state">State(国家):</label>

                                 <select id="state" name="state" size=” ”>

                                      <optgroup label=”xx”>      /*分组列表*/

                                           <option value="ch">China</option>

                                           <option value="usa">American</option>

                                      </optgroup>

                                      <option value="en">England<option>

                                  </select>

                            </p>

        14.表格:

                  <table>

                     <tr>                      //行标记

                          <th></th>      //表头标记

                          <td></td>       //单元格标记

                     </tr>    

                    <tr>                      

                          <td></td>     //单元格标记 

                          <td></td>       //单元格标记

                     </tr>    

              </table>

Javascript

1. 函数调用:

    直接调用  (functionname(形参))

    事件响应调用(onclick=”check()”

      超链接调用 (<a href=”javascript:check()”)


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI