码迷,mamicode.com
首页 > Web开发 > 详细

01 HTML基础

时间:2014-10-12 16:13:48      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:des   style   color   io   os   使用   ar   for   strong   

HTML就是超文本标记语言的简写,是最基础的网页语言.
  • 通过标签定义的语言,代码都是由标签所组成的.(最重要的标签是定义标题、段落和换行的标签)
  • 不区分大小写
  • head部分是给html页面增加一些辅助或属性信息,它里面的内容会最先加载.
  • body部分是存放页面数据的地方.
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 />换行标签(用的比较少)
     <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:颜色(两种写法)
     * size:字体的大小(1~7, 默认值是3,size的写法又提供了一种(-2~+4)
     * face:字体类型
 
<body>定义HTML 文档的主体
     *bgcolor也是两种背景颜色表示
 
<pre>这是
预格式文本。
它保留了      空格
和换行。
</pre>
 
HTML的特殊字符:在网页显示一些特殊符号,因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊方式来表示.  
     空格:&nbsp;
     < : &lt;
     > : &gt;
     & : &amp;
     " :  &quot; 
h标题标签:h1一直到h6从大到小.
     *align排列方式
 
粗体和斜体的标签
     <b></b>
     <i></i>     
     注: 标签是可以嵌套的,例 <b><i></i></b>
          
滚动字幕marquee

定义列表(dl标签) 
    特点:默认缩进和自动对齐的。
          <dl>(用的较少)
                    <dt>上层项目</dt>
                    <dd>下层项目</dd>
                    <dd>下层项目</dd>
         </dl>
 
列表标签
     有序列表(ol标签)
      * 属性:type 类型;  
                  start 从哪开始
           <ol>
                 <li></li>
           </ol>               
 
     无序列表(ul标签),和ol极其类似.
     * 属性:type 类型
           <ul>
                 <li></li>
           </ul> 

img图片标签
     * src="图片的地址"
     * width 图片的显示宽度,也是有两种显示:一种是"某某px"(px可以省略), 另一种是百分比
     * height 图片显示的高度,也有两种显示
     * alt 图片的说明文字

a超链接标签
     <a>文本内容</a>
          * 链接资源
          * 属性:href="指定链接的资源的地址"
                    注意:如果链接网络资源,需要协议写上。如果没有协议,默认file文件协议。
                    注意:如果浏览器可以解析的文件,直接就打开了。
               * 如果浏览器不可以解析的文件,弹出下载窗口。
               * 自定义的协议:  如果浏览器解析不了的协议,会找操作系统上的应用程序。如迅雷的thunder协议.
          * target:打开的位置。
     * 定位资源
          * 专业的术语:锚点(例如在某段文字上加上<a name="xx">hehe</a>,最后写一个超链接链接到href="#xx" 定位到页面的某位置)
          * 属性:name

table表格标签
     <table>:声明表格的范围
     属性:     border="1" 边框的厚度
                   width:表格的宽度
                   height:高度
                   bgcolor:背景的颜色
                   cellpadding:内边距                              
       <caption>表的标题</caption>
       <tr>:代表表格的行
        * 属性:align:文字的对齐方式
             <td>:单元格
              属性:width:宽度
                         height:高度
.......................................
注:td与th的区别:th默认居中并加粗
     
td中的重要属性:合并单元格
     行合并:rowspan="2"
     列合并:colspan="2"                 
form表单标签
<form>:封装表单的范围。    
      action="请求提交的路径"
      method="表单的提交方式"
          * 面试题:表单的提交方式有哪些?
               答:表单的提交方式有很多,常用的有两种,get和post。
          * get和post提交方式的区别:
               * get方式提交时,会把数据显示在地址栏上。
               * post方式不会。
                                       
               * get方式提交时,安全级别较低。
          * post方式安全级别较高。
                                       
               * get方式提交时,数据大小有限制。
               * post方式不会。
                                       
* 输入项的表单组件
          <input />
           * 非常重要的属性:type,根据type值的不同,提供了不同的输入项的组件。
                    
      文本输入框
          姓名<input type="text" name="username" /><br/>
 
    密码输入框
          密码<input type="password" name="pwd" /><br/>     
     单选按钮
           * 提供了属性name(name的值要确保一样)
           * 默认被选中的:checked=checked或者true
          性别:<input type="radio" name="sex" value="man" checked="checked"/>男
                 <input type="radio" name="sex" value="woman"/>女<br/>
                   
     type=checkbox    多选按钮    
            * 默认被选中的:checked=checked或者true
            * 其他的与radio一致                        
     type=file          文件的选择框   
          <input type="file" name="fileName" /> 
                    type=hidden          隐藏组件
     type=button          按钮(史上最难看的)
          <input type="button" value="我是按钮" />
     type=image           和提交按钮是相同的作用。
          <input type="image" src="图片的地址"/>也是提交的功能,只是和按钮相比用的不多
     type=reset             重置按钮
          <input type="reset" value="重置"/>
     type=submit          提交按钮    
          <input type="submit" value="提交"/>

 * 选择框
          <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
                   
               * input标签需要提供两个属性,一个属性name,一个是value
                    (*****)name属性必须要指定,value看情况指定。                   
                   
<frameset>* 框架标签(用的比较少)
        注意:不能在body标签的内部和下面来使用该标签。
     <frameset rows="180,*">
          <frame />
          <frame />
     </frameset>

多媒体标签
     在网页中加入背景音乐

HTML的头标签
头标签都放在<head></head>头部分之间。
     <title>:指定浏览器的。
     <base>:为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
     <meta>:可提供有关页面的基本信息
     <link>:定义文档与外部资源的关系。

页面设计的原则与细节
     符合行业要求,色调搭配要求与行业相符。
     政府机关:白深蓝、白红
     邮政与铁路:白浅绿
     广告与传媒:白橘、白红、白黄
     医院:白天蓝
     艺术行业:黑白、白黑
     女性:婚庆、白粉、白红
     计算机:白深蓝

01 HTML基础

标签:des   style   color   io   os   使用   ar   for   strong   

原文地址:http://www.cnblogs.com/elaa/p/4020492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!