HTML(三) - A Sort Of A Blog

本篇我们将介绍图片，超链接，列表表格以及表单等元素。

img 元素(Image)

img 标记可以定义一个插入到页面的图片。
有两个重要属性:

src 属性用来标识图片资源位置，可以是相对路径，也可以是绝对路径
alt 属性用来标识图片加载失败时显示的文本内容

img 还有 width 和 height 属性来表示图片的宽高，但通常我们不使用这两个属性来更改图片尺寸，只是起到页面内占位的作用。
注意区分下面 4 种写法的异同

<img src="https://example.com/a.jpg" alt="a">
<img src="img/a.jpg" alt="a">
<img src="/img/a.jpg" alt="a">
<img src="//abc.com/img/a.jpg" alt="a">

a 元素(anchor)

a 标记的作用是设置链接，既可以用于文档外链接，也可以用于文档内导航。
有两个重要属性:

href 属性用于标识链接位置，可以是相对路径，也可以是绝对路径。
target 属性用于指定打开帧的状态，有四个值:

_blank，新窗口打开
_parent，父窗口打开
_self，自窗口打开(default)
_top，顶层窗口打开

文档外链接

<a href="https://github.com/1ess">github</a>
<a href="/demo/index.html" target="_blank">demo</a>
<a href="mailto://xxx@gmail.com">email me</a>

文档内导航

<a href="#faq">常见问题</a>
<a href="#">回顶部</a>
<a href="http://abc.com/course/abc#faq">常见问题</a>

列表元素

列表元素用来表示线性数据结构，如一组数据内容，导航栏的各个子项等。
li 元素(List item)可以嵌套在 ol 或 ul 元素内部。

无序列表 ul(Unordered list)

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

有序列表 ol(Ordered list)

常用属性:

start: 制定第一个元素的序号
reversed: 布尔属性，倒序显示
type: 列表标记样式(1，a，A，I)

<ol start="3" type="a">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

注意: ol 与 ul 默认上下外边距 1em，左内边距 40px。

定义列表 dl(Definition list)

定义列表用于名词解释。
基本标记包括:

dl(Definition list)
dt(Definition term)
dd(Definition description)

<dl>
    <dt>html</dt>
    <dd>网页文档根要素</dd>
    <dt>head</dt>
    <dd>网页头部信息描述区域</dd>
    <dt>body</dt>
    <dd>网页具体内容部分</dd>
</dl>

table 元素(Table)

table 元素用来表示二维数据结构。
基本标记包括:

table
caption
tr: table row
th: table head
td: table data
thead
tbody
tfoot

<table>
    <caption>成绩</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>99</td>
            <td>98</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>100</td>
            <td>99</td>
            <td>98</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>100</td>
            <td>99</td>
            <td>98</td>
        </tr>
    </tbody>
</table>

容器元素

div 元素(Block container)

<div lang="ja" class="japanese-part">
    無限大な夢のあとの 何もない世の中じゃ
</div>

span 元素(Inline container)

<p>I Love<span class="love-person">U</span></p>

Block 和 Inline 的区别我们在 CSS 在具体讲解。

form 元素(Form)

form 元素为用户输入创建表单，用于向服务器提交数据。
三个重要的属性:

action: 对应的服务器脚本
method: 提交的 HTTP 请求方法
enctype: 编码方式 content-type

<form action="/index.do" method="POST" enctype="multipart/form-data">
    <label for="name">name: <input type="text" id="name" name="user"></label><br>
    <label for="password">password: <input type="password" id="password" name="password"></label><br>

    <label for="bike">Bike <input type="checkbox" id="bike" name="bike"></label>
    <label for="car">Car <input type="checkbox" id="car" name="car"></label><br>

    <label for="male">Male <input type="radio" name="Sex" id="male" checked></label>
    <label for="female">Female <input type="radio" name="Sex" id="female"></label><br>

    <select name="cars" id="cars">
        <option value="volvo">Volvo</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select><br>

    <textarea name="cat" id="cat" cols="30" rows="10">The cat was playing in the garden.</textarea><br>
    
    <input type="button" value="Hello world!"><br>
    <input type="submit" value="Hello world!"><br>

</form>

语义化元素

语义化的作用，简单说来就是让机器可以读懂内容。
包括:

main 元素
article 元素
section 元素
nav 元素
aside 元素
header 元素
footer 元素

main 元素(Main)

main 标记描述文章的主要内容。

<body>
<main role="main">
    <article>
        <h1>文章标题</h1>
        <p>文章内容</p>
    </article>
</main>
</body>

article 元素(Article)

article 元素表示网页独立内容区域。

<article>
    <h1>First Post</h1>
    <p>Some content</p>
</article>
<article>
    <h1>Second Post</h1>
    <p>Some more content</p>
    <h2>Subsection</h2>
    <p>Some details</p>
</article>
<article>
    <h1>Last Post</h1>
    <p>Final bit of content</p>
</article>

section 元素(Section)

section 元素表示文章段落部分。与 article 元素配合使用。

<section>
    <h2>The Document Outline</h2>
    <p>HTML5 includes several "sectioning content" elements that affect the document outline.</p>

    <h3>Headers</h3>
    <p>The
        <code>&lt;header&gt;</code> element is one such sectioning element.
    </p>

    <h3>Footers</h3>
    <p>And so is the
        <code>&lt;footer&gt;</code> element.</p>
</section>

<section>
    <h2>Inline Semantic HTML</h2>
    <p>The
        <code>&lt;time&gt;</code> element is semantic, but it's not sectioning content.</p>
</section>

用于页面导航，如页面导航条。

<h1>Interneting Is Easy!</h1>
<nav>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Blog</a></li>
        <li><a href='#'>Sign Up</a></li>
    </ul>
</nav>

aside 元素(Aside)

用于页面附加性内容。

<aside>
    <h3>解释</h3>
    <p>解释文字</p>
</aside>

header 标记用于文章或区块头部。

文章头部

<article>
    <header>
        <h1>Semantic HTML</h1>
        <p>By Troy McClure. Published January 3rd</p>
    </header>
    <p>This is an example web page explaining HTML5 semantic markup.</p>
</article>

导航头部

<body>
<header>
    <h1>Interneting Is Easy!</h1>
    <nav>
        <ul>
            <li><a href='#'>Home</a></li>
            <li><a href='#'>About</a></li>
            <li><a href='#'>Blog</a></li>
            <li><a href='#'>Sign Up</a></li>
        </ul>
    </nav>
</header>
</body>

footer 标记用于文章或区块脚部。如作者信息，文章出处等。

文章脚部

<article>
    <header>
        <h1>Semantic HTML</h1>
        <p>By Troy McClure. Published January 3rd</p>
    </header>
    <p>This is an example web page explaining HTML5 semantic markup.</p>
    <footer>
        <p>This fake article was written by somebody at InternetingIsHard.com, which is a pretty decent place to learn how
            to become a web developer. This footer is only for the containing
            <code>&lt;article&gt;</code> element.</p>
    </footer>

</article>

页脚

<footer>
  <p>&copy; 2017 InternetingIsHard.com</p>
</footer>