HTML基础学习笔记

一、html 基本结构

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <base href="http://www.runoob.com/images/" target="_blank">
 6     <link rel="stylesheet" type="text/css" href="mystyle.css">
 7     <style type="text/css">
 8         body {background-color:yellow}
 9         p {color:blue}
10     </style>
11     <script>document.write("Hello World!")</script>
12 <title>html教程(runoob.com)</title>
13 </head>
14 <body>
15 ........
16 </body>
17 </html>

1、<!DOCTYPE>声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html> 

<!DOCTYPE HTML> 

<!doctype html> 

<!Doctype Html>

DOCTYPE 声明

2、HTML <head> 元素

<head> 元素包含了所有的头部标签元素。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

3、HTM.<title>元素

<title> 标签定义了不同文档的标题。

1 <head> 
2     <meta charset="utf-8"> 
3     <title>文档标题</title>
4 </head>

4、HTML <meta> 元素

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

为搜索引擎定义关键词:

1 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

1 <meta name="description" content="Free Web tutorials on HTML and CSS">

定义网页作者:

1 <meta name="author" content="Hege Refsnes">

每30秒中刷新当前页面:

1 <meta http-equiv="refresh" content="30">

5、中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

1 <meta charset="UTF-8">

6、HTML<base>元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

1 <head>
2     <base href="http://www.runoob.com/images/" target="_blank">
3 </head>

7、HTML<link>元素

1 <head>
2     <link rel="stylesheet" type="text/css" href="mystyle.css">
3 </head>

8、HTML<style>元素

1 <head>
2     <style type="text/css">
3     body {background-color:yellow}
4     p {color:blue}
5     </style>
6 </head>

9、<script>元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

二、html 标题

1、标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的.

<h1> 定义最大的标题。 <h6> 定义最小的标题。

注释: 浏览器会自动地在标题的前后添加空行。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 </head>
 7 <body>
 8 
 9     <h1>这是标题 1</h1>
10     <h2>这是标题 2</h2>
11     <h3>这是标题 3</h3>
12     <h4>这是标题 4</h4>
13     <h5>这是标题 5</h5>
14     <h6>这是标题 6</h6>
15 
16 </body>
17 </html>

2、html 水平线

<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

3、html 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

<!-- 这是一个注释 -->

4、标题常用标签

标签	描述
<html>	定义 HTML 文档
<body>	定义文档的主体
<h1> - <h6>	定义 HTML 标题
<hr>	定义水平线
<!--...-->	定义注释

三、html 段落

1、段落

段落是通过 <p> 标签定义的。

<p>这是一个段落 </p>
<p>这是另一个段落</p>

2、换行

<p>这个<br>段落<br>演示了分行的效果</p>

3、段落常用标签

标签	描述
<p>	定义一个段落
<br>	插入单个折行（换行）

四、格式化文本

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
　　<b> 与<i> 定义粗体或斜体文本。
　　<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

五、连接

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

1、HTML 链接语法

<a href="url">链接文本</a>

href 属性描述了链接的目标。.

2、 - target 属性：

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档

3、- id 属性

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<a href="http://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

六、表格

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

 1 <table class="reference notranslate" style="height: 235px; width: 427px; border: 1px solid #9acd32;" align="left">
 2     <tbody>
 3         <tr>
 4             <td style="background-color: #9acd32;">标签</td>
 5             <td style="background-color: #9acd32;">描述</td>
 6         </tr>
 7         <tr>
 8             <td><span style="color: #ff6600;">&lt;table&gt;</span></td>
 9             <td>定义表格</td>
10         </tr>
11         <tr>
12             .....
13         </tr>
14 
15     </tbody>
16 </table>

七、列表

1、有序列表

1 <ol>
2     <li>Coffee</li>
3     <li>Milk</li>
4 </ol>

2、无序列表

1 <ul>
2     <li>Coffee</li>
3     <li>Milk</li>
4 </ul>

3、自定义列表

1 <dl>
2     <dt>列表项目一</dt>
3     <dd>- 自定义列表项目一的描述</dd>
4     <dt>列表项目二</dt>
5     <dd>- 列表项目二的描述</dd>
6 </dl>

4、其它实例

4.1 不同类型的有序列表

 1 <h4>编号列表：</h4>
 2 <ol>
 3  <li>Apples</li>
 4  <li>Bananas</li>
 5  <li>Lemons</li>
 6  <li>Oranges</li>
 7 </ol>  
 8 
 9 <h4>大写字母列表：</h4>
10 <ol type="A">
11  <li>Apples</li>
12  <li>Bananas</li>
13  <li>Lemons</li>
14  <li>Oranges</li>
15 </ol>  
16 
17 <h4>小写字母列表：</h4>
18 <ol type="a">
19  <li>Apples</li>
20  <li>Bananas</li>
21  <li>Lemons</li>
22  <li>Oranges</li>
23 </ol>  
24 
25 <h4>罗马数字列表：</h4>
26 <ol type="I">
27  <li>Apples</li>
28  <li>Bananas</li>
29  <li>Lemons</li>
30  <li>Oranges</li>
31 </ol>  
32 
33 <h4>小写罗马数字列表：</h4>
34 <ol type="i">
35  <li>Apples</li>
36  <li>Bananas</li>
37  <li>Lemons</li>
38  <li>Oranges</li>
39 </ol>

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

八、表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

1 <form>
2 .
3 input 元素
4 .
5 </form>

1、文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

1 <form>
2     姓: <input type="text" name="firstname"><br>
3     名字: <input type="text" name="lastname">
4 </form>

2、密码字段

密码字段通过标签<input type="password"> 来定义:

1 <form>
2     密码: <input type="password" name="pwd">
3 </form>

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

3、单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

1 <form>
2     <input type="radio" name="sex" value="male">Male<br>
3     <input type="radio" name="sex" value="female">Female
4 </form>

4、复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

1 <form>
2     <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
3     <input type="checkbox" name="vehicle" value="Car">I have a car 
4 </form>

5、提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

1 <form name="input" action="html_form_action.php" method="get">
2     Username: <input type="text" name="user">
3     <input type="submit" value="提交">
4 </form>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

6、简单下列表

1 <form action="">
2     <select name="cars">
3         <option value="volvo">Volvo</option>
4         <option value="saab">Saab</option>
5         <option value="fiat">Fiat</option>
6         <option value="audi">Audi</option>
7     </select>
8 </form>

7、预选下拉列表

1 <form action="">
2     <select name="cars">
3         <option value="volvo">Volvo</option>
4         <option value="saab">Saab</option>
5         <option value="fiat" selected>Fiat</option>
6         <option value="audi">Audi</option>
7     </select>
8 </form>

8、文本域

1 <textarea rows="10" cols="30">
2 我是一个文本框。
3 </textarea>

9、普通按钮

1 <form action="">
2     <input type="button" value="Hello world!">
3 </form>

10、其它实例：

带分组匡的表单

1 <form action="">
2     <fieldset>
3     <legend>Personal information:</legend>
4         Name: <input type="text" size="30"><br>
5         E-mail: <input type="text" size="30"><br>
6         Date of birth: <input type="text" size="10">
7     </fieldset>
8 </form>
9

带有分组框的表单

1 <form action="demo-form.php">
2     First name: <input type="text" name="FirstName" value="Mickey"><br>
3     Last name: <input type="text" name="LastName" value="Mouse"><br>
4     <input type="submit" value="提交">
5 </form>
6 
7 <p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

带有输入框及提交按钮

1 <form action="demo-form.php" method="get">
2   <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
3   <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br>
4   <input type="submit" value="提交">
5 </form>

带有复选框和按钮的表单

1 <form action="demo-form.php" method="get">
2   <input type="radio" name="sex" value="Male"> Male<br>
3   <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
4   <input type="submit" value="提交">
5 </form>

带有单选按钮的表单

**表单标签**
标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

九、图像 img

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

定义图像的语法是：

1 <img src="url" alt="some_text" width="304" height="228">

说明：

URL 指存储图像的位置。
ALT 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

1 <p>创建图片链接:
2 <a href="http://www.runoob.com/html/html-tutorial.html">
3 <img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
4 
5 <p>无边框的图片链接:
6 <a href="http://www.runoob.com/html/html-tutorial.html">
7 <img border="1" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

无边框、有边框图像

1 <p>点击太阳或其他行星，注意变化：</p>
2 
3 <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
4 
5 <map name="planetmap">
6   <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
7   <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
8   <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
9 </map>

带有图像映射

**图像标签**
标签	描述
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

十、块、内联状元素

1、HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <div>、<h1>, <p>, <ul>, <table>

2、HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <span>、<b>, <td>, <a>, <img>

十一、框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:

1 <iframe src="URL"></iframe>

该URL指向不同的网页。

1、设置 iframe 高度和宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

1 <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

2、移除框架边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:

3、使用框架来显示连接目录文件

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性，如下实例:

1 <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
2 <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

posted @ 2016-08-17 15:44 浪际天涯1980 阅读(156) 评论(0) 收藏举报

刷新页面返回顶部