前端开发坑之一--漫谈HTML
Posted ABAP赵先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发坑之一--漫谈HTML相关的知识，希望对你有一定的参考价值。
一来先抱歉，我也是佛系更文。本来个性相对懒散，不过今天开始，我们要开一个新坑了，前端开发坑！Sap本身是一种C/S架构，其实这样的架构挺不错的。但是现在也都流行B/S的架构，但是存在即合理的。不过这其实并不影响我们继续扯前端开发。
因为B/S的很多都是从浏览器到服务器的，那也就是我们的前端开发直接到浏览器的。这也是Sap希望并且已经继续的一个方向！但是考虑到Sap的体积太过于庞大，并且已经留下过很多坑了，所以目前还不好说，但是我觉得，从一个资深Abap的角度考虑，学一下前端开发没什么坏处。
我们切入正题，前端开发的基础其实就是html（HyperText Markup Language），这其实也看的很明白标记型语言，这其实就是标记的。所以我认为基础的学差不多了，剩下的完全可以用到的时候再去查相关的具体属性！当然深入的我可能讲不到那么完善，但是相对应的，我认为核心点的，我们可以学习一下。你可能不信，但是真的很快就可以学习完毕，我计划是在2--3篇文章内，后面我们依据到时候的情况看看我们是学Java的基础还是Js的基础。
一个HTML页面，最少最少包含4个元素
<!DOCTYPE html>
<html>
<head>
<body>
当然你要是问少了其中一个或者某几个行不行，明确的说，没问题，但是少了就残缺了，并不完整了，为了保持完整性，我们还是尽量有这几个大元素，其余的元素都是在这几个大元素下包裹的。
我们简单的解释一下这四种元素的意思。
| 元素名称 |
释义 |
| <!DOCTYPE html> | 声明为 HTML 文档 |
| <html> | 元素是 HTML 页面的根元素 |
| <head> | 元素包含了文档的元（meta）数据 |
| <body> | 元素包含了可见的页面内容 |
我们来看一个简单的代码
<html><head><meta charset="utf-8"><title>Abap赵先生</title></head><body><h1>前端开发之</h1><p>漫谈HTML</p></body></html>
<!DOCTYPE html> 声明了文档类型，
<html> 定义标签范围，
<head>定义全局数据，
<body> 定义相关行项目数据。
一套组合拳，行云流水！先告诉你，请以HTML的形式去解释此文档，然后告诉你需要解释的范围，其中有一部分范围是全局的，还有一部分范围是局部的。对吧，这就是很好理解！花了很大的篇幅我们来说这四个要素，这四个要素真的很重要，并且在以后的CSS3中也很重要。
我们明确了这四个的范围，后面的事情就很方便了，doctype是必须的，html是默认的，我们就看head和body。我觉得如果用Abap来比喻的话，head更像是全局变量，body是局部变量（这也侧面说明了JS声明大都在head，并非是body）。
下面是一些HTML的标记元素
HTML标题
<h1>这是一个一级标题</h1><h2>这是一个二级标题</h2><h3>这是一个三级标题</h3><h4>这是一个四级标题</h4><h5>这是一个五级标题</h5><h6>这是一个六级标题</h6>
HTML段落
<p>我家门前有两颗树</p><p>一颗是枣树/p><p>另外一颗也是枣树</p>
HTML连接
<a href="https://www.baidu.com">这是百度</a>HTML图形
<img src="/images/logo.png" width="258" height="39" />HTML换行
<br />你看，这就是标记，简单容易便于理解！
有X标记的是HTML5新增的标签
| 标签 | 描述 |
|---|---|
| 基础 | |
| <!DOCTYPE> | 定义文档类型。 |
| <html> | 定义一个 HTML 文档 |
| <title> | 为文档定义一个标题 |
| <body> | 定义文档的主体 |
| <h1> to <h6> | 定义 HTML 标题 |
| <p> | 定义一个段落 |
| <br> | 定义简单的折行。 |
| <hr> | 定义水平线。 |
| <!--...--> | 定义一个注释 |
| 格式 | |
| <acronym> | HTML5不再支持。 定义只取首字母的缩写。 |
| <abbr> | 定义一个缩写。 |
| <address> | 定义文档作者或拥有者的联系信息。 |
| <b> | 定义粗体文本。 |
| <bdi> |
允许您设置一段文本，使其脱离其父元素的文本方向设置。HTML5 |
| <bdo> | 定义文本的方向。 |
| <big> | HTML5不再支持。 定义大号文本。 |
| <blockquote> | 定义块引用。 |
| <center> | HTML5不再支持。HTML 4.01 已废弃。定义居中文本。 |
| <cite> | 定义引用(citation)。 |
| <code> | 定义计算机代码文本。 |
| <del> | 定义被删除文本。 |
| <dfn> | 定义定义项目。 |
| <em> | 定义强调文本。 |
| <font> | HTML5不再支持。HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色 |
| <i> | 定义斜体文本。 |
| <ins> | 定义被插入文本。 |
| <kbd> | 定义键盘文本。 |
| <mark> | 定义带有记号的文本。HTML5 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。HTML5 |
| <pre> | 定义预格式文本 |
| <progress> | 定义运行中的任务进度（进程）。HTML5 |
| <q> | 定义短的引用。 |
| <rp> | 定义不支持 ruby 元素的浏览器所显示的内容。HTML5 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。HTML5 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。HTML5 |
| <s> | 定义加删除线的文本。 |
| <samp> | 定义计算机代码样本。 |
| <small> | 定义小号文本。 |
| <strike> | HTML5不再支持。HTML 4.01 已废弃。 定义加删除线的文本。 |
| <strong> | 定义语气更为强烈的强调文本。 |
| <sub> | 定义下标文本。 |
| <sup> | 定义上标文本。 |
| <time> | 定义一个日期/时间HTML5 |
| <tt> | HTML5不再支持。 定义打字机文本。 |
| <u> | 定义下划线文本。 |
| <var> | 定义文本的变量部分。 |
| <wbr> | 规定在文本中的何处适合添加换行符。HTML5 |
| 表单 | |
| <form> | 定义一个 HTML 表单，用于用户输入。 |
| <input> | 定义一个输入控件 |
| <textarea> | 定义多行的文本输入控件。 |
| <button> | 定义按钮。 |
| <select> | 定义选择列表（下拉列表）。 |
| <optgroup> | 定义选择列表中相关选项的组合。 |
| <option> | 定义选择列表中的选项。 |
| <label> | 定义 input 元素的标注。 |
| <fieldset> | 定义围绕表单中元素的边框。 |
| <legend> | 定义 fieldset 元素的标题。 |
| <datalist> | 规定了 input 元素可能的选项列表。HTML5 |
| <keygen> | 规定用于表单的密钥对生成器字段。HTML5 |
| <output> | 定义一个计算的结果HTML5 |
| 框架 | |
| <frame> | HTML5不再支持。 定义框架集的窗口或框架。 |
| <frameset> | HTML5不再支持。定义框架集。 |
| <noframes> | HTML5不再支持。 定义针对不支持框架的用户的替代内容。 |
| <iframe> | 定义内联框架。 |
| 图像 | |
| <img> | 定义图像。 |
| <map> | 定义图像映射。 |
| <area> | 定义图像地图内部的区域。 |
| <canvas> | 通过脚本（通常是 javascript）来绘制图形（比如图表和其他图像）。HTML5 |
| <figcaption> | 定义一个 caption for a <figure> elementHTML5 |
| <figure> | figure 标签用于对元素进行组合。HTML5 |
| Audio/Video | |
| <audio> | 定义声音，比如音乐或其他音频流。HTML5 |
| <source> | 定义media元素 (<video> 和 <audio>)的媒体资源。mediaHTML5 |
| <track> | 为媒体(<video> 和 <audio>)元素定义外部文本轨道。HTML5 |
| <video> | 定义一个音频或者视频HTML5 |
| 链接 | |
| <a> | 定义一个链接 |
| <link> | 定义文档与外部资源的关系。 |
| <main> | 定义文档的主体部分。 |
| <nav> | 定义导航链接HTML5 |
| 列表 | |
| <ul> | 定义一个无序列表 |
| <ol> | 定义一个有序列表 |
| <li> | 定义一个列表项 |
| <dir> | HTML5不再支持。HTML 4.01 已废弃。 定义目录列表。 |
| <dl> | 定义一个定义列表 |
| <dt> | 定义一个定义定义列表中的项目。 |
| <dd> | 定义定义列表中项目的描述。 |
| <menu> | 定义菜单列表。 |
| <command> | 定义用户可能调用的命令（比如单选按钮、复选框或按钮）。HTML5 |
| 表格 | |
| <table> | 定义一个表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格中的表头单元格。 |
| <tr> | 定义表格中的行。 |
| <td> | 定义表格中的单元。 |
| <thead> | 定义表格中的表头内容。 |
| <tbody> | 定义表格中的主体内容。 |
| <tfoot> | 定义表格中的表注内容（脚注）。 |
| <col> | 定义表格中一个或多个列的属性值。 |
| <colgroup> | 定义表格中供格式化的列组。 |
| 样式/节 | |
| <style> | 定义文档的样式信息。 |
| <div> | 定义文档中的节。 |
| <span> | 定义文档中的节。 |
| <header> | 定义一个文档头部部分HTML5 |
| <footer> | 定义一个文档底部HTML5 |
| <section> | 定义了文档的某个区域HTML5 |
| <article> | 定义一个文章内容HTML5 |
| <aside> | 定义其所处内容之外的内容。HTML5 |
| <details> | 定义了用户可见的或者隐藏的需求的补充细节。HTML5 |
| <dialog> | 定义一个对话框或者窗口HTML5 |
| <summary> | 定义一个可见的标题。当用户点击标题时会显示出详细信息。HTML5 |
| 元信息 | |
| <head> | 定义关于文档的信息 |
| <meta> | 定义关于 HTML 文档的元信息。 |
| <base> | 定义页面中所有链接的默认地址或默认目标。 |
| <basefont> | HTML5不再支持。HTML 4.01 已废弃。 定义页面中文本的默认字体、颜色或尺寸。 |
| 程序 | |
| <script> | 定义客户端脚本。 |
| <noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
| <applet> | HTML5不再支持。HTML 4.01 已废弃。 定义嵌入的 applet。 |
| <embed> | 定义了一个容器，用来嵌入外部应用或者互动程序（插件）。HTML5 |
| <object> | 定义嵌入的对象。 |
| <param> | 定义对象的参数。 |
赵先生有话说：
简而言之，即是标记！所以记住用法就可以了，后面我会依据实际情况，考虑一下，我们应该会讲解CSS3和JAVA语法。我觉得JS可以留在后面，这样方便大家理解。还是佛系更文，多少随意！前后逻辑有关联，整理也费时间！如果可以一直学习的话，尽量一直学习。
预言帝：下一篇应该是大概讲解每个标签的实例。
退潮了才知道谁没穿裤衩
----郭老师
以上是关于前端开发坑之一--漫谈HTML的主要内容，如果未能解决你的问题，请参考以下文章
markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发