HTML学习
- HTML简介
1.1定义
html是一种标记语言,标记语言是一套标记标签 (markup tag),其使用标记标签来描述网页,html文档也叫做web页面。
1.2 html页面结构
<!DOCTYPE html>——有助于浏览器中正确显示网页,其为HTML5的通用声明
<html>
<head>
<meta charset="utf-8">——防止出现乱码,需要在头部将字符声明为 UTF-8 或 GBK
<title>菜鸟教程(runoob.com)</title>——页面标题
</head>
<body>——只有<body>标签里的内容才会显示在浏览器中
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
2.HTML基础
2.1 html标题<head></head>
标题是通过<h1> - <h6> 标签来定义的,<h1>→<h6>标题字体越来越小,即<h1> 定义最大的标题。 <h6> 定义最小的标题。
2.2 html段落<p></p>
段落是通过标签 <p> 来定义的
2.3 html链接<a></a>
链接是通过标签 <a> 来定义的,如<a href=“指定的链接地址”>这是一个链接</a>
在 href 属性中指定链接的地址
2.4 html图像< img ></ img >
图像是通过标签 <img> 来定义的,如<img src="/images/logo.png" width="258" height="39" />,在src属性中指定图像位置
3.HTML元素
3.1<开始标签>元素内容</结束标签>
实例:<p>这是第一个段落。</p>
HTML 元素以开始标签起始,如<p>
HTML 元素以结束标签终止,如</p>
元素的内容是开始标签与结束标签之间的内容,如这是一个段落。
3.2空元素
某些 HTML 元素具有空内容,空元素在开始标签中进行关闭(以开始标签的结束而结束)。
<br> 标签定义换行,是没有关闭标签的空元素。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法。
实例:<p>这个<br>段落<br>演示了分行的效果</p>
4.HTML属性
4.1 html属性常用引用属性值
属性一般描述于开始标签。
属性值应该始终被包括在引号内,双引号是最常用的,不过使用单引号也没有问题。但是当属性值本身就含有双引号,那么必须使用单引号,如name='John "ShotGun" Nelson'。
4.2 html属性参考手册常用
<!—写上注释内容-->定义注释
<hr>定义水平线,hr元素可用于分隔内容,如
<p>这是第一个段落。</p>
<hr>
<p>这是第二个段落。</p>
<hr>
<p>这是第三个段落。</p>
<html>定义 HTML 文档
<head>定义关于文档的信息
<title>定义文档的标题
<h1> <h6>定义 HTML 标题
<body>定义文档主体
<main>定义文档的主体部分。
<aside>定义页面的侧边栏内容
<br>定义换行
<button>定义一个点击按钮
<caption>定义表格标题
<datalist>定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值
<div>定义文档中的节
<header>定义了文档的头部区域
<link>定义文档与外部资源的关系
<style>定义文档的样式信息。
5.HTML文本格式化
5.1html格式化标签
使用标签 <b> 与 <i>对输出的文本进行格式, 如:粗体(bold)/斜体(italic)
实例:<b>加粗文本</b> <i>斜体文本</i> <b><i>斜体加粗文本</i></b>
通常标签 <strong> 代替加粗标签 <b> 来使用, <em>代替<i>标签使用。然而,这些标签的含义是不同的:
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。
5.2实例:删除字效果、插入字效果
<del> 和 <ins> 一起使用,描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线,在新插入文本下添加一条下划线。
如,<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
5.3实例:文本方向
<bdo> 标签用来覆盖默认的文本方向。
如,<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
6.HTML链接
6.1 html超链接
HTML使用标签 <a> 来设置超文本链接,在标签 <a> 中使用了 href 属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
6.2 html链接语法
<a>元素具有以下属性:
- href:指定链接目标的URL,这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
- target(可选):指定链接如何在浏览器中打开。常见的值包括 _blank(在新标签或窗口中打开链接)和 _self(在当前标签或窗口中打开链接)。
如,<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>,表示在新窗口打开文档。
- title(可选):提供链接的额外信息,通常在鼠标悬停在链接上时显示为工具提示。
- rel(可选):指定与链接目标的关系,如 nofollow、noopener 等。
6.3各类链接
"链接文本" 不必一定是文本,图片或其他 HTML 元素都可以成为链接。
- 文本链接:最常见的链接类型是文本链接,它使用 <a> 元素将一段文本转化为可点击的链接,例如:<a href="https://www.example.com">访问示例网站</a>
- 图像链接:您还可以使用图像作为链接。在这种情况下,<a> 元素包围着 <img> 元素。
例如:<a href="https://www.example.com">
<img src="example.jpg" alt="示例图片">
</a>
- 锚点链接:除了链接到其他网页外,您还可以在同一页面内创建内部链接,这称为锚点链接。要创建锚点链接,需要在目标位置使用 <a> 元素定义一个标记,并使用#符号引用该标记。
例如:<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>
- 下载链接:如果您希望链接用于下载文件而不是导航到另一个网页,可以使用 download 属性。例如:<a href="document.pdf" download>下载文档</a>
7.HTML头部
7.1 <head> 元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
7.2<title> 元素
<title> 标签定义了不同文档的标题,显示在搜索引擎结果页面的标题。
7.3<style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档,如:
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
</head>
7.4<meta> 元素
<meta> 一般放置于 <head> 区域。通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据也不显示在页面上,但会被浏览器解析。
如,<meta charset="utf-8"> <!-- 设置文档使用的字符编码为 UTF-8 -->
<meta name="author" content="Runoob"> <!-- 定义网页作者 -->
<meta http-equiv="refresh" content="30"> <!-- 每30s刷新当前页面 -->
7.5<link> 元素
<link> 标签定义了文档与外部资源之间的关系,<link> 标签通常用于链接到样式表,
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
7.6<script> 元素
<script>标签用于加载脚本文件,如: JavaScript
7.7<base> 元素
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接,如,<base href="http://www.runoob.com/images/" target="_blank">
8. HTML 样式- CSS
CSS用于渲染HTML元素标签的样式。
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件(最好的方式)
8.1内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性,如,<p style="color:blue;margin-left:20px;">这是一个段落。</p>
font-family(字体),color(字体颜色),font-size(字体大小),background-color(背景颜色),margin-left(距离左侧边缘的距离),text-align(文字对齐方式)
<p style="font-family:arial;color:red;font-size:20px; background-color:green; text-align:center; ">一个段落。</p>
表示字体样式为arial,字体颜色为红色,字体大小为20px,这个段落的背景颜色为绿色,文字居中。
8.2内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表,如,
<head>
<style type="text/css">
body {background-color:yellow;} <!—整个主体背景颜色 -->
p {color:blue;} <!-- 段落的字体颜色 -->
</style>
</head>
8.3外部引用
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。如,
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
9.HTML图像
定义图像的语法是<img src="url" alt="some_text">
9.1图像标签( <img>)和源属性(Src)
图像由<img> 标签定义,<img> 是空标签,即它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中,那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
9.2Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
如,<p>
一个图像:
<img src="smiley.gif" alt="Smiley face" width="32" height="32">
</p>
<p>
一个动图:
<img src="hackanm.gif" alt="Computer man" width="48" height="48">
</p>
图像与动图显示不出来,此时就显示可替换文本,告诉读者该处有什么样的图像与动图。
9.3图像高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度,属性值默认单位为像素,这是一个很好的习惯。
10. HTML 表格
表格由 <table> 标签来定义,<tr>表示表格的一行,<td>表示表格的数据单元格,<th>表示表格的表头单元格,<caption >表格标题,<tfoot > 表格页脚,<table border="1"></table>表示表格带边框,<col>表格的列。
<table> 元素表示整个表格,它包含两个主要部分:<thead> 和 <tbody>。
<thead > 用于定义表格的标题部分: 在 <thead > 中,使用 <th > 元素定义列的标题。
<tbody > 用于定义表格的主体部分: 在 <tbody > 中,使用 <tr > 元素定义行,并在每行中使用 <td > 元素定义单元格数据。
10.1水平/垂直表头标题的表格
实例1(水平表头标题):
<h4>水平标题:</h4>
<table border="1">
<tr>
<th>表头标题1</th>
<th>表头标题2</th>
<th>表头标题3</th>
</tr>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
</table>
实例2(垂直表头标题):
<h4>垂直标题:</h4>
<table border="1">
<tr>
<th>表头标题1</th>
<td>1,1</td>
</tr>
<tr>
<th>表头标题2</th>
<td>2,1</td>
</tr>
<tr>
<th>表头标题3</th>
<td>3,1</td>
</tr>
</table>
10.2带有表格标题的表格
实例:
<table border="1">
<caption>表格标题</caption>
<tr>
<th>表格表头1</th>
<th>表格表头2</th>
</tr>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
10.3单元格跨行、跨列
实例1(单元格跨两列):
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>表头标题1</th>
<th colspan="2">表头标题2</th>
</tr>
<tr>
<td>(1,1)</td>
<td>(1,2-1)</td>
<td>(1,2-2)</td>
</tr>
</table>
实例2(单元格跨两行):
<h4>单元格跨两行:</h4>
<table border="1">
<tr>
<th>表头标题1</th>
<td>(1,1)</td>
</tr>
<tr>
<th rowspan="2">表头标题2</th>
<td>(2-1,1)</td>
</tr>
<tr>
<td>(2-2,1)</td>
</tr>
</table>
10.4单元格边距(单元格内容与其边框之间的空白)
没有单元格边距:<table border="1"> </table>
有单元格边距:<table border="1" cellpadding="20"> </table>
10.5单元格间距(单元格之间的距离)
有单元格间距:<table border="1" cellspacing="10"> </table>
11.HTML列表
HTML 支持有序、无序和定义列表。
11.1有序列表(列表项使用数字、大写字母、小写字母、罗马数字、小写罗马数字来标记)
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
11.1.1数字列表
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
11.1.2.大写字母列表
<ol type="A">
<li>列表1</li>
<li>列表2</li>
</ol>
11.1.3.小写字母列表
<ol type="a">
<li>列表1</li>
<li>列表2</li>
</ol>
11.1.4.罗马数字列表
<ol type="I">
<li>列表1</li>
<li>列表2</li>
</ol>
11.1.5.小写罗马数字列表
<ol type="i">
<li>列表1</li>
<li>列表2</li>
</ol>
11.2无序列表(此列项目使用粗体圆点、圆圈、正方形进行标记)
无序列表使用 <ul> 标签。
11.2.1圆点列表(默认)
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
或者
<ul style="list-style-type:disc">
<li>列表1</li>
<li>列表2</li>
</ul>
11.2.2圆圈列表
<ul style="list-style-type:circle">
……..
</ul>
11.2.3正方形列表
<ul style="list-style-type: square">
……..
</ul>
11.3自定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
12. HTML区块
12.1块级元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: 标题<h1>, 段落<p>, 列表<ul>, 表格<table>
12.1.1<div> 元素
<div> 元素没有特定的含义。它属于块级元素,可用于组合其他 HTML 元素的容器,且浏览器会在其前后显示折行。还可以用于文档布局。与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的默认样式为块级显示,会以块的形式占据可用空间。
12.2内联元素
内联元素在显示时通常不会以新行开始。
实例: 加粗文本<b>,超链接<a>,图像<img>
12.2.1<span> 元素
<span> 元素也没有特定的含义。<span> 元素是内联元素,可用作文本的容器。当与CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
<span> 元素的默认样式为行内显示,它不会独占一行,只占据其内容的宽度。
13. HTML布局
大多数网站会把内容安排到多个列中。可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
注:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据,表格不是布局工具!
实例:使用五个 div 元素来创建多列布局
<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;">
版权 © runoob.com</div>
</div>
14. HTML表单
HTML 表单用于收集用户的输入信息,通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
<form> 元素用于创建表单;
action 属性定义了表单数据提交的目标 URL;
method 属性定义了提交数据的 HTTP 方法:①post:指的是 HTTP POST 方法,表单数据会包含在表单体内然后发送给服务器,用于提交敏感数据,如用户名与密码等。②get:默认值,指的是 HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 ?作为分隔符,一般用于不敏感信息,如分页等。例如:https://www.runoob.com/?page=1,这里的 page=1 就是 get 方法提交的数据。
<label> 元素用于为表单元素添加标签,提高可访问性。
<input> 元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型,id 属性用于关联 <label> 元素,name 属性用于标识表单字段。
<select> 元素用于创建下拉列表,而 <option> 元素用于定义下拉列表中的选项。
14.1输入元素
输入标签 <input>,其输入类型是由 type 属性定义。
14.2文本域(Text Fields)
文本域通过 <input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
文本框(可输入文字):
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
14.3密码字段
密码字段通过标签 <input type="password"> 来定义。密码字段字符不会明文显示,而是以星号*或圆点.替代
<form>
Password: <input type="password" name="pwd">
</form>
14.4单选按钮(Radio Buttons)
<input type="radio"> 标签定义了表单的单选框选项。
<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>
14.5复选框(Checkboxes)
<input type="checkbox"> 定义了复选框。
<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>
14.6提交按钮 (Submit)
<input type="submit"> 定义了提交按钮。
当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理。
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
14.7下拉列表
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
默认预选的是第一个选项。
注:预选下拉列表需要在标签里添加selected,即如果想要预选的是UK,则<option value="uk">UK</option>应改为 <option value="uk" selected>UK</option>
14.8表单发送邮件
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
15. HTML框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
15.1 <iframe> 标签
<iframe>标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
<iframe>语法:<iframe src="URL"></iframe>,其中该URL指向不同的网页。
15.2 iframe-设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
15.3 iframe-移除边框
frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框。
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
15.4使用ifram来显示目标链接页面
iframe 可以显示一个目标链接的页面,目标链接的属性必须使用 iframe 的属性。
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p>
<a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a>
</p>
点击链接之前:
点击链接之后,窗口显示的runoob页面:
注:因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页面会显示在 iframe框架中。
16. HTML颜色
HTML 颜色由红色、绿色、蓝色混合而成。HTML 颜色由一个十六进制符号来定义,这个符号由红色red、绿色green和蓝色blue的值组成(RGB)。每种颜色的最小值是0(十六进制:#00),最大值是255(十六进制:#FF)。如,黑色的十六进制符号为#000000,颜色RGB为 rgb(0,0,0)。
16.1十六进制设置颜色
<p style="background-color:#FFFF00">
通过十六进制设置背景颜色
</p>
16.2RGB设置颜色
<p style="background-color:rgb(255,255,0)">
通过 rgb 值设置背景颜色
</p>
16.3颜色名设置颜色
<p style="background-color:yellow">
通过颜色名设置背景颜色
</p>
16.4RGBA
RGBA 的意思是(Red-Green-Blue-Alpha)它是在 RGB 上扩展包括了 “alpha” 通道,运行对颜色值设置透明度。
<p style="background-color:rgba(255 , 255 , 0 , 0.25)">
通过 rbg 值设置背景颜色
</p>
17. HTML颜色名
141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。
18. HTML颜色值
十六进制值的写法为 # 号后跟3个或6个十六进制字符。
三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。
19. HTML脚本
19.1<script> 标签
<script> 标签用于定义客户端脚本,比如 JavaScript。
<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
如,下面的脚本会向浏览器输出"Hello World!"
<script>
document.write("Hello World!");
</script>
19.2<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
如:
<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
20. HTML字符实体
20.1实体
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体。
如需显示小于号,我们必须这样写:实体名称:<或 实体编号:<
如需显示大于号,我们必须这样写:实体名称:>或 实体编号:>
20.2不间断空格(Non-breaking Space)
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 字符实体。
注:虽然 html 不区分大小写,但实体字符对大小写敏感。
21. HTML统一资源定位器URL
URL 是一个网页地址。URL可以由字母组成,如"runoob.com",或互联网协议(IP)地址:192.68.20.50。大多数人进入网站使用网站域名来访问,因为 名字比数字更容易记住。
点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。一个统一资源定位器(URL) 用于定位万维网上的文档。
scheme://host.domain:port/path/filename
说明:
- scheme - 定义因特网服务的类型。最常见的类型是 http。常见的 URL Scheme:①http—超文本传输协议,不加密。②https—安全超文本传输协议,安全网页,加密所有信息交换。③ftp—文件传输协议,用于将文件下载或上传至网站。④file—计算机上的文件。
- host - 定义域主机(http 的默认主机是 www)
- domain - 定义因特网域名,比如 runoob.com
4 :port - 定义主机上的端口号(http 的默认端口号是 80)
5. path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
6. filename - 定义文档/资源的名称
22. HTML速查列表(常用记住!)
22.1 HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
22.2基本标签
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> (换行)
<hr> (水平线)
<!-- 这是注释 -->
22.3文本格式化
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> (缩写)
<address> (联系信息)
<bdo> (文字方向)
<blockquote> (从另一个源引用的部分)
<cite> (工作的名称)
<del> (删除的文本)
<ins> (插入的文本)
<sub> (下标文本)
<sup> (上标文本)
22.4链接
普通的链接:<a href="http://www.example.com/">链接文本</a>
图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a>
书签:
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
22.5图片
<img src="URL" alt="替换文本" height="42" width="42">
22.6样式/区块
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
22.7无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
22.8有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
22.9定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
22.10表格(Tables)
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
22.11框架(Iframe)
<iframe src="demo_iframe.htm"></iframe>
22.12表单(Forms)
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
22.13实体
< 等同于 <
> 等同于 >
© 等同于 ©
23. HTML标签简写及全称
alt→ alter→替用(一般是图片显示不出的提示)
b → Bold →粗体(文本)
bdo→Bi-Directional Override→文本显示方向
br→Break → 换行
dd →Definition Description→定义描述
div→Division→分隔
dl →Definition List →定义列表
dt→ Definition Term→定义术语
em→Emphasized→ 加重(文本)
href→hypertext reference→超文本引用
i → Italic→斜体(文本)
iframe→Inline frame→定义内联框架
ins→Inserted→插入(的文本)
kbd→Keyboard →键盘(文本)
li→ List Item→列表项目
nl→navigation lists→导航列表
ol →Ordered List→排序列表
p →Paragraph→段落
pre→Preformatted→预定义格式(文本 )
q →Quotation →引用语
rel→Reload→加载
strong→Strong→加重(文本)
sub→Subscripted→下标(文本)
sup→Superscripted→上标(文本)
td→table data cell→表格中的一个单元格
th →table header cell → 表格中的表头
tr →table row→表格中的一行
u →Underlined →下划线(文本)
ul →Unordered List →不排序列表
var→Variable→变量(文本)
24. HTML总结
学习完HTML要学习CSS与JavaScript
24.1学习 CSS
CSS被用来同时控制多重网页的样式和布局。
通过使用 CSS,所有的格式化均可从 HTML 中剥离出来,并存储于一个独立的文件中。
24.2学习 JavaScript
JavaScript 可以让你的网页更加生动。
如果你只想展示内容,静态网站是很好的展示形象,如果你想与用户进行交换或者让网页更加生动那就需要使用到Javascript。
JavaScript是互联网上最流行的脚本语言,目前所有主流浏览器都支持Javascript。