7天学会HTML

3gipnet · 发表于 2017-6-21 21:23:59

　　一周学会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)>　　(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" > 
　　<input 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>　　1.id
　　
不可重复，唯一的标志一个标签元素，可以通过id定位到一个页面里的唯一的标签
　　
2.name
　　
一个标签的名字
　　
3.class
　　
标签的类名，将某一些标签划归为一类，可以进行批量处理
　　
4.style
　　
CSS样式属性
　　
5.alt
　　
替换显示文本
　　
6.title
　　
鼠标悬停显示文本

五、附加
　　1.iframe
　　2.修改光标 cursor
　　3.HTML5新增结构标签 (块级标签)
　　(1) header
　　

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

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

winhex数据恢复教程（非常巨大，内容丰富）

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] 7天学会HTML

扫码加入运维网微信交流群