您的位置：首页 > Web前端

web前端之HTMl学习

2018-03-14 15:13 197 查看

一，HTML概述

1.HTML

HTML是一种描述性标记语言，描述网页内容的显示方式，以HTML语言为主编写的HTML文件是一种纯文本文件，以
           .html，.htm为后缀。基本组成为元素。

2.HTML常识

 HyperText Markup Language。李爵士创立了HTML，离开公司后创办了一个组织——W3C委员会。 W3C根据浏览器的实际情况总结制定HTML规范文档。
  HTML有很多版本，从HTML4.01到XHTML再到HTML5，版本类型由HTML文件头部的DOCTYPE声明，比如HTML5的声明为
<!DOCTYPE html>
。这里注意我们现在常说的H5并不是指html5，H5是能运行在微信上的网页的统称，和实现技术无关。XHTML、HTML4.01、HTML5都可以。
  在HTML5中，声明的DOCTYPE一定要大写，html可以小写。即你可以写成，或者是。我们知道一个完整的html5页面应该是这样

3.语法

<标签>内容<标签>：标签通常都是成对出现，内容为一些文本文字或子标签；HTML元素指的是从开始标签到结束标签的所有代码。

4.HTML文档构成

   文档类型申明（<!DOCTYPE版本类型>告诉浏览器用什么方式解析XTHML中HTML要小写）+网头部分（<head>标题，关键字，描述，编码方式等浏览器需要的基本信息</head>）+网页部分（<body>页面具体内容，文字，表格，图片，视频等</body>）HTML由<html><head><body>这三大元素构成。

<html>元素：HTML以<html>标签开始，以</html>结束，文档的所有内容都要方到两个标签内。包含<title>,<meat><base>,<like>,<script>,<style>等。提供整个页面的基本信息。
<head>元素：页面头部信息（包含页面标题，元信息，CSS样式，JavaScript脚本等元素，），用于向浏览器提供整个页面的基本信息，不包含主体信息。一般不在浏览器中显示，标题元素<title>除外。
<body>元素：网页的正文，包括图片，表格，段落，音乐，视频，不是所有的<body>标签都是可见。

5.编写HTML注意事项：

a。大部分的标签都是由起始标签和结束标签构成，空标签是一种特殊的标签，不包含文本也不包含其他子标签，以“<”开始，以“/>”结束。标签可以嵌套使用。
b。HTML不区分大小写，XHTML区分大小哦，
c。HTML和XHTML中，标签可以具有一个或多个属性，属性与属性值成对出现，属性值可以使用双引号或单引号引。属性值区分大小写。
d。HTML中的空格，字符之间的一个或多个连续空格（制表符，换行，回车），只能显示一个（ 可以使用实体引用（ ；）或者中文空格）。
f。HTML中的注释，<!--注释内容-->。

6.HEAD元素

a、title元素：页面标题位于<title>标签内，标题可以用作默认快捷方式或收藏夹的名称，作为搜索引擎结果中的页面标题。页面设计要添加标题。
 b、meta元素：用于向客户浏览器传递信息和命令，不是显示内容，一个<head>中可以包含一个或者多个<meta>标签。<
<meta>标签一般格式：<meta 属性名=“属性值”content= “name的描述或http-equiv的属性“/>.在 HTML 中，<meta> 标签没有结束标签。在 XHTML 中，<meta> 标签必须被正确地关闭。
      meta标签主要分为两大类：页面进行设计+搜索引擎设置，常用属性特征描述表：
属性名属性值描述
namekeywords定义页面关键词，使用content属性提供web的关键字，关键词之间用逗号隔开
 description定义页面描述内容，使用content属性提供网页的描述内容，但不要过长，否者搜索引擎会以……省略
 robots用来告诉搜索引擎页面是否允许索引与查询，content的参数有all，none，index，noindex，follow，nofollow，默认all
 d546
author		标注网页作者
http-equivcontent-type设定页面使用的字符集，例如<meta http-equiv="content-type"content="text/html";char="utf-8"/>
 refresh自动刷新并转到新页面。使用content属性提供刷新或跳转的时间以及跳转的目标地址，
 set-cookie设置页面缓存过期时间。如果网页过期，那么存盘的cookie将被删除。
 expires用于设定网页的到期时间。一但web过期，必须从服务器上从新加载页面内容
contenttext内容文本。用于描述name或http-equiv的属性的相关内容
content参数意义： all：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询，它和 "noindex, no follow" 起相同作用；index：文件将被检索；（让robot/spider登录）　 follow：页面上的链接可以被查询； 　noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)　 nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)。

7，文本元素

a。标题标签：HTML提供了6级标题，<h1><h2><h3><h4><h5><h6>从大到小。一般显示<h1><h2><h3>,<h4>与默认文本一样大。<h5><h6>一般通过CSS定义。
b。文本修饰标签：<font>字体样式（大小，颜色，字体等）<b>加粗，<i>斜体，<s>删除线，<u>下划线，<sup>上标<sub>下标，<strong>加粗（重要文本），<big>文本变大（没有），<small>文本变小（小字体印刷体）括号内为HTML5的。<font face ="隶书" size ="12" color+"blue">定义字体，大小，颜色；
c。由于文本修饰符设置字体样式时，文本内容与样式嵌入到一起，后期代码维护不方便，在网页设计时，少用文本修饰，多采用CSS样式进行美化。
d。特殊字符（实体字符）一般&开头；结尾
常见实体引用：

双引号（”）"&号&空格 
小于号(<)<大于号（>）>小于等于(<=)≤
大于等于(>=)≥版权号©©商标符号(TM)™
注册商标(圈R)®分数（1/4）¼分数(1/2)½
左箭头（<---）←上箭头↑右箭头→
下箭头↓左右箭头&Harry;左下箭头↵
左双箭头⇐上双箭头⇑右双箭头⇒
下双箭头⇓∩（交集）∩∪（并集）∪

8，文档元素结构

a。段落标签：<p>是HTML中特定的段落标签，可以对网页内容提供块级格式，浏览器解析<p>时，在下一段落前插入空白行
b。换行标签：<br />后面的内容从下一行开始显示。空标签，br与/之间有空格。c。水平线标签：<hr />产生一条水平线，可以通过（size（高度），color（颜色），width（宽度），noshade（阴影），align（对齐方式）进行设定）

9，列表元素

在HTML页面中列表类型有：有序列表，无序列表，定义列表。
a。有序列表：前缀有数字或字母，格式<ol type=“属性(A,a,1,i,Ⅰ)”start =“属性（数字）”><li>列表项</li></ol>。
b。无序列表：前缀有图形符号，格式<ul type="属性(circle(圆),disc(点),square(方),none(没有))"><li>列表项<li></ul>。
c。定义列表：项目与描述成对显示<dl><dt>标题</dt><dd>描述<dd></dl>。<dl>标签中可以存放多个<dt><dd>标签，<dd>标签内容会后缩进一定空间。

10，div与span标签

a。<div>标签：表达一个逻辑区块（将某一特定区域用边框围起来，指定样式），属于块级元素。如果用<div>标签而不使用CSS样式，页面效果与<p>相同。且独占一行，通过<div>可实现页面布局。
a，1语法：<div style="块元素的样式(设置div元素的行内模式)" class = “类选择器名称(引用CSS的类选择器)”align = “对齐方式(取值为left，right，center或justify，多用CSS代替)”>内容部分</div>。
b。<span>标签：实现行块内定义，<span>标签属于行内元素，用来选择特定文本，赋予特殊样式，当句子需要分组时，可以使用<span>标签。
b，1语法：<span style="块元素的样式(设置div元素的行内模式)"class = “类选择器名称(引用CSS的类选择器)”align =“对齐方式(取值为left，right，center或justify，多用CSS代替)”>内容部分</span>。

11，URL（统一资源定位符Unifrom Resource Locator）

a。URL：用于Web资源所在的位置，又称网址或网页地址。(协议(http:)+主机地址(//www.itshixun.com)+文件路径(/web/index./html))共同过构成完整的URl。
b。协议：网页通常采用超文本传输协议HTTP，对应 的网址基本使用http://前缀，电子商务的安全性要求较高的，多采用https协议(https://)文件上传下载时，多采用ftp://前缀。
c。主机地址（Host Address）：网站的域名，主机地址也可以采用IP地址（数字形式）；
d。文件路径：通常与网站的目录结构想对应，以/开头，以文件夹/文件名结束，
d。1文件路径分为：绝对路径(完整的路径，在Internet中称URL)和相对路径。
d。2相对路径：当页面链接到同一网站的其他资源时，采用相对路径会更加简洁，也便于后期维护，当浏览器访问Web资源时，需要完整的URL才能获得资源内容，当页面提供的是相对地址时，需要将相对URL转换为绝对的URL后在获取资源。相对路径仅适用链接相同网站的内容，不能用于链接其他域下的资源，且根目录方式在本地无法访问无法实现，只有站点上传到web服务器才能。
d。2.1相同目录：当访问资源与网页位于同一个目录下，可以直接访问：文件名，
d。2.2子目录：当访问子目录的资源时，相对路径：子目录名/文件名，每加一级需添加“目录名”+/,
d。2.3父目录：当访问引用父目录的资源时，可以使用“../文件名”表示上一级，用../../文件名表示上上一级，
d。2.4根目录：根目录一“/”开头，（/）表示根目录，可以用:/父目录/子目录/目录/文件名，

12，图像标签

a.使用<img />空标签向HTML文档中添加一副图像，<img src="url" alt =""…/>。
<img />标签常用的属性表

        属      性     名                                                                    描                               述
src图像的地址，可以是绝对URL，也可以是相对的URL
alt图像的文本描述，当无法显示图片时，文本作为图像的替代；描述文本可以更好的让搜索引擎对页面搜索
height指定图像高度，固定值or百分比
width指定图像宽度，固定值or百分比
align  
图像的对齐方式如top顶部，bottom底部，middle中间，lefi左边，right右边
border指定图像的高度

13，超链接标签

超链接(HyperlinK)：将互联网上的的中资源相互连接，万维网。语法：<a href (目标链接地址)="url" title（链接标题）=“”name(锚点名称) =“”target=" "(以何种方式打开链接目标) >链接内容</a>；例：<a href="http://www.baidu.com">百度</ a><br />;
常见的超链接有：文本链接，锚点链接，图形链接，图形热区链接，Email链接，JavaScript链接，空链接。
a。 文本链接与锚点链接。
文本链接：点击文本进入链接，链接内容为文本内容（即<a></a>标签的内容），链接内容也可以是（站内/站外）链接，站外必须使用完整的绝对路径（即包含“http://”部分），站内随便。
锚点链接相当于书签（索引），用户访问锚点可以快速定位到所期望的小节。分为同一页面和跨页面锚点链接，使用<a>标签创建锚点标记。<a>标签必须附带name或id属性，之后尽量用id。 创建超链接链接到锚点，标签的href是由“#”+“目标锚点名称”两部分构成。
目标锚点：<a id = "锚点名称">锚点位置</a>;例：<a id ="锚点名称">链接到当前锚点位置</a>
链接到锚点：<a herf ="#锚点名称">链接到当前锚点位置</ a>例：<a herf ="#锚点名称">链接到锚点位置</a>
在跨页面的锚点链接中，herf属性由“目标页面的绝对路径”+#+目标锚点名称三部分构成。例：<a herf ="绝对路径"#锚点名称>链接到目标页面的锚点位置</a>
属性href的值可以根据当前页面与目标页面的位置关系而定，路径可以是绝对路径也可以是相对路径。
b。图片链接与图片热区链接：
图片链接：为图片添加一个超链接，点击图片会进入相应的链接，语法：<a href ="目标链接地址"><图像标签></a>；
图片热区链接：是指在同一个图片中不同的部分链接到不同的目标位置，通过在图片中设置“热区”，为图片的特定部分创建超链接区域，然后在设置链接的目标位置。步骤如下：
通过<map>标签定义一个客户端图像映射（image-map），可以包含一个或多个图像的映射区域<area>,每个<area>区域拥有一个独立的链接。
将<img />标签usemap属性与<map>标签的name属性相关联。
语法：<map name ="图像映射名"><area shape="circle(属性)" coords(参数)="x,y,r" href ="目标链接地址"/><area shape=“rect(属性)”coords(参数)=“x1,y1,x2,y2”href=“目标链接地址”/><area shape=“poly(属性)”coords(参数)=“x1,y2,x2,y2,x3,y3,x4,y4……”hret=“目标链接地址”/></map><img src="images/图片名"usemap=“#图像映射名”broder=“0”/>
area属性表列
形状Shape属性Coords参数描述
圆形circlex,y,r点(x,y)是圆心坐标，r是圆的半径
矩形rectx1,y1,x2,y2点Z(x1,y1)矩形左上角坐标，点(x2,y2)矩形的右下角坐标
多边形polyx1,y1,x2,y2,x3,y3,……点(x1,y1)(x2,y2)(x3,y3)(x4,y4)……是多边形的各个点的坐标
c。其他超链接：
1，空链接：未指派的链接，附加行时使用。语法;<a href=“#”>空链接</a>
2，Email链接：在页面中创建Email标签，语法：<a href ="mailto:+邮箱地址">练字</a>
3，JavaScript链接：语法：<a href="Javascript：alert('弹出页面显示内容')">文本内容</a>
d。超链接的target属性：
1，默认情况下下，链接会在当前活动窗口打开目标链接文档，目标文档会替换当前显示的页面内容，targer属性可以改变目标文档的显示窗口。

target属性表
值描述
_blank在新窗口中打开被链接文档
_self默认值。在相同的框架中打开被链接文档
_parent在父框架集中打开被链接文档
_top在整个窗口中打开被链接文档
frameName在指定的框架中打开被链接文档
语法：<a hret="地址" target=“值”> 在新窗口打开被链接文档</a>

二，表格与框架

1，表格的组成：表格使用行和列的方式组织信息，表格元素由行，列，表头单元格，正文单元格，标题，表头行，正文行，表尾行等构成。
表格单元的创建：  语法：<table><tr><td>单元格内容</td><td>单元格内容</td>…………</tr>代表一行…………更多行<table>：默认情况下，表格的边框是隐藏的。表格可嵌套。
表格的个组成部分均包含在<table>标签之内。
单元格是表格的基本元素，使用<td>标签表示。
行是表格的水平元素，使用<tr>标签表示
一行可以由一个或多个单元格构成，而一个表格可以由一行或多行。
2，表格的基本属性一般情况，表格作为布局使用，不会在页面中显示出来，可一通过表格属性设置：

表格常用的<table>属性
属性取值  描    述                            
alignleft(左)，center(中),right(右)设置表格相对周围元素的对齐方式
bgcolorrgb(x,x,x)，#xxxxxx,colorName设置表格的背景颜色
border像素设置表格边框宽度
cellpadding像素或百分比设置单元格与其内容之间的距离
cellspacing像素或百分比设置单元格之间的距离
height像素或百分比设置表格高度
width像素或百分比设置表格宽度
rulsenone，groups，rows，cols，all设置表格中的表格先的显示方式，默认all
framevoid(不显示边框)，above(显示顶部)，below(显示底部)
，hsides(顶部+底部)，vsides(left+right)，lhs(左侧)，
rhs(右侧)，box，border(显示所有边框，默认)
设置表格外部边框的显示方式
3，单元格标签单元格是表的基本属性，可以通过<td>或<th>(加粗居中)标签来创建单元格，<td>标签多用来包含数据中的数据部分，而<th>标签用来包含表格中的标题部分。

单元格标签<td><th>的属性
属   性                  描         述
align设置单元格内容的水平对齐方式：left，center，right，justtify
valign设置单元格内容的垂直对齐方式：top，middle，bottom，baseline
rowapan设置单元格跨越的行数
colspan设置单元格跨越的列数
scope定义将表头数据与单元数据相关联的方法col列的表头，row行的表头。
width设置单元格的宽度
height设置单元格的高度
bgcolor设置单元格的背景颜色
4，行标签
行是表格的水平元素，可以包含多个或一个单元格，使用<tr></tr>进行行定界。

行标签<tr>常用的属性
属性描述
align设置单元格内容水平对齐方式：left，center，right，justify
valign设置单元格内容垂直对齐方式：top，middle，bottom，baseline
bgcolor设置单元格的背景颜色
bordercolcr设置行内单元格的边框颜色(会被覆盖)
bordercolordark设置行内单元格的左上边框颜色
bordercolorlight设置行内单元格的右下边框的颜色
5，表格的行分组
表格还提供了标题，表头和表尾部分：
<thead>标签定义表头，用于创建表头的头部信息。
<tfoot>标签定义表尾，用于创建表格的脚注部分。
<tbody>标签定义表格主体，用于表示表格的主体部分；
<caption>标签定义表格标题，显示在整个表格的上方。
表格可以包含多个<tbody>标签，用于对主体部分数据进行分组，<thead><tfoot>只可以出现一次。对大型数据而言，尽量将<tfoot>放在<tbody>之前。有利于加快表格的显示速度。当打印一个较长的表格时，表头可表尾会被打印在包含表格数据的每一页中。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航