vlambda博客
学习文章列表

前端开发坑之一--漫谈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>  元素包含了可见的页面内容


我们来看一个简单的代码

<!DOCTYPE html><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可以留在后面,这样方便大家理解。还是佛系更文,多少随意!前后逻辑有关联,整理也费时间!如果可以一直学习的话,尽量一直学习。

                        预言帝:下一篇应该是大概讲解每个标签的实例。


             退潮了才知道谁没穿裤衩

                                  ----郭老师