一周学会HTML

1.HTML是什么？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

2.HTML发展历程

HTML版本从1.0到4.0不断升级，其版本的规则都是由W3C组织制定。到了HTML4.0版本后，HTML规则在当时较为全面，W3C组织甚至认为没有更新版本的必要，W3C组织于是专注于完善HTML的语法规则，推出了新一款的规则XHTML1.0，XHTML与HTML大部

分一致，主要升级在于语法规则更加严格，可扩展性更强。

-webKit- -O- -moz- -ms-

各大浏览器厂商不能接受W3C不再扩充HTML功能，于是各自对HTML进行扩展，不再遵循W3C的路数，于是市面上就出现了多种版本的扩展版HTML。W3C不愿意HTML被随意扩展，只能再次制定新的扩展规则，综合多家浏览器厂商的扩展，得到了最终的HTML版本，命名为HTML5.0。

【注】各种浏览器对HTML5的属性支持性不同，本次课程大多以chrome和safari为例(两者均为WebKit内核)。

3.HTML、CSS和JavaScript三者的关系

一个完整的前端页面可分成多个部分。实体内容为HTML部分，样式、布局及少部分过渡和动画属于CSS部分，数据的处理（请求、运算、存储等）、页面内容样式的动态变化等可以通过JavaScript实现。

4.开发工具

WebStorm、Dreamweaver、Sublime、记事本...

二、HTML文档结构

1.结构总览

一个完整的html文件应为以下结构：

<!DOCTYPE html>				// DTD Document Type Define 文档类型定义 <html lang="en"> <head>     <meta charset="UTF-8">		// 字符集编码格式     <title></title>		//页面标题 </head> <body>  </body> </html>

2.文档特性与语法

(1) 标签的三种形式

a. 具有开始标签和关闭标签

b. 单个标签

c. 自身既是开始标签也是关闭标签

(2) 标签的关系

兄弟标签、父子标签、先辈标签后辈标签

(3) 不区分单双引号、不区分大小写

三、HTML标签

1.基础标签

(1) head与body

(2) title

(3) meta // meta 设置页面属性

(4) link // 资源引用

2.常用标签

(1) hi (i: 1~6)

(2) p big small i

(3) br

(4) div // 1.Block标签，块级元素 2.inline标签，行元素标签

(5) img

(6) a

(7) pre

(8)

【溢出】

(1) 溢出属性（容器的）

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值，内容不会被修剪，会成现在元素框之外；

hidden：内容会被修剪，并且其余内容是不可见的；

scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;

inherit：规定应该从父元素继承overflow属性的值。

(2) 空余空间

white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白；

normal：默认值，空白会被浏览器忽略，

pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；

nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止；

pre-wrap：保留空白符序列，但是正常的进行换行；

pre-line:合并空白符序列，但是保留换行符；

inherit：规定应该从父元素继承White-space属性的值；(ie浏览器都不支持此属性值)

(3) 文本溢出

text-overflow:clip/ellipsis

clip：不显示省略号（...），而是简单的裁切;

ellipsis：当对象内文本溢出时，显示省略标记；

说明：

text-overflow属性仅是...，当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：

1、容器宽度：width：value；

2、强制文本在一行内显示:white-space：nowrap;

3、溢出内容为隐藏：overflow：hidden；

4、溢出文本显示省略号：text-overflow：ellipsis;

3.重要标签

(1) 表格 table

子标签: th tr td

属性: colspan rowspan

(2) 列表

1> ol有序列表子标签li

2> ul无序列表子标签li

3> dl说明列表子标签dt dd

4.表单标签

(1) 什么是表单？

表单在网页中主要负责数据采集功能，将采集到的用户信息提交。

一个表单有三个基本组成部分：

表单标签form：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作

(2) 创建一个表单

<!DOCTYPE html> 

    <html lang="en">

           <head> 

             <meta charset="UTF-8"> 

             <title></title>

           </head>

     <body>  

        <form name="login" method="post" action="http://andy1991.cn/demo/adlogin.php" onsubmit="**return** loginn()"> 

      <input id="username" name="username" type="text"> 

      <input name="password" type="password"> 

       <input type="submit">

 </form>

    <script type="text/javascript"> 

     **function** loginn() { 

           **if** (document.getElementById('username').value == 'naibin') { 

          alert('登陆成功'); 

    }**else** {             alert('登陆失败'); 

     } 

        **return false**; 

 } </script>

  </body>

 </html>

四、标签属性

src name alt value max min title

1.id

不可重复，唯一的标志一个标签元素，可以通过id定位到一个页面里的唯一的标签

2.name

一个标签的名字

3.class

标签的类名，将某一些标签划归为一类，可以进行批量处理

4.style

CSS样式属性

5.alt

替换显示文本

6.title

鼠标悬停显示文本

五、附加

1.iframe

2.修改光标 cursor

3.HTML5新增结构标签 (块级标签)

(1) header

标签定义文档的页眉（介绍信息）。
(2) footer

7天学会HTML--HTML综述