This is the purpose of writing a document, that is to let friends want to learn HTML (based on nothing), can quickly learn about HTML. This paper compares the language straightforward, easy to understand, if there is something wrong, please correct me friends, thanked the next.
ps: recent need to use the knowledge to the front to publish map services (professional content), we need to know a little knowledge of front end. All knowledge of this paper are based on the concept of reading "HTML & CSS design and build sites" -JonDuckett- -210 Tsinghua University Press. I think, HTML is quite eager to learn a language, you only need to remember some of the elements are doing, and how to use, as well as some of the features inside, id, class and so is used to do, you can basically build a simple little the pages.
Getting Started
1. What is HTML
The full name of HTML Hyper Text Markup Language, meaning hypertext Biaoji language, regarded as the front end of a network language, framework for building Web pages. The CSS is to look at the contents of a fixed location on the page, font format, JS is to achieve a more beautiful features.
Why it is hypertext it, as you can remember, it can not only mark the text, but also carry images, video, music, these non-text content.
Why is it marks it, since HTML itself is structured with,, the article or some other non-text content by the block-level elements or inline layout . First, let us web content more structured, rules, and second, depending on the type of content (title, bold italic text, lists, tables, frames, audio, etc.), there are different types of elements ( <h>、<b>、<ol>、<table>、<ifram>、<audio>)
2. HelloWorld
The following is the main content of the entire writing HTML:
<!DOCTYPE html> # 声明这是HTML5
<html lang="en"> # HTML的写作格式
<head> # 头
<meta charset="UTF-8"> # 编码类型-UTF8
<title>Hello</title> # 网页标题
</head>
<body> # 网页的主体内容
Word!
</body>
</html>
effect:
Note, depending on whether a pair of elements, can be divided into:
- The elements, like
<p></p>a pair of tags, the start and end tags make up, you can call it the elements. - Empty elements, like
<br />、<img src>等they do not exist in pairs situation.
<area>
<base>
<br>
<col>
<colgroup>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>
3. various elements
Learning HTML is learning by major elements to the text and non-text content layout : a paragraph of text to use <p>the label; the list might want to use <ol></ol><ul></ul><dl></dl>标签; it may take the form <table></table>; it is possible to use as audio <audio>tags, etc., etc. .
& emsp: Now, I will explain a few common items:
3.1. Text elements
<h1> #一级大标题，<h2>对应二级，以此类推
<p> #paragraph，块级元素，就是用于存放一段文字
<b> #bold加粗文字
<i> #italic文字斜体
3.2 semantic elements
Some hardware, such as "screen reader," according to the text content of the page, read aloud. There are some elements, just to express some tone, etc., have been developed for the semantic elements. As "! ... two battalion commander, the father of Italian guns to take over ..." This sentence requires high tone to read, you can use the following two elements:
<em> #强调
<strong> #把文本定义为语气更强的强调的内容。
3.3. List
Ordered list:
<ol>
<li> </li>
<li> </li>
</ol>
Unordered list
<ul>
<li> </li>
<li> </li>
</ul>
Custom List
<dl>
<dt> </dt>
<dd> </dd>
</dl>
3.3 Functional elements
<a href=""> </a> #指向一个网址，也可以是相对路径的网页内网址
<addr> # 缩写词
<address> # 地址
<blockquote cite=""> #引用 <q>也是
3.5. Form
<table>
<tr><th></th></tr>
</table>
3.6. Pictures, audio, video
<img src=""> # 图片
<audio src=""></audio> #音频
<video src=""></video> # 视频
3.7. demo
All of these elements make a demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is a demo</title>
</head>
<body>
<h1>这是一级大标题</h1>
<p>
<br />这是一个段落，下面我为大家讲述一个故事，一位美国的数学家，他的名字叫科尔。
早在20世纪初的时候，当时在数学界有这样一道难题，那就是<b>2的76次方减1的结
果是不是人们所猜想的质数</b>。当时有很多科学家都在努力地攻克这一数学难关，
但是都没有如愿。直到后来，在一次纽约数学学会的年会上，在年会现场，数学家
科尔通过令人信服的运算，非常成功地证明了这道难题。有人问他:"请问您论证这
个课题大约一共花了多长时间?"他回答说："<i>我花掉了三年里的全部星期天</i>。"
</p>
<em> 二营长 </em>
<strong> 把老子的意大利炮拿过来</strong>
<ol>
<li>这是有序列表的第一列</li>
<li> 这是有序列表的第二列</li>
</ol>
<ul>
<li> 这是无序列表的第一列</li>
<li> 这是无序列表的第二列</li>
</ul>
<dl>
<dt>dt1</dt>
<dd>dd1 </dd>
</dl>
<a href="https://www.baidu.com/">指向百度的首页</a>
<abbr title="Professor">Pro</abbr>
<address>上海市东方明珠</address>
<table>
<tr>这是第一行<th>1</th><th>2</th></tr>
</table>
<blockquote cite="https://www.baidu.com/">百度一下，你就知道</blockquote>
<img src="//www.baidu.com/img/bd_logo1.png?where=super">
<div><audio src="http://www.xinei.com/13846.mp3" autoplay="autoplay" controls="controls"></audio></div>
<video src="blob:https://www.iqiyi.com/f8938ca5-4281-4273-add4-73ed00736dc2"></video>
</body>
</html>
Results are as follows:
