H5开发学习摘要

网页三兄弟:HTML、CSS、JavaScript

H5开发学习摘要_第1张图片

由上图可以发现 HTML 负责把网页的结构构建出来,所以看起来都方方正正的不是很美观,而 CSS 负责把外貌给显示出来,让网页的外貌看起来美观一些,最后 JavaScript 负责去控制网页里面的内容以及使用者的操作行为。

HTML

HTML语法

什么是 HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • -标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如

  • HTML 标签通常是成对出现的,比如

  • 标签对中的第一个标签是开始标签,第二个标签是结束标签

  • 开始和结束标签也被称为开放标签和闭合标签


HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容

<html>
<body>

<h1>我的第一个标题h1>

<p>我的第一个段落。p>

body>
html>

HTML元素

HTML 文档是由 HTML 元素定义的。

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

元素:

<p>This is my first paragraph.p>

这个

元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签

,以及一个结束标签


元素内容是:This is my first paragraph

思考问题1:标签和元素的区别

常用标签


<h1>这是一个标题。h1>

<p>这是一个段落 p>

<a href="https://www.baidu.com/">百度a>

<img src="url" alt="some_text">

<ul>
<li>Coffeeli>
<li>Milkli>
ul>

<ol>
<li>Coffeeli>
<li>Milkli>
ol>

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
form>

元素的分类:块级元素和内联元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

实例:

,

,

    ,

    内联元素在显示时通常不会以新行开始。

    实例: ,

    , ,

    HTML
    元素

    HTML

    元素是块级元素,它可用于组合其他 HTML 元素的容器。

    元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

    如果与 CSS 一同使用,

    元素可用于对大的内容块设置样式属性。

    元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用

    元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。

    HTML 元素

    HTML 元素是内联元素,可用作文本的容器

    元素也没有特定的含义。

    当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。

    CSS

    CSS 概述

    • CSS 指层叠样式表 (Cascading Style Sheets)
    • 样式定义如何显示 HTML 元素
    • 样式通常存储在样式表
    • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
    • 外部样式表可以极大提高工作效率
    • 外部样式表通常存储在 CSS 文件
    • 多个样式定义可层叠为一

    思考问题1:已经有了HTML为什么还要在创造样式?

    思考问题2:怎么理解层叠的意思?

    CSS语法

    CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

    selector {declaration1; declaration2; … declarationN }

    选择器通常是我们需要改变样式的 HTML 元素。

    每条声明由一个属性和一个值组成。

    属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

    selector {property: value}

    下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

    在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

    h1 {
        color:red;
        font-size:14px;
    }
    

    下面的示意图为您展示了上面这段代码的结构:

    H5开发学习摘要_第2张图片

    常用属性

    body {
        background-color:#b0c4de;
    }
    
    .one {
        border-style:solid;
        border-width:5px;
    }
    
    .center {
        margin: auto;
        width: 50%;
        border: 3px solid green;
        padding: 10px;
    }
    
    .center {
        text-align: center;
        border: 3px solid green;
    }
    

    CSS基本选择器

    选择器允许以一种独立于文档元素的方式来指定样式。常见的主要有3中基本选择器,主要为:id选择器、类选择器、元素选择器,属性选择器和通用选择器这里不再讲解,大家自己下去看。

    元素选择器

    最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

    如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

    html {color:black;}
    h1 {color:blue;}
    h2 {color:silver;}
    

    id选择器

    id选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

    HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 # 来定义。

    以下的样式规则应用于元素属性 id=“title”:

    #title {
        text-align:center;
        color:red;
    }
    

    class 选择器

    class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用

    class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

    在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

    .center {
        text-align:center;
    }
    

    思考问题1:类选择器和id选择器分别在什么情况下使用?

    CSS高级选择器

    高级选择器就是用组合选择符把基本选择器组合起来使用。

    组合选择符说明了两个选择器直接的关系。

    注意区分后代、儿子、兄弟的关系;
    伪类和伪元素选择器这里不再说明,大家下去自己了解。

    后代选择器

    后代选择器(descendant selector)又称为包含选择器。
    后代选择器用于选取某元素的后代元素(可以选择作为某元素后代的元素)。
    后代选择器,描述的是祖先结构。

    以下实例选取所有

    元素插入到

    元素中:

    div p {
      background-color:yellow;
    }
    

    子选择器

    与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
    如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

    例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

    h1 > strong {
        color:red;
    }
    

    注意:子结合符两边可以有空白符,这是可选的。

    相邻兄弟选择器

    如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

    例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

    h1 + p {
        margin-top:50px;
    }
    

    交集选择器

    h3.special{
        color:red;
    }
    

    选择的元素要求同时满足两个条件:必须是h3标签,然后必须是special标签。

    在HTML中使用:

    <h3 class="special">cssh3>
    

    注意,交集选择器没有空格。所以,没有空格的div.red(交集选择器)和有空格的div .red(后代选择器)不是一个意思。

    交集选择器一般都是以标签名开头,比如div.top , p.special

    并集选择器(分组选择器)

    三种基本选择器都可以放进来。

    p,h1,#mytitle,.one {
        color:red;
    }
    

    定义了一个并集选择器,带有p,h1,id="mytitle",class="one"的标签都内容会显示红色;

    组合选择符号表

    项目 Value
    后代选择器 空格
    子选择器 >
    相邻兄弟选择器 +
    后续兄弟选择器 ~
    交集选择器 .
    组合选择器 ,
    串联选择器 &

    文档流

    何为文档流?我们以作业本来举例

    H5开发学习摘要_第3张图片

    什么是文档流(normal flow),下面是 www.w3.org 的描述:

    Normal flow
    Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

    • normal flow直译为常规流、正常流,国内不知何原因大多译为文档流;
    • 窗体自上而下分成一行一行,并在每行中按从左至右的顺序排放元素;
    • 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端,若当前行容不下,则另起新行再浮动;
    • 内联元素也不会独占一行,几乎所有元素(包括块级,内联和列表元素)均可生成子行,用于摆放子元素;
    • 有三种情况将使得元素脱离normal flow而存在,分别是 float,absolute ,fixed。

    盒模型

    所谓盒模型(Box Model)就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。

    所有的文档元素(标签)都会生成一个矩形框,我们称为元素框(element box),它描述了一个文档元素再网页布局中所占的位置大小。因此,每个盒子除了有自己大小和位置外,还影响着其他盒子的大小和位置。

    盒子模型特性:

    • 每个盒子都有:边界、边框、填充、内容 4个属性;
    • 每个属性都包括4个部分:上、右、下、左。属性的4部分可以同时设置,也可以分别设置。

    H5开发学习摘要_第4张图片

    传统布局(display、position、float)

    无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”。

    CSS display(显示)属性

    display属性设置一个元素应如何显示

    H5开发学习摘要_第5张图片

    CSS position(定位)属性

    CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。

    position: static

    该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

    position的默认值是static。

    position: relative

    该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

    position: absolute

    不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margin),且不会与其他边距合并。

    position: fixed

    不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。

    CSS float(浮动)属性

    float

    CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

    元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

    一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    重要结论

    假如某个div元素A是浮动的,如果A元素的上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);

    如果A元素的上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

    div的顺序是HTML代码中div的顺序决定的。

    靠近页面边缘的一端是前,远离页面边缘的一端是后。

    经过上边的学习,可以看出:元素浮动之前,也就是在标准流中,是竖向排列的,而浮动之后可以理解为横向排列。

    浮动元素之后的元素将围绕它。

    浮动元素之前的元素将不会受到影响。

    clear

    清除浮动 - 使用 clear

    元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

    clear 属性指定元素两侧不能出现浮动元素。

    清除浮动可以理解为打破横向排列。

    语法:

       clear : none | left | right | both
    
       取值:
    
       none  :  默认值。允许两边都可以有浮动对象
    
       left   :  不允许左边有浮动对象
    
       right  :  不允许右边有浮动对象
    
       both  :  不允许有浮动对象 
    

    你可能感兴趣的:(H5开发学习摘要)