您的位置:首页 > Web前端 > CSS

我的前端之路——一些有关HTML和CSS最基础入门笔记

Della0930 2018-07-01 18:03 169 查看
版权声明:转载请注明出处 德拉 https://blog.csdn.net/Della0930/article/details/80875296

周末下雨,正好整理了下笔记,分享给大家~~~,新手小白可以闲暇时参考参考。

 

前端概述

  • 软件开发流程

网页设计师根据需求设计网页 -> 前端工程师将设计做成静态网页 -> 后台工程师将静态网页修改为动态网页

  • W3C标准(网页结构分为三部分)

结构(HTML):HTML用于描述页面的结构
表现(CSS):CSS用于控制页面中元素的样式
行为(JavaScript):JavaScript用于响应用户操作

HTML

HTML(Hypertext Markup Language)超文本标记语言
HTML使用标签的的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面。
一个最基本的HTML页面:

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题<title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>

标 签

  •   HTML中的标记指的就是标签。
  •   HTML使用标记标签来描述网页。

 结 构

         <标签名>标签内容</标签名>
          <标签名 />

元 素 

   一个完整的标签,我们称为元素,例如

[code]<h1>一级标题</h1>

上边的h1我们就称为元素

[code]<p>我是一个<em>段落</em></p>

p也是一个元素,em是p的子元素,p是em的父元素。
 - body也是一个元素。
 - body是p和em的祖先元素。
 -  p和em是body的后代元素。

[code]<body>
<p><em>内容</em></p>
</body>

   属 性

可以为HTML标签设置属性。
• 通过属性为HTML元素提供附加信息。
• 属性需要设置在开始标签或自结束标签中。
• 属性总是以名称/值对的形式出现。
     • 比如:name=“value”
• 有些属性可以是任意值,有些则必须是指定值。

[code]<h1 title="我是一个标题">标题</h1>
<img src="" alt="" />

常 见 属 性
• id
       – id属性作为标签的唯一标识,在同一个网页中不能出现相同的id属性值。
• class
       – class属性用来为标签分组,拥有相同class属性的标签我们认为就是一组,  可以出现相同的class属性,可以为一个元素指定多个class。
• title
      – title属性用来指定标签的标题,指定title以后,鼠标移入到元素上方时,会出现提示文字。

 注 释
      • HTML注释中的内容不会在网页中显示。
      • 格式:
        <!-- 注释内容 -->
          • 合理的使用注释可以帮助开发人员理解网页的代码。
      • 注释不能嵌套!

     HTML的发展

• 1999年12月:HTML4.01(W3C推荐)
• 2000年底:XHTML1.0(W3C推荐)
• 2014年10月:HTML5(W3C推荐)

文档声明(doctype)我们一般使用h5版本的

[code]<!DOCTYPE html>

告诉浏览器我们网页的版本(html5)


乱码-字符集
       常见字符集UTF-8、GB2312、ASLII、ISO8859-1、GBK

   <meta>

作 用
      – <meta> 标签可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。
      – <meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

meta的用法
      • 设置页面的字符集
        – <meta charset="utf-8">
      • 设置网页的描述
        – <meta name="description" content="">
      • 设置网页的关键字
        – <meta name="keywords" content="">
      • 请求的重定向
        – <meta http-equiv="refresh" content="5;url=地址"/>

    常用标签

<html>   用于告诉浏览器这个文档中包含的信息是用HTML编写的。
<head>  用来表示网页的元数据,head中包含了浏览器和搜索引擎使用的其他不可见信息。
<title>    title标签中的文字,是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。


用 法
     – 建议将title标签紧贴着head标签编写,这样搜索引擎可以快速检索到标题标签。
     – 网站中的多个页面的title也不应该重复,这样不利于搜索隐藏检索。


<body>用来设置网页的主体,所有在页面中能看到的内容都应该编写到body标签中。
<h1>~<h6>
    – h1~h6都是网页中的标题标签,用来表示网页中的一个标题,不同的是,从h1~h6重要性越来越低。
    – 标题标签相当于正文的标题,通常认为重要性仅次于页面的title。
    – 一般标题标签我们只会使用到h3,h3以后的标题标签对于搜索引擎就没有什么意义了。
    – 一个页面中只会使用一个h1标签。
<p>表示网页中的一个段落。
   – 一般浏览器会在段落的前和后各加上一个换行,也就是段落会在页面中自成一行。
<br />表示一个换行标签,使用br标签可以使br标签后的内容另起一行。
<hr />标签是水平线标签,使用hr标签可以在页面中打印一条水平线,水平线可以将页面分成上下两个部分。
<img />标签是图片标签,可以用来向页面中引入一张外部的图片。
              属性:  – src指向一个外部的图片的路径。
                         – alt图片的描述
<a>标签是超链接标签,通过a标签,可以快速跳转到其他页面。
              属性:  – href指向一个链接地址
– target设置打开目标页面的位置,可选值:_blank新窗口、_self当前窗口。

    实体(转义字符)

• 小于号< – &lt; • 大于号> – &gt;
• 空格 – &nbsp; • 和符号& – &amp;
• 版权© – &copy; • 引号” – &quot;
• 注册商标® – &reg; • 商标™ – &trade;

CSS (Cascading Style Sheets)层叠样式表

基本语法
     – 选择器 {样式名:样式值;样式名:样式值 ; }

[code] p {color:red ; font-size:12px;}

行内样式(不推荐使用)

[code]<p style="color: red;font-size: 30px"></p>

内部样式表

[code]<style>
p{color:red; font-size: 30px;}
</style>

外部样式表

[code]<link rel="stylesheet" type="text/css" href="style.css">

   CSS选择器(selector)

1. 元素选择器 p{}
2 . 类选择器 .className{}
3. id选择器 #id{} id属性是不能重复的
4. 通配符选择器 *{}
5. 复合选择器 div.box{}会选中页面中具有box1这个class的div元素
6. 群组选择器 p,.hello,#box{}则会同时选中页面中p元素,class为hello的元素,id为box的元素
7. 后代选择器 p strong{}会选中页面中所有的p元素内的strong元素。
8. 子选择器 div > .class{}

标签之间的关系

• 祖先元素
     – 直接或间接包含后代元素的元素。
• 后代元素
     – 直接或间接被祖先元素包含的元素。
• 父元素
     – 直接包含子元素的元素。
• 子元素
     – 直接被父元素包含的元素。
• 兄弟元素
     – 拥有相同父元素的元素。

伪类和伪元素

  •    比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器:伪类和伪元素。

  -   给链接定义样式
   有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4种不同的状态。

  • 正常链接

         – a:link

  •  访问过的链接

        – a:visited(只能定义字体颜色)

  • 鼠标滑过的链接

        – a:hover

  • 正在点击的链接

        – a:active


其 它

  •  获取焦点

    20000   – :focus

  • 指定元素前

     – :before

  • 指定元素后

     – :after

  • 选中的元素

     – ::selection

  属性选择器
[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"]
[属性名$="属性值"]
[属性名*="属性值"]

子元素选择器
   语法:父元素 > 子元素{}
            例如body > h1将选择body子标签中的所有h1标签。
• :first-child
    – 选择第一个子标签
• :last-child
    – 选择最后一个子标签
• :nth-child
    – 选择指定位置的子元素
• :first-of-type
• :last-of-type
• :nth-of-type
     – 选择指定类型的子元素


语法:
  – 查找后边一个兄弟元素
           • 兄弟元素 + 兄弟元素{}
  – 查找后边所有的兄弟元素
           • 兄弟元素 ~ 兄弟元素{}

否定伪类
  语法:
      :not(选择器){}
       • 比如p:not(.hello)表示选择所有的p元素但是class为hello的除外。

权重
   #权重的计算
不同的选择器有不同的权重值:
      – 内联样式:权重是 1000
      – id选择器:权重是 100
      – 类、属性、伪类选择器:权重是 10
      – 元素选择器:权重是 1
     – 通配符:权重是 0
• 计算权重需要将一个样式的全部选择器相加

文本标签和样式
 ##<em>和<strong>
        • em标签用于表示一段内容中的着重点。
        • strong标签用于表示一个内容的重要性。
        • 这两个标签可以单独使用,也可以一起使用。       

[code] <p>
      <strong>警告:任何情况下不要接近僵尸。</strong>
他们只是 <em>看起来</em> 很友好,实际上他们是为了吃你的胳膊!
</p>

      • 通常em显示为斜体,而strong显示为粗体。


##<i>和<b>
    • i标签会使文字变成斜体。
    • b标签会使文字变成粗体。
    • 这两个标签和em和strong类似,但是这两个标签没有语义。
    • 所以根据html5标准,当我们只想设置文本特殊显示,而不需要强调内容时就可以使用i和b标签。


##<small>
   • small标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。
   • 浏览器在显示small标签时会显示一个比父元素小的字号。

[code]<p><small>&copy;2016 Della工作室. 保留所有权利.</small></p>

##<cite>
  • 使用cite标签可以指明对某内容的引用或参考。例如,戏剧、文章或图书的标题,歌曲、电影、照片或雕塑的名称等。

[code]<p>
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>

##<blockquote>和<q>
   • blockquote和q表示标记引用的文本。
   • blockquote用于长引用,q用于短引用。
   • 在两个标签中还可以使用cite属性来表示引用的地址。

[code]孟子曾经说过:<blockquote>天将降大任于是人也...</blockquote>他说的真对啊!
<p>孔子曾经说过:<q>学而时习之不亦说乎</q></p>

##<sup>和<sub>
  • sup和sub用于定义上标和下标。
  • 上标主要用于表示类似于10 3 中的3。
  • 下标则用于表示类似余H 2 O中的2。
##<ins>和<del>
  • ins表示插入的内容,显示时通常会加上下划线。
  • del表示删除的内容,显示时通常会加上删除线。
##<code>和<pre>
  • 如果你的内容包含代码示例或文件名,就可以使用code元素。
  • pre元素表示的是预格式化文本,可以使用pre包住code来表示一段代码。

[code]<pre>
<code>
function fun(){
alert("hello");
}
</code>
</pre>

  有序列表
     • 使用ol和li来创建一个有序列表。

[code]<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>

无序列表
   • 使用ul和li来创建一个无序列表。

[code]<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>

定义列表
  • 使用dl、dd、dt来创建一个定义列表。

[code]<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>

文本格式化

  •  px

    – 如果我们将一个图片放大的话,我们会发现一个图片是有一个一个的小色块构成的,这一个小色块就是一个像素,也就是1px,对于不同的显示器来说一个像素的大小是不同的。

  • 百分比

  – 也可以使用一个百分数来表示一个大小,百分比是相对于父元素来说的,如果父元素使用的大小是16px,则100%就是16px,200%就是32px。

  •  em

  – em和百分比类似,也是相对于父元素说的,1em就相当于100%,2em相当于200%,1.5em相当于150%。

颜色
    RGB(0,255,0) 和 RGBA(0,255,0,0.5)
文字大小
   font-size
字体

  1. p{font-family:Arial}
  2. 通过font-family可以同时指定多个字体。
[code]p{font-family:Arial , Helvetica , sans-serif}

这里面 sans-serif 并不是指的具体某一个字体。而是一类字体。
字体分类

  • serif(衬线字体)
  •  sans-serif(非衬线字体)
  • monospace (等宽字体)
  • cursive (草书字体)
  •  fantasy (虚幻字体)

 以上这些分类都是一些大的分类,并没有涉及具体的类型,如果将字体指定为这些格式,浏览器会自己选择指定类型的字体。

斜体和粗体

  •  font-style用来指定文本的斜体。

         – 指定斜体:font-style:italic
         – 指定非斜体:font-style:normal

  •  font-weight用来指定文本的粗体。

         – 指定粗体:font-weight:bold
         – 指定非粗体:font-weight:normal

 

  • 小型大写字母
  •    •font-variant属性可以将字母类型设置为小型大写。在该样式中,字母看起来像是稍微缩小了尺寸的大写字母。

          – font-variant:small-caps

  •    字体属性的简写

        • font可以一次性同时设置多个字体的样式。
        • 语法:
          – font:加粗 斜体 小型大写 大小/行高 字体
        • 这里前边几个加粗、斜体和小型大写的顺序无所谓,也可以不写,但是大小和字体必须写且必须写到后两个。


行间距
       • line-height用于设置行高,行高越大则行间距越大。
       • 行间距 = line-height – font-size


大写化
       • text-transform样式用于将元素中的字母全都变成大小。
           – 大写:text-transform:uppercase
           – 小写:text-tansform:lowercase
           – 首字母大写:text-transform:capitalize
           – 正常:text-transform:none


文本的修饰
       • text-decoration属性,用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
       • 可选值:
          – underline
          – overline
          – line-through
          – none


字母间距和单词间距
    • letter-spacing用来设置字符之间的间距。
    • word-spacing用来设置单词之间的间距。
    • 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离,而负数代表减少距离。


对齐文本
      • text-align用于设置文本的对齐方式。
      • 可选值:
         – left:左对齐
         – right:右对齐
         – justify:两边对齐
         – center:居中对齐
首行缩进
      • text-indent用来设置首行缩进。
      • 该样式需要指定一个长度,并且只对第一行生效。


盒子模型
• 一个盒子我们会分成四个部分:
– 内容区(content)
– 内边距(padding)
– 边框(border)

– 外边距(margin)

内容区

  • • 内容区指的是盒子中放置内容的区域,也就是元素中的文本内容,子元素都是存在于内容区中的。
  • • 如果没有为元素设置内边距和边框,则内容区大小默认和盒子大小是一致的。
  • • 通过width和height两个属性可以设置内容区的大小。
  • • width和height属性只适用于块元素。

内边距

  • • 顾名思义,内边距指的就是元素内容区与边框以内的空间。
  • • 默认情况下width和height不包含padding的大小。
  • • 使用padding属性来设置元素的内边距。
  • • 例如:
[code]padding:10px 20px 30px 40px

       • padding:10px 20px 30px;
            – 分别指定上、左右、下四个方向的内边距
        • padding:10px 20px;
            – 分别指定上下、左右四个方向的内边距
        • padding:10px;
            – 同时指定上左右下四个方向的内边距
        • 同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。
边框

  • • 可以在元素周围创建边框,边框是元素可见框的最外部。
  • • 可以使用border属性来设置盒子的边框:

         – border:1px red solid;
           – 上边的样式分别指定了边框的宽度、颜色和样式。

  • • 也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
  • • 和padding一样,默认width和height并包括边框的宽度。

边框的样式

  • • 边框可以设置多种样式:

           – none(没有边框)
           – dotted(点线)
           – dashed(虚线)
           – solid(实线)
           – double(双线)
           – groove(槽线)
           – ridge(脊线)
           – inset(凹边)
           – outset(凸边)
外边距

  • * 外边距是元素边框与周围元素相距的空间。
  • * 使用margin属性可以设置外边距。
  • * 用法和padding类似,同样也提供了四个方向的margin-top/right/bottom/left。
  • * 当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等,所以这行代码margin:0 auto可以使元素居中。

display

  • * 我们不能为行内元素设置width、height、margin-top和margin-bottom。
  • * 我们可以通过修改display来修改元素的性质。
  • * 可选值:

           – block:设置元素为块元素
           – inline:设置元素为行内元素
           – inline-block:设置元素为行内块元素
           – none:隐藏元素(元素将在页面中完全消失)
visibility
       • visibility属性主要用于元素是否可见。
       • 和display不同,使用visibility隐藏一个元素,隐藏后其在文档中所占的位置会依然保持,不会被其他元素覆盖。
       * 可选值:
           – visible:可见的
           – hidden:隐藏的
overflow

  • * 当相关标签里面的内容超出了样式的宽度和高度是,就会发生一些奇怪的事情,浏览器会让内容溢出盒子。
  • * 可以通过overflow来控制内容溢出的情况。
  • * 可选值:

             – visible:默认值
             – scroll:添加滚动条
             – auto:根据需要添加滚动条
             – hidden:隐藏超出盒子的内容
 

文档流

  • * 文档流指的是文档中可现实的对象在排列时所占用的位置。
  • * 将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素,即为文档流。
  • * 也就是说在文档流中元素默认会紧贴到上一个元素的右边,如果右边不足以放下元素,元素则会另起一行,在新的一行中继续从左至右摆放。
  • * 这样一来每一个块元素都会另起一行,那么我们如果想在文档流中进行布局就会变得比较麻烦。

 

浮动

  • * 所谓浮动指的是使元素脱离原来的文本流,在父元素中浮动起来。
  • * 浮动使用float属性。
  • * 可选值:

           – none:不浮动
           – left:向左浮动
          – right:向右浮动

  • * 块级元素和行内元素都可以浮动,当一个行内元素浮动以后将会自动变为一个块级元素。
  • * 当一个块级元素浮动以后,宽度会默认被内容撑开,所以当漂浮一个块级元素时我们都会为其指定一个宽度。
  • * 当一个元素浮动以后,其下方的元素会上移。元素中的内容将会围绕在元素的周围。
  • * 浮动会使元素完全脱离文本流,也就是不再在文档中在占用位置。
  • * 元素设置浮动以后,会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。
  • * 元素浮动以后即完全脱离文档流,这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。
  • * 浮动元素默认会变为块元素,即使设置display:inline以后其依然是个块元素。

清除浮动

  • * clear属性可以用于清除元素周围的浮动对元素的影响。
  • * 也就是元素不会因为上方出现了浮动元素而改变位置。
  • * 可选值:

             – left:忽略左侧浮动
             – right:忽略右侧浮动
             – both:忽略全部浮动
             – none:不忽略浮动,默认值

定位

  • * position属性可以控制Web浏览器如何以及在何处显示特定的元素。
  • * 可以使用position属性把一个元素放置到网页中的任何位置。
  • * 可选值:

           – static
           – relative
          – absolute
          – fixed

相对定位

  • * 每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此响。
  • * 当将position属性设置为relative时,则开启了元素的相对定位。
  • * 当开启了相对定位以后,可以使用top、right、bottom、left四个属性对元素进行定位。

相对定位的特点

  • * 如果不设置元素的偏移量,元素位置不会发生改变。
  • * 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。
  • * 相对定位不会改变元素原来的特性。
  • * 相对定位会使元素的层级提升,使元素可以覆盖文本流中的元素。

绝对定位

  • * 绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。
  • * 当将position属性设置为absolute时,则开启了元素的绝对定位。
  • * 当开启了绝对定位以后,可以使用top、right、bottom、left四个属性对元素进行定位。

绝对定位的特点

  • * 绝对定位会使元素完全脱离文本流。
  • * 绝对定位的块元素的宽度会被其内容撑开。
  • * 绝对定位会使行内元素变成块元素。
  • * 一般使用绝对定位时会同时为其父元素指定一个相对定位,以确保元素可以相对于父元素进行定位。

固定定位

  • * 固定定位的元素会被锁定在屏幕的某个位置上,当访问者滚动网页时,固定元素会在屏幕上保持不动。
  • * 当将position属性设置为fixed时,则开启了元素的固定定位。
  • * 当开启了固定定位以后,可以使用top、right、bottom、left四个属性对元素进行定位。
  • * 固定定位的其他特性和绝对定位类似

z-index

  • * 当元素开启定位以后就可以设置z-index这个属性。
  • * 这个属性可以提升定位元素所在的层级。
  • * z-index可以指定一个整数作为参数,值越大元素显示的优先级越高,也就是z-index值较大的元素会显示在网页的最上层。

清除浮动

[code]/*
* 可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动,
* 这样做和添加一个div的原理一样,可以达到一个相同的效果,
* 而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作用
*/
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}

/*
* 在IE6中不支持after伪类,
* 所以在IE6中还需要使用hasLayout来处理
*/
.clearfix{
zoom*:1;

}

设置元素背景

background-color

  • * 用该属性用来为元素设置背景颜色。
  • * 需要指定一个颜色值,当指定了一个颜色以后,整个元素的可见区域都会使用这个颜色作为背景色。
  • * 如果不设置背景颜色,元素默认背景颜色为透明,实际上会显示父元素的背景颜色。

background-image

  • * background-image可以为元素指定背景图片。
  • * 和background-color类似,这不过这里使用的是一个图片作为背景。
  • * 需要一个url地址作为参数,url地址需要指向一个外部图片的路径
  • * 例如:

               

[code]background-image: url(1.jpg)

backgr-repeat

  • * background-repeat用于控制背景图片的重复方式。
  • * 如果只设置背景图片默认背景图片将会使用平铺的方式,可以通过该属性进行修改。
  • * 可选值:

             – repeat:默认值,图片左右上下平铺
             – no-repeat:只显示图片一次,不会平铺
             – repeat-x:沿x轴水平平铺一张图片
             – repeat-y:沿y轴水平平铺一张图片
background-position

  • * background-position用来精确控制背景图片在元素中的位置。
  • * 可以通过三种方式来确定图片在水平方向和垂直方向的起点。

          – 关键字:top right bottom left center
          – 百分比
          – 数值
background-attachment

  • * background-attachment用来设置背景图片是否随页面滚动。
  • * 可选值:

       – scroll:随页面滚动
       – fixed:不随页面滚动
CSS Sprite

  • * CSS Sprites是一种网页图片应用处理方式。
  • * 通过这种方式我们可以将网页中的零星图片集中放到一张大图上。
  • * 这样一来,一次请求便可以同时加载多张图片,大大提高了图片的加载效率。

表格的基本设置

table、tr、th、td

  • • 使用table标签创建一个表格。
  • • tr表示表格中的一行。
  • • tr中可以编写一个或多个th或td。
  • • th表示表头。
  • • td表示表格中的一个单元格

caption、thead、tbody、tfoot

  • • caption表示表格的标题。
  • • thead表示表格的头部。
  • • tbody表示表格的主体。
  • • tfoot表示表格的底部。

合并单元格

  • • 合并单元格指将两个或两个以上的单元格合并为一个单元格。
  • • 合并单元格可以通过在th或td中设置属性来完成。
  • • 横向合并

         – colspan

  •   • 纵向合并

        – rowspan

表格的样式

  • 之前学习的很多属性都可以用来设置表格的样式,比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的离。
  • • text-align:设置文本的水平对齐。
  • • vertical-align:设置文本的垂直对齐。

       – 可选值:top、baseline、middle、bottom

  • border-spacing:边框间距
  •  border-collapse:合并边框

          – collapse:合并边框
          – separate:不合并边框

表单

  •   现实生活中的表单是用来提交信息的,比如:办理银行卡填写的申请表、找工作填写的简历、入学时填写的个人信息表。这

些都是表单的一种

  •   网页中的表单是用来向服务器提交信息的,
  • 我们最常用到的表单就是baidu的搜索框

  * 表单可以将用户填写的信息提交的服务器
例如:

* 表单项
    文本框

[code]<input type="text" name="name">

  密码框

[code]<input type="password" name="pwd">

多选框

[code]<input type="checkbox" name="sports">

单选框

[code]<input type="radio" name="gender">

提交按钮

[code]<input type="submit" value=" 提交 ">
下拉列表
<select>
<option>北京</option>
</select>

 

input

  • • input是我们使用的最多的表单项,它可以根据不同的type属性呈现不同的状态。
  • • type属性可选值:

        – text:文本框
        – password:密码框
        – submit:提交按钮
       – radio:单选按钮
      – checkbox:多选框
      – reset :重置按钮
select、option

  • • select用于创建一个下拉列表。
  • • option表示下拉列表中的列表项。
  • • optgroup用于为列表项分组。

textarea

  • • textarea用来创建一个文本域,实际效果和文本框类似,只是可以输入多行数据。
  • • 可用属性:

         – cols:文本域的列数
         – rows:文本域的行数
fieldset、legend、label

  • • fieldset用来为表单项进行分组。
  • • legend用于指定每组的名字。
  • • label标签用来为表单项定义描述文字。

 

阅读更多
标签: