首页 > web前端 > html教程 > Summary—【base】(HTML) - 小花大方

Summary—【base】(HTML) - 小花大方

WBOY
发布: 2016-05-21 08:42:24
原创
1380 人浏览过

Html知识点:

1. 建议开发人员计算机基本配置

  a) 显示所有文件的后缀名*

  b) 文件的排列方式改为详细信息,并且名称一定要能够全部显示出来

  c) 使用小的任务栏

  d) 将常用的工具锁定到任务栏中

 

2. 浏览器与服务器

  a) 浏览器与服务器之间存在交互关系

  b) 浏览器的内核又被称之为渲染引擎

  c) 目前比较主流的浏览器内核:

TridentIE、猎豹浏览器、360浏览器、极速安全浏览器

GeckoFirefox

WebKitSafari

Blinkchrome opera

参考http://blog.sina.com.cn/s/blog_6b2fcbbc0102uz1g.html

 

  d) 浏览器与服务器之间进行交互时要经过

    i. 浏览器发送请求报文

    ii. 服务器处理请求报文,并返回响应报文

    iii. 浏览器处理响应报文,并进行从上到下解析渲染

参考http://www.cnblogs.com/biyeymyhjob/archive/2012/07/28/2612910.html

 

  e) 服务器的基本能力:服务器要具备承担服务并保障服务的能力

  f) 浏览器的作用: 浏览器是个显示网站服务器或文件系统内的文件,并让用户与此些文件交互的一种应用软件

  g) 浏览器发送到服务器中请求报文的查看方法

    i. 在网页中右键选择审查元素,审查元素中找到Network,在network中找到headers,headers中查看请求报文的具体信息

请求报文具体信息的查看:

http://jingyan.baidu.com/article/bea41d437e65bab4c51be6e5.html

 

3. 请求协议(http超文本传输协议)

  a) 请求协议包括请求报文、响应报文和URL

  b) 其中URL又分为协议名、服务器IP端口号及请求的页面

 

4. 文件后缀名和打开方式:

  a) 修改文件后缀名,文件的内容不会发生任何改变

  b) 后缀名是用来决定文件的打开方式的

  c) 修改某种后缀名的打开方式步骤: 文件右键-打开方式-勾选所有的该类程序都已这种方式打开-确定

 

5. 超级文本标记语言HtmlHyperText Markup language

  a) Html一种在浏览器上运行的一种标记语言

  b) Html的作用就是给文本加上含有语义的标签

  c) 结构:

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">meta</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>
登录后复制

  d) Html中所有的标签都是用包裹起来的

  e) 文档:htmlXhtml ,html5

 

6. 标签

拓展:Html5标签语义

http://www.zhangxinxu.com/wordpress/2011/11/i-b-em-strong-html5-%E8%AF%AD%E4%B9%89/

  a) H系列标签

    i. 作用:某段话以标题的形式显示

    ii. H系列标签包括{ h1、h2、h3、h4、h5、h6 }

    iii. 一个页面中只能有一个h1标签

  b) P标签(段落标签)

    i. 作用:使某一行文字成为一个段落

    ii. P标签默认独占整行,与上下内容之间存在距离

  c) Hr标签

    i. 作用:页面中显示一条横线

    ii. Hr标签默认占整行

  d) Br标签

    i. 作用:页面中进行换行

  e) Strong标签

    i. 作用:突出某段话的重要性,加重段落语气

  f) Ins标签

    i. 作用:文本加上下划线

  g) Em标签

    i. 作用:突出某个词或短语的重要性,用于加重段落中比较重要的内容语气

  h) Del标签

    i. 作用:文本加上删除线

  i) 不建议使用的标签{b、u、is}

  j) Img标签

    i. 作用:页面中显示一张图片

  k) a标签

    i. 作用:超链接到其他网页

    ii. 超链接到本网页中的某个位置(锚点)

    iii. 不跳转(#)

    iv. 跳转到其他网页中的某个位置

    v. 可以进行下载(不推荐)

 

7. Sublimewindows中常用的快捷键 在这里不一一列举了

  a) Ctrl+A/Ctrl+S/Ctrl+C/Ctrl+V等

8. 绝对路径与相对路径

  a) 绝对路径:带有盘符的路径,相对于计算机来查找文件的

  b) 相对路径:没有盘符的路径,相对于当前页面来查找文件的

9. 标签之间的关系

  a) 嵌套关系:一个标签包裹着另一个标签,那么这两个标签则是嵌套关系

  b) 并列关系:一个标签与另一个标签是并列的,那么这两个标签则是并列关系

  c) 在嵌套关系中,注意标签的缩进,并不是一定要进行缩进,但是缩进会利于对代码的维护

10. Html标签

  a) 在html中无论同时出现了多少个空格、缩进、换行都默认为一个空格

  b) 一个完整的网页应该由开始,由结束 (!DOCTYPE是声明文档类型的)

  c) Html标签也被称为根节点标签

11. Head标签

  a) Head标签用来存放title,meta,link,style,script,base标签的,其中title是必须要写的标签

  b) Head中的title标签是为网页添加标题的标签

  c) Head中的Meta标签是优化页面SEO,可以设置页面所使用的字符集和页面关键字,页面描述等

    1. Description可以描述页面,可以用来使用百度程序(网络爬虫)来收录关键信息,以此提高页面的排名。

    2. Keywords:关键词,可以用来提高页。面的关健词的比重(前升排名的一种方式。)

    3. 字符集(编码格式):

<span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html;charset=UTF-8"</span><span style="color: #0000ff;">></span><span style="color: #000000;">

Charset(字符集的格式):UTF-8.</span></span>
登录后复制

  注意:字符集(文字在电脑是存储的字典):

  电脑是不能直接存储文字的,一般情况下电脑存储的是这个文字在“字典”里对应的位置。

      gb2313---->gbk;

     国标2313---->国标扩

 

  d) Head中的base标签是设置页面中所有a标签的属性的

  e) Head中的style标签是设置页面中的css

  f) Head中的script标签是用来设置页面中的JavaScript

  g) Head中的link标签是用来设置外部文件的

12. Body标签

  a) Body标签是用来存放所有html标签的

  b) Body标签是html页面的主体

 

13. 字符集

  a) 字符集包括gb2312和UTF-8

  b) Gbk(国标扩)是gb2312(国标)的扩充

  c) GBK收录了所有的中文和片假名,并且每个中文占2字符

  d) UTF-8收录了世界上所有的语言,并且每个中文占3字符

  e) 因此UTF-8的性能要比GBK

  f) 根据网页所面向的国家不同,选择不同的字符集

14. 列表

  a) 无序列表

    >标签

        i. 用于表达没有顺序的数据

        ii. 无序列表中的数据用

  • 标签包裹

        iii. 

      标签中只能包裹
    • 标签

        b) 有序列表

        标签

            i. 用于表达有顺序的数据

            ii. 无序列表中的数据用

      1. 标签包裹

            iii. 

          标签中只能包裹
        1. 标签

            c) 自定义列表

              i. 用于表达自定义的数据,W3C中是dl>标签定义了定义列表

              ii. 自定义标签只能包裹dt>标签

          标签

              iii. Dt是设置列表的子标题的

              iv. Dd设置列表中的数据的

          15. 表格table标签

            a) 表格标签完整结构

              i.

          <span style="color: #0000ff;"><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">caption</span><span style="color: #0000ff;">><span style="color: #800000;">caption</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">thead</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">th</span><span style="color: #0000ff;">></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">th</span><span style="color: #0000ff;">></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"></span><span style="color: #800000;">thead</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;"> tr </span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"></span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">tfoot</span><span style="color: #0000ff;">></span><span style="color: #800000;">tfoot</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"></span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span>
          登录后复制

              ii. Caption标签是设置表格标题的

              iii. Thead标签是包裹表头的

          标签标签

              iv. Tbody标签是包裹表格内容的标签和标签

              v. Tr标签表示行,th标签和td标签表示列

              vi. Tfoot标签表示表格底部的备注

          16. 表单form

            a) 表单的作用:用来收集某些信息的

            b) 所有的表单要放到form标签中

            c) 表单的种类

              i. text属性:输入框

              ii. password属性:密码框

              iii. hidden属性:隐藏域

              iv. radio属性:单选框

              v. checked属性:默认属性

              vi. checkbox属性:多选框

              vii. button属性:按钮

              viii. image属性:图片按钮

              ix. reset属性:重置所有表单中的填写信息

              x. subm

              it属性:提交数据

              xi. selected属性:设置默认显示(适用radio标签和selectbox标签)

              xii. select标签(标签),创建一个下拉框

              xiii. option标签,设置下拉框中的内容

              xiv. multiple属性:设置下拉框为列表框

              xv. textarea文本域,创建一个文本域

          17. 没有语义的标签div和span

            a) Div是与CSS调整网页布局的

            b) Div标签是独占行的

            c) Span标签是辅助div进行网页布局的

            d) Span标签是没有宽和高的

            e) Span 标签的宽和高由span中的内容决定的

          18. 注释

            a) Html中的注释以结束

            b) Html中注释不可以叠加使用

          19. 字符实体

          特殊字符

          描述

          字符代码

           

          空格

           

          >

          小于号

          大于号

          >

          &

          和号

          &

          人民币

          ¥

          ©

          版权

          ©

          ®

          注册商标

          ®

          °

          摄氏度

          °

          ±

          正负号

          ±

          ×

          乘号

          ×

          ÷

          除号

          &divde;

          ²

          平方

          ²

          ³

          立方

          ³

      2. 来源:php.cn
        本站声明
        本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
        热门教程
        更多>
        最新下载
        更多>
        网站特效
        网站源码
        网站素材
        前端模板