HTML笔记（二）
- HTML CSS
- HTML 图像
- HTML 表格
- HTML 列表
- HTML 区块
- HTML 布局
- HTML 表单
HTML CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
1. 如何使用CSS
CSS 是在 HTML 4 开始使用的,目的是为更好的渲染HTML元素。
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用”style” 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件。
2. 内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。如显示出如何改变段落的颜色和左外边距：
<p style=”color:blue;margin-left:20px;” >这是一个段落。</p>
3. 内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<head>
<style type=”text/css” >
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
4. 外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” >
</head>
HTML 图像
1. HTML 图像-图像标签<img>和源属性Src
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，它只包含属性，且没有闭合标签。
要在页面上显示图像，你需要使用源属性src。源属性的值是图像的 URL 地址。
定义图像的语法如：
<img src=”url” alt=”some_text” >
URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
2. HTML 图像-Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。如：
<img src=”boat.gif” alt=”Big Boat” >
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
3. HTML 图像-高度与宽度
height 与 width 属性用于设置图像的高度与宽度。
属性值默认单位为像素，如:
<img src=”pulpit.jpg” alt=”Pulpit rock” width=”304” height=”228” >
指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。另外，加载图片是需要时间的，所以要慎用图片。
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
1. HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border=”1” >
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
2. HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border=”1” >
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
3. HTML 表格标签
- <table> 定义表格
- <th> 定义表格的表头
- <tr> 定义表格的行
- <td> 定义表格单元
- <caption> 定义表格标题
- <colgroup> 定义表格列的组
- <col> 定义用于表格列的属性
- <thead> 定义表格的页眉
- <tbody> 定义表格的主体
- <tfoot> 定义表格的页脚
HTML 列表
HTML 支持有序、无序和定义列表:
有序列表如:
- 第一个列表项
- 第二个列表项
- 第三个列表项
无序列表如：
- 列表项
- 列表项
- 列表项
1. HTML 无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点进行标记。
无序列表使用 <ul> 标签，如：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2. HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
3. HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
4. HTML 列表标签
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
HTML 区块
HTML 可以通过 <div> 和 <span>将元素组合起来。
1. HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
2. HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
3. HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，
4. HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
HTML 布局
网页布局对改善网站的外观非常重要，要慎重设计您的网页布局。
1. 网站布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
注意，虽然我们可以使用HTML的table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的，表格不是布局工具。
2. 使用<div> 元素
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Lamber的博客(lamber1123.github.io)</title>
</head>
<body>
<div id=”container” style=”width:500px”>
<div id=”header” style=”background-color:#FFA500;”>
<h1 style=”margin-bottom:0;”>主要的网页标题</h1></div>
<div id=”menu” style=”background-color:#FFD700;height:200px;width:100px;float:left;”>
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left;”>
内容在这里</div>
<div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”>
版权 Lamber</div>
</div>
</body>
</html>
效果图如下：
3. 使用<table> 元素
使用 HTML <table> 标签是创建布局的一种简单的方式。
大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Lamber的博客(lamber1123.github.io)</title>
</head>
<body>
<table width=”500” border=”0”>
<tr>
<td colspan=”2” style=”background-color:#81c7db;”>
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style=”background-color:#00cdff;width:100px;”>
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style=”background-color:#eeeeee;height:200px;width:400px;”>
内容在这里</td>
</tr>
<tr>
<td colspan=”2” style=”background-color:#81c7db;text-align:center;”>
版权 Lamber</td>
</tr>
</table>
</body>
</html>
效果图如下：
4. 更好的布局选择
使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板。
HTML 表单
HTML 表单用于收集不同类型的用户输入。
<form action=””>
Username: <input type=”text” name=”user”><br>
Password: <input type=”password” name=”password”>
</form>
其中密码会隐藏成黑圆点，效果如下：
1. 表单的使用
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
…
input 元素
…
</form>
2. 文本 type-text
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的，如文本域（text）。
文本域通过<input type=”text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
但是表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
<form>
First name: <input type=”text” name=”firstname”><br>
Last name: <input type=”text” name=”lastname”>
</form>
浏览器显示效果如下:
3. 密码 type-password
密码字段通过标签 来定义。密码字段字符不会明文显示，而是以星号或圆点替代。
<form>
Password: <input type=”password” name=”pwd”>
</form>
浏览器显示效果如下:
4. 单选按钮 type-radio
<input type=”radio”> 标签定义了表单单选框选项
<form>
<input type=”radio” name=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” value=”female”>Female
</form>
浏览器显示效果如下:
5. 复选框 type-radio
<input type=”checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type=”checkbox” name=”vehicle” value=”Bike”>I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car”>I have a car
</form>
浏览器显示效果如下:
6. 提交按钮 type-submit
<input type=”submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理：
<form name=”input” action=”html_form_action.php” method=”get”>
Username: <input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
</form>
浏览器显示效果如下:
7. HTML 表单标签
- <form> 定义供用户输入的表单
- <input> 定义输入域
- <textarea> 定义文本域 (一个多行的输入控件)
- <label> 定义了 <input> 元素的标签，一般为输入标题
- <fieldset> 定义了一组相关的表单元素，并使用外框包含起来
- <legend> 定义了 <fieldset> 元素的标题
- <select> 定义了下拉选项列表
- <optgroup> 定义选项组
- <option> 定义下拉列表中的选项
- <button> 定义一个点击按钮
- <datalist> 指定一个预先定义的输入控件选项列表
- <keygen> 定义了表单的密钥对生成器字段
- <output> 定义一个计算结果