• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏李浩逍遥吧

公众号文章排版学习(四)

学习 hulk 6年前 (2018-08-25) 375次浏览 0个评论 扫描二维码

公众号文章排版学习(四)

HTML 学习

今天是公众号文章排版学习的第四天。按照计划,今天会进行HTML 标记的基础学习。我选择在W3school学习,这个网上随便搜索一下应该就能找到。下面记录今天的具体学习项目:

HTML 简介

HTML 是用来描述网页的一种语言,是一种超文本标记语言。

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。由尖括号包围,比如 <html>,通常成对出现,比如 <b></b>,其中第一个标签是开始标签,第二个标签是结束标签

HTML文档就是网页。Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。

HTML 编辑器

推荐使用文本编辑器来学习 HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我个人推荐使用notepad++,因为我是windows操作系统,另外就是notepad++功能比记事本强大太多了。

编辑HTML文档流程:打开编辑器,键入HTML代码,保存为.htm或.html文件,用浏览器打开这个文件。

HTML 基础

HTML 标题通过 <h1><h6> 等标签进行定义。段落通过 <p>标签进行定义。链接通过 <a>标签进行定义。图像通过 <img>标签进行定义。

HTML 元素

HTML 元素指的是从开始标签到结束标签的所有代码。

大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素。在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。HTML 标签对大小写不敏感:<P> 等同于 <p>。但是推荐使用小写标签。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现,比如:name=”value”。属性总是在 HTML 元素的开始标签中规定。属性和属性值对大小写不敏感,但是属性推荐用小写。另外属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,

HTML 标题

HTML 标题通过 <h1><h6> 等标签进行定义。<h1> 定义最大的标题。<h6> 定义最小的标题。请确保将 HTML 标题标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为网页的结构和内容编制索引。<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

HTML 段落

段落通过 <p>标签进行定义。不要使用空的段落标记 <p></p> 去插入一个空行,这是个坏习惯。用<br />标签代替它!(但是也不要用 <br /> 标签去创建列表。)<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。即使 <br> 在所有浏览器中的显示都没有问题,使用<br />也是更长远的保障

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

HTML 样式

style 属性用于改变 HTML 元素的样式。style 属性的作用:*提供了一种改变所有 HTML 元素的样式的通用方法。**样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。

按这里的意思,其实样式和CSS文件起的作用是差不多的。不同的是CSS文件属于独立的样式表。而style属于HTML元素的一个属性。

HTML 格式化

HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。学习文章排版布局应该要把格式化做好,提前就设置好样式。

HTML 引用

HTML <q>元素定义短的引用。浏览器通常会为 <q> 元素包围引号

HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。

HTML <abbr> 元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。HTML <dfn> 元素定义项目或缩写的定义

HTML <address> 元素定义文档或文章的联系信息(作者/拥有者)。此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

HTML <cite> 元素定义著作的标题。浏览器通常会以斜体显示<cite>元素。

HTML <bdo> 元素定义双流向覆盖(bi-directional override)。<bdo> 元素用于覆盖当前文本方向:

HTML 计算机代码

通常,HTML 使用可变的字母尺寸,以及可变的字母间距。在显示计算机代码示例时,并不需要如此。<kbd>,<samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

<code> 元素不保留多余的空格折行,如需解决该问题,您必须在<pre>元素中包围代码。

HTML<var> 元素定义数学变量

HTML 注释

通过注释标签 <!– 与 –> 向 HTML 源代码添加注释.

HTML CSS

通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。我们通过使用<a>标签在 HTML 中创建链接。有两种使用 <a> 标签的方式:通过使用 href 属性 – 创建指向另一个文档的链接;通过使用 name 属性 – 创建文档内的书签。

“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。使用 Target 属性,你可以定义被链接的文档在何处显示。

name 属性规定锚(anchor)的名称。可以使用 name 属性创建 HTML 页面中的书签。当使用命名锚(named anchors)时,可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。锚的名称可以是任何你喜欢的名字。可以使用 id 属性来替代 name 属性,命名锚同样有效。

将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到这个命名锚了。请始终将正斜杠添加到子文件夹。

命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。这个完全可以通过Markdown的TOC自动生成目录完成。假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

HTML 图像

在 HTML 中,图像由 <img> 标签定义。<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。

alt 属性用来为图像定义一串预备的可替换的文本。

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

如果不定义边框属性,表格将不显示边框。表格的表头使用 <th>标签进行定义。

为了避免空单元格不显示这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。

HTML 列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>

有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li> 标签。

自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以<dd>开始。

HTML 块

大多数 HTML 元素被定义为块级元素或内联元素。“块级元素”译为 block level element,“内联元素”译为 inline element。块级元素在浏览器显示时,通常会以新行来开始(和结束)。内联元素在显示时通常不会以新行开始。

HTML <div>元素是块级元素,它是可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span>元素是内联元素,可用作文本的容器。当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

目前来看<div><span>应该是学习的重中之重。

HTML 类

对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式,或者为不同的类设置不同的样式。

HTML 布局

<div>元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

使用<table>元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式

HTML 响应式设计

RWD 指的是响应式 Web 设计(Responsive Web Design),RWD 能够以可变尺寸传递网页,RWD 对于平板和移动设备是必需的。

另一个创建响应式设计的方法,是使用现成的 CSS 框架。Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机。

HTML 框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

框架结构标签(<frameset>)定义如何将窗口分割为框架。每个 frameset 定义了一系列行列。rows/columns 的值规定了每行或每列占据屏幕的面积。Frame 标签定义了放置在每个框架中的 HTML 文档。为不支持框架的浏览器添加<noframes>标签。

不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。

HTML 内联框架

iframe 用于在网页内显示网页。height 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素,但也可以用百分比来设定(比如 “80%”)。frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 “0” 就可以移除边框。iframe 可用作链接的目标(target)。链接的 target 属性必须引用iframe 的 name 属性。

HTML 背景

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

推荐使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

<script>标签用于定义客户端脚本,比如 JavaScript。script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容。

如果浏览器压根没法识别 <script> 标签,那么<script>标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别 <script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。所有很多脚本都会写在注释里面。

HTML 头部

<head>元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。以下标签都可以添加到 head 部分:<title><base><link><meta><script> 以及 <style>

<title> 标签定义文档的标题。title 元素在所有 HTML/XHTML 文档中都是必需的。title 元素能够定义浏览器工具栏中的标题,提供页面被添加到收藏夹时显示的标题,显示在搜索引擎结果中的页面标题。

<base> 标签为页面上的所有链接规定默认地址或默认目标(target)

<link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表。

<style> 标签用于为 HTML 文档定义样式信息。可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式。

元数据(metadata)是关于数据的信息。<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta> 标签始终位于 head 元素中。元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。name 和 content 属性的作用是描述页面的内容。

<script> 标签用于定义客户端脚本,比如 JavaScript。

HTML 实体

在 HTML 中,某些字符是预留的。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

HTML 中的常用字符实体是不间断空格(&nbsp;)。实体名称对大小写敏感!

HTML URL

URL 也被称为网址。当您点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。统一资源定位器(URL)用于定位万维网上的文档(或其他数据)。

遵守以下的语法规则:scheme://host.domain:port/path/filename

scheme – 定义因特网服务的类型。最常见的类型是 http、https、ftp、file。

host – 定义域主机(http 的默认主机是 www)

domain – 定义因特网域名,比如 mrwis.com

:port – 定义主机上的端口号(http 的默认端口号是 80)

ath – 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。

filename – 定义文档/资源的名称

URL 的英文全称是 Uniform Resource Locator,中文也译为“统一资源定位符”。

HTML URL 编码

URL 编码会将字符转换为可通过因特网传输的格式。Web 浏览器通过 URL 从 web 服务器请求页面。

URL 只能使用 ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。

HTML Web 服务器

如果希望向世界发布您的网站,那么您必须把它存放在 web 服务器上。大多数小公司会把网站存放到由 ISP (因特网服务提供商)提供的服务器上。

HTML 颜色

颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)

HTML 颜色名

大多数的浏览器都支持颜色名集合。仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

HTML 文档类型

<!DOCTYPE> 声明帮助浏览器正确地显示网页。

Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。

HTML 速查手册

以上内容的集合。

文章的全部知识点都来源于W3school,我仅仅是做了一个简单的记录。相当于一个学习笔记吧。其中有部分知识跨度较大,对于目前的我来说,基本用不上。因为我的主要目的是进行公众号文章排版,所以只要掌握基本的HTML标记和style样式就好了。也就没有进行深入的学习,后期根据实际需要再去具体的补充需要学习的内容。

希望以上对你有所帮助。

今日语录:

当你的才华还撑不住你的野心时,那你就应该静下心来学习。


本文标题:公众号文章排版学习(四)
转载请保留页面地址:https://www.hulklee.com/wechat-article-layout-part-4/
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址