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>

放置背景音乐。

原文地址:https://www.cnblogs.com/duanfeng/p/5682417.html