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. git安装--linux下的安装

    一般linux自带git版本很旧,会有一定问题,可以先卸载系统自带git: yum remove git下载及安装git: wget https://github.com/git/git/archiv ...

  2. pmap

    .[root@localhost security]# pmap -d : -bash Address Kbytes Mode Offset Device Mapping r-x-- : bash b ...

  3. 多米诺（codevs 3052）

    题目描述 Description 一个矩形可以划分成M*N个小正方形,其中有一些小正方形不能使用.一个多米诺骨牌占用两个相邻的小正方形.试问整个区域内最多可以不重叠地放多少个多米诺骨牌且不占用任何一个 ...

  4. C/C++中调用python文件

    1.将python27安装目录下include.libs文件夹拷贝至Demo程序目录. 2.Demo项目设置包含Python.h.python27.lib); (因为安装python27的时候,pyt ...

  5. sehll_if

    -s file 文件大小非0时为真 [ -f "somefile" ] :判断是否是一个文件[ -x "/bin/ls" ] :判断/bin/ls是否存在并有可 ...

  6. JavaScript基础——创建函数

    JavaScript的最重要的一个部分是制作其他代码可以重用的代码.要做到这一点,你可以把代码组织成执行特定任务的函数.函数是结合在一个单一的块中,并给予一个名称的一系列代码语句.然后,你就可以通过引 ...

  7. 昨晚值班将发dla的程序改好后放入正式环境

    可是在修改的topic的发送文件中出现有节点没有对应,整个过程陆续调至有20分钟最后11电把新程序换掉.

  8. jquery学习笔记----jquery相关的文档

    http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...

  9. ASP.NET MVC 使用带有短横线的html Attributes（转载）

    转载地址:http://www.nmtree.net/2013/10/25/asp-net-mvc-use-dash-in-html-attributes.html 情景再现 我们常常需要一个文本框来 ...

  10. [LeetCode] Happy Number

    Happy Number Total Accepted: 35195 Total Submissions: 106936 Difficulty: Easy Write an algorithm to ...