学过很多语言，最近终于决定要学PHP了。

学习PHP，首先总要学习HTML，那么，我也从HTML开始吧！

首先学习任何编程语言，看再多书，都离不开它——帮助文档

HTML帮助文档：http://pan.baidu.com/s/1hqxOymo

不说不知道，近年来比较火的HTML5，是HTML的一个发展方向，HTML的发展方向如下图，一边是多元化的HTML5，另一边是规范化的XML，过程中还衍生了XHTML！

做网页，总避免不了要使用颜色，颜色有两种表示法，单词表示法和十六进制表示法，其中，十六进制表示法表示的颜色比较全，我也整理了一篇博文，以供查看。

RGB颜色表：http://blog.csdn.net/u010849590/article/details/43339473

编程语言总有一些特殊符号不能直接作为文本显示，HTML也不例外，这些特殊符号在HTML中称为实体，博主也整理了一篇HTML实体对照表，供不时之需。

实体对照表：http://blog.csdn.net/u010849590/article/details/43380181

网页代码是由浏览器直接解析的，编写网页必须选择一种编码，常用的编码有UTF-8、GBK、GD2312等，而浏览器也可以选择一种编码去解析网页。那么，问题来了，如果浏览器选择的编码和编写网页的编码不一致怎么办？解决的办法有是三个：

  1. 使用最多人用的编码方式适应浏览器
  2. 设置浏览器的编码去配合网页
  3. 使用<meta/>标签

很明显，一种编码不能适合所有人，而让用户修改浏览器编码也不够智能，所以，前两种都是治标不治本，第三种方法才是王道。

<meta/>是单标签，其用法是

<meta http-equiv="content-type" content="text/html;charset=编码形式" />

以UTF-8为例：

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<meta/>标签的其他用法，可查看帮助文档。

<base/>标签可设置超链接，如将相对路径装换为绝对路径、打开方式等。<base/>是单标签，其具体用法可参考帮助文档。

<body>的属性设置会默认为整个网页的默认设置，可设置字体颜色（text）、背景颜色（bgcolor）、背景图片（background）、背景属性（bgproperties）等，还是查看帮助文档！

<p>是段落标签，这个标签比较特殊，既可用作单标签也可用作双标签。用作双标签时，标签之间的内容作为一段显示；作为单标签时，从标签处开始换行。双标签的用法比较标准，也比较普遍。

<pre>标签是双标签，标签内的文本会按照原格式输出，与<xmp>不同，<pre>标签内的标签是可以被解析的，而<xmp>内的标签是不能解析，以文本形式输出的！

<li>标签搭配<ol>和<ul>使用，<li>为列表（list）标签，是双标签，标签间的内容作为列表中的一项显示，默认无序；<ol>标签搭配<li>标签，使列表变为有序列表；<ul>标签搭配<li>使用，作为无序列表组。这些标签的属性可查看帮助文档。

<sub>和<sup>，下标标签和上标标签，均为双标签。

<img>叫做图像标签，用于显示图片，为单标签，src属性设置图片链接，title属性设置鼠标放在上面时显示的名称，alt属性设置图片加载失败显示的名称。其他属性可查帮助文档。

<a>是链接标签，用于超链接，为双标签。href属性设置链接地址，title属性设置标签放在上面时显示的名称，target属性设置打开链接的方式，其他属性，可查看帮助文档。

<a>标签设置锚点，用于链接到特定区域，用name属性。name设置一个名称，href属性设置为"#"+name的名称，即可链接到本页name所在处；若href设置为网页路径+"#"+name的名称，则可链接到该网页的name所在处；herf属性设置为"#"或为空时，跳转到本页头。

当前页跳转

跳转到其他页面

URL：统一资源定位符

URL组成：以http://i.cnblogs.com/EditPosts.aspx?postid=4275104&update=1为例

  • 协议名称：http://、ftp://、https://、file://等（http://）
  • 主机名：（i.cnblogs.com）（cnblogs.com是域名）
  • 端口号：80、8080、等（范围：0~65535）（80）
  • 资源名称：访问的文件（EditPosts.aspx）
  • 参数："?"后面的键值对，多个参数用"&"连接（get传参，参数可见；post传参，参数不可见）（postid=4275104&update=1）

URL的相对路径：

  • ./：代表本地路径
  • ../：代表上级路径
  • ../../：代表上上级路径（以此类推）

<table>标签用于构建表格，为双标签。width属性设置表格的宽度，heigth属性设置表格的高度，border属性设置表格的边框，cellspacing属性设置单元格之间的宽度，cellpadding属性设置单元格内容与边框之间的距离。

<tr>标签嵌套<table>标签使用，用于设计表格的行，为双标签。

<td>标签嵌套<tr>标签使用，用于表示表格的单元格，为双标签。rowspan属性设置跨行，属性值表示跨越的行数；colspan属性设置跨列，属性值表示跨越的列数。

<th>标签嵌套<tr>标签使用，用于表示表格的表头，单元格的内容字体加粗、居中。

更多属性可查帮助文档。

HTML的框架（frame），也称为分帧，即将多个页面组合成一个页面显示。

  • 优点：

    • 重载页面时，不需要重载整个页面，增加了网页下载的速度
    • 方便制作导航栏
  • 缺点：
    • 多个页面，不易管理
    • 代码复杂，无法被搜索引擎索引到
    • 多框架的页面会增加服务器的http请求
    • 小型的移动设备无法完全显示
  • 由于以上缺点，不符合标准网页设计理念，已被抛弃，但后台可以使用，所以，还是要学习。

框架的标签：

  • <frameset>标签，双标签

    • <frameset>标签代替了<body>标签，定义框架页面，所以使用<frameset>标签就不用<body>标签
    • border属性设置框架边框的大小
    • rows属性设置框架的行数及高度，需要多少行就编写多少行的大小，“*”表示剩余空间，用“,”隔开
    • cols属性设置框架的列数及宽度，需要多少列就编写多少列的大小，“*”表示剩余空间，用“,”隔开
    • <frameset>可嵌套使用，使框架格式多元化
  • <frame>标签，双标签
    • 用于显示每个页面的内容，嵌套在<frameset>中使用；
    • src属性设置页面的路径，以显示其内容
    • name属性可设置frame的名称，供链接显示
    • <a>标签的target属性可指定显示页面的frame
    • <a>标签的target属性设置为“_parent”时，表示它的上一级框架显示，设置为“_top”时，表示顶级框架显示，及整个网页

布局显示
 
超链接
  • <noframes>标签，双标签

    • 当浏览器无法加载框架的时候，会显示<noframes>标签内的内容
    • 嵌套在<frameset>标签中使用，搭配<body>标签使用
  • <iframe>标签，单标签
    • 创建一个包含另一个文档的内联框架
    • 其中的内容可在不支持该标签的浏览器中显示
    • 在<body>标签中使用

关于框架的其他属性和用法，可查看帮助文档！

表单：可以把输入的数据传送到服务器端的程序的html元素

  • <form>标签，双标签

    • 表示HTML表单
    • action属性设置数据传送的目的地
    • method属性设置传输方式，可设置为get和post
      • get传输的信息较少，速度较快，提交信息会显示在地址栏，不安全
      • post传输的信息较多，速度较慢，提交信息不会显示在地址栏，较安全
    • enctype属性设置数据发送到服务器的编码类型
      • application/x-www-form-urlencoded：窗体数据被编码为名称/值对，为标准编码格式，默认值
      • multipart/form-data：窗体数据被编码为一条信息，页面上的每个控件对应信息中的一部分，上传文件时使用

  • <input>标签，单标签

    • type，代表一个输入域的显示方式（分为输入型、选择型、点击型）

      • text，单行文本输入域，输入型
      • password，密码输入域，输入的字符显示为"*"，输入型
      • file，文件上传，输入型
      • checkbox，复选框，选择型
      • radio，单选框，选择型
      • hidden，隐藏域，一般用于传递默认值，
      • button，按钮，点击不会提交表单，可进行其他操作，点击型
      • image，图片按钮，点击会提交表单，点击型
      • submit，提交按钮，点击可提交表单，点击型
      • reset，重置按钮，点击型
    • name，表单项的名称
      • 通常设置为与数据库中相对应的字段名相同
      • 点击型不需要该属性
      • 传输数据时的标识符
      • 复选框的name值一般使用数组表示
      • 单选框的name值相同时，选项相互排斥
    • value，表单项的值
      • 选择型设置该属性值，选择后，可随表单传输
      • 点击型除image，设置该属性，即设置按钮显示名称
      • 输入型设置该属性值，设置默认value值
    • maxlength，限制文本输入长度
  • <textarea>标签，双标签
    • 多行文本域，可输入多行文本
    • cols，设置列数，通过列数，设置宽度
    • rows，设置行数，通过行数，设置高度
    • 其余属性与<input>标签输入型一致
  • <select>标签，双标签
    • 下拉菜单
    • name属性设置表单项名称，通常与数据库字段名一致
    • multiple属性设置表单为多选
  • <option>标签，双标签
    • 嵌套在<select>标签中使用，表示下拉菜单的一个选项
    • value属性设置选项的值，选择后，随表单传输
    • selected属性设置默认被选中
  • <lable>标签可设定文本与选项绑定，达到点击文本即可选择的作用

关于表单的其他属性和用法，可查看帮助文档！

<div>标签，双标签

  • 图层标签，用于定位元素或布局
  • 层中的内容可放到浏览器任意位置，可放入HTML元素
  • 常与CSS结合使用

由于常与CSS结合使用，在学习CSS时再深入学习！

至此，HTML的基本元素已经学完了，可以开始制作简单的静态网页了，但是离动态网站还远着呢！接着来学CSS吧！

PHP笔记（HTML篇）的更多相关文章

  1. 《javascript权威指南》读书笔记——第二篇

    <javascript权威指南>读书笔记——第二篇 金刚 javascript js javascript权威指南 今天是今年的196天,分享今天的读书笔记. 第2章 词法结构 2.1 字 ...

  2. 《javascript权威指南》读书笔记——第一篇

    <javascript权威指南>读书笔记——第一篇 金刚 javascript js javascript权威指南 由于最近想系统学习下javascript,所以开始在kindle上看这本 ...

  3. PHP学习笔记 - 进阶篇（11）

    PHP学习笔记 - 进阶篇(11) 数据库操作 PHP支持哪些数据库 PHP通过安装相应的扩展来实现数据库操作,现代应用程序的设计离不开数据库的应用,当前主流的数据库有MsSQL,MySQL,Syba ...

  4. PHP学习笔记 - 进阶篇（10）

    PHP学习笔记 - 进阶篇(10) 异常处理 抛出一个异常 从PHP5开始,PHP支持异常处理,异常处理是面向对象一个重要特性,PHP代码中的异常通过throw抛出,异常抛出之后,后面的代码将不会再被 ...

  5. PHP学习笔记 - 进阶篇（9）

    PHP学习笔记 - 进阶篇(9) 图形图像操作 GD库简介 GD指的是Graphic Device,PHP的GD库是用来处理图形的扩展库,通过GD库提供的一系列API,可以对图像进行处理或者直接生成新 ...

  6. PHP学习笔记 - 进阶篇（8）

    PHP学习笔记 - 进阶篇(8) 日期与时间 取得当前的Unix时间戳 UNIX 时间戳(英文叫做:timestamp)是 PHP 中关于时间与日期的一个很重要的概念,它表示从 1970年1月1日 0 ...

  7. PHP学习笔记 - 进阶篇（7）

    PHP学习笔记 - 进阶篇(7) 文件操作 读取文件内容 PHP具有丰富的文件操作函数,最简单的读取文件的函数为file_get_contents,可以将整个文件全部读取到一个字符串中. $conte ...

  8. PHP学习笔记 - 进阶篇（6）

    PHP学习笔记- 进阶篇(6) 会话控制(session与cookie) 当前的Cookie为: cookie简介 Cookie是存储在客户端浏览器中的数据,我们通过Cookie来跟踪与存储用户数据. ...

  9. PHP学习笔记 - 进阶篇（4）

    PHP学习笔记 - 进阶篇(4) 字符串操作 字符串介绍 PHP开发中,我们遇到最多的可能就是字符串. 字符串变量用于包含字符串的值. 一个字符串 通过下面的3种方法来定义: 1.单引号 2.双引号 ...

  10. PHP学习笔记 - 进阶篇（5）

    PHP学习笔记 - 进阶篇(5) 正则表达式 什么叫正则表达式 正则表达式是对字符串进行操作的一种逻辑公式,就是用一些特定的字符组合成一个规则字符串,称之为正则匹配模式. $p = '/apple/' ...

随机推荐

  1. 【JUC】JDK1.8源码分析之Semaphore（六）

    一.前言 分析了CountDownLatch源码后,下面接着分析Semaphore的源码.Semaphore称为计数信号量,它允许n个任务同时访问某个资源,可以将信号量看做是在向外分发使用资源的许可证 ...

  2. IO多路复用之select总结

    1.基本概念 IO多路复用是指内核一旦发现进程指定的一个或者多个IO条件准备读取,它就通知该进程.IO多路复用适用如下场合: (1)当客户处理多个描述字时(一般是交互式输入和网络套接口),必须使用I/ ...

  3. Mybatis-update - 数据库死锁 - 获取数据库连接池等待

    最近学习测试mybatis,单个增删改查都没问题,最后使用mvn test的时候发现了几个问题: update失败,原因是数据库死锁 select等待,原因是connection连接池被用光了,需要等 ...

  4. 认识Java Core和Heap Dump

    什么是Java Core和Heap Dump Java程序运行时,有时会产生Java Core及Heap Dump文件,它一般发生于Java程序遇到致命问题的情况下. 发生致命问题后,Java进程有时 ...

  5. 匿名方法与Lambda表达式

    1.匿名方法 在学习委托时,我们知道委托实例至少要绑定一个方法才能使用,而调用委托实际上是调用了它所关联地方法.一般来说,需要定义一个与委托签名相符的方法,并使之与委托变量关联.如以下代码: Acti ...

  6. Hadoop源码编译过程

    一.           为什么要编译Hadoop源码 Hadoop是使用Java语言开发的,但是有一些需求和操作并不适合使用java,所以就引入了本地库(Native Libraries)的概念,通 ...

  7. 彻底解决“从客户端中检测到有潜在危险的Request.Form值”

    类似设置validateRequest="false"的方法不推荐,因为应用程序需要显式检查所有输入,不方便. 1.前端使用encodeHtml函数对字符串进行编码,例: var ...

  8. .net线程池内幕

    本文通过对.NET4.5的ThreadPool源码的分析讲解揭示.NET线程池的内幕,并总结ThreadPool设计的好与不足. 线程池的作用线程池,顾名思义,线程对象池.Task和TPL都有用到线程 ...

  9. Professional JavaScript for Web Developers 3rd Edition ---读书笔记

    1. DOMContentLoaded DOM树构建完成时触发该事件 load 页面加载完毕触发 原生js document.addEventListener('DOMContentLoaded', ...

  10. .NET程序员走向高端必读书单汇总

    .NET程序员走向高端必读书单汇总 一.知识树 1. 基本能力 1.1 数学 1.2 英语 1.3 语言表达 2. 计算机组织与体系结构 3. 算法与数据结构 4. 操作系统 5. 计算机网络 6. ...