美文网首页
HTML tutorial

HTML tutorial

作者: Klaas | 来源:发表于2016-02-28 11:13 被阅读17次

html和markdown实在是太像了.了解HTML只为进行爬虫操作.

Introduction

<!DOCTYPE html> #帮助浏览器正确显示
<html>

<head> #告知浏览器title
<title>Page Title</title>
</head>

<body>#这部分才会显示在正文
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

</html>

效果如下:(多亏了简书同时支持html语法)

<h1>My First Heading</h1>
<p>My first paragraph.</p>

html file

用notepad写html代码,然后另存为 .htm或者.html文件,encoding 方式选择UTF-8(支持全球语言),然后就可以点击打开了.

Basic syntax

heading

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

paragraph

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p  title = "Can add a title"> paras can be with a title. <p>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p title = "Can add a title"> paras can be with a title. </p>

link

<a href="http://www.w3schools.com">This is a link</a>

<a href="http://www.w3schools.com">This is a link</a>

image

<img src="http://weknowyourdreamz.com/images/football/football-01.jpg" alt="football" width="104" height="142">

<img src="http://weknowyourdreamz.com/images/football/football-01.jpg" alt="football" width="128" height="128">

CSS

下面的效果就是背景颜色轻灰色,一级标题蓝色, 段落绿色.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgrey;}
h1   {color: blue;}
p    {color: green;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Reference:
http://www.w3schools.com/html/default.asp

相关文章

网友评论

      本文标题:HTML tutorial

      本文链接:https://www.haomeiwen.com/subject/fzawkttx.html