满满正能量_617a
满满正能量_617a

快速Web学习

参考学习：w3school.com.cn/html5/html_5_intro.asp

H5分为：html(内容和结构),css（样式）,javascript（交互）

Html(表示：<标签   属性> 内容（元素）)

html文档中主要分为head，和body两部分；

head:包含title，文章的标题，可以包含javascript；

body:文档主体，包含段落，标题，链接，javascript等标签；


* 元素：标签开始到标签结束的部分全部是元素；


* 标签（大小写不敏感）：


：定义空元素，标签一开始就结束，如不产生新段落的情况下，可以用作换行（新增一行）；

属性> 内容

: 定义段落；

-
：定义标题，h1为最大标题,h6为最小标题；

: 定义水平线；

：定义注释；

:定义缩写；

:定义链接； 

备注：后续文章会详细介绍标签；


* 属性：键值对的形式，紧跟在开始标签中，如name="value"

href="http://www.w3school.com.cn"> This is a link

备注：href="http://www.w3school.com.cn"为属性，This is a link为内容；


* 样式（俗称内联样式）：style属性用于改变html元素的样式，直接放在标签后面的，如

style="font-family:verdana">A heading

style属性：它是一种新的首选的改变html元素样式的方式，通过HTML样式，能够通过使用style属性直接将样式添加到html元素中，或者间接地在独立的样式表中进行定义(稍后介绍)；

属性包含：font-family：字体


* 格式化：

     ** 文本格式化：在一个 HTML 文件中对文本进行格式化

         : 定义粗体文本；

         : 定义大号字；

         : 定义着重文本；

         : 定义斜体字；

         : 定义小体字；

         : 定义加重字体；

         : 定义下标字；

         : 定义上标字；

         : 定义插入字；

         : 定义删除字；

    ** 预格式文本：使用 pre 标签对空行和空格进行控制

         

: pre中的元素的空格和空行全部保留；
 
 
    ** “计算机”输出标签
 
 
        : 定义计算机代码，不保留多余的空格和折行。
 
 
        : 定义键盘码；
 
 
        : 定义计算机代码样本；
 
 
        : 定义打字机代码；
 
 
        : 定义变量；
 
 
        
: 定义预定义格式，保留空格和折行；
 
 
    ** 地址:在 HTML 文件中写地址
 
 
      
:定义地址；
 
 
    ** 缩写与首字母缩写：当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
 
 
        :缩写     title="etcetera">etc. 
 
 
        :这是首字母缩写 
 
 
    ** 文字方向：改变文字的方向
 
 
         : dir="rtl" 为向左输出；
 
 
    ** 块引用：使用 blockquote 元素的话，浏览器会插入换行和外边距
 
 
        
：长引用
 
 
       :定义短引用，带双引号
 
 
    ** 删除字效果和插入字效果
 
 
        :   删除     二十< /del>
 
 
        : 增加
 
 
*引用
 
 
     :定义项目或所写的定义；   WHO
 
 
    :定义著作的标题；
 
 
* 注释
 
 
:注释
 
 

 
 
* 块：大多数的html元素被定义为块级元素或内联元素
 
 
  HTML 块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）
 
 
内联元素：内联元素在显示时通常不会以新行开始，就是一行内突然加入几个字，格式、字体与其他字体都不一样；
 
 
html 
块元素：是块级元素，它是可用于组合其他html元素的容器，没有特定含义，由于是块级元素，浏览器会在其前后显示折行，如果与 CSS 一同使用，
元素可用于对大的内容块设置样式属性。
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。
元素的作用是显示表格化的数据。
html 元素：是内联元素，可用于文本的容器，没特定含义，当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。
 标签：
 * 
:可定义文档中的分区或节（division/section）。
 
 
eg：
 
 
 
 
标题
 
 
段落部分
 
 
 
 
用法： 
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且
 
 
不使用任何格式与其关联。如果用 id 或 class 来标记，那么该标签的作用会变得更加有效。
 
 
是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是
固有的唯一格式表现。可以通过
的 class 或 id 应用额外的样式。
 
 
     * *不必为每一个
都加上类或 id，虽然这样做也有一定的好处。
 
 
     * * 可以对同一个
元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组(类似的元素，或者可以理解为某一类元素），而id 用于标识单独的唯一的元素。
 
 
*:组合文档中的行内元素；span 没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化；
 
 
eg：
 
 
 
 
文档前面部分
 
 
<span
 
 
  style="color:red">这部分内容很特殊
 
 
span>
 
 
文档后面部分
 
 
 
 
* 如果不对 span 应用样式，那么span 元素中的文本与其他文本不会任何视觉上的差异。
 
 
*可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
 
 
*提示：事实上，您也许已经注意到了，一些站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多，但是我们的做法是：使用“提示”使用 span 元素，然后对这个span 元素的父元素，即p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
 
 

 
 
* 列表：
 
 
   **无序列表是一个项目的列表，无序列表始于
    标签，每个列表项始于
  • 标签，此列项       目使用粗体圆点（典型的小黑圆圈）进行标记；
     
 
    eg:
     
 
       
 
    • Coffee
      •  
 
    • Tea
      •  
 
     
 
    显示结果：
     
 
    · Coffee
     
 
    · Tea
     
 
    备注：列表内可以使用段落，换行符，图片，链接以及其他列表等等；
     
 
        **有序列表也是一个项目的列表，列表项目使用数字进行标记；有序列表始于
      ,每个列表项始于
    1. 标签；
       
 
      eg:
       
 
         
 
      1. Coffee
        2.  
 
      2. Tea
        3.  
 
       
 
      显示结果：
       
 
      1.Coffee
       
 
      2.Tea
       
 
      备注：列表内可以使用段落，换行符，图片，链接以及其他列表等等；
       
 
      定义列表:自定义列表不仅仅是一列项目，而是项目及其注释的组合。
       
 
      自定义列表以
      标签开始。每个自定义列表项目以
      开始。每个自定义列表项的定义（描述）
      开始;
       
 
       
 
      Coffee
       
 
      Tea   and Coffee
       
 
      Test
       
 
      RRRRRR
       
 
       
 
      显示结果为：
       
 
      Coffee
       
 
      Tea  and Coffee
       
 
      Test
       
 
      RRRRRR
       
 

       
 
      css:独立的在样式表中进行定义；
       
 
      * 外部样式表（.css文件）：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观,在head部分通过link标签定义。
       
 
      eg：
       
 
       
 
       
 
       
 
      * 内部样式表（.css文件）（用的比较多）：当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过标签定义内部样式表。
       
 
      eg：
       
 
       
 

       
 
       
 

       
 
      * 内联样式(不推荐使用)：当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
       
 
      eg：
       
 
       This is a paragraph
       
 
      备注：单个属性不需要标点符号，多个属性时候需要用；进行分割
       
 
      * 用到的标签：
       
 
         **