注册
登录
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的版本： l 页面头信息所有头信息的标签都应该写在 ... 这个标签中，在head中设置的内容是不会显示在页面中的。 v 页面标题 v 页面编码 v 页面关键字和描述【SEO：搜索引擎【百度，谷歌】优化】,告诉搜索引擎这个网页是干什么，这样别人在百度、谷歌才更有可能把你的网页搜索出来 说明：如果不写，也不是完全搜索不出来，写了更好【权重比较高】。 v 引入资源文件【css、js文件】 l 页面主体所有要显示在页面中的内容都应该写在 ... 标签中，所有主体中的标签都是由上至下【块级标签】、由左向右【行级标签】依次显示的。 页面主体中使用的标签分为行级标签和块级标签两类。 行级标签：a , img , span , label 块级标签：h1~h6 , div , ul , ol , dl , table , form , hr , p 行级标签特点： ① 和其他行级标签在同一行显示 ① 一般标签的宽、高是由内容决定的，无法使用width和height设置【图片可以设置】 块级标签特点： ② 独占一行显示，不和其他标签在同一行 ③ 标签可以使用width和height设置宽、高 扩展：可以使用CSS技术修改这些行为。比如把块级的放一行都可以使用CSS实现。 l 注释注释：写在页面中的文本，用来对代码进行注解、说明用的，这些文本是不会被解析运行的，也不会显示在页面中，这些文本主要是给开发人员看的。 格式： l 多余的空格和回车在页面主体中的多个回车和空格都会被压缩成是一个空格显示出来： 如果想要显示多个空格，如果使用字符实体：“ ” l 字符实体在html中有一些特殊符号是显示不出来的如果要显示必须要使用字符实体： l 标题标签格式： 标题内容标题标签一共有六个h1~h6，分别代表： h1：主标题 h2：副标题 h3：次副标题 ...... l 段落标签格式： 一段的内容 当要在页面中显示一篇文章，并且文章要分段显示时，就使用p标签。 l 换行格式： 一段文字内的换行可以使用br标签。 l 超链接格式： 显示的文本 target=”_self”:本窗口打开【默认】 target=”_blank”：新窗口打开。 锚点a标签除了能够跳到其他页面之外，还可以在页面内跳转，只需要在页面中设置一个锚点，就可以让a标签跳转到这个锚点所在的位置去。 做法： 1. 在一个位置上使用a定义一个锚点 2. 现在可以再写另外a标签，点击时跳到这个位置： 扩展：当只写#号不写锚点名字时跳到最顶部 发邮件也可以在点击a标签时弹出客户端上安装的发邮件的软件来发邮件。 说明：如果没有安装软件，什么效果也没有。 l 图像语法： 说明：可以只设置一个宽，高会自动按比例绽放，这样图片不会变形。 l 列表无序列表语法：
...... 列表的用途： 1. 文章列表时： 2. 按钮列表时【列表是可以横过来的，而且前面的零点也可以去掉，需要CSS】 有序列表语法：
...... 二级列表语法：
...... ...... l div标签语法： 内容 我们一般使用div标签对页面进行分区、分块。一般需要div+css来对页面进行布局： 总结：我们制作一个大网站时一般首先要使用DIV+CSS页面整体进行布局，然后再把大区域再使用div细分成小的区域，然后再使用其他标签实现小的细节功能。 比如：例子把东西都放到页面中间的区域中： 1. 先使用div+css创建一个区域： 效果： 2. 把所有其他的标签放到这个div里面： l span标签语法： 内容 行级标签，功能：把一段文字套起来，让这段文字区别于其他文字。 比如：一段文字中的某几个字红色显示：【span只有结合css时才会有效果】
l 表格可以使用table标签在页面中制作行、列的表格。 语法：tr：定义行 td：定义列
单元格 单元格 ..... ....
合并单元格横向合并 colspan
纵向合并
应用场景：一般使用在数据管理列表中：比如以下就是一个四行四列的表格，最后一行是四列合并成一列用来放翻页字符串：
table常用的几个属性【不过一般这些都可以使用CSS来控制】： 内边距：cellpadding
外边距：
单元格中的对齐： align: left|center|right
valign: top|middle|bottom:
说明：table一般现在只用在数据列表中，平时页面中的一些很像表格的布局不用table，因为浏览器解析table的速度慢,比如这个很像，table但最好不用了。
管理数据时的数据列表使用：
l 表单表单：用来收集用户填写的数据的，然后提交给服务器，让服务器上的PHP程序处理这些数据。
表单里的内容在放在 中
语法： 表单元素 .......
l 表单元素所有的元素必须要有name属性。服务器要根据name才知道这个数据是干什么用的。 单行文本框语法：
说明：以后所有的名字都使用字母、数字、下划线。别的东西有时也可以用，但是会出现些奇怪的问题。
密码框
小技巧：一个全角空格宽和一个汉字相同。
单选框
复选框
隐藏域在表单中看不到这个东西，但是提交表单时，这个值会提交到服务器上去。
多行文本框
扩展：一般可以使用第三方JS插件制作出在线编辑器【富文本编辑器】
下拉框
文件域上传文件时使用的： 注意：如果表单中有文件域，那么form必须1.是以post方式提交 2. 要添加enctype=”multipart/form-data” 属性。
按钮1) 普通按钮：点击之后没有任何效果，一般用来调用JS代码用 2) 提交按钮：点击之后会提交表单中的数据到服务器 3) 重置按钮：点击之后把清除表单中的数据
表单元素其他属性disabled=”disabled”：禁用 ：这一项不会提交到服务器【相对于表单中没有这个东西】 readonly=”readonly”：只读 ：值可以继续提交。 效果：都是不能填写数据，只能看到。
表单提交的两种方式GET： 1. 表单中的数据都在URL后面提交的 2. 浏览器对URL长度有限制，所以不适合提交大表单数据 3. 不能提交图片
使用场景：制作搜索功能时的表单一般都使用GET方式：
|
| 本文出处： http://www.cnblogs.com/hellohell/p/5615186.html |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
