一、 前言

  本文全面介绍了html的定义、使用和具体常用标签。

参考资料:菜鸟教程

二、定义

  html是HyperText Markup Language的简称,也就是超文本标记语言的缩写。通过html标签包裹字符串,就可以交给浏览器解析,形成丰富多彩的网页。

  html 是一种标记语言,不是编程语言,写错了也不会报错,只会当成字符串解析。一共经历了以下版本:

版本 发布时间
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

   html主要作用是定义网页上要显示的元素。之后的CSS(层叠样式表)定义的元素显示的样式,Javascript脚本语言定义了元素的动态效果和用户交互。

三、html文档基本结构

  <!DOCTYPE html>

  <html>

    <head>

    </head>

    <body>

    </body>

  </html>

  第一行为声明html版本,因此,一般会把形如<!DOCTYPE html>放在html文档开头申明版本,<!DOCTYPE html>为html5 版本。目前主流为支持html5.当然html5的显示效果也是最好的。

  <html></html>代表文档主题,写在中间的内容会交给浏览器解析。

  <head></head>代表文档属性,写在中间的内容主要是声明文档属性,引入外部文件等。

  <body></body>代表网页中要显示的元素,如文字,图片,超链接,音频,视频,窗口等等等。

  <></>        html 中多数标签有开头尖括号开始,结尾尖括号结束。中间可嵌套其他html元素。所以正确的结束html标签是十分重要的。有些标签如<img>等,不写结尾也无问题, 但是为了一致性,建议写上,如<img/>

  当标签中间无内容时,会自动关闭。不会显示在页面上。

  <a href='www.baidu.com'>test</a>   开始便签中可以设置标签属性,以属性名=‘属性值’的键值对形式,有内置的属性,也可以自定义属性。

  所有标签均为小写。

四、基本标签、标签属性与功能

  建议每一个试一下

<!DOCTYPE html>           定义html版本
<html></html> 定义文档
<head></head> 定义文档头部信息
<title></title> 定义网页头部标签显示文字
<style></style> 定义样式
<meta></meta> 定义关键词,网页面试,作者,修改时间,等等
<link> 引入网页图标,外部css文件
<script>,</script> 定义脚本 <base> 定义所有超链接默认连接
<body></body> 定义文档主体
<h1></h1> ~<h6></h6> 标题,包裹内容会以加黑加粗不同大小的标题格式显示,h1最大。
<hr> 水平线,标签在 HTML 页面中创建水平线。
<!-- 这是一个注释 --> 创建注释,不会显示
<p>这是一个段落 </p> 段落,独占一行
<br /> 换行
<b> </b> 加粗
<sub></sub> 上标
<sup></sup> 下标
<i></i> 斜体
<a href="url">链接文本</a> 超链接
<img> 图像
<table> 表格
  <thead></thead>
    <tr>
      <td></td>
    </tr>
  <tbody></tbody>
</table>
<ul> 无序列表
<li></li>
</ul>
<ol> 有序列表
<li></li>
</ol>
<div></div> 块状标签(占一块)
<span></span> 内联(在一行)
<form></form> 表单
<input type="text" name="firstname"> 输入框
<input type="text"> 文本框
<input type="password"> 密码框
<input type="radio"> 单选框
<input type="checkbox"> 多选框
<input type="submit"> 提交按钮
<textarea> 长文本
<select> 下拉菜单
<option> 下拉菜单选项
<button> 按钮
<iframe src="URL"></iframe> 框架
字符实体 用以代替特殊字符,常用的有
空格&nbsp;< &lt; > &gt;
颜色 有命名,rgb模式,十六进制表示。

五、小结

  学习html 首先需要理解文档结构,其次熟记每个标签含义,最后深入记住每个标签属性。

  最快的方法就是实践上手写网页。

html 知识整理的更多相关文章

  1. js事件(Event)知识整理

    事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下   鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemo ...

  2. Kali Linux渗透基础知识整理(四):维持访问

    Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...

  3. Kali Linux渗透基础知识整理(二)漏洞扫描

    Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...

  4. wifi基础知识整理

    转自 :http://blog.chinaunix.net/uid-9525959-id-3326047.html WIFI基本知识整理 这里对wifi的802.11协议中比较常见的知识做一个基本的总 ...

  5. 数据库知识整理<一>

    关系型数据库知识整理: 一,关系型数据库管理系统简介: 1.1使用数据库的原因: 降低存储数据的冗余度 提高数据的一致性 可以建立数据库所遵循的标准 储存数据可以共享 便于维护数据的完整性 能够实现数 ...

  6. 【转载】UML类图知识整理

    原文:UML类图知识整理 UML类图 UML,进阶必备专业技能,看不懂UML就会看不懂那些优秀的资料. 这里简单整理 类之间的关系 泛化关系(generalization) 泛化(generalize ...

  7. Linux进程管理知识整理

    Linux进程管理知识整理 1.进程有哪些状态?什么是进程的可中断等待状态?进程退出后为什么要等待调度器删除其task_struct结构?进程的退出状态有哪些? TASK_RUNNING(可运行状态) ...

  8. js事件(Event)知识整理[转]

    事件注册 平常我们绑定事件的时候用dom.onxxxx=function(){}的形式 这种方式是给元素的onxxxx属性赋值,只能绑定有一个处理句柄. 但很多时候我们需要绑定多个处理句柄到一个事件上 ...

  9. Spring Ioc知识整理

    Ioc知识整理(一): IoC (Inversion of Control) 控制反转. 1.bean的别名 我们每个bean元素都有一个id属性,用于唯一标识实例化的一个类,其实name属性也可用来 ...

  10. android网络交互之DNS优化知识整理

    android网络交互之DNS优化知识整理 之前的工作中,经常会遇到DNS解析出问题导致网络交互的操作无法正常进行. UnknownHostException 在很多的移动开发过程中,与服务端的交互的 ...

随机推荐

  1. 十大经典排序算法+sort排序

    本文转自:十大经典排序算法,其中有动图+代码详解,本文简单介绍+个人理解. 排序算法 经典的算法问题,也是面试过程中经常被问到的问题.排序算法简单分类如下: 这些排序算法的时间复杂度等参数如下: 其中 ...

  2. 测试工具之Jmeter(使用badboy录制脚本)

    前面使用badboy工具时说过,badboy是可以录制Jmeter的测试脚本,这样省去了自己设计测试用例的麻烦 Jmeter主要是一个性能测试工具,不光在web和http,现在扩展很多功能都可以在Jm ...

  3. web自动化测试(java)---元素定位

    和python类似,java-selenium也提供了很多种元素定位的方法,具体如下: findElement(By.id()) findElement(By.name()) findElement( ...

  4. jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2.jquer ...

  5. 关于iscroll插件的使用

    本次项目有一个需要多信息展示,需要左右滑动的效果,查资料了解到iscroll,就拿来用,如下调用: var myscroll = new IScroll("#wrapper", { ...

  6. 选择排序——Selection Sort

    基本思想: 在长度为N的无序数组中,第一次遍历n-1个数,找到最小的数值与第一个元素交换:第二次遍历n-2个数,找到最小的数值与第二个元素交换:...第n-1次遍历,找到最小的数值与第n-1个元素交换 ...

  7. 从零开始学 Web 之 移动Web(三)Zepto

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 理解交叉熵(cross_entropy)作为损失函数在神经网络中的作用

    交叉熵的作用 通过神经网络解决多分类问题时,最常用的一种方式就是在最后一层设置n个输出节点,无论在浅层神经网络还是在CNN中都是如此,比如,在AlexNet中最后的输出层有1000个节点: 而即便是R ...

  9. 第4章 Selenium2-java WebDriver API (三)

    4.12  上传文件  4.12.1  sendKeys实现上传  html <html> <head> </head> <body> <div ...

  10. vuex的使用总结

    一.安装命令    npm install vuex 二.在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下: import V ...