HTML notebook2

HTML notebook 2: Construction

在文档的head部分，通常要指明页面标题，提供为搜索引擎准备的关于页面本身的信息，加载样式表，以及加载JavaScript文件，不过处于性能考虑，多数时候在页面底部</body>标签结束前加载JavaScript.

body元素包住页面的内容，包含文本、图像、表单、音频、视频以及其他交互式内容。

title元素是必需的，且不能包含人和格式、HTML、图像或指向其他页面的链接。title是搜索引擎抓取网站的基础，因此应该重视。

Comment and share

HTML notebook

HTML notebook 1: Components

入了HTML和JavaScript的坑，趁着年末事情没那么多 (假装不多)，学习一下，不知道能坚持多久，LOL… 参考的书有如下三本，

  1. Castro, E. and Hyslop, B. HTML and CSS Visual QuickStart Guide 8th Ed.
  2. Keith, J. and Sambells, J. DOM Scripting Web Design with JavaScript and Document OBject Model
  3. Zakas, N. Professional JavaScript for Web Developers 3rd Ed.

边看边手动记笔记，有空整理一下。

HTML的一个很好的理解，为网页内容打上能够描述它们的标签，但HTML元素描述的是内容是什么，而不是内容本身的特征，更像一个盒子。CSS用来控制内容的外观(如字体、颜色和阴影等)。访问者看到的内容位于主体body部分，即<body>和</body>之间的内容。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title> My page </title>
</head>
<body>
</body>
</html>

每个网页都包含DOCTYPE、html、head和body元素，它们是网页的基础。HTML使用<>包围标签，包含开始和结束标签，其中结束标签在<后增加/符号。

  • <body>开始标签以上的内容为浏览器和搜索引擎准备;
  • <!DOCTYPE html>表示这是一个html5页面，DOCTYPE应该始终位于页面第一行;
  • <title>和<\title>之间用于显示页面的标题;
  • h1是标题，a是链接，img是图像。
元素

元素有一个或多个属性、属性用来进一步描述元素 (考虑画图)。 元素由开始标签、内容和结束标签组成。习惯上，标签采用小写字母。还有一些元素是空元素 (不包含文本内容)，形如< \>，即开始标签和结束标签的结合，由左尖括号开头、元素的名称及包含的属性和右尖括号 (空格加”/“在HTML5中可选) 组成。

属性和值

属性包含了元素的额外信息，每个属性有各自的值。在HTML5中属性值两边的引号可选，但建议保留，形如attr="value"的形式。有的属性可以接受仍和值，有的则有限制，最常见的是仅接受预定义值 (枚举值) 的属性。例如，

1
<link rel="stylesheet" media="screen"(预定义值) href="style.css"(非预定义值) />

有许多属性的值设置为数字，主要为描述大小和长度的属性，其中图像和视频的宽度和高度是有单位的，默认为像素。有的属性 (如href和src) 用于引用其他文件，它们只能包含URL形式的值。还有一种属性为布尔型，本身出现就表示真。

父元素和子元素

如果一个元素包含另一个元素，该元素称为被包含元素的父元素，被包含元素称为子元素。这种结构是HTML的关键特性，有助于在元素上添加样式和应用JavaScript行为。例如，

1
2
3
4
<article>
<h1> Blablabla...</h1>
<p> ... xxxxx </p>
</article>

文本内容

文本是元素的基本成分，在HTML中，文本中的多个空格或制表符会被压缩成单个空格，回车和换行符号会被转换为单个空格，旧版本的HTML只能只用ASCII字符，受限于此，特殊字符需要类似于Latex的语法来引用。目前，可以采用UTF-8编码来缓解这一问题。而要采用Unicode，需要在之后进行定义，并指定`charset=”utf-8”，如下

1
2
3
<head>
	<meta charset="utf-8" />
</head>

链接、图像和其他文本内容

HTML5提供了audio和video元素，避免了无Flash等插件便无法播放音频和视频的问题。，当然目前的多数浏览器提供了内置的媒体播放器，仍然可以使用Flash播放器作为旧浏览器。

文件和文件名的规则

建议采用小写字母加短横线而不是首字母大写加下划线的形式，并用.html作为扩展名，有助于访问和搜索引擎的优化。注意，文件名称中也不要出现空格。

URL(Uniform Resource Locator)

包含关于文件存储位置和浏览器应如何处理它的信息，互联网上的每个文件都有唯一的URL。若URL路径不以文件名结尾，则对应一个目录中的默认文件，通常为index.html。URL分为绝对路径和相对路径，其中相对路径尽量使用根相对路径

语义？？

语义化HTML指的是那些使用最恰当的HTML元素进行标记的内容，在标记的过程中并不关心内容显示。

  • HTML提供六个标题级别，即h1-h6,用形如<h1> xxx </h1>实现;
  • 图像使用img,无元素;
  • 段落使用p，段落用<p>xxx</p>实现;
  • 段落中可以嵌套em和a元素，其中em表示强调，通常会用斜体体现，在CSS中也可以修改。
  • a表示anchor，用于定义链接，形如<a href="" rel="" title=""><xxx /a>

Tips

  • &copy表示版权符号，<p><small>&copy; Jason </small></p>, small表示法律声明等条纹细则;
  • 发送电子邮件mailto:xx@xxx.xxx

Comment and share

Transfer learning with TensorFlow

Today, let's talk about transfer learning based on TensorFlow. Firstly, what is transfer learning? It is a strategy of building your own deeplearning based project with existing well-trained networks, so as to avoid some risks like overfitting, time-consuming and etc.
Continue reading

Fourier transform on 2D image

今天讨论二维矩阵 (图像) 的Fourier transoform，这个问题缘起师兄的工作，“当图像的灰度波动较小，或者说只有大尺度结构时，它的傅立叶变换的图像会在中间(低频)区域出现一个十字。”而这个诡异的十字严重影响了后续的工作。为什么会有这个十字？我们有一个猜想，也试着证明了一下，但不确定是不是这个原因，先挖个坑再说。。。
Continue reading

Data visualization with t-SNE

今天我们讨论数据可视化(data visualization)算法t-SNE (t-distributed Stochastic Neighbor Embedding)，该方法的目的是映射高维数据向量到低维，并保留向量的相似性或者距离。通常我们描述距离会使用类似欧式距离或黎曼距离等概念，映射的方法也多为线性，如PCA。而t-SNE不同，它是用联合概率来描述样本点的相似程度，是非线性的。
Continue reading

Catch data with provided keys

晚上粗去吃大餐了，走了很多路，超级开心。。。今天还是写个短博客，讲一下怎么从文件里根据关键词提取相关信息。举个例子，比如我们订阅了arXiv的arXiv.cs板块，那么每天会收到一封邮件，如果想批量且自动化地下载这些论文，应该怎么做呢？ 有一些解决方案，比如提取每篇摘要文末的链接，利用python的url,requests等包进行下载; 比如利用linux的wget工具进行下载，但相对来说，这两种方案是比较难入门的，我到现在都写不好。。。那么，是否有更简单的解决方案呢？ 答案是用正则表达式re.
Continue reading

Author's picture

Jason Ma

We are in the same story.


Astronomer? Software engineer


Shanghai