HTML介绍
网页和html介绍
网页介绍
静态网页与动态网页:
静态网页:我们写好的html内容在浏览器中显示出来的效果始终都一样，不管次进行多少访问，如果想内容改变那么必须修改源代码。
动态网页:页面的内容是由服务器端程序控制输出，比如不同的人使用相同的网站，但是显示的当前用户是不一样的。
两者区别：静态就是我们写什么就显示什么，而动态通过程序的控制输出内容。
走进html
XML:用来存储少量数据/传输数据(webservice)
HTML(HypertextMarkup Language),超文本标记语言，它是互联网上应用最广泛的标记语言。文件的命名方式为index.html（推荐） 或者index.htm。
浏览器对html中的标签有个渲染的效果,一般都是使用浏览器来欣赏html中的数据,不同的浏览器内核有一定的差异(IE/W3C),渲染的效果也有差异
区分HTMl4.01和XHTML:标签
html的标签不区分大小写 -> <Html></htMl>
浏览器对标签的包容,html标签页可以没有闭合 -><html><html>
XHTML:eXtensibleHypertext Markup Language,可拓展的超文本标记语言, 比HTML更严格,可以理解XHTML是新的HTML规范;所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。而按照HTML 2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。在XHTML中，所有的参数值，包括数字必须用双引号括起来（而在HTML中，引号不是必须的，当内容只是数字、字母及其它允许的特殊字符时，可以不用引号;除此之外XHTML废弃了部分HTML中的标签属性;
认识DHTML:
DHTML是DynamicHTML的简称，就是动态的html，是相对传统的静态的html而言的一种制作网页的概念。
所谓动态HTML(Dynamic HTML，简称DHTML)，其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript(或其它客户端脚本)，其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念,一般的使用法是:
1.通过HTML把网页标记为各个元素;
2.利用CSS设计元素之间的排版样式，并控制各个标签的位置;
3.利用javascript来控制各个标签;
认识HTML5:
虽然W3C一直呼吁HTML设计师遵循HTML标准,但是现实的HTML设计师都理会这个善意的忠告,也就是说目前互联网上的大部分HTML页面都是不规范的,主要的有以下几种情况:
Ø 元素的标签名大小写混杂;如:<DIV>内容</div>
Ø 元素标签没有合理结束;如:<span>内容,没有写结束标签</span>;
Ø 元素标签使用了属性,但是没有指定属性值:如:<input type=”text” readOnly/>
Ø 元素标签有属性值得时候,属性值没有使用引号:
如:<inputtype=text/>
W3C发现这种”恶习”真的改不了的时候,就索性承认了他们是符合规范的.除了”妥协”之外,HTML5的优势不容小视,主要是增强了Web应用程序的功能如客户端校验,绘图支持,多媒体支持等;
第一个网页
<html>
<head>
<title>页面的标题</head>
</head>
<body>
这是我的第一个html页面
</body>
</html>
显示页面
HTML采用浏览器来显示。因为浏览器的内核不一样，所以有的时候会出现差异。这也就是浏览器不兼容的问题。
HTML基本组成
HTML基本结构
注释标签
<!- -注释的内容- ->;
在浏览器里面鼠标右键查看网页源代码是依然可以看见注释的内容
标签/元素
HTML的标签不区分大小写,但是为了兼容XHTML,建议大家都小写;
双标签：开始标签和结束标签一起出现，如:<font>要显示的文字</font>
没有斜杠的是开始标签，有斜杠的是结束标签。
单标签：<br/> <hr/>,规范的写法是在右尖括号前加上反斜杠。
属性和值
<font color = "red"> 你好世界 </font> |
属性和属性值用“=”连接,假如属性值是阿拉伯数字或英文字母可以不使用引号（单引号或双引号）,假如属性值是汉字，那么一定得加上引号,建议都使用引号。每个标签都有id,style,class等核心属性;
标准属性(通用属性)所有标签元素都具有的属性
标签属性中分了三种：
1 HTML 标准属性，可以理解成事几乎所有的HTML和XHTML都有支持的属性；
class规定元素的类名（classname）；
id规定元素的唯一 id
style规定元素的行内样式（inline style）
title规定元素的额外信息（可在工具提示中显示）
以及其它的语言键盘属性等，上面是几个比较常用的属性。
2 标签上的可选和必选属性，这些属性只正对单个的标签有效果；
3 事件属性，HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript
嵌套标签
<p><font color='red'>你好 </font></p>
<p><font color='red'>你好</p></font>
注意:写标签的时候,标签与标签之间是不允许错乱嵌套.
特殊字符与转义字符
< | < | > | > | & | & |
" | “ | ® | ® | © | © |
™ | ™ | | 空格 |   | 空格 |
HTML常见标签
基本标签
<!-- .... -->:定义HML注释的标签;
<html>:定义HTML文档的根标签;
<head>:定义HTML页面的头部标签;
<title>:定义HTML页面标题,放置于<head></head>之间;
<body>:定义HTML页面主体部分;
<meta>：定义文件信息,对网页进行说明，便于搜索引擎查找,放置于<head></head>之间；
n 设置关键字：<meta name = "keywords"content="Java,520it"/>
n 设置描述： <meta name = "description" content="java培训"/>
n 设置作者： <meta name = "author"content="will"/>
n 设置字符集：
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
n 设置页面定时跳转：
<meta http-equiv ="refresh" content="时间秒数;url=网页地址"/>
<style>:用于引入CSS文件,一般放于<head></head>之间;
<script>:用于引入JavaScript文件,一般放于<head></head>之间;
排版标签
<h1>到<h6>:定义标题一到标题六,和world一致;
<p>:定义段落,使用如:<p>床前明月光</p><p>疑是地上霜</p>
<div>:定义文档中的结构;为HTML提供结构和背景;
<span>:和<div>基本相似,区别是<span>定义的节默认不换行;
<br/>:单标签,插入一个换行;
<hr/>:单标签,定义一条水平线;
<center>:网页的内容默认是居左显示,而<center></center>之间的内容居中;
<address>:表示一个地址,浏览器默认以斜体显示其包含文本;
<pre>:该标签表示的文本可”预格式化”,即该标签能保留文本中的空格,回车,制表符等字符;
文本标签
<font>:用于设置字体颜色,大小,字体;
<b>:定义粗体文本;<b>我是粗体文本</b>
<i>:定义斜体文本;
<em>:定义强调文本,效果和<i>差不多;
<strong>:定义粗体文本,和<b>效果差不多;
<sup>:定义上标文本,主要做数学上的次方表达式;
<sub>:定义下标文本,主要做化学上的分子式;
<bdo>:定义文本显示方向,属性dir值有ltr(左到右)和rtl(右到左);
<del>:定义删除体文本,即文本有中线;
<blink>:可定义闪烁文本,但是有浏览器不兼容问题;
语义相关标签
超链接和锚点
a标签:可定义锚(anchor),锚有两种用法：
· 通过使用 href 属性，创建指向另外一个文档的链接（或超链接）;
· 通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）;
<a href =”#A1”>第一章</a> <a href =”#A2”>第二章</a> <a name =”A1”>第一章内容</name> <a name =”A2”>第二章内容</name> |
<a> 标签的两个重要属性:
href:它指链接的目标,也就是超链接关联的另一个资源;
taret:指定使用框架集中的哪个框架来装载另一个资源;属性值有:
n _slef:表示自身,默认;
n _blank:新窗口;
n _top:顶层框架;
n _parent:父框架;
<base>:标签为页面上的所有链接指定默认地址或默认目标;<base>必须位于 <head></head>标签之间;
<a>标签还可以发送邮件:
<a href="mailto:收件人邮箱?cc=抄送邮箱&subject=主题&body=内容">联系我</a> |
列表相关标签
四大名著
² 西游记
² 红楼梦
² 三国
² 演义
<ul>:定义无序列表;该元素只能包含<li>子标签;
type属性:可指定列表项目符号类型,属性值有:
l disc:表示实心圆点;●
l square:表示空心圆圈;○
l circle:表示实现方块;■
<ol>:定义有序列表;该元素只能包含<li>子标签;
type属性:可指定列表项目序号类型,属性值有:
A:表示使用大写英文字母作为序号;如A、B、C 等;
a:表示使用小写英文字母作为序号;如a、b、c 等;
I:表示使用大写罗马数字作为序号;如I、II、III 等;
i:表示使用小写罗马数字作为序号;如i、ii、iii 等;
1:表示使用阿拉伯数字作为序号;如1、2、3 等;
start属性:可表示列表的起始序号;
<li>:定义列表项目,该标签可以包含多种子元素;如<li>三国演义</li>
<dl>:用于定义列表;该标签只能有<dt>,<dd>两种子标签;
<dt>:定义列表项的标题;
<dd>:定义普通列表项;
图片标签
img标签,用于向网页中嵌入一张图片;请注意,从技术上讲<img> 标签并不会在网页中插入图像,而是从网页上链接图像。
<img> 标签有两个必需的属性：src和alt:
src:该属性指定显示图片文件所在位置;
alt:该属性指定一段文本,可用于当图片不能显示时显示的提示信息;
height:指定图片高度,可是像素值或百分比;
width:指定图片宽度,可是像素值或百分比;
<map>:创建图像地图:指带有可点击区域的一幅图像
<img>做图片超链接;
表格标签
<table>:用于定义表格,<table>由0或1个<caption>子标签,0到1个<thead>子标签,0到1个<tfoot>子标签,多个<tr>子标签,多个<tbody>子标签组成;
<table>常用的属性如下:
border:指定表格边框的宽度,默认是0;
cellpadding:指定单元格内容和单元格边框的间距,值可是像素或百分比;
cellspacing:指定单元格之间的间距,值可是像素或百分比;
width:指定表格的宽度,值可是像素或百分比;
<caption>:用于定义表格的标题,必须放在<table></table>之间;
<tr>:定义表格行,该标签只能有<td>或<th>子标签;
<td>:定义单元格,放在<tr>中,表示把一行分成N个单元格;(N取决于N对<td>); <td>常见属性如下:
n colspan:指定该单元格跨多少列,属性值是数字;
n rowspan:指定该单元格横跨的行数;
n height:指定单元格的高度;
n width:指定单元格的宽度;
<th>:定义表格页眉的单元格;用法和<td>标签一直,只是显示效果有差别;
<tbody>:定义表格的主体,该标签只能包含<tr>子元素;使用<tbody>标签可以将一个表格分成几个独立的部分;<tbody>可以讲表格里的一行或多行合并成一组,以后使用Ajax编程的时候常常需要动态修改表格的某几行,此时就得使用<tbody>标签了;
<thead>:定义表格头,用法和<tbody>一致,功能有点差别;
<tfoot>:定义表格脚,用法和<tbody>一致,功能有点差别;
<thead>,<tbody>,<tfoot>标签可以对表格的行进行分组,每对<tbody>就是一组;除此之外,当创建某个表格时.希望拥有一个标题行,以及底部的一个统计行;当打印表格式,表格头和表格脚的数据也会包含在数据的页面上; 无论<thead>,<tbody>,<tfoot>三者的先后顺序如何,页面上总会是最上面显示表格头,中间是显示表格体,最下面显示表格脚数据;一般开发中建议从上到下的顺序是:<thead>,<tfoot>,<tbody>;好处是即使网速慢没有加载出表格体的数据,但是表格头和表格脚的信息会先显示出来,以”安抚民心”; |
表单标签
form标签,用于生成输入表单,该标签不可见;在HTML5之前,表单控件,如单行文本框,密码框,单选框等都必须放在<form></form>之间;常见属性如下:
n action:必填属性,表示当点击”提交”按钮时,表单数据提交到哪个地址;
n method:指定表单提交时的请求类型,该属性值有get或post,分别用于GET或POST请求,默认是get方式,开发建议使用post方式;
n enctype:指定表单数据的编码方式,属性有3个值:
application/x-www-form-urlencoded | 默认,只处理表单控件里的value属性值; |
multipart/form-data | 以二进制流的方式处理表单数据,文件上传时必须使用该属性值; |
text/plain | 不对特殊字符编码,适合于表单的属性值为mailto”URL形式,也就是说该方式适用于表单邮件的发送; |
input标签
input标签,表单控件标签里功能最丰富的,用于接收用户输入的信息.
其中的type属性指定输入标签的类型。
l 单行文本框:type = text,输入的文本信息直接显示在框中;
l 密码输入框:type = password,输入的文本以圆点形式显示;
l 单选框:type = radio,如：性别选择;
l 复选框:type = checkbox,如：多个兴趣选择;
l 隐藏域:type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个数据;
l 提交按钮:type = submit,用于提交表单中的数据内容;
l 重置按钮:type = reset,将表单中填写的内容均设置为初始值;
l 无动作按钮:type = button,可使用javascript为其自定义事件;
l 文件上传域:type = file,会生成一个文本框和一个浏览按钮;
l 图像域:type = image, 它可以替代submit按钮,即图像提交按钮。
<input>标签其他通用属性:
n name:指定input标签的名字,没有设置name属性的标签不能提交数据;
n value:指定input标签的初始值;
n checked:设置单选框,复选框的初始状态是否选中;
n disable:设置input标签加载时禁用此标签;
n maxlength:文本框输入最大字符数,属性值是数字;
n readonly:指定文本框内值不允许直接修改;
label标签(了解)
label标签用于在表单标签中定义标签,可对表单控件进行提示说明;
使用<label>的作用是:当用户点击<label>所包含的文本时,该标签关联的表单控件就会获得焦点;让标签和表单控件相关联的两种方式:
1.隐式使用for属性:指定<lable>标签的for属性值为所关联表单控件的id属性值;
2.显示关联:将表单控件放在<lable></label>之间;(IE支持不好,不推荐)
<form action=""> <label for="username">用户名:</label> <input id="username" name="username" type="text"/><br/> <label>密 码: <input name="pwd" type="password"/><br/> </label> </form> |
select标签
<option>标签
<seclet>和<option>一般同时使用：
<select name="country" > <option value="">---请选择---</option> <option value="zh" selected="selected">中国</option> <option value="en">英国---</option> </select> |
<select >属性：
multiple="multiple"表示可以选中多个
size="2" 表示显示几个，（浏览器之间有差异）
textarea标签
文本域标签
<textarea cols="50" rows="5"> 要显示的内容</textarea> |
有的浏览器是可以拖动其大小的，我们可以用什么办法解决呢？
CSS à style="resize:none"
框架标签
我们在浏览网页的时候，常常会看到类似如下的页面布局，就是把整个网页分成了好些模块，在这里我们可以使用框架集和框架来完成该样式，其实框架集中每一个框架中显示的内容就是映射到的一个html页面。
top | |
left | main |
root | |
<frameset>标签
属性rows 表示要分成几行,一般用”,”隔开，其中“*”表示占据剩下所有的区域
属性 clos 表示要分成几列,一般用”,”隔开，其中“*”表示占据剩下所有的区域
<frame>标签
属性scrolling="yes" 表示是否要显示滚动条，滚动条是竖着的
属性noresize="noresize"表示 不能拖动和缩小。
<noframes>标签
注意位置：
<noframes> <body> 很抱歉，阁下使用的浏览器不支持框架功能，请转用新的浏览器。 </body> </noframe> |
<iframe>标签
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
标签：定义,表格,标签,表单,HTML,属性 From： https://blog.51cto.com/u_13355654/6173774