HTML_start

part 1

First of all:

    introduce:

    HTML是一种 超文本标记语言 (Hyper Text Markup Language),是W3C组织推荐使 用的一个国际标准,是一种用来制作超文本文档的简单标记语言。

    设计 HTML语言 的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。

    注:大小写不敏感 、html/htm为后缀

    行业情报:

既然了解了html肯定听说过css、JavaScript

    天才第一步:

    既然想了解html,那不如从编写一个简单的网页开始:(天才第一步,先装好软件)

    编写软件:sublime,下载链接:www.sublimetext.com/3

    插件安装:CTRL + ~调出命令行,安装控制台命令,命令网址如下:https://packagecontrol.io/installation#st3 。

不愿意上网的直接复制:import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by))

    最后Ctrl+Shift+P键打开命令板-安装插件:

    - Install Package

     - Emmet - JsFormat 

    - SideBarEnhancements 

    - CssComb - Autoprefixer

The next:

    Structure:

    HTML文本是由HTML命令组成的描述性文本,基本HTML页面以<html>标签开始,以</html>结束,HTML命令可以说明文字、图形、动画、声音、表格、链接等。< > 用大小于号作为包装,这个包装成为标签,<tag>。不同的标签标识不同的意思。

    HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。 

    <!DOCTYPE hmtl> 仅声明文档类型 非标签

    <p> </p>开始一个新段落,在<p></p>标签内,加上<br/>仅换行,但还是一个段落

    <pre> </pre>类似于<p>标签,但是会保留空格和换行符

    <h1> </h1>标题标签,一共可以有6个级别标题,<h2></h2>......

    <hr>水平线标签,单标签

    <i></i> 或者<em></em>文字斜体

    <b></b> 或者<strong></strong> 文字加粗

常用特殊符号:

    &lt; < 

    &gt; > 

    &reg; 已注册 

    &copy; 版权 

    &trade; 商标 

    &nbsp; 空格

列表标签:

    无序列表标签语法:

        <ul type="...">

            <li> </li>

        </ul>

    有序列表标签语法:

        <ol type=" ">  <li> </li> </ol>

    定义列表标签语法:

        <dl> <dt></dt> <dd></dd> </dl>

图片标签语法:

    <img src=" " alt=" " ...>

注:src属性必写(绝对路径:从盘符路径开始;相对路径-建议使用) ,height以及width属性取值为百分比时是相对于父级元素取。

超链接标签语法:


这是我第一次编写的网页:

<!DOCTYPE html>

<html>

<head>

<title>demo</title>

<meta charset="UTF-8"/>

</head>

<body>

<h1>demo</h1>

<hr>

<div>

<p align="center">我坚信 &nbsp;&nbsp;青春不会消亡</p>

<p align="center">它只是躲在某片绿荫下 &nbsp;&nbsp;慢慢疗伤 </p>

<p align="center">岁月凝成一颗珍珠&nbsp;&nbsp;却无法拥有</p>

<p align="center">丢在地上&nbsp;&nbsp;冰凉 </p>

<p align="center">握在手里&nbsp;&nbsp;滚烫 </p>

<p align="center">我想拥抱它 &nbsp;&nbsp;却扑了一个空</p>

<p align="center">它化作一片杂物&nbsp;&nbsp;散落在桌上</p>

<p align="center">泛黄的日记本 </p>

<p align="center">气数已尽的铅笔 </p>

<p align="center">褪色的发卡</p>

<p align="center">还有&nbsp;&nbsp;&nbsp;&nbsp;一个空空的背囊</p>

<p align="center">那年</p>

<p align="center">铅笔在日记本上写道 </p>

<p align="center">真好 </p>

<p align="center">我没有去打搅你的暗自芬芳</p>

<p align="center">真好</p>

<p align="center">你也没有戳穿我的刻意坚强</p>

<p align="center">人生&nbsp;&nbsp;&nbsp;&nbsp;就是一次次幸福的相聚</p>

<p align="center">夹杂着一次次伤感的别离 </p>

<p align="center">我不是在最好的时光中遇见了你 </p>

<p align="center">而是  </p>

<p align="center">遇见了你 </p>

<p align="center">才给了我这段最好的时光</p>

<ul type=""></ul>

</div>

<div>

</div>

</body>



part 1的最后:

我想以一个问题结尾:既然HTML是一种超文本标记语言,那么为什么它却是纯文本呢?


part 2

一、WWW万维网介绍

既然是网站,那么万维网是如何工作的呢?

WWW 指万维网(World Wide Web),万维网常被称为Web,Web 是由遍布全球的计算机所组成的网络,所有 Web 中的计算机都可以彼此通信,所有这些计算机都使用名为 HTTP 的通信标准。

Web 信息存储于被称为网页的文档中,HTML 文档 = 网页,网页是存储于被称为 Web 服务器的计算机上,读取网页的计算机称为 Web 客户端,Web 客户端通过称为浏览器的程序来查看网页。

浏览器可通过一个请求来读取某个服务器上的一张网页,请求是一个包含页面地址的标准 HTTP 请求,页面地址类似这样:http://www.someone.com/page.htm

所有的网页都含有其如何被显示的结构,浏览器通过阅读这些结构来显示页面,最常用的显示结构称为 HTML 标签,用于段落的 HTML 标签类似这样:<p>,在 HTML 中像这样定义段落:<p>This is a Paragraph</p>

web 的规则制定主体是 W3C,W3C 指的是万维网联盟(World Wide Web Consortium),W3C 将各种规范订立为 web 标准,最核心的 web 标准是 HTML、CSS、XML,最新的 HTML 标准是 XHTML 1.0。

二、HTML与XHTML的介绍:

HTML超文本标记语言(HyperText Markup Language,HTML)

XHTML可扩展超文本标记语言(eXtensible HyperText Markup Language,XHTML)

XHTML表现方式与HTML类似,不过语法上更加严格。从继承关系上讲,HTML是一种基于标准通用标记语言SGML)的应用,是一种非常灵活的置标语言,而XHTML则基于可扩展标记语言XML),XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。

三、深入行业情报:



四、干货CSS、JavaScript与XML...的介绍

CSS

CSS 指层叠样式表 (CascadingStyleSheets),样式定义如何显示HTML 元素,样式通常存储在样式表中,把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在CSS 文件中,多个样式定义可层叠为一。

JavaScript

在数百万张页面中,JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。

JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。JavaScript 由数行可执行计算机代码组成。JavaScript 通常被直接嵌入 HTML 页面。JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。

    function:

    1)JavaScript 为 HTML 设计师提供了一种编程工具,HTML 创作者往往都不是程序员,但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言!几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。

    2)JavaScript 可以将动态的文本放入 HTML 页面。类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面:document.write("<h1>" + name + "</h1>")

    3)JavaScript 可以对事件作出响应。可以将 JavaScript 设置为当某事件发生时才会被执行,例如页面载入完成或者当用户点击某个 HTML 元素时。

    4)JavaScript 可以读写 HTML 元素。JavaScript 可以读取及改变 HTML 元素的内容。

    5)JavaScript 可被用来验证数据。在数据被提交到服务器之前,JavaScript 可被用来验证这些数据。

    6)JavaScript 可被用来检测访问者的浏览器。JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器,为这个浏览器载入相应的页面。

    7)JavaScript 可被用来创建 cookies。JavaScript 可被用来存储和取回位于访问者的计算机中的信息。

XML

XML 指可扩展标记语言(EXtensible Markup Language),XML 是一种标记语言,很类似 HTML,XML 被设计用来描述数据。XML 是一个 W3C 标准

XML 标签没有被预定义。您需要自行定义标签。XML 使用文件类型声明(DTD)或者XML Schema来描述数据。带有 DTD 或者 XML Schema 的 XML 被设计为具有自我描述性

XML 被设计用来携带数据。XML 是不作为的。也许这有点难以理解,但是 XML 不会做任何事情。XML 被设计用来结构化、存储以及传输信息。

下面是 John 写给 George 的便签,存储为 XML:

<note>

<to>George</to>

<from>John</from>

<heading>Reminder</heading>

<body>Don't forget the meeting!</body>

</note>

这个标签有标题以及留言。它也包含了发送者和接受者的信息。但是,这个 XML 文档仍然没有做任何事情。它仅仅是包装在 XML 标签中的纯粹的信息。我们需要编写软件或者程序,才能传送、接收和显示出这个文档。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容