旧游无处不堪寻
无寻处,惟有少年心
HTML(三)

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

img 元素(Image)


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

  1. src 属性用来标识图片资源位置,可以是相对路径,也可以是绝对路径
  2. 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 标记的作用是设置链接,既可以用于文档外链接,也可以用于文档内导航。
有两个重要属性:

  1. href 属性用于标识链接位置,可以是相对路径,也可以是绝对路径。
  2. 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://[email protected]">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 元素(Header)

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>