HTML学习笔记

一、HTML介绍

HTML（HyperText Markup Language）超文本标记语言，是学习Web程序的最重要并且最基础部分。

html语言由浏览器可以自动进行解释

最新版本为HTML5.0，常用版本为xhtml1.0，由浏览器解释执行，纯文本文件

xhtml（扩展HTML）xhtml1.0是HTML4.01的升级版本，比HTML更加严格，删除了表现型标签

二、HTML基本结构

html5基本结构：

    
    
    
    

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     
     charset="UTF-8">
     
     
     
     
    
     
     
     
     

     
     
     
     

     
     
     
     
    
     
     
     
     

     
     
     
     

    
    
    
    

xhtml1.0基本结构(虽然建议使用html5的框架，但是因为老浏览器还广泛存在，还需掌握xhtml1.0的框架)：

    
    
    
    

     
     
     
     

     
     
     
     
 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     
     
     
     

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

     
     
     
     

     
     
     
     
    
     
     
     
     

     
     
     
     

    
    
    
    

xhtml1.0的文档结构声明有三种transitional（ 过渡型 ）、strict（严格型）、frameset（框架型），浏览器将安装DTD类型来解析

三、编码规范

1.所有的标记都必须要有一个相应的结束标记，单标记直接用/结束

2.所有标签的元素和属性的名字都必须使用小写

3.所有的属性必须用引号""括起来

虽然在html5中，对规范有所放松，但是还是建议大家用xhtml的规范来书写代码，养成严谨的好习惯

四、HTML标记解析

1、头标记head

title：网页标题

meta：辅助信息标记，向浏览器传递一些信息，常用的如下：

显示字符集：

 charset="UTF-8">

网页刷新：

 http-equiv="refresh" content="5,http://www.163.com"/>

//与SEO有关

网页关键字：

 name="keywords" content="电脑、机器人、智能" />

网页描述：

 name="description" content="关于网络的网页" />

与移动开发有关

 name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

2、文档主体标记body

3、文字排版标记

1）标题标记

到

表示页面中的关键词（标题），以使用时有以下的注意事项！

1. 

代表最重要的，

代表相对最不重要的，因此，根据这个递减，适当安排关键词；

2.

尽量靠近在html 中的标签，越近越好，以便让搜索引擎最快的领略主题。

2）文字标记

：加粗

：强调

b和strong的区别就在于前者是物理元素,仅表示加粗，后者是逻辑元素，表示强调的意思，是在html中的标签，而在xhtml中只能使用，后者兼容性更好。

：斜体

：强调

：下划线

3）段落与换行标记

：段落


换行


标记使当前行强行中断而另起一行，但是新行与原来的行保持相同的属性，即新行与原来的行属于同一段落，而

标记在换行的时候另起了一新的段落。

4）：超级链接标记

 href="链接位置" title="链接描述" target="目标">链接文字

1. 学会使用邮件链接：

 href="mailto:[email protected]">发送邮件

2. 页面链接的锚点：

 href="#top">回到顶部   id="top">顶部的链接

3. 给链接增加 鼠标提示：

 title=“点击查看胡悦的详细信息”>查看

4. 理解链接的不同打开方式:

 href=“” target=“_top/_self/_blank”>

5. 绝对路径、相对路径

相对路径：指文件的位置是相对于当前文件的位置

例：

若要从 contents.html 链接到 hours.html（两个文件位于同一文件夹中），可使用相对路径 hours.html。

若要从 contents.html 链接到 tips.html（在 resources 子文件夹中），请使用相对路径 resources/tips.html。每出现一个斜杠 (/)，表示在文件夹层次结构中向下移动一个级别。

若要从 contents.html 链接到 index.html（位于父文件夹中 contents.html 的上一级），请使用相对路径 ../index.html。两个点和一个斜杠 (../) 可使您在文件夹层次结构中向上移动一个级别。

若要从 contents.html 链接到 catalog.html（位于父文件夹的不同子文件夹中），请使用相对路径 ../products/catalog.html。其中，../ 使您向上移至父文件夹，而 products/ 使您向下移至 products 子文件夹中。

绝对路径：从站点根目录开始的路径，以“/”开头

5）img：图片标记

 src="图片位置" alt="图片描述" width="宽度" height="高度" />

6）

---

：横线

4、数据列表标记

1、ul、ol、li

    
    
    
    

     
     
     
     

     
     
     
     
    
巴西
     
     
     
     
    
阿根廷
     
     
     
     
    
德国
     
     
     
     

    
    
    
    

1. 巴西

2. 阿根廷

3. 德国

    
    
    
    

     
     
     
     

     
     
     
     
    
巴西
     
     
     
     
    
阿根廷
     
     
     
     
    
德国
     
     
     
     

    
    
    
    

• 巴西

• 阿根廷

• 德国

2、dl、dt、dd

    
    
    
    

     
     
     
     

     
     
     
     
    
计算机
     
     
     
     
    
用来计算的仪器 ... ...
     
     
     
     
    
显示器
     
     
     
     
    
以视觉方式显示信息的装置 ... ...
     
     
     
     

    
    
    
    

上课代码下载

5、表格标记

    
    
    
    

     
     
     
     
 width="200" border="1">
     
     
     
     
    表格标题
     
     
     
     
    
     
     
     
     
        
     
     
     
     
            学号
     
     
     
     
            姓名
     
     
     
     
            性别
     
     
     
     
        
     
     
     
     
    
     
     
     
     
    
     
     
     
     
        
     
     
     
     
            12010101
     
     
     
     
            胡悦
     
     
     
     
            女
     
     
     
     
        
     
     
     
     
    
     
     
     
     

    
    
    
    

表格标题

学号	姓名	性别
12010101	胡悦	女

合并单元格演示：

水平合并(colspan=合并单元格数)

    
    
    
    

     
     
     
     
 border="1">
     
     
     
     
    
     
     
     
     
       colspan="2">2
     
     
     
     
      3
     
     
     
     
    
     
     
     
     
    
     
     
     
     
     4
     
     
     
     
     5
     
     
     
     
      6
     
     
     
     
    
     
     
     
     

    
    
    
    

2		3
4	5	6

垂直合并（rowspan=合并的单元格数）

    
    
    
    

     
     
     
     
 border="1">
     
     
     
     
    
     
     
     
     
         rowspan="2">2
     
     
     
     
        3
     
     
     
     
        4
     
     
     
     
    
     
     
     
     
    
     
     
     
     
        5
     
     
     
     
        6
     
     
     
     
    
     
     
     
     

    
    
    
    

2	3	4
	5	6

ul:无序列表，li子元素显示为默认的黑色圆点，也可通过参数自定义列表的符号，常用于新闻列表展示

ol:有序列表，可以在列表前增加序号，如1，2，3，4；适用于排行榜；

dl:自定义列表，可以包括标题及内容，可适合用制作风箱结构；

table:表格，适合于超过两行以上的数据呈现

6、转义字符

文本字符	html字符
空格
<	<
>	>
"	"
&	&

7、表单

1）表单标记

    
    
    
    

     
     
     
     
 action="表单提交的处理程序地址" method="表单提交方式(post/get)" name="表单名称">
    
    
    
    

form元素将所有的表单包含起来，也相应于表单的作用域。

get和post提交方式的区别：get请求把表单的数据显式地放在URL中,并且对长度和数据值编码有所限制.post请求把表单数据放在HTTP请求体中,并且没有长度限制.

2）文本框

    
    
    
    

     
     
     
     
 type="text" name="控件名称" value="文本框输入值" placeholder="提示信息" 
     
     
     
     
disabled readonly required />
    
    
    
    

3）密码框

    
    
    
    

     
     
     
     
 type="password" name="控件名称" placeholder="提示信息"/>
    
    
    
    

4）单选按钮：同一组单选按钮使用同一命名

    
    
    
    

     
     
     
     
 type="radio" name="控件名称" value="控件值" checked />
    
    
    
    

5）复选按钮

    
    
    
    

     
     
     
     
 type="checkbox" name="控件名称" value="控件值" checked />
    
    
    
    

6）下拉列表

    
    
    
    

     
     
     
     
 name="控件名称" multiple="multiple" size="数值">
     
     
     
     
     value="控件值" selected>选项
     
     
     
     

    
    
    
    

7）多行文本框

    
    
    
    

     
     
     
     
 name="控件名称" cols="列数" rows="行数">
    
    
    
    

8）隐藏控件

    
    
    
    

     
     
     
     
 type="hidden" name="控件名称" value="控件值" />
    
    
    
    

9）普通按钮

    
    
    
    

     
     
     
     
 type="button" value="按钮文字" />
     
     
     
     
 type="button">按钮文字
    
    
    
    

10）发送按钮

    
    
    
    

     
     
     
     
 type="submit" value="按钮文字" />
     
     
     
     
 type="submit">按钮文字
    
    
    
    

11）重置按钮

    
    
    
    

     
     
     
     
 type="reset" value="按钮文字">
     
     
     
     
 type="reset">按钮文字
    
    
    
    

表单实例：

    
    
    
    

     
     
     
     
 action="" method="post">
     
     
     
     
    

     
     
     
     
    
表单演示
     
     
     
     
        

     
     
     
     
             for="username">姓名： type="text" name="username" id="username" placeholder="姓名" required="required" />
     
     
     
     
        

     
     
     
     
        

     
     
     
     
              for="pwd">密码： type="password" name="pwd" id="pwd" placeholder="密码" />
     
     
     
     
        

     
     
     
     
        

     
     
     
     
            性别：
     
     
     
     
             type="radio" name="sex" value="1" checked="checked"/>男
     
     
     
     
             type="radio" name="sex" value="0" />女
     
     
     
     
        

     
     
     
     
        

     
     
     
     
            爱好：
     
     
     
     
             type="checkbox" name="basketball" value="basketball" />篮球
     
     
     
     
             type="checkbox" name="football" value="football" />足球
     
     
     
     
        

     
     
     
     
        

     
     
     
     
             for="bloodtype">血型：
     
     
     
     
             name="bloodtype" id="bloodtype">
     
     
     
     
                 value="A">A型
     
     
     
     
                 value="B">B型
     
     
     
     
                 value="AB">AB型
     
     
     
     
                 value="O">O型
     
     
     
     
            
     
     
     
     
        

     
     
     
     
        

     
     
     
     
             for="intro">介绍
     
     
     
     
             name="intro" cols="30" rows="3" id="intro">
     
     
     
     
        

     
     
     
     
         type="submit" value="提交按钮" />
     
     
     
     
         type="reset" value="重置按钮" />
     
     
     
     
         type="button" value="自定义按钮" />
     
     
     
     
    
     
     
     
     

    
    
    
    

实例演示：

表单演示

姓名：

密码：

性别：男女

爱好：篮球足球

血型： A型B型AB型 O型

介绍

8、框架网页：将浏览器窗口分解为多个小窗口，每个小窗口均可以显示各自的网页

：框架网页集，rows为横向分隔，cols为纵向分隔，值可以是具体数值也可以是百分比，注意frameset标记是和body标记同级的标记，不能将frameset标记包含在body标记中，否则将无法看到框架网页的效果。

：指定每一个小窗口的名称和链接的网页，窗口的名称可以用于超级链接的target属性。

水平分隔两个窗口，每个窗口各占50%

    
    
    
    

     
     
     
     

     
     
     
     

     
     
     
     
    
     
     
     
     
         charset="UTF-8">
     
     
     
     
        
     
     
     
     
    
     
     
     
     
     rows="50%,*">
     
     
     
     
         src="http://www.baidu.com" />
     
     
     
     
         src="http://www.bing.com" />
     
     
     
     
    
     
     
     
     

    
    
    
    

可以将代码复制到Sublime Text，然后保存后，打开，查看效果。

纵向分隔两个窗口，左边窗口宽度为200，右边窗口为剩余大小

    
    
    
    

     
     
     
     

     
     
     
     

     
     
     
     
    
     
     
     
     
         charset="UTF-8">
     
     
     
     
        
     
     
     
     
    
     
     
     
     
     cols="300,*">
     
     
     
     
         src="http://www.baidu.com" />
     
     
     
     
         src="http://www.bing.com" />
     
     
     
     
    
     
     
     
     

    
    
    
    

复杂框架网页的制作，复杂的框架网页实际上就是frameset标记的嵌套，主要是要搞清楚，是先横向分割还是纵向分隔，然后在子窗口中再次分隔。

框架网页中，超级链接的指定窗口打开

如果有如下的框架网页

    
    
    
    

     
     
     
     

     
     
     
     

     
     
     
     
    
     
     
     
     
      charset="UTF-8">
     
     
     
     
        
     
     
     
     
    
     
     
     
     
     rows="100,*">
     
     
     
     
      src="nav.html" name="nav" />
     
     
     
     
      src="a.html" name="content" />
     
     
     
     
    
     
     
     
     

    
    
    
    

我们希望上面的窗口是导航，下面的窗口来显示内容，那么上面导航窗口的超级链接就应该这样写（nav.html）

    
    
    
    

     
     
     
     

     
     
     
     

     
     
     
     
    
     
     
     
     
      charset="UTF-8">
     
     
     
     
     
     
     
     
     
    
     
     
     
     
    
     
     
     
     
        

     
     
     
     
            
 href="a.html" target="content">a文件
     
     
     
     
            
 href="b.html" target="content">b文件
     
     
     
     
            
 href="c.html" target="content">c文件
     
     
     
     
        
     
     
     
     
    
     
     
     
     

    
    
    
    

内嵌框架

提示：您可以把说明的文本放置在 之间，这样就可以应对无法理解 iframe 的浏览器。