根底的HTML常识

1.首先以<!doctype html>申明结尾

如若不以此申明结尾，那么浏览器会以quirky mode解决，
对于<!doctype html>
doctype与html无论大小写均可，在保障doctype与html之间留有一个空格的前提下，html前面能够打多个空格，演示以下状况:
<!DOCTYPE html>
<!Doctype HTML>
<!DocType html            >
均可

2.次要构造

<!doctype html><html><head><meta charset="utf-8"><title>                 </title></head><body></body></html>

上面顺次解释：
对于tag,html由tag组成，所有tag均有开始标签，局部以</tag>完结，并非要求所有都有完结标签。
首先一个html文档蕴含<head>与<body>，
1.<title>与</title>之间能够填充任意字符，示意你网页的名字，即浏览器最上方的网页名字栏显示的内容
2.<meta>的charset="utf-8"是指该网页编码为utf-8，对于标签的属性，其属性值是以单引号或者双引号蕴含的
3.<body>局部则显示网页的主界面

3.flow 与 phrase

次要讲HTML5讲以前的block元素与inline元素归类为flow与phrase，常见的两个代表:
<div> 块级元素:每个<div>均会换行
<span> 行内元素：元素全副显示在一行内，不换行
留神：在<span>外面蕴含<div>是谬误的，如<span><div></div></span>

4.simantic-elements

为了便于人们的了解，许多标签具备simantic的含意，也就是依据标签名能大抵推断标签的作用，比方:
<head>
<body>
<section>
<article>
<footer>
等等

5.list

想要在网页中显示相似于清单的成果，例如：

能够应用<tag>:

    My typical dinner shopping list:    <ul>      <li>Milk</li>      <li>Donuts</li>      <li>Cookies        <ul>          <li>Chocolate</li>          <li>Sugar</li>          <li>Peanut Butter</li>        </ul>      </li>      <li>Pepto Bismol</li>    </ul>

以<ul>开启一个清单，其中的子项是<li>形容，清单能够嵌套清单
除了应用<ul>与<li>外，还能够应用<ol>与<li>

    <ol>      <li>Open box</li>      <li>Take out cookie</li>      <li>Make a Double Oreo        <ol>          <li>Peel off the top part</li>          <li>Place another cookie in the middle</li>          <li>Put back the top part</li>        </ol>      </li>      <li>Enjoy!</li>    </ol>


<ol>，<li>则有主动排序编号的成果

6.Entities Reference

如果想在网页中显示一些<>之类的，但不想被HTML当作源码编译，就得应用entities reference,
比方以下含意等价:
<:&amplt;
&gt:&ampgt;
&:&ampamp;
相当于如果你想在你的网页上显示<div>，而不是将<div>编译，能够写成&amplt; div &ampgt;

&quto;显示为"引号，比拟有用的一个是&ampnbsp;
nbsp的意思是no broken space，咱们晓得，当咱们把浏览器页面的宽度放大，段落间的一些单词就会换行，如果你想让某三个单词之间不换行，或是换行时依然在一起而不被宰割，在第一个单词与第二个单词之后加&ampnbsp;吧
victory&nbsp;nor&nbsp;defeat.

7.链接跳转

标签&lta&gt能够实现连贯跳转，只需在&lta href="你要跳转的链接"&gt，即可，能够是内部链接，也能够是外部链接，即.html后缀的文件，与以后html文件在同一个文件夹下

<!doctype html><html><head>  <meta charset="utf-8">  <title>Links</title></head><body>  <h1 id="top">Links to Sections of The Same Page</h1>  <section>    <ul>      <!-- Link to every section in the page -->      <li><a href="#section1">#section1</a></li>      <li><a href="#section2">#section2</a></li>      <li><a href="#section3">#section3</a></li>      <li><a href="#section4">#section4</a></li>      <li><a href="#section5">#section5</a></li>      <li><a href="#section6">#section6</a></li>    </ul>  </section>  <section id="section1">

将一个tag的id指定为某个值，在href外面加上前缀#，则可实现点击跳转到该局部，相似于目录导航

8.图片显示

应用标签<img src="图片链接，与上文中的跳转链接别无他样" width='' height=''>，展现图片时最好加上width与height属性，这样你能够提前告知浏览器你所要出现的图片大小，如果不设置width和height，那么加载图片时会忽然跳进去，体验不好
<img>是inline element