HTML

作者: 又见月尚初 | 来源:发表于2018-04-20 00:45 被阅读0次

简介描述

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>

image.png
效果会在当前网页中嵌入一个网址为百度的窗口

通常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就会显示边框
实际如图:

ifram
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标签

表示表格数据
详见

相关文章

  • 基础编程语言学习线路图

    HTML HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTML段落HT...

  • HTML头部-10

    HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML ...

  • html 大纲

    html 通用 html 简介 html 常用标签 html 属性 html 表格 html 字体 html 表单...

  • web 前端学习线路图

    一、HTML 教程 HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTM...

  • 2018-06-04——HTML简介

    HTML 简介 HTML 标签 ·HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 ·HTML...

  • HTML 基础

    HTML 标题 HTML 段落 HTML 链接 HTML 图像 HTML 文本格式化标签 HTML ...

  • html常用的基本标签

    HTML基础包括web工作原理,HTML概述,HTML基本标签和HTML高级标签。 〈html〉...〈/html...

  • Html 学习笔记

    HTML基础 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag) HTML 标签通...

  • HTML:基础(2)元素

    HTML 元素 HTML 文档由 HTML 元素定义。 HTML 元素语法 HTML 元素以开始标签起始 HTML...

  • 2018-10-29 第二阶段 day1 htm

    1.html说明 说明html版本html5-- ...

网友评论

    本文标题:HTML

    本文链接:https://www.haomeiwen.com/subject/sheekftx.html