zoukankan      html  css  js  c++  java
  • Html基础

    快捷键的认识

    Ctrl+c

    复制

    Ctrl+v

    粘贴

    Ctrl+a

    全选

    Ctrl+x

    剪切

    Ctrl+s

    保存

    Ctrl+z

    返回上一步

    Alt+tab

    切换软件

       Ctrl+tab

    内部的切换

    Windows+d

    返回桌面

    Windows+r(notepad)

    运行窗口

    Windows+e

    打开本地磁盘

    2 认识大前端

    2.1   解决用户体验

    2.2  Web(网页)   移动端

    2.3  态度

         多做练习

    3 认识网页

    3.1   网页的组成

         文字,图片,按钮,输入框,视频。。。元素组成。

    3.2  Web标准

         W3c(万维网联盟)

         ☞结构标准    html

         ☞表现标准    Css

         ☞行为标准    js

    3.3  浏览器介绍

         浏览器就是用来浏览网页得软件。

         360,百度。。。

      

      

         内核:渲染引擎

       

    3.4  浏览器与服务器之间的那点事((✿◡‿◡))

      Http:浏览器与服务器之间传输消息的一种规范

      https:加密处理

      Url地址:

    4 认识html

    4.1   概念

     Hyper   text   markup  language(超文本标记语言)

     超文本:能够实现网页跳转的文本(超链接)

     标记: html中的标签

    4.2  Html结构

      <! Doctype   html>

      <html>    根标签

          <head>

             <title></title>

          </head>

          <body></body>

      </html>

    <! Doctype   html>    文档类型

     <head></head>   html文档头部分

    <title></title>  网页的标题

    <body></body>  html结构的主体部分

    Htm:

    Html:

    后缀名决定文件的打开方式。

    4.3  标签的分类

        ☞单标签:只有开始标签没有结束标签

        例如:<! Doctype   html>

        ☞双标签:有开始标签和有结束标签

        例如: <body></body>

    4.4  标签关系分类

         ☞并列关系(兄弟)

          <head></head>

          <body></body>

         ☞嵌套关系(包含)

          <head>

             <title></title>

          </head>

    4.5  显示代码结构

     ☞新建文件

    4.6  常用快捷键介绍

    Ctrl+shift+D

    快速复制

    Ctrl+L

    快速选中

    Ctrl+鼠标左键

    集体输入

        Ctrl+h

    查找替换

    Ctrl+f

    标签查找

    Ctrl+shift+↑(↓)

    整体移动

    sublime快捷键使用: http://blog.csdn.net/moyan_min/article/details/11530751

    5 Html标签介绍

    5.1   单标签

          ☞文本注释标签

         

           Ctrl+/

          ☞文本换行标签

          

         ☞横线标签

          <hr>

        

    5.2  双标签

         ☞段落标签

         

        ☞标题标签

         注意:标题标签只能     取到数字1-6

        

        ☞文本标签

          <font></font>

        

       ☞文本格式化标签

            文字加粗显示:   <strong></strong>    <b></b>

                

           文字斜体:

            <em></em>     <i></i>

         

          文字删除线;

    文字下横线标签:

    5.3  图片标签(img)

         <img>

        属性:

          Src: 设置显示图片(图片名称或者图片路径)

          Title:用来设置鼠标方到图片上显示的文字

        

        Alt:当图盘无法正常显示的时候,对图片的描述

       Width: 用来设置图片宽度

       Height: 用来设置图片高度

    5.4  相对路径

         ☞当图片和文件(html)在同一文件夹中

          

           Src属性中直接写上图片名称即可。

        ☞当图片在文件(html)的下一级目录中【见自己总结的模型】

         

          Src属性中写上图片所在文件夹名+“/”+图片名称

        ☞当图片在文件(html)的上一级目录中【见自己总结的模型】

        

        Src属性中写上  ../图片所在文件夹名+“/”+图片名称

        

    5.5  绝对路径

         凡是带有磁盘路径的都是绝对路径或者带有网站地址的也是绝对路径

     例如: D:a1.png       www.baidu.com/imags/1.png

    5.6  超链接(a)

        <a   href=””></a>

        页面跳转

      属性:

       Title:   当鼠标放到超链接上显示 的文字

       target="_self"    默认值  网页在当前页面中打开

       target="_blank"   网页在新窗口中打开

       优化的写法:

       

    5.7  锚链接介绍(a)

        ☞任何一个标签设置id属性,并取值

       

        ☞给a标签设置href属性  “#id名称”

        

        文字和图片都可以设置超链接。

    5.8   简单的下载功能

          a标签中通过给href属性设置一个压缩文件,即可实现下载功能。

    5.9    超链接不跳转到任何页面

       

    5.10     特殊字符

      

    6 列表

    6.1   无序列表(ul)

           <ul>

                   <li></li>  列表项

                   <li></li>

                    ......

           </ul>

     属性介绍:

        type="square"     小方块显示

        type="circle"      小圆圈

    6.2  有序列表(ol)

          <ol>

                <li></li>

                     <li></li>

         </ol>

     Type属性:

         A, a ,  i (小写的罗马数字)  I(大写的罗马数字)

     start="3"      li前面的显示从第几个开始

    6.3  自定义列表(dl)

     <dl>

            <dt></dt>  小标题

            <dd></dd> 列表项

            <dd></dd>

            <dd></dd>

     </dl>

    放置背景音乐。

  • 相关阅读:
    在smarty模板中截取指定长度的字符串
    HTMl中Meta标签详解以及meta property=og标签含义
    seo标题关键字描述字数限制Title,keywords,description长度最长多长 ?
    网站title,meta,description如何设置,长度大小多少合适!
    php如何开启gd2扩展
    PHP生成带logo图像二维码的两种方法
    [uart]1.Linux中tty框架与uart框架之间的调用关系剖析
    TCP/IP四层模型和OSI七层模型的概念
    [platform]新旧内核的device设备注册对比
    [platform]linux platform device/driver(三)--Platform Device和Platform_driver注册过程之代码对比
  • 原文地址:https://www.cnblogs.com/duanfeng/p/5682417.html
Copyright © 2011-2022 走看看