HTML就是超文本标记语言的简写,是最基础的网页语言.

  • 通过标签定义的语言,代码都是由标签所组成的.(最重要的标签是定义标题、段落和换行的标签)
  • 不区分大小写
  • head部分是给html页面增加一些辅助或属性信息,它里面的内容会最先加载.

body部分是存放页面数据的地方.

标准规范:

     使用小写标签。万维网联盟 (W3C) 的标准是：建议在 HTML 4 中使用小写标签，而在 XHTML（下一代 HTML）中，必须使用小写标签。
     如果您使用新近的软件，我们认为使用 .html 是相当安全的做法。
HTML的注意事项

  • 多数标签都是有开始和结束标签,其中有个别标签功能单一,或者没有要修饰的内容可以在标签内结束.
  • 想要对被标签修饰的内容进行更丰富的操作,就用到了标签的属性,通过属性值的改变增加了更多的效果选择.
  • 属性和属性值用等号连接,属性值可用双引或单引或不用引号,  但记住始终为属性值加引号属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号.符合HTML新的规范
MyEclipse简单设置

  • 安装完MyEclipse后，先设置工作空间的编码。Window—preferences—General--workspace—选择UTF-8编码
  • 创建HTML的文件后，如果不是UTF-8的编码，可以进行设置。Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的编码
  • 创建HTML的文件后，可以选择打开方式，设置默认的打开方式。Window—preferences—General—Editors—File Associations—选择*.html—选择MyEclipse HTML Editor—选择default—选择ok
排版标签
     <br />换行标签（用的比较少）
          注意:通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解.
     <hr />水平线
          * 属性：color：颜色
               值的两种写法：1）颜色的英文单词 2）RGB三原色(red green blue) #ffffff  
          * 属性：width：宽度
               值有两种写法：1）像素值（300px,其中px可以省略）2）百分比(30%)
                    区别：百分比会随着浏览器大小而改变，像素不会。
     <p></p>段落标签（用的相对较多）
          * 特点：在开始和结束的位置上，各产生一行空行。
          * 属性：align：left|center|right  对齐方式
          #发现换行对p里面的描述没用,只有一个以及以上的空格代表一个空格.
     <div></div>
     <span></span>
          * 标签非常的简单，就是在浏览器上声明一块区域。
          * 区别：div后面有换行，span没有。
     * 块级元素和行内元素（了解）
font字体标签
     * color：颜色(参考hr颜色属性的两种写法)
     * size：字体的大小(1~7, 默认值是3，size的写法又提供了一种（-2~+4）
     * face：字体类型
 
<body>定义HTML 文档的主体
     *bgcolor也是两种背景颜色表示
 
<pre>这是
预格式文本。
它保留了      空格
和换行。
</pre>
 
HTML的特殊字符:在网页显示一些特殊符号,因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊方式来表示.  
     空格:&nbsp;
     < : &lt;
     > : &gt;
     & : &amp;
     " :  &quot; 

<h1> to <h6> 字体从大到小.(HTML 会自动在标题前后添加一个额外的折行)

     *align排列方式,其中center还是用的比较多的吧.
 
粗体和斜体的标签
     <b></b>
     <i></i>     
     注: 标签是可以嵌套的,例 <b><i></i></b>
          
滚动字幕marquee
定义列表(dl标签) 
    特点：默认缩进和自动对齐的。
          <dl>（用的较少）
                    <dt>上层项目</dt>
                    <dd>下层项目</dd>
                    <dd>下层项目</dd>
         </dl>
 
列表标签
     有序列表(ol标签)
      * 属性：type 类型=A|a|I|i
                  start 从哪开始
           <ol>
                 <li></li>
           </ol>               
 
     无序列表(ul标签),和ol极其类似.
     * 属性：type 类型= "disc"实心圆点 ", "circle"空心圆点,"square"小方块
           <ul>
                 <li></li>
           </ul> 
img图片标签
     * src="图片的地址"
     * width 图片的显示宽度,也是有两种显示:一种是"某某px"(px可以省略), 另一种是百分比
     * height 图片显示的高度,同样两种显示
     * alt 图片的说明文字
     align="bottom"这是默认,也就是底部对齐  |middle|top|left图像将浮动到文本的左侧| right浮动到右侧
a超链接标签: 用于链接资源
     <a>文本内容</a>
          * href="指定链接的资源的地址"
                    注意：如果链接网络资源，需要协议写上。如果没有协议，默认file文件协议。
                    注意：如果浏览器可以解析的文件，直接就打开了。
               * 如果浏览器不可以解析的文件，弹出下载窗口。
               * 自定义的协议:  如果浏览器解析不了的协议，会找操作系统上的应用程序。如迅雷的thunder协议.
          * target：打开的位置。如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。 
          * name: 定位资源 : 锚点(例如在某段文字上加上<a name="xx">hehe</a>,最后写一个超链接链接到href="#xx" 定位到页面的某位置)
table表格标签(★★★★★)
     <table>：声明表格的范围
     属性： border="1" 边框的厚度, 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
                width：表格的宽度
                height:高度
                bgcolor：背景的颜色
                cellpadding：内边距                              
     <caption>表的标题</caption>
     <tr>：代表表格的行
        * 属性：align：文字的对齐方式
          <td>：单元格
           属性：width:宽度
                     height：高度
          </td>
     </table>
.......................................
注：td与th的区别：th作为表头元素, 是默认居中并加粗的. td作为表格元素可以使用align="center"居中.
td中的重要属性:合并单元格,类似于挤开了其他单元格.
     行合并：rowspan="2"
     列合并：colspan="2"                 
form表单标签(★★★★★)
     表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
<form>：封装表单的范围。    
      action="请求提交的路径"
      method="表单的提交方式", 默认为get方式提交, method=""也默认为get方式提交.
          * 面试题：表单的提交方式有哪些？
               答：表单的提交方式有很多，常用的有两种，get和post。
          * get和post提交方式的区别：
               * get方式提交时，会把数据显示在地址栏上。
               * post方式不会。
                                       
               * get方式提交时，安全级别较低。
          * post方式安全级别较高。
                                       
               * get方式提交时，数据大小有限制。
               * post方式不会。
                                       
* 输入项的表单组件
     <input />                    
            文本输入框 <input type="text" name="username" />
            密码输入框 <input type="password" name="pwd" />
          radio单选按钮
           * 提供了属性name（name的值要确保一样)
           * 默认被选中的：checked=checked或者true
             <input type="radio" name="sex" value="man" checked="checked"/>男
             <input type="radio" name="sex" value="woman"/>女<br/>                   

checkbox 多选按钮(与单选的书写方式几乎一样)
            * 默认被选中的：checked=checked或者true

            * 其他的与radio一致                        
         file     文件的选择框   
               <input type="file" name="fileName" /> 
         hidden       隐藏组件
         button   
               <input type="button" value="我是按钮" />
               //<button name="mybutton">我也是一个按钮</button>也可表示
         image           和提交按钮是相同的作用。
          <input type="image" src="图片的地址"/>
          //也是提交的功能,只是和按钮相比用的不多
         reset       重置按钮
          <input type="reset" value="重置"/>
         submit    提交按钮    
          <input type="submit" value="提交"/>
 
 * 选择框: 在书写中name和value是分开的,值得注意
          属性: selected="selected" 和单选多选的checked属性类似.表示默认为选中状态.
          <select name="city">
               <option value="bj">北京</option>
               <option value="sh">上海</option>
          </select>                            
 * 文本域

          <textarea name="desc" rows="10" cols="10"></textarea>   

* 注意：点击了提交按钮后，地址栏发送了变化（?sex=on）* ?username=haha&sex=on
               * ?username=zhangsan&pwd=123&sex=nan&love=lq                
                                     
<frameset>框架标签（用的比较少）可以在同一个浏览器窗口中显示不止一个页面。
        注意：不能在body标签的内部和下面来使用该标签。

     <frameset rows="180,*">
          <frame src="" />
          <frame src="" />
     </frameset>
 
Input元素总结: 几乎所有的Input元素都包含name和value,但是按钮我是难得写name的
多媒体标签
     在网页中加入背景音乐
HTML的头标签
头标签都放在<head></head>头部分之间。
     <title>：指定浏览器的。
     <base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
     <meta>：可提供有关页面的基本信息
     <link>：定义文档与外部资源的关系。
页面设计的原则与细节
     符合行业要求，色调搭配要求与行业相符。
     政府机关：白深蓝、白红
     邮政与铁路：白浅绿
     广告与传媒：白橘、白红、白黄
     医院：白天蓝
     艺术行业：黑白、白黑
     女性：婚庆、白粉、白红
     计算机:白深蓝

01 HTML基础的更多相关文章

  1. 01: tornado基础篇

    目录:Tornado其他篇 01: tornado基础篇 02: tornado进阶篇 03: 自定义异步非阻塞tornado框架 04: 打开tornado源码剖析处理过程 目录: 1.1 Torn ...

  2. 后端 - Lession 01 PHP 基础

    目录 Lession 01 php 基础 1. php 基础 2. php 变量 3. php 单引号 和 双引号区别 4. 数据类型 5. 数据类型转换 6. 常量 7. 运算符 8. 为 fals ...

  3. Jam's balance HDU - 5616 （01背包基础题）

    Jim has a balance and N weights. (1≤N≤20) The balance can only tell whether things on different side ...

  4. 086 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 03 面向对象基础总结 01 面向对象基础（类和对象）总结

    086 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 03 面向对象基础总结 01 面向对象基础(类和对象)总结 本文知识点:面向对象基础(类和对象)总结 说明 ...

  5. 075 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 07 综合案例-数组移位-主方法功能4的实现

    075 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 07 综合案例-数组移位-主方法功能4的实现 本文知识点:综合案例-数组移位-主方法功能4的实现 说明:因为 ...

  6. 074 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 06 综合案例-数组移位-主方法功能3的实现

    074 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 06 综合案例-数组移位-主方法功能3的实现 本文知识点:综合案例-数组移位-主方法功能3的实现 说明:因为 ...

  7. 073 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 05 综合案例-数组移位-主方法功能1和2的实现

    073 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 05 综合案例-数组移位-主方法功能1和2的实现 本文知识点:综合案例-数组移位-主方法功能1和2的实现 说 ...

  8. 072 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 04 综合案例-数组移位-在指定位置处插入数据方法

    072 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 04 综合案例-数组移位-在指定位置处插入数据方法 本文知识点:综合案例-数组移位-在指定位置处插入数据方法 ...

  9. 071 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 03 综合案例-数组移位-显示数组当中所有元素的的方法

    071 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 03 综合案例-数组移位-显示数组当中所有元素的的方法 本文知识点:综合案例-数组移位-显示数组当中所有元素 ...

  10. 070 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 02 综合案例-数组移位-从键盘接收数据

    070 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 02 综合案例-数组移位-从键盘接收数据 本文知识点:综合案例-数组移位-从键盘接收数据 说明:因为时间紧张 ...

随机推荐

  1. LightOJ 1234 Harmonic Number

    D - Harmonic Number Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu S ...

  2. iOS runtime 的经典作用

  3. ui组件--弹出层layer的使用

    帮助文档 下载地址 演示地址

  4. C++中实现对象的clone()

    在C#中,许多对象自动实现了clone函数,在C++中,要拷贝一个对象,除了自定义一个拷贝构造函数来实现对象复制外,还可以像C#中那样实现一个clone函数,这需要借助编译器实现的一个隐藏拷贝构造函数 ...

  5. 20145206《Java程序设计》实验三实验报告

    20145206<Java程序设计>实验三实验报告 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运 ...

  6. Nginx反向代理设置 从80端口转向其他端口

    [root@localhost bin]# netstat -lnutp Active Internet connections (only servers) Proto Recv-Q Send-Q ...

  7. CLR via C#（12）-委托Delegate

    本来按照进度应该学习事件了,可总觉得应该委托在前,事件在后,才好理解. 委托是一个类,它提供了回调函数机制,而且是类型安全的.使用委托可以将方法当作另一个方法的参数来进行传递,这种将方法动态地赋给参数 ...

  8. .NET Nancy 详解(二) 简易路由实现

    继续上面的简易版本,有意思的点剩下便是路由实现了. 路由注册 首先,来看一下基本的路由注册过程. public FakeNancyModuleWithoutBasePath() { Delete[&q ...

  9. Active Record 数据库模式-增删改查操作

    选择数据 下面的函数帮助你构建 SQL SELECT语句. 备注:如果你正在使用 PHP5,你可以在复杂情况下使用链式语法.本页面底部有具体描述. $this->db->get(); 运行 ...

  10. phpcms v9实现wap单页教程

    下面以添加“关于我们”这一单页为例作phpcms V9 wap手机门户添加单页的教程说明: 步骤一:复制phpcms\templates\default\wap下的maps.html,粘贴重命名为ab ...