自动摘要: 简单的HTML基础 ```html <!DOCTYPEhtml>
<metacharset=”utf8”>
HTML基础 ……..
简单的HTML基础
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML基础</title> </head> <body> <h1>我的第一个标题</h1> <h2>我的第二个标题</h2> <p>我的第一个段落。</p> <img src="/images/logo.jpg" width="255" height="255"/><br> <a href="www.baidu.com">百度</a> </body> </html>
|
标签 |
描述 |
|
定义 HTML 文档 |
|
定义文档的主体 |
- |
定义 HTML 标题 |
|
定义水平线 |
|
定义注释 |
|
插入换行 |
|
定义一个段落 |
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
1 2 3 4 5 6 7 8 9
| <!DOCTYPE html> <html>
<body> <p>这是第一个段落。</p> </body>
</html>
|
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,**比如:name=”value”**。
下面列出了适用于大多数 HTML 元素的属性:
属性 |
描述 |
class |
为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id |
定义元素的唯一id |
style |
规定元素的行内样式(inline style) |
title |
描述了元素的额外信息 (作为工具条使用) |
HTML 文本格式化标签
标签 |
描述 |
|
定义粗体文本 |
|
定义着重文字 |
|
定义斜体字 |
|
定义小号字 |
|
定义加重语气 |
|
定义下标字 |
|
定义上标字 |
|
定义插入字 |
|
定义删除字 |
HTML “计算机输出” 标签
标签 |
描述 |
|
定义计算机代码 |
|
定义键盘码 |
|
定义计算机代码样本 |
|
定义变量 |
|
定义预格式文本 |
HTML 引文, 引用, 及标签定义
标签 |
描述 |
|
定义缩写 |
|
定义地址 |
|
定义文字方向 |
|
定义长的引用 |
|
定义短的引用语 |
|
定义引用、引证 |
|
定义一个定义项目。 |
HTML 链接
href属性:指定链接的地址target属性:使用 target 属性,你可以定义被链接的文档在何处显示。id属性:id 属性可用于创建一个 HTML 文档书签。
HTML head 元素
标签 |
描述 |
|
定义了文档的信息 |
|
定义了文档的标题 |
|
定义了页面链接标签的默认链接地址 |
|
定义了一个文档和外部资源之间的关系 |
|
定义了HTML文档中的元数据 |
|
定义了客户端的脚本文件 |
|
定义了HTML文档的样式文件 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| <!DOCTYPE html> <html> <head>
<meta charset="utf-8">
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">
<title>文档标题</title>
<base href="http://www.runoob.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css"> body { background-color:yellow; } p { color:blue } </style>
<script></script> </head> <body> 文档内容...... </body> </html>
|
HTML CSS
内部样式表
1 2 3 4 5 6
| <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
|
外部样式表
1 2 3
| <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
|
HTML 图像
插入图像
1 2 3 4
| <p>一张动态图</p> <img src="images/gif.png" alt="Sorry!" width="200" height="200"> <p>一张静态图</p> <img src="images/discover.jpg" alt="Sorry!" width="200" height="200">
|
从不同位置插入图像
1 2
| <p>从不同的位置插入图片</p> <img src="http://www.runoob.com/images/logo.png" alt="Sorry!" width="336" height="69">
|
设置图像链接
1 2 3 4 5 6
| <p>创建图片链接 <a href="http://www.runoob.com/html/html-tutorial.html"> <img border="5" src="images/gif.png" alt="Sorry!" width="100" height="100"> </a> </p>
|
创建图像映射
1 2 3 4 5 6 7 8 9 10
| <p>点击太阳或其他行星,注意变化:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>
|
HTML 表格
HTML 表格标签
table标签是不建议作为布局工具使用的 - 表格不是布局工具。
标签 |
描述 |
基础表格1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <table border="1" cellpadding="10" cellspacing="5"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>90</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> </table>
|
跨行或跨列的表格单元格单元格跨列用colspan,单元格跨列用rowspan
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <h4>单元格跨两列:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
<h4>单元格跨两行:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
|
HTML
表格内的标签1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <table border="1"> <tr> <td> <p>这是一个段落</p> <p>这是另一个段落</p> </td> <td>这个单元格包含一个表格: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>这个单元格包含一个列表 <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table>
|
HTML 列表不同类型的无序列表1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <h4>不同类型的无序列表</h4> <h5>圆点列表:</h5> <ul style="list-style-type: disc"> <li>coffee</li> <li>milk</li> <li>tea</li> </ul> <h5>圆圈列表</h5> <ul style="list-style-type: circle"> <li>coffee</li> <li>milk</li> <li>tea</li> </ul> <h5>正方形列表</h5> <ul style="list-style-type: square"> <li>coffee</li> <li>milk</li> <li>tea</li> </ul>
|
不同类型的有序列表1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <h4>不同类型的有序列表</h4> <h5>编号列表</h5> <ol type="1"> <li>coffee</li> <li>milk</li> <li>tea</li> </ol> <h5>大写字母列表</h5> <ol type="A"> <li>coffee</li> <li>milk</li> <li>tea</li> </ol> <h5>小写字母列表</h5> <ol type="a"> <li>coffee</li> <li>milk</li> <li>tea</li> </ol> <h5>罗马字母列表</h5> <ol type="I"> <li>coffee</li> <li>milk</li> <li>tea</li> </ol> <h5>小写罗马字母列表</h5> <ol type="i"> <li>coffee</li> <li>milk</li> <li>tea</li> </ol> <h5>编号列表的编号从20起</h5> <ol start="20"> <li>coffee</li> <li>milk</li> <li>tea</li> </ol>
|
嵌套列表1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <h4>嵌套列表</h4> <ul> <li>coffee</li> <li>milk <ul> <li>china</li> <li>ck <ul> <li>abc</li> <li>ooo</li> </ul> </li> </ul> </li> <li>tea</li> </ul>
|
自定义列表自定义列表以 标签开始。每个自定义列表项以 - 开始。每个自定义列表项的定义以
- 开始。
1 2 3 4 5 6 7
| <h4>一个自定义列表</h4> <dl> <dt>coffee</dt> <dd>-black hot drink</dd> <dt>milk</dt> <dd>-white cold drink</dd> </dl>
|
HTML 布局1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <div id="container" style="width: 500px;" > <div id="header" style="background-color: burlywood;"> <h1 style="margin-bottom: 0;">主要的网页标题</h1></div>
<div id="menu" style="background-color: chocolate; width: 100px;height:200px;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="author" style="background-color: burlywood;clear: both;text-align: center"> 作者</div> </div>
|
HTML 表单表单是一个包含表单元素的区域。表单元素允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox)等等。
带边框的表单表单的动作属性 action 定义了服务端的文件名。****action 属性会对接收到的用户输入数据进行相关的处理
1 2 3 4 5 6 7 8
| <form action=""> <fieldset> <legend>Personal information</legend> Name:<input type="text" size="30"><br> E-mail:<input type="text"><br> Date of birth:<input type="text" size="10"> </fieldset> </form>
|
单选按钮、复选框、下拉列表、文本域、按钮1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| <form action=""> <input type="radio" name="sex" value="Male">Male <br> <input type="radio" name="sex" value="Female">Female <br> <input type="checkbox" name="vehicle" value="Bike">I like a bike <br> <input type="checkbox" name="vehicle" value="Car">I like a car <br> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <textarea rows="10" cols="30"> 我是一个文本框 </textarea> <input type="button" value="提交"> </form>
|
HTML 脚本
|