一周学会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. <title> </title> 具有开始标签和关闭标签
b. <meta> 单个标签
c. <input /> 自身既是开始标签也是关闭标签
(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
<header> 标签定义文档的页眉（介绍信息）。
(2) footer
<footer> 标签定义文档或节的页脚。
<footer> 元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。
(3) nav
<nav> 标签定义导航链接的部分。
(4) section
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
(5) article
<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：
- 论坛帖子
- 报纸文章
- 博客条目
- 用户评论
(6) aside
<aside> 标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
网友评论