经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
HTML 简述
来源:cnblogs  作者:新新子  时间:2021/2/18 15:01:07  对本文有异议

HTML简述

前言1- HTML基础目标

  1. PC端网站布局

    目标:能根据psd原型图,用HTML+CSS 布局出 符合W3C规范的静态网页.

    推荐黑马品优购项目:网站首页、列表页、详情页、登录页、 注册页等等...

前言2- 认识WEB

  1. 认识网页

    网页主要由文字、图像和超链接等元素构成。除了这些元素,网页中还可以包含音频、视频以及Flash等。
    我们后面的任务就是要把这部分网页元素用代码写出来

  2. 浏览器

    浏览器是网页显示、运行代码的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。

    1、常见浏览器内核(了解)

    浏览器内核(Rendering Engine),中文翻译为 排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核。

    浏览器内核包括两部分,渲染引擎和 js引擎;

    渲染引擎负责读取网页内容,整理讯息,计算网页的显示方式并显示页面;?

    JS 引擎 是解析执行js获取网页的动态效果。 后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎;

    主流内核分为以下几个:

 

浏览器内核备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 可惜这几年已经没落了,打开速度慢、升级频繁、
Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)。
chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera Presto Presto(已经废弃) 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。 现在用blink内核。

    2、拓展阅读

    移动端的浏览器内核主要说的是系统内置浏览器的内核。
?
    Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。
?
    iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的

 

  3. Web标准(重点)

    Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。
?
    W3C 万维网联盟 是国际最著名的标准化组织,类似于现实世界中的联合国。

    1、为什么要遵循WEB标准呢?

    由于浏览器的内核不同,他们渲染或者排版的模式就有些许差异,解析的效果显示的就会有所差别。

    通过Web标准展现统一的内容;

    2、Web 标准构成

    三项技术: 结构<HTML>——表现<CSS>——行为<JavaScript>

三项技术含义功能
1.结构-HTML 超文本标记语言 核心规范,用来描述页面的结构,使页面以怎样的方式排版; 例如标题、段落表格等,相当于人的骨架(简单)
2.表现-CSS 层叠样式表 用来调整页面中元素的样式,以怎样的方式来表现页面,页面中所有能看见的东西都是css; 例如颜色、字体大小等,相当于人的皮肤衣服(内容多)
3.行为-JavaScript 动态支持脚本代码 用来响应用户操作,是动态的; 例如点一个链接出现什么,相当于人的动作(难,面试考点)

    代码的最佳体验:结构样式行为相分离,模块化的概念;

    HTML结构是基础,要先搭建结构,在设计样式;

 

前言3-代码工具

常用工具:

  • Dreamweaver——普通青年

  • SublimeText——文艺青年 轻量级,打开速度超快

  • WebStorm

  • HBuilder

  • VScode

前言4-查文档

  经常查阅文档是一个非常好的学习习惯。

  W3C : http://www.w3school.com.cn/

  MDN: https://developer.mozilla.org/zh-CN/

 

1. 初识 HTML

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。

  • HTML 不是一种编程语言,而是一种标记语言 (markup language)

  • 标记语言是一套标记标签 (markup tag)

  • 网页是由网页元素组成的 , 这些元素利用HTML标签描述出来,然后通过浏览器解析,就可以显示给用户了

  所谓 超文本,有2层含义:?
    1. 超越文本限制:因为它可以加入图片、声音、动画、多媒体等内容
    2. 超级链接文本:可以从一个文件跳转到另一个文件,与世界各地主机的文件连接

 

1.1 HTML骨架格式

<!--HTML骨架标签:-->

<!DOCTYPE html>
?
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
    
</body>
</html>

 

 

1、<!DOCTYPE html>

文档类型声明,不属于HTML标签;声明当前网页是一个HTML文档;并且是以HTML5版本规范来显示的;写在网页最上面;

2、<html lang="en">

HTML的根标签,lang是属性,告诉浏览器或者搜索引擎这是一个英文网站,本页面采取英文来显示,也可改为其他语言显示网页,zh-CN定义语言为中文;

一个页面中有且只有一个根标签,网页中的所有内容都应该写在html根标签中;

3、<head> </head>

head头标签,用来提供有关内容和标记信息的,该标签中的内容,不会在网页中直接显示,而是面向浏览器的,用来帮助浏览器解析页面;

4、<meta charset="UTF-8">

meta标签 是用来告诉浏览器网页所采用的编码字符集 编码方式,这条语句表示这个网页是以UTF-8编码格式存在的,不加的话会乱码;

meta标签用来设置网页的一些元数据,比如网页的字符集、关键字和简介等;

5、<title>

网页的标题标签,用来影响网页在搜索引擎的排名,搜索引擎在检索页面时,会首先检索title标签中的内容,所以它是网页中对于搜索引擎来说最重要的内容,会影响到网页在搜索引擎中的排名;

默认会显示在浏览器的标题栏中,很重要,有 head 标签就有 title 标签;

6、<body>

HTML主体标签,用来设置网页的主体内容,网页中所有用户可见的内容都应该写在body中,是面向客户的;

 

1.2 HTML的语法规范

1.21 标签结构

  • HTML标签是由一组尖括号包围的关键词,通常是成对出现的,如<html> </html>

  • 第1个是开始标签,第2个是结束标签;

  • 有些特殊的标签是单标签(空元素),如<br />

  • 一组完整的标签称为元素;

 

1.22 标签属性

  1、 作用:属性是用来为HTML元素(标签)提供附加信息的,总是设置在开始标签或自结束标签中;

  2、语法:属性总是以名值对的形式出现,属性名=“属性值” 如:

<标签名 属性1="属性值1"> 内容 </标签名>
<p color="red">

  一个标签中可以同时设置多个属性,属性之间需要用空格隔开 如:

<标签名 属性1="属性值1" 属性2="属性值2"> 内容 </标签名>
<p color="red" font-size="16px">

 

3、常见属性:id 属性、 class 属性和 title 属性。

 

1.23 进制

  1、编码:依据一定的规则将字符转换为二进制编码的过程;

  2、解码:依据一定的规则将二进制编码转换为字符的过程;

  3、字符集:编码和解码的规则;规定了如何将文本转换为二进制编码;

  常见的字符集 ASCII、ANSI(自动保存)、GBK(中文)、GB2312(浏览器默认)、UTF-8(通用);

  4、乱 码:产生的原因是编码和解码采用的字符集不同;

  例如:浏览器默认GB2312,文件保存格式是UTF-8编码,所以需要改成UTF-8编码;

  5、解 决:HTML5中使用 meta 标签,<meta charset = "UTF-8"/>,

  直接告诉浏览器 以UTF-8格式的 字符集 去编码;

 

1.24 meta标签

  meta标签用于设置网页的元始数据,如字符集,关键字,简介等,是一个自结束标签;

  1、设置页面的 字符集

  meta标签的charset属性用来告诉浏览器,网页所采用的 编码字符集方式,这个网页是以UTF-8编码格式打开的,不加的话会乱码;

<meta charset = "UTF-8">

 

  2、设置网页的 关键字

  name的值是对content的一个描述;keywords告诉你content里的是一个关键字;

<meta name = "keywords" content="html,css,java">

 

  3、设置网页的 描 述

  搜素引擎在检索页面时,会检索页面中的关键字和描述,但是不会影响网页的排名;

<meta name = "description" content="发布信息">

 

  4、设置网页的 重定向,5秒刷新频率

<meta http-equiv="refresh" content="秒数; url= 绝对路径/目标路径" />

 

1.3 HTML标签关系

1.嵌套关系

<head>  
    <title> </title> 
</head>

2.并列关系(兄弟)

<head></head>
<body></body>

 

1.4 文本单位

  长度单位:像素px、百分比%、em;

  1、像素(px):

    网页中使用最多的单位,一个像素相当于屏幕上的一个小色块,多个色块构成了屏幕;不同显示器的像素大小也不相同:显示效果越好越清晰,像素越小;但像素点不能直接被看见;手机的像素好,但手机和电脑像素不一样大小;为了适应,手机像素默认*2;

  2、百分比(%):

    百分比也可以用来表示大小,它是相对父元素来说的,若父元素是16px大小,则100%就是16px;浏览器根据父元素的宽度和高度计算值;

    优点:当父元素属性发生变化时,子元素属性也会按照比例变化;

    在创建一个自适应页面(流失布局)时,经常使用百分比作为单位;

  3、em:

    和百分比类似,它是相对于当前元素的字体大小来计算的;1em=1font-size;

    字体大小改变时,em也随之改变;设置字体相关样式时,使用em;

    .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }
?
   .box1 {
            font-size: 20px;
            width: 2em; // 40px
            height: 50%; // 300*50%
            background-color: yellow;
        }

 

1.5 实体

  1、作用:HTML中预留了一些字符,在网页中是不能直接使用的;

  例如:< >(小于大于号),浏览器会将其解析为HTML标签,所以需要用其他转义字符表示,这就出现了实体;

  2、语法:&实体名;

  例:a < b> c== a<b>c

 

a &lt; b &gt; c

 

2. HTML标签

2.1 HTML常见标签

标签名定义说明
<h1></h6> 标题标签 [ head ] -默认加粗 有字号 独占一行,重要性递减;对搜索引擎来说,h1的重要性仅次于title,影响网页在搜索引擎的排名,一个页面只能写一个h1;
<p></p> 段落标签 [ paragraph ] -默认自动换行,段和落之间保有空隙;
<br /> 换行标签 [ break ] -在HTML中字符之间写再多的空格,浏览器也会当成一个空格解析,所以用br;br标签是一个自结束标签;
<hr /> 水平线标签 一条分割线
<div></div> div标签 [division] 的缩写 分割, 分区的意思,用来布局的;独占一行
<span></span> span标签 [span] 跨度,跨距;范围,用来布局的,一行上可以放多个span

 

  * 块元素和内联元素

    —— 块级元素竖着写;

    —— 行内元素横着写;

    <div><span>是没有语义的,他们就是一个盒子,用来装内容; 

   

    ① <div>块元素:

      1、作用:块元素主要为网页进行布局,网页的模板;

      2、语法:

<div style="backage-color:red; width:200px;">  </div>

 

      3、常见的块元素:<h1> <p> <div>

      4、特点:

      (1)<div>元素用来定义文档中的分区或节;

      (2)浏览器会自动根据 div 所标记区域的前后自动放置一个换行符,无论内容多少,都独占一行,纵向排列;

      (3)div 标签没与任何语义,就是一个纯粹的盒子,并且不会为他里面的元素设置任何的默认样式;

     

    ② <span>内联元素:

      1、作用:内联元素主要为文本设置样式;

      2、常见内联元素:<span> <a> <img> <iframe>

      3、特点:

      (1)<span>元素用来定义文档中的 一行中的一部分,又称行内元素,小盒子:

      (2)内联元素只占自身的大小,不会独占一行,一行可以放多个,横向排列;

      (3)span标签没有任何语义,专门用来选中文字,然后为文字设置样式;

    

     ③ 块元素和内联元素关系:

      1、一般只使用块元素包含内联元素,而不用内联元素包含块元素;

      2、<a>超链接元素 可以 包含任意元素,除了他本身,不能嵌套;

        段落元素<p>不可以包含任何其他块元素,会提早结束循环;

<body>
    <div>我是一个div标签我一个人单独占一行</div>
    <div>我是一个div标签我一个人单独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>  
</body>

 

 

2.2 文本格式化标签

  • 标签的语义化:就是指标签的含义;突出重要性, 比普通文字更重要;

  • 语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性;

  • 作用:在网页中为文字设置粗体、斜体或下划线等效果,使文字以特殊的方式显示;

语义标签说明(更推荐)
加粗 <strong></strong>或者<b></b> <strong>
斜体 <em></em>或者<i></i> <em>
删除线 <del></del>或者<s></s> <del>
下划线 <ins></ins>或者<u></u> <ins>类似填空题
引号“” <q> 短引用(行内引用span)
长引用“” <blockquote> 长引用(块级引用div)
参考 <cite> 参考内容,斜体
预格式 <pre> 保存原格式,怎么写怎么显示;元素中的文本会保留空格和换行符
语义化 <code> 表示代码,一般结合pre使用
小字体 <small> 版权声明及合同中的小字
上标 <sup> <p>2<sup>2</sup></p>
下标 <sub> <p>H<sub>2</sub>O</p>
对齐方式 <align> <p align="center"></p>, <align>是开始标签(属性名),center是属性值;其值可以是: left,center,right;

 

2.3 <img>图像标签

 2.31<img>格式

    1、作用:向页面引入外部图片;

    2、语法:[image]

<img src ="图片URL" / alt="">

    3、属性

属性属性值说明
src 图片路径 必须属性,指定图像的路径与文件名
alt 文本 替换文本,图像不能显示时显示的文字,备用
title 文本 提示文本,鼠标放到图像上,显示提示文字
width 像素 设置图像宽度
height 像素 设置图像高度
border 像素 设置图像的边框粗细,一般用css设置

 

 2.32 URL路径

   1、相对路径:以正在编写代码的文件所在位置为参考基础,而建立出的目录路径;

      这里指图片相对于HTML页面的位置;

   2、绝对路径:指以web根目录为参考起点直接到达目标位置,通常是从盘符开始的路径;

      如:“D:\web\img\logo.png”(磁盘查找,反斜杠;)或是完整的网络地址"https://www.sina.com.cn/"。

   3、相对路径是从代码所在文件出发去寻找目标文件的,这里的上一级、下一级是图片相对于HTML页面的位置。

相对路径分类符号说明
同一级路径   图像文件与HTML文件位于同一级
下一级路径 / 图像文件位于HTML文件下一级
上一级路径 ../ 图像文件位于HTML文件上一级

 2.33 常见图片格式

  1、JPG : 支持的颜色较多,可压缩,不支持透明色,一般保存照片等颜色丰富的图片;

  2、GIF : 支持的颜色较少(不清晰),只支持简单透明(横着竖着,圆形不可以),支持动态图,图片颜色单一或是动态图可以使用GIF;

  3、PNG : 支持的颜色多,并且支持复杂的透明,支持颜色复杂的透明图片;

  图片的使用原则:

    (1)效果一致,使用小的;

    (2)效果不一致,使用效果好的;

 

 2.34、图片质量问题

  一、PNG24图片格式问题

    1、问题:IE6中对图片格式PNG24支持度不高,如果使用,会导致效果无法正常显示;

    2、解决:

      • 使用png8代替png24,利用ps操作,文件存储为web格式,但清晰度下降;

      • 利用javascript解决,需要向页面中引入一个外部的js文件,写一个js代码处理这个问题;

    ① 引入js方法:<body>标签的最后引入外部js文件,相当于link;

<script type="text/javascript" src="script.js"> </script>

 

    ② 然后要再创建一个新的<script>标签:并编写js代码;

<script type="text/javascript>
    DO-belatedPNG.fix("div");修复
</script>

 

 

 二、hack浏览器版本问题

   css hack 实际是一个特殊的代码,只有部分浏览器能识别;所以用来为一些浏览器设置特殊代码;

  方式一:

  • 若只想在一些如IE6等特殊的浏览器执行,IE10及以上不支持,可以用css hack来解决;

  • 但css hack不推荐使用,它等同于bug,后期不好维护;

  • 条件hack,只对IE浏览器有效,其它都视为注释;IE10及以上不支持;

   以下内容只会出现在IE6,后面跟的是版本;

<!-- [if IE 6]-->
    <p></p>
<!-- [endif]-->

  以下内容只会出现在IE9以下 浏览器;

<!-- [if lte IE 6]-->

  

  方式二:

  • 在样式前面添加下划线 —,则该样式只有IE6及以下浏览器可以实现;

 

  ① 问题:

    在IE6中,当为一个向左浮动的元素设置左外边距,或者为一个向右浮动的元素设置右外边距时,这个外边距将会是设置的值的2倍——IE6的双边距问题:

  ② 解决:

    通过添加display:inline 样式来解决IE6的双边距问题,虽然对于一个浮动元素来说设置行内块元素没有任何意义,但可以解决双边距问题;

.box1 {
    width: 100px;
    height: 100px;
    float: left;
    
    display: inline;
    background-color: red;
    margin-left: 100px;
}

 

 

 2.35 嵌入图片和创建分区响应图

  一、嵌入图片:

    1、作用:向超链接内加入<img>元素,使得点击图片可以跳转超链接;

    2、语法:

<a href="#" target="_blank">
    <img src="URL路径" alt="备注"">
</a>

  3、问题:点图片边边也会进入超链接,有误差,未解决防触碰问题;

  4、解决:创建分区响应图(难点);

 

  二、分区响应图:

  1、作用:一张具有多个小图形的图片,创建分区响应图之后,通过点击某张图像上的不同区域 ,可以让浏览器进入不同的URL里(类似精灵图+定位);

  2、语法:

<img src="" usemap=" #id"> // 先在网页中出现一张图片,创建锚点,测得链接图片的四个边缘的coords值;
<map name="id名">
      <area href="url地址" shape="" coords=""/> // 不加coords值,就不转链接;
</map>

  3、属性:

属性作用
<map> 客户端分区响应图的关键元素
<area> 各自代表标着图像上可以被点击的一块区域,可以有多个;

  <area>可选值:shape / coords 起共同作用:

<area>可选值 
shape rect(矩形)/circle(圆形) /poly(多边形)/dafault(默认)
coords 标明用户可以点击的各个图像区域,标明各个边缘的值

  注意:

  • 在制作分区响应图时,不需要使用<a>标签创建超链接;

  • 图像定位可以使用js代码,或者image型input定位;

  • 使用rect矩形进行一个导航,解决了防误触问题;

    例1:矩形图,四周防误触:

<form>
    <img src="pic.png" usemap="map1">
    <form>
        <input type="image" src="pic.png">
    </form>
    <map name="map1">
        <area href="pic.png" shape="rect" coords="38,62,15,30" target="_blank">
        </area>
    </map>
</form>

 

 

2.4 <a>超链接标签

    1、作用:用于进行页面间的跳转,链接目标可以是一个网页、也可以是相同网页的不同位置、还可以是图片、电子邮件地址或者应用程序。

    2、语法:[anchor]

<a href="跳转目标url" target="目标窗口的弹出方式">文本或图像</a>

    3、属性

属性作用
href 用于指定链接目标的URL地址,(必须属性)
target 用于指定链接页面的打开方式,self是默认值,blank在新窗口打开

    4、链接页面的打开方式:

      当前页面打开/新建页面打开/内联框架中打开

    5、链接的分类:

链接分类语法作用
外部链接 <a href="http://www.baidu.com"></a> 跳转到外部网页
内部链接 < a href="index.html">首页</a > 网站内部网页间的相互链接
下载链接 < a href="index.file/zip"></a > href的属性值是文件或压缩包,会下载这个文件
网页元素链接 < a href="#">文本/图片</a > 给文本图像表格音频等网页元素添加超链接,也叫空链接
锚点链接 < a href="#锚点名"></a > 快速定位到页面中的某个位置

 

   2.41 锚点定位 (难点)

     通过创建锚点链接,用户能够快速定位到目标内容。

    (1)创建锚点链接分为两步:

        1.首先在需要的位置创建一个锚点`<a href="#id名"> </a>`(锚点#是文档中某行的一个记号,类似于书签,用于链接到文档中的某个位置);
?  
        2.然后通过“锚点名” `<p id="id名"`>,在指定位置和锚点建立链接。

    (2)# 的占位作用:

        创建超连接时,地址当时不确定,可以用 # 占位,译为空链接;若将超链接地址设置为#,点击超链接后,会自动跳转到当前页面顶部;

 

   2.42 id属性

      1、作用:id属性在HTML中的任一标签内都可以设置,但每个id属性在同一个页面中只能有一个,该属性作为标签的唯一标识;想去哪 就在#号后面写上哪个id名;

      2、语法示例:

<body>
    <a href="#bottom">去底部</a>
    友情链接:<a href="#">1</a>|<a href="#">2</a><br />
    <a href="#" id="bottom">回到顶部</a>|   
    <a href="mailto:aaa@aaa.com">联系我们</a>
</body>

 

 

2.5 内联框架<iframe>

    1、作用:可以在一个页面中引入另一个外部页面,是小框架的形式;

    2、语法:<iframe src="URL路径" name="tom"> </iframe>

    3、属性:src/width/height/name/scrolling(滚动条可选:yes/no/auto)

    4、应用场景:内联框架不推荐使用,因为里面的内容不会被搜索引擎搜到;但若只在公司内部运行,可以使用(ajax旧版的隐藏帧技术中会被使用);

 

2.6 框架集<frameset>

    1、作用:可以在一个页面引入其他多个外部页面;

    2、语法:<frameset cols="30%,40%">

    3、属性:<frameset>必须选择一个属性,并且需要在属性中指定每一部分所占的大小;

属性作用
rows 指定框架集中所有框架按行排列
cols 指定框架集中所有框架按列排列

    4、应用场景:使用<frameset>创建框架集时,就不能有<body>标签,二者选其一;

      这个标签意味着页面中不能有自己的内容,只能引入其他页面;

      <frameset>中可以嵌套本身,并且使用<frame>子标签指定要引入的页面,引入几个页面写几个<frame>

    5、缺点:引入多个页面后,每单独加载一个页面,浏览器就重新发送一次请求,引入几个页面就发送几次请求,若非要用一个,选<frameset>而不是<iframe>,H5中推荐使用框架器;

 

2.7 base 标签

    1、base 可以设置整体链接的打开状态
    2、base 写到 <head> </head> 之间
    3、把所有的连接 都默认添加 target="_blank"

    语法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <base target="_blank">
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.sina.com">新浪</a>
    <a href="http://www.sohu.com">搜狐</a>
    <a href="http://www.163.com">网易</a>
</body>
</html>

 

 

3.<table>表格

3.1、表格格式

  1、作用:最初创建表格是为了以表格的形式 显示数据;后来变成布局工具;

    但从css出现后,表格用来表示格式 化的数据;

  2、语法:

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

  3、结构:

    表格的三元素 <table> <tr> <td> 表格-行-单元格,内嵌关系;

标签名定义说明
<table></table> 表格标签 定义表格,就是一个四方的盒子,可以嵌套
<tr></tr> 表格行 行标签要再table标签内部才有意义,几行嵌套几个
<td></td> 表格单元格 单元格标签里面可以放任何东西,写在tr里,相当于列
<th></th> 表头单元格 位于表格的第一行或第一列,也是单元格,默认居中加粗
<caption></caption> 表格标题标签 表格的标题,紧随 table 标签之后,居中且显示于表格之上,
clospan 和 rowspan 合并属性 用来合并单元格的

 

  4、属性:

属性名属性值描述
align left、center、right 规定表格相对于周围元素的对齐方式
border 1或“ ” 规定表格单元是否设置边框,默认没有
cellpadding 像素值 规定单元边沿与内容间的空白,默认1px
cellspacing 像素值 规定单元格之间的空白,默认2px
width 像素值或百分比 规定表格的宽度

    平时开发的我们这三个参数 border cellpadding cellspacing 为 0

 

  案例1:小说排行榜

  思路:

  1、先制作表格的结构:

  • 第一行里面是 th 表头单元格

  • 第二行开始里面是 td 普通单元格

  • 单元格里面可以放任何元素,文字链接图片等

  2、后书写表格属性:

  • 用到宽度高度边框cellpadding 和 cellspacing

  • 表格浏览器中对齐 align

案例:

<body>
    <table border="1" cellspacing="0" width="500" height="249" align="center">
        <caption>
            <h3>小说排行榜</h3>
        </caption>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>
                <img src="images/up.jpg">
            </td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="images/guichuideng.jpg">图片</a>
                <a href="baike.html">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>
                <img src="images/down.jpg">
            </td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>
                <img src="images/up.jpg">
            </td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
    </table>
View Code

 

 

3.2、长表格

  1、作用:用作比较复杂的表格布局,便于分清表格结构;

  2、标签:

标签作用
<thead> 定义表格头部,存放标题;
<tbody> 定义表格主体,存放数据;
<tfoot> 定义表格底部,存放脚注;
  • 以上三个都是<table>的子标签,<tr>需写在这些标签中;

  • 可以将<tfoot>写到<thead>下面,编写时方便更改;

  注意:

  • 如果表格中没有写<tbody>,浏览器会自动在表格中添加<tbody>;并把所有的tr都放在<tbody>中,所以注意tr并不是<table>的子元素,而是<tbody>的子元素;所以通过table > tr无法选中行,需要 tbody > tr;

  • 表格的列数以td最多的那行为准;表格可以嵌套,可以在td中再嵌套;

  • 子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素;

 

3.3、合并单元格

  1、合并单元格三部曲:

  • 先确定是跨行还是跨列合并 rowspan / colspan;

  • 找到目标单元格,写上合并方式 = 合并的单元格数量。比如:<td colspan="2"></td>;

  • 删除多余的单元格。

  2、合并单元格顺序:先上 后下 先左 后右 的顺序 ;

 

3.4、表格样式

表格样式属性说明
border-spacing 边框间距 如table和td默认有一个距离
border-collapse 表格相邻边框合并 可选值collapse/separate 边框合并/不合并,合并后间距自动失效
vertical-align 文本垂直对齐 四个方向可选值
color 表格颜色  
padding 表格间距  

 

3.5、应用场景

  1、表格隔行变色:

tr:nth-child(even){
    background-color: #bfa;
}

 

  2、鼠标移入变色:

tr:hover {
    background-color: #ff0;
    }

 

  3、边框:

td,th {
    border:1px solid black;
    }

 

 

4. 列表

  表格是用来显示数据的,那么列表就是用来布局的。

  列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。

  根据使用情景,列表可以分为三大类:无序列表、有序列表和自定义列表。

标签名定义说明
<ul></ul> 无序列表 里面只能包含<li>,没有顺序,使用较多,<li>里面可以包含任何标签
<ol></ol> 有序列表 里面只能包含<li>,有顺序,使用较少,<li>里面可以包含任何标签
<dl></dl> 自定义列表 里面只能包含<dt><dd><dt><dd>里面可以包含任何标签

 

4.1 无序列表 ul

  1、无序列表的各个列表项之间没有顺序级别之分,是并列的。

  2、应用场景:简洁的小标题,常用于导航栏nav;

  3、基本语法:

<ul type=''>       // 通过设置`<ul>` 的type 属性改变列表符号的表现形式
    <li>列表项1</li> // li 表示列表项,相当于一个容器,可容纳所有元素
    <li>列表项2</li>
    <li>列表项3</li>
  ......
</ul>

 

  4、type属性可选值:

  (1)disc(实心圆)(2)circle(空心圆)(3)square(实心方框)

  

注意:

  • 项目列表一般都不使用默认的实心圆标记!因为他在不同浏览器显示效果不一样,所以一般都用css先进行删除实心圆;

  • 项目符号删除:<head><style> 标签里设置ul {list-style:none}

  • 如果需要设置项目符号,可以采用为 <li> 设置背景图片的方式来设置;

  • <ul><li> 都是块元素,列表之间可以相互嵌套;

 

4.2 有序列表 ol

  1、有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,使用有序符号作为项目符号;

  2、基本语法:

<ol type="">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

  所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。

 3、type属性可选值:

   (1)默认值,是阿拉伯数字;<ol type="1">

   (2)A/a I/i作为序号;英文字母或罗马数字等编号表示<ol type="A/a/I/i">

   (3)reversed(降序)

 

4.3 自定义列表

  1、作用:常用于对术语或名词进行解释和描述,列表项前没有任何项目符号。

  2、使用场景:上面一个小标题,下面很多围绕小标题进行说明的,常用于网页底部 联系方式;

    定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。

  3、基本语法:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

 

 

5. 表单

 作用:

  • 现实中的表单是用来提交信息的,如申请表、简历等;

  • 网页中表单的作用就是将用户信息收集然后提交给服务器的;比如:百度的搜索框、注册页面、登录这些操作都需要提交表单;

  • 在搜索框填入关键字,点击搜索,关键字会提交到百度服务器,服务器根据用户输入的关键字检索,返回相应信息;

   <form>创建的仅是一个空的表单,还需要填入不同的表单项才可完整,一个表单中可以包含多个表单项;而我们提交表单时是提交到action属性对应的地址,若想提交到服务器创建name属性;

 

5.1 表单结构

  HTML 中,一个完整的表单通常由 表单域、表单控件(也称为表单元素)和 提示信息3个部分构成;

表单结构说明
表单域<form> 相当于一个容器,用来容纳所有的表单控件和提示信息,处理程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器
表单控件 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等
提示信息 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作

 

5.2 表单域<form>

  1、作用:表单域是指包含表单元素的区域,在表单域中可以定义各种表单元素;

  2、目的:在 HTML 标签中, <form>标签用于定义表单域,以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器。

<form action=“url地址” method=“提交方式” name=“表单域名称">
      各种表单元素控件
</form>

  3、常用属性:

属性属性值作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 用于设置表单数据的提交方式,其取值为get或post。
name 名称 用于指定表单的名称,以区分同一个页面中的多个表单。

 

5.3 表单控件(表单元素)

  表单控件就是允许用户在表单中输入或者选择的内容控件,分为以下几类:

  • <input>输入表单元素;

  • <select>下拉表单元素;

  • <textarea>文本域元素

  这三组表单元素都应该包含在<form>表单域里面,并且有 name 属性。

 

  1、<input>输入表单控件

  语法:

<input type="属性值" />

  

  作用:

    `<input>`标签用于收集用户信息,根据不同的 type 属性值来指定不同的控件类型,
    输入字段拥有很多种形式(可以是文本 字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

  

属性说明作用
type 表单类型 用来指定不同的控件类型
value 表单值 表单里面默认显示的文本
name 表单名字 页面中的表单很多,name主要作用就是用于区别不同的表单。
checked 默认选中 表示那个单选或者复选按钮一开始就被选中了

  (1)type属性

属性值作用
text 定义单行输入字段,用户可以在其中输入文本,默认20个字符
radio 定义单选按钮
checkbox 定义复选框
submit 定义提交按钮,将表单数据发送到服务器
button 定义可点击按钮,不提交,(多数情况下,用于js启动脚本)
reset 定义重置按钮,清除表单所有数据
password 定义密码字段,该字段中的字符被掩码
hidden 定义隐藏的输入字段
file 定义输入字段和“浏览”按钮,供文件上传
image 定义图像形式的提交按钮
  • 文本框:

<input type="text" />

  这是一个内联元素,使用<input>创建一个文本框,点回车提交;那么需添加回车按钮;目前只提交到了地址action的url,并非服务器,若想提交到服务器,需要添加一个name属性,表示提交内容的名字;也可以指定value属性值,该值将会作为文本框的默认值显示;

  • 提交按钮:

<input type="submit" />

  可以将input表单中的信息提交给服务器;使用input创建一个提交按钮,按钮文字默认,value属性可以指定提交按钮上的文字;

  用户提交的信息会附在url地址的后边,以查询字符串的形式发送给服务器;url地址?查询字符串

 

 (2)name属性

用户名:<input type="text"  name=“username” />  

 

  • name 属性 是每个表单元素都有的属性值,主要给后台人员使用;

  • name属性是当前 input 元素的名字,后台可以通过 name 属性找到这个表单。页面中的表单很多,name 的主要作用就是用于区别不同的表单;

  • 如果希望表单项中的数据会提交到服务器中,还必须给表单项指定一个name属性;

  • 设置复选框或多选时,需要设置相同的name值;

 

(3)value属性

用户名:<input type="text"  name="username" value="请输入用户名"> 
value 默认的文本值,占位;

 

 

(4)checked属性

  • 主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。

  • 如果希望在单选按钮或者多选框中设置默认选中,check="checked"

性    别:
<input type="radio" name="sex" value="男" checked="checked" /><input type="radio" name="sex" value="女" />

 

 

(5)maxlength 属性

  是用户可以在表单元素输入的最大字符数, 一般较少使用.

  

  案例:表单

 <form action="url" method="POST" name="form1">
        <!-- text 文本框,可以在里面输入任何文字 -->
        用户名:<input type="text" name="username" value="请输入用户名" maxlength="6">
        <!-- password 密码框 用户看不见输入的密码 想提交到服务器就写name-->
        密码:<input type="password" name="pwd">
        <!-- radio 单选按钮 可以实现多选一 -->
        <!-- 像这种直接需要用户选择,而不需要填写内容的表单项,还必需指定一个value属性,最终提交给服务器,想要提交服务器必须写name属性 -->
        性别:男<input type="radio" name="sex" value="nan" /><input type="radio" name="sex" value="nv" />
        <!-- checkbox 复选框,可以实现多选 要有相同的name属性值-->
        爱好:吃饭<input type="checkbox" name="hobby" value="吃饭">
        睡觉吃饭<input type="checkbox" name="hobby" value="睡觉吃饭">
?
        <!-- submit 提交按钮,可以把表单域 form里面的表单元素 里面的值 提交给服务器     -->
        <input type="submit" value="免费注册">
        <!-- reset 重置按钮,还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- button 普通按钮,后期结合js 搭配使用 -->
        <input type="button" value="获取短信验证码">
        <!-- 文件域 使用场景 上传文件使用 -->
        上传头像:<input type="file">
    </form>

 

 

(6)button 标签

  • 除了使用<input type="submit" />也可以使用 button 标签创建按钮;更推荐使用;

  • 因为既有开始又有结束,成对出现,更加灵活,可以在中间添加图片;

  • button 按钮只能作为点击的按钮,不会提交到服务器;

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

  

  案例:注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
     <!-- type text  是一个文本框 -->
    用户名: <input type="text" value="请输入用户名" name="username" />  <br />
    昵称: <input type="text" value="请输入昵称" name="nicheng" />  <br />
     <!-- type text  是一个密码框 -->
    密码:  <input type="password" name="pwd" /> <br />
    性别: 
        男 <input type="radio" name="sex" /><input type="radio" name="sex" checked="checked" /> 
        未知  <input type="radio" name="sex" />  <br />
    爱好:
        睡觉 <input type="checkbox" name="hobby" checked="checked" />
        爬山 <input type="checkbox" name="hobby" />
        篮球 <input type="checkbox" name="hobby" />
        足球 <input type="checkbox" name="hobby" /> <br />
             
            <!-- 普通按钮需要些value值 -->
            <input type="button" value="获取短信验证码" />
            <input type="submit" value="提交所填" />
            <input type="reset" value="重置所填" />
            <!-- 图片提交按钮 里面必须包含 src 属性 -->
            <input type="image" src="images/btn.png"   /> <br />
     上传头像:
            <!-- 文件域 上传文件用的-->
            <input type="file" />
</body>
</html>
View Code

 

 

 

 2、<select>表单控件

    页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>下拉列表;

    <select name=''>
        <option value=''>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        ...
    </select>

 

  • <select>创建下拉列表时需要使用<option>标签创建列表项,<select>中至少包含一对<option>

  • <option> 中定义 selected =“ selected " 时,当前项即为默认选中项;

  • 下拉列表的name属性指定给<select>,value属性指定给<option>

  • 当为下拉列表添加一个multiple="multiple"则下拉列表变成一个多选的下拉列表;

 

 3、<textarea>表单控件

    当用户输入内容较多的情况下,<textarea>标签用于定义多行文本输入控件。可以输入更多的文字,该控件常见于留言板,评论。

<textarea rows="3" cols="20">
      文本内容
</textarea>
<textarea name="info">文本域,多行文本框如自我介绍;

    属性: cols=“每行中的字符数” ,rows=“显示的行数”,

    我们在实际开发中不会使用,都是用 CSS 来改变大小。

 

5.4 表单信息 <label>标签

  1、概念: <label>标签是html中专门对表单中的input元素设置提示文字(用户名)或标注信息的。

  2、目的:label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。

  3、作用:用于绑定一个表单元素, 当点击label标签里面的文字的时候, 被绑定的表单元素就会获得输入焦点。

 

  如何绑定元素呢?

    1、第一种用法就是用label直接包括input表单;

      适合单个表单;

<label> 用户名: <input type="radio" name="usename" value="请输入用户名">   </label>

  

    2、第二种用法 for 属性规定 label 与哪个表单元素绑定;

<label for="sex"></label>
<input type="radio" name="sex"  id="sex">

 

     指定一个for属性,for属性需要指定一个表单项的id值,当点击 <label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上,用来增加用户体验

     <label>标签的 for 属性应当与相关元素的 id 属性相同。

 

 

原文链接:http://www.cnblogs.com/xinxinzi/p/14373998.html

 友情链接: NPS