简介描述
HTML(超文本标记语言---HyperText Markup Language)
一种由不同元素组成的标记语言,它可以应用于文本片段,使文本在文档中具有不同的含义。
“超文本”是指在单个网站内或网站之间将网页彼此连接的链接。
HTML第一版由李爵士发明
自1996年起,HTML规范一直由万维网联盟(W3C)维护,并由商业软件厂商出资
HTML标记包含标签、基于字符的数据类型、字符引用和实体引用等几个关键部分
编写HTML语言的关键,就是把标签用对,使它能够正确传达语义信息,不要使用无含义或错误含义的标签
HTML是没有块级元素或者内联元素的区别,
HTML不管样式,只管内容,它只定义这是一个什么东西
下面是一个经典的 "Hello World"程序的例子
<!DOCTYPE html>
<html>
<head>
<title>这是标题</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
<html>和</html>之间的文本描述网页,<body>和</body>之间的文本为可视页面内容。标记文本“<title>这是标题</title>“定义了浏览器的页面标题,如图:
HTML文档需要以文档类型声明,HTML 4及以前的版本非常复杂
例如HTML4的的声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
相比之下HTML5的更为简短,方便记忆!
<!DOCTYPE html>
标签
HTML文档由嵌套的HTML元素构成。它们用HTML标签表示,包含于尖括号中,如 <p>
一个元素由一对标签表示:“开始标签”<p>与“结束标签”</p>。元素如果含有文本内容,就被放置在这些标签之间
在开始与结束标签之间也可以封装另外的标签,包括标签与文本的混合。
一个HTML元素的一般形式为:<标签 属性1="值1" 属性2="值2">内容</标签>。
一些HTML元素被定义为空元素,其形式为<标签 属性1="值1" 属性2="值2">
空元素不能封装任何内容。例如
标签或<img>。一个HTML元素的名称即为标签使用的名称。注意,结束标签的名称前面有一个斜杠“/”,空元素不需要也不允许结束标签
常见的标签:
iframe标签
内嵌的窗口,嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中
例如:
<iframe src="https://www.baidu.com" name="xxx"></iframe>
效果会在当前网页中嵌入一个网址为百度的窗口
通常iframe标签主要配合a标签使用,比如:
<iframe name=xxx src="#" frameborder="0"></iframe>
<a target =xxx href="http://baidu.com">baidu</a>
<a target =xxx href="http://qq.com">qq</a>
意思是我的a标签要在name为xxx的ifram内嵌窗口中打开,点击baidu或者QQ打开相应的页面
frameborder="0"
类似边框 设为0就是消除边框,设为1就会显示边框
实际如图:
a标签
锚点,可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接;开始标签和结束标签都不能省略;a标签必须有href,如果没有就会变成一个span。
如果href="" href为空就会刷新页面跳转到自身
示例:
<a href="http://www.baidu.com/">External Link</a>
链接到外部地址
<a href="#属性"></a>
"#属性" 属性需要改成当前页面跳转出名称
链接到本页的某个部分
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
创建一个email链接
download属性:指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
<a href="http://qq.com" download>下载</a>
target属性:该属性指定在何处打开链接
<a href="http://qq.com" target="_black">111</a>
<a href="http://qq.com" target="_self">222</a>
<a href="http://qq.com" target="_parent">333</a>
<a href="http://qq.com" target="_top">444</a>
- _blank 新窗口
- _self 当前页面
- _parent 父级页面
- _top 进入顶层
javascript伪协议:它不是URL,当我们有一个a标签需求的同时又不想它跳转的时候,就可以用javascript伪协议 代码如下:
<a href="javascript:;">111</a>
input标签
用于为基于Web的表单创建交互式控件,<input> 标签没有结束标签
它的type属性包含很多可用的值,常见值如下:
- submit:用于提交表单的按钮,submit是唯一能够确定这个from表单能不能点击提交的按钮
- button:无缺省行为按钮
<button>button</button>
如果没写type,button 会自动升级为提交按钮,默认是一个submit按钮- checkbox: 复选框
- radio:单选按钮
- multiple:多选按钮
- select:下拉列表
form标签
表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息;
from标签作用也是跳转页面,和a标签不同的是:a标签跳转的时候发起的是GET请求; form标签跳转的时候发起的是POST请求
form action="users" method="POST">
<input type="text" name="xx">
<input type="password" name="yy">
<input type="submit" value="提交">
</form>
提交的name会上传到请求的第四部分
table标签
表示表格数据
详见