HTML

HTML Text
- HTML Element
  - Introduction
  - Syntax
  - Nest
  - Blank element
  - Wrap
- Attributes
  - Introduction
  - align
  - Color
- 文本格式化
  - Introduction
  - <Pre>
- Style
HTML hypertext

HTML Text

HTML Element

Introduction

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

This is an element：

<p>shiyanlou</p>

Syntax

HTML 元素以开始标签起始
HTML 元素以结束标签终止
HTML 元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

Nest

<html>
    <body>
        <p>let's go to shiyanlou</p>
    </body>
</html>

Blank element

没有内容的 HTML 元素被称为空元素。< br> 就是没有关闭标签的空元素（< br> 标签用来定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 < br/>，是关闭空元素的正确方法
即使 < br> 在所有浏览器中都是有效的，但使用 < br/> 其实是更长远的保障，说了那么多就是想说以后换行就用 < br/>。

Wrap

<\br> 相当于换行符号 \n
<p> </p>也可以实现换行，但是行后多一个空行
hello world <\br><\br> 等价于 <p>hello world</p>

Attributes

Introduction

是在 HTML 元素的开始标签中定义。
总是以名称和值对应的形式出现，比如：name="value"。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

例子：

<a href="http://www.shiyanlou.com">shiyanlou</a>

href="http://www.shiyanlou.com"，这一部分就叫做 <a> 标签的属性，是对 <a> 标签的补充说明，既指向的网页。这样的标签还有很多，下面我们就来动手做几个练习

align

<h1 align="center">Hello world!</h1>

Color

<body bgcolor="#000000"> <!-- 16 进制数 -->
<body bgcolor="rgb(0,0,0)"> <!-- rgb 数值 -->
<body bgcolor="black"> <!-- 颜色名 -->

文本格式化

Introduction

<b>（bold）粗体
<big>（big）大字体
<em>（emphasized）强调字
<i>（italic）斜体
<small>（small）小字体
<strong>(strong)加重语气

<Pre>

所谓预格式文本就是指代码叶和网页展示是一样的格式，不用额外添加换行符标签就能换行

<pre>
1st line
2nd line
3rd line
</pre>

Style

<p style="text-align:center;font-family:time;color:blue">
Hello world!
</p>

同一标签内的 Text 有相同的 style

HTML hypertext

HTML Links

Adding links for text and images

<html>
<body>

    <p>let's have an example</p>

    <p>   
    <a href="http://www.shiyanlou.com">
    shiyanlou
    </a>
    </br>
    <a href="http://www.baidu.com">
    </img src="logo.png"> <!--显示相同 PATH 下的 logo.png 图片-->
    </a>
    </p>


</body>
</html>

Opening methods

超级链接打开方式分为
本页打开
在新的浏览器窗口打开
超级链接打开新页面的默认方式是自我覆盖（就是在本页打开）。
超级链接标签提供了 target 属性进行设置，取值分别为
_self（自我覆盖，默认）
_blank（创建新窗口打开新页面）

Example

<a href="http://www.baidu.com" target="_blank">

Prompt text

当光标停留在超链接上时，Prompt text 就会显现。
由 title 属性实现。

<a href="http://www.baidu.com" target="_blank" title="baidu">

Anchor

锚 (Anchor) 就是用于在单个页面内不同位置的跳转

<p>
<a href="#c1">anchor_1</a>
</p>
<p>
<a name="c1">anchor_1 jumps to here</a>
</p>

HTML Table

Introduction

HTML 網頁設計不可或缺的元素就是表格（Table）
通常表格用來做版面的排版
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
表格的幾個重要标签
<table>: 定义表格
<tr>: 每个表格的行
<td>: 每个行的单元格的内容
<th>: 定义表头

Example:

<html>
<title >TABLE</title>
<body style="font-size:20px">
     <table border="1">  
     <tr>
    <td>T11</td>
    <td>T12</td>
    </tr>
    <tr>
    <td>T21</td>
    <td>T22</td>
    </tr>
     </table>   
</body>
</html>

Important tags & attributes

标签：<th>: 设置表头
标签：<caption>: 设置表的标题
属性：cellpadding = "...": 设置单元格边距
属性：bgcolor="...": 设置表格背景颜色
属性：background="...": 以某张图片作为表格背景
属性：rowspan="...": 控制此单位所占行数
属性：colspan="...": 控制此单位所占列数

HTML Image

Insert an image

<body background="PATH to the image">
<img src="路径加文件名">

align

<img src="PATH" align="top">

resize

width="80" height="80"

map

有时我们需要实现，点击图片的不同地方跳转到不同的地方
涉及到的标签就是 <map> 标签，用来指定图片, <area> 用来指定超链接区域

<html>
<head>
<title>image</title>
</head>
<body>
<p>
<img src="logo.png" usemap="#map"/>
<map name="map">
    <area shape="rect" coords="0, 0, 50, 50" href="http://www.baidu.com" target="_blank">
    <!--只有图片从左上角 (0,0) 坐标到右下角 (50,50) 的区域响应点击-->
</map>
</body>
</html>

HTML List

Ordered List

<ol>
<li>1st element</li>
<li>2nd element</li>
<li>3rd element</li>
</ol>

Attributes
start: 起始编号，默认是 1
type: 编号方法，默认是阿拉伯数字
- a: a, b, c, …
- A: A, B, C, …
- i: i, ii, iii, …
- I: I, II, III, …

Unordered List

<ul>
<li>1st element</li>
<li>2nd element</li>
<li>3rd element</li>
</ul>

Attributes
Disc: 实心黑点 (默认)
Cirle: 小圈
square: 方点

Defined List

<dl>
<dt>1st</dt> <!--Define the title-->
    <dd>1st element</dd>
<dt>2nd</dt>
    <dd>2nd element</dd>
<dt>3rd</dt>
    <dd>3rd element</dd>
</ul>

HTML Block

Introduction

HTML元素被定义为块级元素或内联元素
块级元素 (block) 特性:
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
宽度 (width)、高度 (height)、内边距 (padding) 和外边距 (margin) 都可控制
例子: <h1>, <p>, <ul>, <table> 标签
内联元素 (inline) 特性:
和相邻的内联元素在同一行
宽度(width)、高度(height)、内边距的top/bottom (padding-top/padding-bottom) 和外边距的 top/bottom (margin-top/margin-bottom) 都不可改变
例子: <b>, <td>, <a>, <img> 标签

<div>

<div> 用来定义文档中的分区或节（division/section），没有特定的含义
它是容器，用于组合其他 HTML 元素

Example:

<html>
<head>
<title>Div</title>
</head>
<body>
<div style="color:blue;font-family=arial">
<h3>Inside the div, font color is blue</h3>
<p>Paragraphs are combined</p>
<p>With the same style</p>
</div>
<h3>Outside the div, font color is black</h3>
</body>
</html>

HTML 布局

网页布局可以通过 <table> 元素，或者 <div> 元素实现

利用 <talble> 布局

<table width="100">
    <tr>
        <td colspan="2" style="background-color: royalblue">
            <h1 align="center">Part One</h1>
        </td>
    </tr>

    <tr valign="top">
        <td style="background-color: darkorange;width:300px">
        <h1>Part Two</h1>
        </td>
        
        <td style="background-color: forestgreen;height:500px;width:700px;">
            <h1>Part Three</h1>
        </td>
    </tr>

    <tr>
        <td colspan="2" style="background-color: powderblue;height: 100px">
        <h1>Part Four</h1>
        </td>
    </tr>

</table>

利用 <div> 布局

<head>
  <style>
    div#container{width:200px;height:90px;background-color:black;color:white}
    div#header{background-color:royalblue;height:20px}
    div#sidebar{background-color:darkorange;height:50px;width:50px;float:left}
    div#mainbody{background-color:forestgreen;height:50px;width:150px;float:left}
    div#footer{background-color:darkblue;height:20px;clear:both}
    div#formcontainer{width:200px;height:220px;background-color:grey;color:white}
  </style>
</head>
<body>
<div id="container">
  <div id="header">
    Part One
  </div>
  <div id="sidebar">
    Part Two
  </div>
  <div id="mainbody">
    Part Three
  </div>
  <div id="footer">
    Part Four
  </div>
</div>

渲染结果：

Part Three

### HTML 表单 ```html

</html> ``` 渲染结果：