• 中文
  • 注册
    • 查看作者
    • html初学者入门基础

      HTML基本结构

      基本文件格式:一般写的代码需要存储在文件中,比如html代码存储在.html文件中

      什么是HTML标签:HTML标签也称为HTML标记,由开始标签和结束标签组成,用于表现结构化的内容,将内容构造成为一个完整的网页。

      HTML标签组成

      双标签:是指由开始标签和结束标签组成

      单标签:是指没有结束标签的标签,由一个标签构成即为开始也是结束

      理解:开始标签是被括号包围的元素名,结束标签是被括号包围的斜杠和元素名,如<h1></h1><b></b> 注意:有些HTML元素没有结束标签,比如<br/>

      HTML详细说明

      html:告诉页面这是一个HTML文档,并声明这个网页是面向那种语言的用户lang="zh-CN"    <!DOCTYPE html>

      文档声明:位于文档的首航,告知浏览器文档使用哪种HTML或XHTML规范。让浏览器通过正确的方式解析我们的网页,使网页能正常显示。<!DOCTYPE html>

      head标签:就是一个网页的头,头部中的内容一般存放描述文档的信息 <head>

      body:就是一个身体,一般来说 body里面的内容要显示出来<body>

      <html>页面基础元素

      简介:HTML标签也称为HTML标记,由开始标签和结束标签组成,用于表现结构化的内容,将内容构造成为一个完整的网页

      规范:1.HTML标签是由尖括号包围的关键词,比如<html>

                2.HTML标签通常是成对出现的,比如<b>和</b>

                3.HTML不区别大小写(建议使用小写)

                4.HTML可以嵌套,但是不允许交叉嵌套。正确<b><i>内容<i></b> 错误 <b><i>内容</b> <i>

      <head>元素

      简介:是所有头部元素的容器。

      能包含哪些:<title><base><link><mate><script><style>

      连接样式表:<link>元素

      规定呈现样式:<style>元素

      指定字符集:<mate>元素,关键词 name,content

      本质:优化页面,利于搜索,设置字符集,防止乱码,引外部样式方便,规定呈现样式。

      <title>元素

      简介:标签定义文档的标题。

      用途:定义浏览器工具栏中的标题,提供页面被添加到收藏夹时显示的标题,显示在搜索引擎结果中的页面标题。

      name 元信息元素名称属性

      简介:name属性用来指定文档中附加信息的名称,通常用keywords来定义关键字

      用法:<mate name="信息名称"/>

      理解:在<mate>元素中,名称必须对应有相关的值才能生效

      content 元信息元素的值

      简介:用来指定文档中附加信息的值

      搭配:content属性是与name属性成对出现

      用法:<mate name="信息名称" content="附加信息的值" />

      <div>层元素

      简介:   在页面层元素<div>用来将页面内容分割成各个独立的部分是块级元素。

      用途:在每个<div>元素中,不仅可以包含文本内容,也可以包含图片、表单等其它内容,属性:在默认的情况下,<div>元素所包含的内容,将在新的一行显示

      总结:块级元素,独占一行

      id  标记属性

      简介:给元素定义唯一标识

      好处:方便在元素中使用行为

      扩展:类似class属性的作用,用来调用级联样式表

      class  调用样式属性

      简介:class属性用来调用层叠样式表,也可以调用使用<link>元素链接外部样式表。

      好处:方便使用和更改

      style  样式属性

      简介:页面主体元素的样式属性,用来给页面内容定义级联样式表. 

      用途:包含style属性、class属性

      理解:style是样式,想创建那个元素的样式,就写上那个元素的类型进行设置

      align 对齐属性

      简介:对齐属性用来定义内容的水平对齐方式

      用途:使用对齐属性,不仅可以控制文本内容的对齐,也可以控制文本中图片等内容的对齐

      <p> 段落元素

      简介:用来定义一个段落

      用途:可以包含文本、图片,以及用来修饰文本的元素,被<p>元素包含的内容,默认的显示方式是换行显示

      理解:块级元素,独占一行

      <br>  换行元素

      简介:换行元素<br>用来使被分割的文本换行显示

      <pre> 保留格式元素

      简介:保留格式元素<pre>用来使包含的内容,按照文档源代码的格式显示

      用法:因为浏览器的默认显示方式中,将压缩多个空格为一个,同时忽略换行等空白符号

      <hr>  水平分割线元素

      简介:水平分割线元素<hr>用一条一定高度的分割线,分割页面内容

      高度属性:水平分割线的厚度属性size,用来定义水平分割线的粗细

      宽度属性:水平分割线的宽度属性width,用来定义水平分割线的宽度

      注意:style内定义高度宽度属性徐加px

      <b> 加粗元素

      简介:用来使包含的文本加粗显示

      理解:是一个物理标签,它所包围的字符将被设为bold(粗体)

      <i> 斜体显示元素

      简介:用来使包含的文本内容以斜体的方式显示

      理解:是一个物理标签,它所包围的字符将被设为Italic(斜体)

      <em> 斜体强调元素

      简介: 是一个逻辑标签,它的作用是加强字符的语气一般来说,加强字符的语气是通过将字符变为Italic(斜体)来实现的。

      <strong> 加粗强调元素

      简介:是一个逻辑标签,它的作用是加强字符的语气一般来说,加强字符的语气是通过将字符变为bold(粗体)来实现的。

      <big>  放大元素

      简介:放大元素<big> 用来使包含的文本增大一号显示

      注意:当文本内容已经是最大字号时,将不能继续增大。

      <small>  缩小元素

      简介:缩小元素<small> 用来使包含的文本缩小一号显示

      注意:当文本内容已经是最小字号时,将不能继续变小。

      <sup> 上标元素

      简介:用来使包含的文本内容以上标的方式显示

      用途:元素中的文本的底部,将在普通文本的一半高度上显示

      <sub> 下标元素

      简介:用来使包含的文本内容以下标的方式显示

      用途:元素中的文本的顶部,将在普通文本的一半高度上显示

      列表ul和li

      <ul>:无序列表元素<ul>用来定义没有顺序编号的列表元素.

      <li>: 每一个列表元素里面具体的值,也就是列表中的条目。

      type:是个类型属性,用来指定列表条目前的项目符号(列表条目前的修饰部分)的类型

      定义不同:ul 是 Unordered List(无序列表)的缩写。<li> 标签定义列表项目(li是lists的缩写)。

      用法不同:<ul> 标签定义无序列表。使用 <li> 标签定义的列表可以是个无序列表也可以是有序列表。

      支持的HTML全局属性不同:<li> 标签支持所有的HTML 全局属性。<ul>标签支持 HTML 中的全局属性:accesskey、class、dir、id、lang、style、tabindex、title。

      属性不同:<ul>标签中的属性:compact、type。<ul>标签:id, class, title, style, dir, lang, xml:lang。

      元素级别不同:ul 是块级元素可以定义宽和高,li表示行排列不能单独使用,需要在ul和ol里面,配合使用。

      列表ol和li

      <ol>:有序列表元素<ol>,用来定义有顺序编号的列表元素

      <li>:每一个列表元素里面具体的值,也就是列表中的条目

      type:项目符号的类型属性type,用来指定列表条目的项目符号(列表条目前的修饰部分)的类型

      列表元素dl

      简介:<dl>用来定义类似术语或者词汇表的列表信息,其中的具体条目信息,一般包括术语(或者词汇等内容),术语解释两个部分

      dt:定义<dl>元素中一个具体的条目。可以使用文本,图片等元素

      dd:用来定义<dl>元素中一个具体的条目说明

      A标签

      简介:定义超链接,用于从一张页面链接到另一张页面

      href:指示链接的目标

      target:规定以何种方式打开

      address和cite

      <address>:地址元素用来在内容中定义地址的相关内容

      用途:标签定义文档作者/所有者的联系信息。

      效果:在常用的浏览器中,会将<address>元素所包含的内容用斜体显示

      <cite>:文献参考元素,用来定义一段引用的文本内容

      用途:标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。

      效果:使用该元素的文本,一般将会以倾斜的格式显示,用来和普通文本相区别。

      注释:人名不属于作品的标题。

      <img> 图像元素

      用途:图像元素<img>用来在页面中显示一个图片

      src:定义一个调用图片的路径

      注意:src属性<img>元素中必须含有的属性

      width:定义图片元素的宽度

      height:定义图片元素的高度

      alt:图片路径错误,替代图片的文本

      <table> 表格元素

      用途:页面进行排版更加美观,数据直观,利于理解,管理方便

      结构组成:表格标记、行标记、单元格标记

      table:表格元素<table>用来在页面中定义一个表格

      注意:该并不能单独的定义一个完整的表格,而是必须要在其中使用<tr>元素,才能构成一个表格

      tr:行元素<tr>用来定义表格的行

      注意:<tr>元素要包含其他元素,才能构成一个表格

      表格元素td和border

      td:单元格元素<td>用来定义表格的单元格。单元格的含义就是表格中最小的表格单元

      注意:跟table,tr一样,td也需要跟他们一起配合使用

      border:边框属性border来定义表格元素的边框宽度

      注意:如果单元格中没有定义其他的边框属性,则单元格,将使用1像素的边框属性值

      align:水平对齐属性align来定义表格的对齐方式

      表格元素height和width

      height:高度属性height来定义表格的高度

      注意:如果单元格中没有定义自身的高度属性,则单元格将根据自身的内容自动调整高度来适应表格。

      width:宽度属性width来定义表格的宽度

      注意:同height一样,也会自动调整来适应表格的宽度

      边框颜色属性

      bordercolor:为了使表格在页面美观,我们用边框颜色属性bordercolor来定义表格边框的颜色

      边框暗边线属性:在<table>元素中边框暗边线是指表格的右侧和底部的边线

      bordercolordark:用来定义表格暗边框暗边线的颜色

      边框亮边线:在<table>元素中边框亮边线,是指表格的左侧和顶部的边线

      bordercolorlight:定义边框亮边线的颜色

      总结:bordercolordark暗边线(右侧和底线) bordercolorlight亮边线(左侧和顶线)

      表格背景属性

      bgcolor:为了突出显示表格,还可以为表格设置与页面不同的背景。通常用背景颜色属性bgcolor来定义表格的背景颜色

      background:背景图片属性,来定义表格使用的背景图片

      注意:如果单元格中没有定义背景图片,则单元格显示<table>元素中定义的背景图片

      <caption>:标签定义表格的标题, 标签必须直接放置到 <table> 标签之后。

      表格的一些其他属性

      thead:表格头行元素<thead>用来定义表格最上端表首的样式

      caption:表格元素<caption>来定义表格的标题

      th:定义表格的表头,文本内容会加粗显示,同时默认为中间对齐

      tbody:表主体元素<tbody>用来将表格的内容分割成各个独立的部分

      tfoot:表格行尾元素<tfoot>用来定义表格行尾的标注等内容

      对齐属性

      align:水平对齐属性align来定义行所包含的单元格内容的水平对齐方式

      valign:垂直对齐属性valign来定义行所包含的单元格内容的垂直对齐方式

      background:用背景图片属性background来定义单元格使用的背景图片

      行和列属性

      合并行属性:rowspan通常用合并行属性rowspan,来将某一列的几个单元格合并成一个

      合并列属性:colspan用来将某一行的几个单元格合并成一个

      间距属性

      单元格间距属性:用单元格间距属性cellspacing来定格各个单元格之间的间距

      单元格空白属性:在默认情况下,表格内的文字会紧贴着表格的边框,这样看上去非常拥挤

      cellspadding:可以使用单元格补白属性cellspadding来调整各个单元格与其中的内容之间的间距

      表单

      简介:页面中用来提供用户交互的主要方法

      作用:一般当用户填写完信息后提交操作,于是表单的内容就从客户端的浏览器传送到服务器上,经过服务器上处理程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有交互性。

      form:<form></form>标志对用来创建一个表单

      注意:<form>元素可以在页面中任何位置使用,当其中没有任何控件时,本身并没有表现效果。

      action:动作属性action,用来指定处理表单的程序的路径

      method:表单的method属性用来定义处理程序从表单中获得信息的方式,一般为get和post的其中一个.

      表单控件

      input:表单控件元素<input>,用来在页面中定义输入内容的部分

      划分:文本框、复选框、单选按钮等

      语法结构:<input 属性=" 属性值"  />

      name:表单名称属性name,用来指定表单的名称,标记某个表单,方便程序的处理.

      具体控件类型

      text:文本域中<input>元素中type属性值为text,其主要作用是,用来提供用户输入文本的功能

      注意:文本域只能单行显示,超出定义宽度的内容,将被隐藏

      password:密码区域<input>元素的type属性值为password,用来提供输入密码,口令内容的区域

      submit:提交按钮中<input>元素的type属性值为submit,用来发送表单中的内容

      注意:只有单击“提交”按钮,表单中的信息才能够发送给相应的程序

      reset:复位按钮中<input>元素的type属性值为reset,其主要作用是,当用户想重新填写内容时,可以使用复位按钮,使表单恢复到初始状态

      button:单击按钮中<input>元素的type属性值为button,用来激活相应的行为,或者为脚本和程序提供相应的值

      具体控件类型二

      checkbox:复选框中<input>元素的type属性值为checkbox,用来提供用户多项选择的功能

      radio:单选框中<input>元素的type属性值为radio,用来提供用户单项选择的功能

      hidden:隐藏区域中<input>元素的type属性值为hidden,使表单的内容不出现在页面之中,但是依然可以传递参数

      image:图像按钮中<input>元素的type属性值为image,用来发送表单中的内容,其作用是个图像形式的提交按钮

      <input>元素的属性

      readonly:用来指定<input>元素中的内容为只读

      作用:使用readonly属性后,用户将不能更改表单中的相应内容。但是表单中的内容仍然可以传递

      disabled:不可用属性disabled,用来指定<input>元素中的内容为不可用

      作用:使用disabled属性后,用户将不能更改表单中的相应内容。同时表单中的内容将不能被传递

      select:选择列表元素<select>,用来在页面中定义一个可以选择的下拉列表

      option:选择列表条目元素<option>用来定义下拉列表中的项目

      选择列表元素<select>

      select:选择列表元素<select>,用来在页面中定义一个可以选择的下拉列表

      size:高度属性size,用来定义<select>元素中显示下拉列表区域的高度。

      注意:在之前所用到的size属性一直用来定义显示区域的宽度,所以要特别注意其使用环境,防止混淆。

      multiple:允许在下拉列表中进行多选

      用法:按住Ctrl按钮来选择多个选项

      文本区域元素<textarea>

      textarea:一般称为文字域或文本域,它与文字字段的区别在于可以添加多行的文字,从而可以输入更多的文本。这类控件在一些留言板中最为常见。

      cols:宽度属性cols,用来定义文本区域的宽度.

      rows:高度属性rows,用来定义文本区域的高度。

      CSS的语法

      介绍:CSS样式有自身固定的语法结构,只有按照规范的写法,语法才能够正确的作用,并在相应的页面元素上显示

      包含:CSS选择符、属性、属性值、单位等各个部分内容的写法,以及在使用各种结构时,所要注意的各种问题等.

      掌握知识要点:熟悉CSS中的各类选择符的属性及用法,了解CSS中属性和属性值的特点,简单了解块元素和内联元素。

      选择符

      有哪些:id选择符、类选择符、类型选择符、伪类等

      级别不同:在CSS中,选择符的种类很多,每种选择符的优先级也不同

      id选择符:id选择符,是所有选择符中,优先级最高的。#是关键字

      类选择符:用来定义页面中可以重复使用的CSS属性,其优先级低于id选择符,.是关键字

      选择符的优先级

      作用:选择符也有优先级

      顺序:在各种选择符中,id选择符的优先级最高,然后使类选择符,最后使类型选择符

      伪类

      简介:伪类指的是一类特殊的选择符,通过这类选择符,可以定义了某种鼠标触发时间的显示效果.

      未访问的链接:a:link也就是a标签未被访问状态

      已访问的链接:a:visited也就是a标签已被访问状态

      鼠标移动到链接上:a:hover也就是a标签悬停状态

      选定的链接:a:active也就是a标签鼠标悬停状态活动状态

      CSS中的属性和值

      属性:在CSS中,属性是控制各种页面效果的核心,所有页面效果的实现,都要通过定义相应的属性来定义。

      要点:在每个属性中,定义的值可以各不相同,每个属性值都有固定的写法

      值:在样式表中,每个属性都有相应的值与之对应,值用来确定属性的最终效果。在属性对应的值中,有一些是通常使用的值,比如长度值、颜色值等。

      特有值:还有一些是某个属性所特有的值。关于每个属性的具体取值和表现效果,将在后面的章节中作详细讲解

      盒模型的概念

      盒模型:一个块元素可以看成一个盒子形状的模型。这个模型的主体部分是元素的内容部分,用来显示元素中的主要信息,这个部分有width(宽度)属性和height(高度)属性来控制。

      盒模型:在内容部分之外是补白部分,由padding(补白)属性控制。在补白部分之外是元素的边框,由border(补白)属性控制。在盒模型的最外面是边界部分,由margin(补白)属性控制。

      元素内容的大小:用来控制元素内容的显示效果,通常使用宽度属性(width)和高度属性(height)来定义。

      宽度属性width:用来定义元素内容的宽度。在宽度属性中,可以使用三种属性值,分别为auto值、长度值、百分比值。

      高度属性height:用来定义元素内容的高度。在高度属性中,可以使用三种属性值,分别为auto值、长度值、百分比值。

      控制文本的显示

      简介:CSS中,文本的控制包括两个方面的内容,一方面控制文本中字体的各种显示效果(例如,控制字体的大小等),另一方面控制文本的显示效果(例如,文本的缩进等)。在CSS中文本的控制是很重要的内容,文本的显示效果,直接影响读者对页面信息的读取

      字体属性:字体的控制有控制文本的字体、字体的大小、字体的样式、字体的颜色、字体的修饰等方面的内容

      font-family:字体选择属性(font-family),用来定义文本中使用的哪种字体

      color:字体颜色属性,用来定义字体使用的颜色

      font-size:字体大小属性(font-size),用来控制元素中字体的显示尺寸。在字体的大小属性中,通常使用的是以px为单位的长度值

      font-weight:字体加粗属性(font-weight),用来定义字体是否显示加粗和变细的效果.

      text-align:水平对齐属性(text-align),用来定义元素的水平对齐效果.

      text-overflow:当文本内容超出元素大小的时候,就要用到文本溢出属性(text-overflow)来定义这些文本的显示效果。

      实例:

      <div style="color: red; font-family: 微软雅黑; font-size: 33px; font-weight: 900;">

      控制文本的显示

      </div>

      控制元素的大小

      定义:在网页中,一个元素占有空间的大小,由几个部分构成。其中包括元素的内容、元素补白、元素的边框、元素的边界等4个部分。

      在这4个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只能用来分隔相邻的元素或区域。4个部分一起构成了CSS中元素的盒模型.

      元素内容的大小

      简介:用来控制元素内容的显示效果。通常使用宽度属性(width)和高度属性(height)来定义

      特殊:有时候(例如,对元素的适应性有特殊要求的时候)还要使用其他的几个尺寸属性,包括max-width、min-width、max-height、min-height等

      宽度属性(width),用来定义元素内容的宽度。在宽度属性中,可以使用三种属性值,分别为auto值、长度值、百分比值

      高度属性(height):用来定义元素内容的高度。在高度属性中,可以使用三种属性值,分别为auto值、长度值、百分比值

      元素的背景

      简介:用来显示修饰的内容,可以在背景中定义背景颜色,也可以在背景中定义图像内容。

      背景属性包括:背景颜色属性(background-color)、背景图片属性(background-image)、背景图片重复属性(background-repeat)、背景图片位置属性(background-position)等等

      背景颜色属性:(background-color)用来定义元素的背景颜色。在背景颜色属性中,可以使用两种属性值,分别颜色值和颜色名称

      背景图片属性:(background-image)用来定义元素的背景图片。在背景图片属性中。要使用图片文件所在的ulr作为属性的值

      背景图片重复属性:(background-repeat)用来定义元素背景图片的重复排列方式。在背景图片的重复属性中,可以使用4个属性值,分别repeat、no-repeat、repeat-x、repeat-y

      背景图片位置属性:(background-position)用来定义元素背景图片的起始位置。在背景图片的背景图片位置属性中,可以使用两种属性值,一种为长度单位,包括长度值和百分比值。另一种为制定值。包括top、center、bottom、left、center、right等

      元素的补白

      定义:元素的部分,用来分隔元素的内容部分和元素的边框部分

      组成:上补白属性(padding-top)、右补白属性(padding-right)、下补白属性(padding-bottom)、右补白属性(padding-left)、综合补白属性(padding)

      顶部补白属性:(padding-top)用来定义元素顶部边框与内容之间的距离

      右侧补白属性:(padding-right)用来定义元素右侧边框与内容之间的距离

      底部补白属性:(padding-bottom)用来定义元素底部边框与内容之间的距离

      左侧补白属性:(padding-left)用来定义元素左侧边框与内容之间的距离

      他们都可以使用3种属性值,分别为长度值、百分比值和auto值

      实例:

      <div style="background-color: cyan;padding-top: 100px;padding-left: 50px;">元素补白 </div>

      元素的边界

      定义:元素的边界,用来分割元素和与其相邻的元素。

      包括:顶部边界属性(margin-top)、右边界属性(margin-right)、下边界属性(margin-bottom)、左边界属性(margin-left)等等

      顶部边界属性:(margin-top)用来定义元素顶部边界的显示效果

      右边界属性:(margin-right)用来定义元素右侧边界的显示效果

      下边界属性:(margin-bottom)用来定义元素底部边界的显示效果

      左边界属性:(margin-left)用来定义元素左侧边界的显示效果

      实例:

      <div style="background-color: coral;margin-top: 100px;margin-left: 50px;">元素边界 </div>

      元素的边框

      边框:一般用来起到分割页面各个部分的效果。

      包括:边框样式(border-style)、边框宽度(border-width)、边框颜色(border-color)

      顶部边框样式属性(border-top-style)用来定义元素顶部边框的显示效果。右侧同理

      底部边框样式属性(border-bottom-style)用来定义元素底部边框的显示效果。左侧同理

      顶部边框颜色属性(border-top-color)用来定义元素顶部边框的颜色。顶部边框颜色属性的取值为颜色值。右侧同理

      底部边框颜色属性(border-bottom-color)用来定义元素底部边框的颜色。底部边框颜色属性的取值为颜色值。左侧同理

      顶部边框宽度属性(border-top-width)用来定义元素顶部边框的宽度。顶部边框宽度属性中使用的属性值为长度值。右侧同理

      底部边框宽度属性(border-bottom-width)用来定义元素底部边框的宽度。底部边框宽度属性中使用的属性值。左侧同理

      实例:

      <div style="border-top-style: solid; border-bottom-style: dashed;border-top-color: #0056B3;border-bottom-color: mediumvioletred;border-top-width: 5px;">元素的边框</div>

      了解父元素和子元素

      父元素和子元素:在使用元素制作页面的时候,通常会遇到某一个元素中,包含另一个元素的情况。通常称被包含的元素为子元素。包含子元素的元素为父元素

      嵌套元素的大小和距离:在嵌套的元素中,由于父元素和子元素中,都可以使用边界和补白属性。所以元素属性之间会互相影响。在不同的浏览器中,对这种影响也有不同的显示效果。

      边界属性:当子元素中使用边界属性,同时父元素未定义边界大小的时候。在IE6.0中,父元素和子元素之间,在垂直方向上,边界属性将无法正常显示

      补白属性:当子元素中使用边界属性,同时父元素中使用补白属性的时候。在IE浏览器中,元素顶部会将子元素的边界属性和父元素的补白属性值重叠,底部会将子元素的边界属性和父元素的补白属性相加

      了解元素的定位

      定义:在CSS中,可以通过定位属性控制元素的显示位置。使用定位属性可以设置元素的重叠,相对位置等。也可以制作出各种特殊的显示效果。

      定义:在CSS中,可以使用绝对定位属性值,和相对定位属性值对内容进行合理的安排

      掌握知识要点:掌握元素定位的方法,重点理解绝对定位和相对定位,学会合理的重叠定位元素

      元素的定位

      定位:在网页中,如果元素中未定义任何定位和布局属性,元素会按照各自默认的方式排列。

      定位:块元素会按照换行的方式显示,内联元素会按照同行的方式显示。

       偏移属性

      上边偏移属性top:元素上边偏移属性(top),用来定义元素顶部偏移位置的大小,在上边偏移属性值为默认、长度值、百分比

      右边偏移属性right:元素右边偏移属性(right),用来定义元素右侧偏移位置的大小.

      下边偏移属性bottom:元素下边偏移属性(bottom),用来定义元素底部偏移位置的大小.

      左边偏移属性left:元素左边偏移属性(left),用来定义元素左侧偏移位置的大小.在左边偏移属性使用的属性值也有默认、长度值、百分比。

      控制滚动条元素的显示

      效果:CSS控制其他元素的显示,包括很多方面的内容,例如滚条、光标、打印等。其中有部分内容要通过CSS中的伪类选择符实现.

      知道:在CSS中,关于其他元素的修饰属性有很多,但大多数还不被浏览器所支持。

      掌握知识要点:熟悉CSS控制滚条的显示的方法,了解CSS控制光标的显示的方法,学会控制元素的缩放。

      滚动条:在各种浏览器中都存在滚条,目的是在浏览器所在的空间中能够包含更多的内容。可以通过定义CSS样式,显示元素的滚条。

      注意:滚条的相关属性是IE浏览器的特有属性,在其他浏览器中无法显示滚条属性中定义的显示效果

      滚条3D亮边框颜色属性:一般页面中滚条都显示在浏览器的右侧。滚条3d亮边框,是指右侧滚条中,显示在滑块和箭头区域最外层左侧和顶部的区域。

      滚条滑块颜色属性:滚条滑块,是指右侧显示滚条中,可以使用鼠标上下拖动的区域,以及箭头区域部分,滚条滑块颜色属性的语法结构如下所示。scrollbar-face-color:color;

      绝对定位

      要点:在页面中,使用绝对定位的元素,会从文档中独立的显示出来,所以要使用绝对定位的元素可能会遮盖其他的页面元素.

      绝对定位与父元素:要使用绝对定位的时候,定位的参照元素,是包含定位属性的父元素。如果没有这样的父元素,则元素按照<body>元素的位置,确定显示位置。

      绝对定位与相邻元素:在使用绝对定位的时候,绝对元素会独立显示,并不影响其他元素的显示位置(但是有可能覆盖其他元素)。与绝对定位元素相邻的元素,会忽略绝对定位元素的存在,按照各自的显示方式正常显示。

      实例:

      <!DOCTYPE html>

      <html>

      <head>

      <meta charset="utf-8" />

      <title>demo</title>

      <style>

      #su1{

      position: absolute;

      margin-top: 50px;

      background-color: #0056B3;

      }

      #su2{

      background-color: #04BE02;

      }

      </style>

      </head>

      <body>

      <div id="su1">绝对定位</div>

      <div id="su2">和CSS</div>

      </form>

      </body>

      </html>

      相对定位

      含义:相对定位,是按照元素自身所在的位置,使用边偏移属性,重新定义元素的显示位置。

      含义:使用相对定位的元素,依然是文档中的元素。元素的显示位置和元素所在文档中其他元素相互关联、

      相对定位元素位置的确定:在确定相对定位元素位置的时候,首先要确定元素原来的位置,即元素在文档中的位置。然后根据边偏移属性中定义的偏移值,确定元素的最终位置.

      相对定位与相邻元素:在使用相对定位的时候,相对定位元素保留原来所占有的空间,同时将自身按照边偏移属性中定义的属性值进行偏移(有可能覆盖其他元素)。与相对定位元素相邻的元素,会按照相对定位元素为普通元素的方式排列.

      定位元素的重叠:在一个页面中,如果使用几个定位元素,就可能发生定位元素重叠的情况。

      z-index:默认的情况下,后添加的元素会覆盖先添加的元素。通过使用层叠定位属性(z-index),可以调整各个层叠的显示顺序。

      控制元素的布局

      布局:在使用css布局页面的时候,通常使用布局属性进行来构建页面的框架和各个具体的内容部分,合理的使用布局属性,可以使页面的显示更加灵活。

      包括:浮动属性(float)、清除浮动属性(clear)、溢出属性(overflow)、显示方式属性(display)

      元素浮动:在网页中,使用浮动属性,可以更改块元素的默认显示方式,将原本换行显示的块元素同行显示。通过使用浮动元素和模型中的各种属性,可以对各种页面元素进行布局。

      元素的浮动

      浮动的概念:只要设置了浮动,就将盒子脱离了文本流。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

      例子:float是CSS样式中的定位属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。

      注意:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

      浮动属性float

      作用:该属性的值指出了对象是否及如何浮动。

      语法:float:none |left|right

      注意:只要设置了浮动,盒子将脱离普通文本流,下方的内容会自动上移。解决的办法是:使用clear属性清除浮动带来的效果。

      实例:

      <!DOCTYPE html>

      <html>

      <head>

      <meta charset="utf-8" />

      <title>demo</title>

      <style>

      #float1{

      width: 200px;

      height: 200px;

      background-color: red;

      float: right;

      }

      #float2{

      width: 200px;

      height: 200px;

      background-color: orange;

      }

      #float3{

          float: right;

      width: 200px;

      height: 200px;

      background-color: lawngreen;

      }

      </style>

      </head>

      <body>

      <div id="float1">元素1</div>

      <div id="float2">元素2</div>

      <div id="float3">元素3</div>

      </body>

      </html>

      内容的剪切

      简介:在CSS中,可以使用剪切属性,对元素内容的可视化区域进行控制。

      说明:剪切区域所使用的属性时clip属性,其中元素属性值得写法,和其他的属性略有不同,下面进行详细讲解

      内容的剪切属性(clip):用来裁减元素的可视范围,在内容的剪切属性,可以使用2种属性值,一种为auto值,另一种为区域值。

      剪切属性与内容:在使用剪切属性的时候,元素内容的显示方式并不发生改变。元素中的内容,在剪切区域之外的部分将会消失,但是元素占有的空间并不发生改变。

      清除浮动和显示隐藏

      为什么清除浮动:在网页中,由于使用浮动元素的时候,会影响后面相领的固定元素。由于在不同浏览器中,对浮动属性的解释存在差异,所以需要对某些浮动的属性进行清除。

      如何清除:清除浮动属性(clear),用来清除与元素相邻的浮动元素。在清除浮动属性clear中,可以使用3种属性值,分别none、left、right

      元素的显示方式:在CSS中,可以通过相应的属性,控制元素的显示方式

      例如:可以将原本以内联方式显示的元素,以块元素的方式显示。更改元素显示方式使用的是显示方式属性display

      隐藏属性值none:在使用隐藏属性值(none)的时候,不但隐藏了元素包含的内容,同时元素所占有的物理空间也一起消失了。在页面中,其他元素将忽略隐藏元素的存在,按照各自原有的方式显示。

      元素溢出

      溢出:在一个元素中,有时候会发生内容超出元素定义大小的情况。在CSS中,可以使用溢出属性(overflow)对溢出的内容

      显示方式:他定义几种显示方式,例如隐藏或者显示滚动条等。使用溢出属性可以方便的控制溢出内容的显示,并能够保证元素的大小不被破坏,下面进行详细讲解

      溢出属性overflow:用来定义元素溢出部分的显示方式,在溢出属性中,可以使用4个属性值,分别为visible、auto、hidden、scroll

      横向溢出属性overflow-x:用来定义元素溢出部分在水平方向上的显示方式。在横向溢出属性中,使用的属性值和溢出属性(overflow)的属性值完全相同

      纵向溢出属性overflow-y:用来定义元素溢出部分在垂直方向上的显示方式。在纵向溢出属性中,使用的属性值和溢出属性(overflow)的属性值完全相同

      标签嵌套和列表知识

      标签嵌套:标签嵌套错误,常见的是标签嵌套混乱

      列表使用:列表使用不当,列表中应不用换行符

      规范:在HTML中经常会用到排序列表(ol)和非排序列表(ul),他们不仅让条目显示更加灵活,还可以实现许多其他的功能。正常使用列表tag可以更方便的显示信息,但要注意避免在代码中使用换行符,搜索引擎会识别列表tag,因此要使用规范的HTML tag

      表单和元素

      form:form和table一起使用的时候,应该先写form

      元素:不要在内联元素中使用块元素

      粗体和斜体使用:网页中需要突出的位置,应当使用<b>和<i>标签

      <s>标签:已经废弃,目前用<del>替换

      图片和样式

      图片省略img的alt属性:在网页中的图片显示,常常用到ALT属性。详细定义ALT属性可以更好的显示图片,也可以让网速慢或使用屏幕阅读器的用户快速了解图片内容。不要做出如下定义: alt="image",如果图片只是装饰品可以使用alt=""。

      内联样式:不好用,尽量使用外部样式表。

      边框:一般都要定义一下边框border:none;

      标题<h>:标题要使用<h>标记

    • 0
    • 0
    • 0
    • 495
    • 请登录之后再进行评论

      登录
    • 做任务
    • 发表内容
    • 实时动态

    • 关于伊迪派 | 联系我们 | 免责声明 | 侵权投诉 | 小黑屋

      本站资源来源于互联网,仅供个人学习参考研究之用,请于下载后24小时内删除。
      如有侵犯您的权益,可通过邮件(admin@idepy.com)、站内通道等方式反馈,本网站将在第一时间处理。
      Copyright © 2019 - 2020 伊迪派(IDEPY), All Rights Reserved · 粤ICP备12030819号-6 · 粤公网安备 44132202100185号