一、HTML语言

一、概述

  • 全称为HyperText Markup Language,译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。
  • Html就是超文本标记语言的简写，是最基础的网页语言。
  • Html是通过标签来定义的语言，代码都是由标签所组成。

二、基本格式

1 <html>
2     <head>
3           <title></title>
4     </head>
5     <body></body>
6 </html>

 

三、HTML的注意事项

  • 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
  • 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
  • 属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

四、常用标签

  1. 标题标签(h1 h2 h3 h4 h5 h6)
  2. 水平线标签(hr)
  3. 特殊字符：<  ：&lt;           >  : &gt;               &  : &amp;            空格 ：&nbsp;
  4. 表格标签：  
     1 <table>
 2  　　<caption>表格标题</caption><!-- 表头信息 -->
 3  　　<tr> 
 4        <th>&nbsp</th>  <!-- 定义一个表格头；若是纯文字，默认会以粗体的样式表现 -->
 5      </tr>
 6  　　<tbody>  <!-- 可以理解为表格的内容区域，在Chrome、FF浏览器通过DOM进行表格动态插入行的时候，要使用这个。如果不进行DOM操作，可不用添加 -->
 7  　　　　<tr> <!--定义一个表格行-->
 8           <td>姓名</td>
 9           <td>年龄</td>
10         </tr>
11  　　　　<tr>
12           <td>张三</td>
13           <td>18</td>
14         </tr>
15  　　 </tbody>
16 </table>          

     

  5. 定义列表(dl标签)：<dl><dt></dt><dd></dd></dl>
  6. 有序列表(ol标签)：<ol type=“1”> <li></li> </ol>
  7. 无序列表(ul标签)：<ul type=“circle”> <li></li>  <ul>           ***type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc
  8. 使用图片(img标签)：<img src="../a.jpg"/>　　
  9. 超链接(a标签)：<a name=“标记”>标记位置</a>    <a href=“#标记”>返回</a>        ***属性target，打开位置
  10. 表单标签(form):表单标签用于与服务器端的交互。 
     1 <form enctype="multipart/form-data" action="a.jsp" method="post">
 2     <table>
 3         <tr>
 4             <td><label for="txtname">账号：</label></td>
 5             <td><input type="text" id="txtname" name="username" /></td>
 6         </tr>
 7         <tr>
 8             <td><label for="txtpswd">密码：</label></td>
 9             <td><input type="password" id="txtpswd" name="pswd" /></td>
10         </tr>
11         <tr>
12             <td colspan=2>
13                 <input type="reset" />
14                 <input type="submit" />
15             </td>
16         </tr>
17     </table>
18 </form>

     

    form表单两种提交方式（get和post）的区别：
    　　**get：from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
     　  **post：from表单里所填的值，附加在HTML Headers上。

       　①数据的查询：比如浏览论坛时，URL一般包含了分类、页码数、每页记录数等信息。 get 方式，能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息，不方便进行检验查询条件。

    　　②敏感数据的提交(安全性)：对一项记录，进行更改、添加操作时，比如注册用户、更改用户资料等。get 方式附加在URL上，会泄露掉敏感的消息。 post方式，能隐藏掉敏感的信息。

    　　③大数据文本传递：get 虽然方便查询，但由于是附加在URL上，各浏览器对URL也有个长度限制。IE ：2048字符。Chrome、FF 好像是 8182字符。post 好像没此限制。

  11. HTML的头标签
    头标签都放在<head></head>头部分之间。包括：title base meta link
    <title>：指定浏览器的。
    <base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。（target 属性）
    <meta>：可提供有关页面的基本信息
    <link>：定义文档与外部资源的关系。
  12. 窗口框架(frameset,frame标签)       注意：框架标签不能写在body里面
  13. div和span

    ** div: 自动换行
    ** span：在一行显示

五、关于页面设计的原则与细节

  • 符合行业要求，色调搭配要求与行业相符。
  • 政府机关：白深蓝、白红
  • 邮政与铁路：白浅绿
  • 广告与传媒：白橘、白红、白黄
  • 医院：白天蓝
  • 艺术行业：黑白、白黑
  • 女性：婚庆？白粉、白红
  • 计算机？白深蓝

六、补充问题


1、html乱码问题：

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

2、谷歌浏览器file文件不能相互访问问题：

限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开
的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患

3、
uri : 包括网络有关任何路径（包括邮箱格式）
* http://www.163.com cc2312@163.com

url : 指的就是http://www.163.com

posted @ 2016-05-25 16:09  淡若白叶  阅读(314)  评论(0)  编辑  收藏  举报