码迷,mamicode.com
首页 > Web开发 > 详细

html总结

时间:2016-06-24 20:27:36      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

HTML

l  什么是HTML?

构的。HTML 是超文本标记【标签】语言 (Hyper Text Markup Language)简写,是运行在浏览器【IE、谷歌浏览器、360浏览器等等】中的,用来制作页面结

 

HTML其实就是一些个标签,页面都是由这些个标签拼出来的。

标签基本结构

html其实就是一堆标签,会用就行。

标签的基本结构:

1. 标签都是由 < 和 > 括起来的

2. < 和 > 里面由标签的名字、属性名称和属性值组成:

3. 标签分为单闭合标签和双闭合标签

l  文件编码

我们在电脑上创建的每个文件都有一种编码,不同的编码能够显示不能的内容,比如:

u  gb2312:简体中文

u  big5:繁体中文

u  gbk:中文【简体+繁体】

u  EUC_KR:韩文

u  utf-8:万国码【可以显示不同国家的语言】【我们以后创建的所有文件和程序都使用这种编码】

浏览器默认使用GBK的方式来解析utf-8的网页所以就乱码:

解决办法:我们可以在页面中使用meta标签通知浏览器使用utf-8编码来显示页面:

l  标准的HTML页面结构

一个标准的HTML页面需要有一个基本的HTML结构,如果不按这个结构来制作页面的话,页面会出现各种奇怪的问题。所以我们制作页面时都要按着这个基本结构来制作页面:

l  doctype声明

<!doctype html>

页面的第一行一般要使用doctype来声明页面中使用的html的版本:

l  页面头信息

所有头信息的标签都应该写在<head> ... </head>这个标签中,在head中设置的内容是不会显示在页面中的。

v  页面标题

<title>页面标题</title>

v  页面编码

<meta charset=”utf-8”>

v  页面关键字和描述【SEO:搜索引擎【百度,谷歌】优化】,告诉搜索引擎这个网页是干什么,这样别人在百度、谷歌才更有可能把你的网页搜索出来

<meta name=”keywords” content=”页面关键字”>

<meta name=”description” content=”页面描述”>

说明:如果不写,也不是完全搜索不出来,写了更好【权重比较高】。

v  引入资源文件【css、js文件】

<script src=”js.js”></script>

<link rel="stylesheet" type="text/css" href="css.css">

l  页面主体

所有要显示在页面中的内容都应该写在<body> ... </body>标签中,所有主体中的标签都是由上至下【块级标签】、由左向右【行级标签】依次显示的。

 页面主体中使用的标签分为行级标签和块级标签两类。

行级标签:a , img , span , label

块级标签:h1~h6 , div , ul , ol , dl , table , form , hr , p

行级标签特点:

① 和其他行级标签在同一行显示

① 一般标签的宽、高是由内容决定的,无法使用width和height设置【图片可以设置】

块级标签特点:

② 独占一行显示,不和其他标签在同一行

③ 标签可以使用width和height设置宽、高

扩展:可以使用CSS技术修改这些行为。比如把块级的放一行都可以使用CSS实现。

l  注释

注释:写在页面中的文本,用来对代码进行注解、说明用的,这些文本是不会被解析运行的,也不会显示在页面中,这些文本主要是给开发人员看的。

格式:<!-- 注释 -->

l  多余的空格和回车

在页面主体中的多个回车和空格都会被压缩成是一个空格显示出来:

如果想要显示多个空格,如果使用字符实体:“&nbsp; ”

l  字符实体

在html中有一些特殊符号是显示不出来的如果要显示必须要使用字符实体:

l  标题标签

格式:<h1> 标题内容 </h1>

标题标签一共有六个h1~h6,分别代表:

h1:主标题

h2:副标题

h3:次副标题

......

l  段落标签

格式:<p>  一段的内容  </p>

当要在页面中显示一篇文章,并且文章要分段显示时,就使用p标签。

l  换行

格式:<br>

一段文字内的换行可以使用br标签。

l  超链接

格式:<a href=”跳转到的url地址” target=”打开窗口的位置”>  显示的文本  </a>

target=”_self”:本窗口打开【默认】

target=”_blank”:新窗口打开。

锚点

a标签除了能够跳到其他页面之外,还可以在页面内跳转,只需要在页面中设置一个锚点,就可以让a标签跳转到这个锚点所在的位置去。

做法:

1. 在一个位置上使用a定义一个锚点

2. 现在可以再写另外a标签,点击时跳到这个位置:

扩展:当只写#号不写锚点名字时跳到最顶部

发邮件

也可以在点击a标签时弹出客户端上安装的发邮件的软件来发邮件。

说明:如果没有安装软件,什么效果也没有。

l  图像

语法:<img src=”图片地址”  width=”宽”  height=”高”   alt=”图片显示不出来时显示的文字”   title=”鼠标放上时显示的标题” >

说明:可以只设置一个宽,高会自动按比例绽放,这样图片不会变形。

l  列表

无序列表

语法:

<ul>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

......

</ul>

列表的用途:

1. 文章列表时:

2. 按钮列表时【列表是可以横过来的,而且前面的零点也可以去掉,需要CSS】

有序列表

语法:

<ol>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

......

</ol>

二级列表

语法:

<dl>

<dt>一级列表项</dt>

<dd>二级列表项</dd>

<dd>二级列表项</dd>

......

<dt>一级列表项</dt>

......

</dl>

l  div标签

语法:<div> 内容 </div>

我们一般使用div标签对页面进行分区、分块。一般需要div+css来对页面进行布局:

总结:我们制作一个大网站时一般首先要使用DIV+CSS页面整体进行布局,然后再把大区域再使用div细分成小的区域,然后再使用其他标签实现小的细节功能。

比如:例子把东西都放到页面中间的区域中:

1. 先使用div+css创建一个区域:

效果:

2. 把所有其他的标签放到这个div里面:

l  span标签

语法:<span> 内容 </span>

行级标签,功能:把一段文字套起来,让这段文字区别于其他文字。

比如:一段文字中的某几个字红色显示:【span只有结合css时才会有效果】

 

 

 

 

 

 

 

 

 

 

 

 

 

l  表格

可以使用table标签在页面中制作行、列的表格。

语法:tr:定义行   td:定义列

 

<table  border=”边框宽度”  cellspacing=”单元格外边距”  cellpadding=”单元格内边距”>

<tr>

<td>单元格</td>

<td>单元格</td>

.....

</tr>

....

</table>

 

 

 

 

合并单元格

横向合并 colspan

 

纵向合并

 

 

 

应用场景:一般使用在数据管理列表中:比如以下就是一个四行四列的表格,最后一行是四列合并成一列用来放翻页字符串:

 

 

table常用的几个属性【不过一般这些都可以使用CSS来控制】:

内边距:cellpadding

 

外边距:

 

单元格中的对齐:

align:  left|center|right

 

valign: top|middle|bottom:

 

 

说明:table一般现在只用在数据列表中,平时页面中的一些很像表格的布局不用table,因为浏览器解析table的速度慢,比如这个很像,table但最好不用了。

 

管理数据时的数据列表使用:

 

 

 

 

 

 

 

 

l  表单

表单:用来收集用户填写的数据的,然后提交给服务器,让服务器上的PHP程序处理这些数据。

 

表单里的内容在放在<form> ... </form>中

 

语法:

<form  method=”提交方式”  action=”提交地址”

表单元素

.......

</form>

 

 

l  表单元素

所有的元素必须要有name属性。服务器要根据name才知道这个数据是干什么用的。

单行文本框

语法:<input  type=”text”  name=”名称”  maxlength=”最大输入长度”  size=”宽度”  value=”默认显示的值”>

 

 

 

说明:以后所有的名字都使用字母、数字、下划线。别的东西有时也可以用,但是会出现些奇怪的问题。

 

 

密码框

<input  type=”password”  name=”名称”  maxlength=”最大输入长度”  size=”宽度”  value=”默认显示的值”>

 

 

小技巧:一个全角空格宽和一个汉字相同。

 

 

 

 

 

 

 

 

单选框

<input  type=”radio”  name=”名称”   value=”提交的值”> 显示的文本

 

 

 

 

 

 

 

复选框

<input  type=”checkbox”  name=”名称”   value=”提交的值”> 显示的文本

 

 

 

 

 

 

 

 

隐藏域

在表单中看不到这个东西,但是提交表单时,这个值会提交到服务器上去。

<input  type=”hidden”  name=”名称”   value=”提交的值”>

 

 

 

 

 

 

 

 

 

多行文本框

<textarea  rows=”行数”  cols=”列数”  name=”名字”> 内容 </textarea>

 

 

扩展:一般可以使用第三方JS插件制作出在线编辑器【富文本编辑器】

 

下拉框

<select name=”名字”>

<option value=”提交的值”>显示的文本</option>

<option value=”提交的值”>显示的文本</option>

<option value=”提交的值”>显示的文本</option>

</select>

 

 

 

文件域

上传文件时使用的:

<input type=”file” name=”名字”>

注意:如果表单中有文件域,那么form必须1.是以post方式提交 2. 要添加enctype=”multipart/form-data” 属性。

 

 

 

 

按钮

1)        普通按钮:点击之后没有任何效果,一般用来调用JS代码用

<input  type=”button”  name=”名称”  value=”按钮上显示的文本”>

2)        提交按钮:点击之后会提交表单中的数据到服务器

<button>显示的文本</button>

<input   type=”submit”   value=”按钮上显示的文本”>

3)        重置按钮:点击之后把清除表单中的数据

<input    type=”reset”    value=”按钮上显示的文本”>

 

 

 

 

 

 

表单元素其他属性

disabled=”disabled”:禁用 :这一项不会提交到服务器【相对于表单中没有这个东西】

readonly=”readonly”:只读 :值可以继续提交。

效果:都是不能填写数据,只能看到。

 

 

 

 

表单提交的两种方式

GET:

1. 表单中的数据都在URL后面提交的

2. 浏览器对URL长度有限制,所以不适合提交大表单数据

3. 不能提交图片

 

使用场景:制作搜索功能时的表单一般都使用GET方式:

 

POST:

1. 可以提交大数据

2. 可以上传文件

3. 提交的数据包装在http协议主体里面了

 

应用场景:当注册、登录、添加等等。

 

 

 

 

 

h5对表单的加强

H5有些浏览器不支持:

 

input输入框的加强:

type=”email”

type=”url”

type=”number”

type=”range”

type=”date”

type=”color”

 

 

 

 

 

 

 

l  框架集

框架集:分割窗口用的【从H5中删除去掉了】

横向分割

 

 

 

 

 

纵向分割

 

 

 

总结:框架集在HTML5之后已经不再推荐使用了,但是一些旧的后台模板中会使用这个。

 

 

a标签可以在不同的框架中跳转:

1. 为每个窗口起个名字:

 

2. 在a标签上使用target属性指明在哪个窗口打开:

 

 

效果:

 

 

 

 

 

l  内联框架

在一个窗口内部的某个位置再嵌入一个窗口:

<iframe  src=”内联的页面地址”></iframe>

 

 

 

 

还可以设置表单提交到的窗口:

1. 为窗口起名:

 

2. 在表单上添加一个target属性指定提交到的窗口

 

 

扩展:可以使用这个东西模拟一个无刷新上传图片的功能。

 

html总结

标签:

原文地址:http://www.cnblogs.com/hellohell/p/5615186.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!