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. db2中报SQLCODE=-530, SQLSTATE=23503错误

    今天在写一个增加操作时,报错信息如下:SQLCODE=-530, SQLSTATE=23503,该sqlcode说明:“对特定的约束名指定了无效的外健值”. 项目中用的框架是SSH,新增的主对象有多个 ...

  2. 'XCTest/XCTest.h' file not found

    直接写解决方法吧:在报错的 Target 中的 Building Settings 中 Framework Search Paths 里面添加 $(PLATFORM_DIR)/Developer/Li ...

  3. 让div等块级元素水平以及垂直居中的解决办法

    一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...

  4. Maven 在sts不会自动下载包的问题

    1.查看maven配置setting.xml是否有设置远程仓库 2.sts是否正确配置指定了setting.xml 3.是否开启线上下载,如下图

  5. NYOJ题目1045看美女

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAK5CAIAAADCdSR7AAAgAElEQVR4nO3dP3Lbuv434HcT7r2Q1F

  6. iOS源码之OC相册，可以循环查看图片

    #import "ViewController.h" #import "YZUIScrollView.h" #define kuan ([UIScreen ma ...

  7. 【jquery】 【jQuery技术内幕】阅读笔记 一

    jQuery( object ) jquery在构造对象时,除了可以用十分好用的css选择器来查找DOM,还可以传入一个javascript对象来生成一个jquery对象. // JS var foo ...

  8. 重温WCF之WCF中可靠性会话（十四）

    1.WCF中可靠性会话在绑定层保证消息只会被传输一次,并且保证消息之间的顺序.当使用TCP(Transmission Control Protocol,传输控制协议)通信时,协议本身保证了可靠性.然而 ...

  9. MVC中Action 过滤

    总结Action过滤器实用功能,常用的分为以下两个方面: 1.Action过滤器主要功能就是针对客服端请求过来的对象行为进行过滤,类似于门卫或者保安的职能,通过Action过滤能够避免一些非必要的深层 ...

  10. djcelery的细节篇

    http://blog.csdn.net/samed/article/details/50598371 随时撸一撸,要点记心间.. 1. 下面讲解一下celery.py文件的配置内容,为何要这么配置. ...