HTML详细教程
来源：互联网 发布：网络推广面试题及答案 编辑：程序博客网 时间：2024/06/08 19:55
1.HTML是什么呢？
它是一种超文本标记语言, 我们可以用这门语言创建自己的网站. HTML运行在浏览器上, 由浏览器进行解析.
2.HTML实例
<!DOCTYPE html> <!--当前文档遵循HTML5规范-->
<html>
<head>
<meta charset="utf-8"/> <!--设置当前文档的字符集-->
<title>实例一</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
3.HTML文档的后缀名
当我们新建一个HTML文档时, 文档的后缀名可以是html/htm
4.HTML中不支持哪些东西呢?
如果我们在HTML文档中使用了譬如制表符, 空格, 回车这样的输入, 经过浏览器的解析之后, 会被统一
看成空白字符.
5.utf-8/utf8分别在什么时候使用?
设置文档字符集:
1)HTML文档中可以使用UTF-8 utf-8 UTF8 utf8
2)PHP文档中可以使用UTF-8 utf-8 UTF8 utf8
3)MYSQL命令中只能使用UTF8 utf8
这三门语言都不区分字母的大小写
6.<hn></hn>标签(n = 1,2,3,4...)
该标签主要修饰文档标题. h1修饰的标题字体最大.
7.<p></p>
段落分隔符. 起到换行作用.
8.<a></a>
HTML链接. 该标签的使用格式:<a href="http://...">...</a>. href指定了一个链接地址
9.<img>
单标签. 该标签的使用格式:<img src="..."/> src指向了一个图片文件
10.HTML元素语法
1)要知道HTML元素的起始标签, 闭合标签
2)起始标签和闭合标签之前的内容
3)起始标签和闭合标签之间没内容, 为空元素.
4)大多数的HTML元素可拥有属性
11.空元素
HTML元素的起始标签, 闭合标签之间没有内容, 就是空元素.
所有的元素都必须被闭合. 即使是单标签元素.例如:<br/>在起始标签结束后关闭
12.HTML区分字母大小写吗??
不区分的
13.HTML属性
1)HTML元素可以设置属性. 属性一般存在于起始标签.
2)属性总是以键值对的形式出现
14.属性值
属性值必须包含在双引号中. 当然了,包含在单引号中也是ok的了.
15.HTML区分大小写吗?
属性, 属性值是不区分大小写的. 一般以小写为主.
16.HTML元素共有属性
大多数的HTML元素都有class, id, style,title这些属性
想要了解更多的HTML标签, 请见:http://www.w3school.com.cn/tags/index.asp
想要了了解更多的HTML标签属性, 请见:http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
17.<hr>
在HTML页面内创建水平分割线
18.<hn>(n=1,....,6)和<font>
hn,设置标题大小
font,借助size属性设置字体大小
hn(n=1,2...,6)h1设置的标题最大, h6设置的标题最小.
font: size="1"时,设置的字体最小, size=6时,设置的字体最大
19.闭合标签的重要性
在HTML元素的书写过程中, 我们往往容易忽视闭合标签. 这种粗心往往会造成意想不到的效果和错误.
实例:
<!DOCTYPE html>
<html>
<head>
<title>忽视闭合标签造成的现象</title>
</head>
<body>
<p><b>这是一个段落</p>
<p><b>这是另一个段落</p>
</body>
</html>
运行结果:这是一个段落, 这是另一个段落都加粗了。。。
20.<br/>
HTML空元素. 起到换行的作用
21.格式化标签
<b></b>, <strong></strong>加粗
<em></em>, <i></i>字符斜体
<sub>下标 <sup>上标
<big></big>文字变大 <small></small>文字变小
<pre></pre> 我们知道制表符, 换行, 空格经过浏览器解析之后在网页上均以一个空格输出, 那么怎么保持浏览器输出原文本呢? 这里就要用到<pre></pre>对空格和空行进行控制
22.计算机输出标签
<code></code>包含的内容以计算机文本格式输出
<kbd></kbd>表示包含的内容以键盘输入格式输出
<tt></tt>包含的内容以打印机文本格式输出(等宽字体)
<samp></samp>计算机代码样本
<var></var>计算机变量
23.缩写
<abbr title="..."></abbr> 取title文本的缩写(前三个字符)
<acronym title="..."></acronym> 取title文本的的首字母缩写
24.文字输出方向
<bdo dir="rtl"></bdo>文字倒序输出
25.块引用
<q></q> 该标签包含的内容经浏览器解析(网页上输出)时, 会被双引号包住.
26.删除/插入字
<del></del> 删除文本. 在网页上显示的效果是: 标签包含的内容被横线划去
<ins></ins>插入文本. 在网页上显示的效果是: 标签包含的内容下方划上了横线
27.一些难记的HTML元素
<abbr title="..."><abbr>取文本的缩写
<address></address>定义地址
<bdo dir="rtl"></bdo>文本倒序输出
<blockquote></blockquote>包含的文本向前缩进
<q></q>包含的文本在网页上显示时用双引号包住
<cite></cite>, <dfn></dfn> 斜体文本
28.超链接
<a></a>
该元素包含的内容可以是一个字, 一个词, 一组词, 一幅图像. 可以通过点这些内容跳转到指定的文档
这里注意:超链接的文本部分是蓝色的. 鼠标悬停时是红色的.
29.几个属性
1)target="_parent"
target="_blank"在父窗口/新建窗口打开超链接
2)id属性
<a id="tips">标记</a>
<a href="#tips">转到</a>
<a id="tips">标记</a>
<a href="1.html#tips">转到</a>
实例
1)<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
2)<a href="#C4">查看章节 4</a>
<a id="C4">章节 4</a> 页内链接~
30.<head></head>标签都包含哪些东西呢?
1)<title></title> 定义了HTML文档的标题
2)<base/> 单标签. 定义了所有的链接的URL
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>
3)<meta/> 用的比较多的还是设置字符集
总结起来, 我们可以知道<head>元素包含了所有的头部标签元素. 可以添加在头部区域的元素标签为:<title><style><meta><link><script><base><noscript>. 其中,如果浏览器不支持<script>,就把<noscript>元素包含的内容显示在网页上
31.内部样式表
以实例来看:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
32.内联样式表
以实例来看:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a href="http://www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>
</body>
</html>
33.外部样式表
以实例来看:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>
</html>
同时,上面3个实例也展示了css插入html的3种方式:内联样式表, 内部样式表, 外部样式表.
34.常见的css属性来一波:
background-color:yellow;
font-family:幼圆; (字体类型)
font-size:20px; color:red;
margin-left:20px; (文本与边缘的左间距)
text-align:center; (文本居中对齐)
35.<img>
HTML元素中的单标签元素. 空标签, 即没有闭合标签.
例:<img src="1.jpg" alt="说明文字" width="26px" height="26px"> 其中:alt,图片加载失败时会显示说明文字. width,height设置图片宽高.
实例(map,area应用):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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>
</body>
</html>
总结上面实例可知:
<img>标签有一个属性usemap, 望文生义, 使用map标签在图片上划出链接区域. 而链接区域的位置,大小怎么确定呢?这就要借助<map><area>两个标签了..
36.表格
描述:表格是由<table>标签来定义. 每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义).
<td>标签中包含数据(数据可以是文本,图片,列表,段落,表单,水平线,表格等)
这里,我们需要记住的标签有:<table><caption><tr><th><td>
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<table border="0">
<caption>单元格跨两列/行</caption><!--标题-->
<tr><th colspan="2">表头1</th></tr>
<tr><td rowspan="2">表格1</td><td>表格2</td></tr>
<tr><td>表格3</td></tr>
</table>
</body>
</html>
<table>标签还有这两个属性cellpading(边距) cellspacing(间距),这两个属性分别指的是什么??
cellpading, 边距,即文本距离单元格边框的距离. cellspacing, 间距, 即单元格之间的距离.
实例:
1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<table border="1">
<caption>没有表格边距</caption>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<table border="1" cellpadding="10">
<caption>有单元格边距</caption>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<table border="1">
<caption>没有表格边距</caption>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<table border="1" cellspacing="10">
<caption>有单元格边距</caption>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<table>中还有另外三个属性:thead, tbody, tfoot. 我们来看一下这三个属性是怎么用的??
thead, 表格的页眉. tbody, 表格的主体. tfoot, 表格的页脚
37.列表
1)无序列表
话不多说,实例走起:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h4>无序列表:</h4>
<ul style="list-style-type:desc"> 内联样式表. 指定列表样式类型是实圆(运行之后效果一目了然)
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
2)有序列表
这里同样来个实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ol type="I" start="2">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
3)自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h4>自定义列表:</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
总结上面三个实例可得:
无序列表相关标签<ul><li>, 相关属性type.
有序列表相关标签<ol><li>, 相关属性type,start.
自定义列表相关标签<dl><dt><dd>
38.<div>,<span>标签的介绍
<div>, 块级标签, 主要用于文档布局. 通常和css连用,设置文档样式.
<span>,行内标签. 通常和css连用, 设置部分文本样式.
两个标签的共同点是:没有自己特定的含义.
39.实例再来一波
1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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:right;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
总结一下这里的css属性:
width:500px 在div标签中, 设置块区域的宽度. height:200px 不说了~~
background-color:#FFA500 在div标签中, 设置块区域的背景颜色.
float:left; 浮动 clear:both; 清楚浮动,防止网页错位.
text-align:center 文本居中对齐~~
margin-bottom:0
2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center"><!--跨两列-->
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
</body>
</html>
上面程序中有一个css属性比较常用, vertical-align:top/bottom/left/right 文字靠上/下/左/右放
40.表单
首先,来看两个实例:
第一个:文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>
</body>
</html>
第二个:密码框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password"><!--密码框-->
</form>
<p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>
</body>
</html>
这里一定要注意<input>标签中的name属性. 标识表单数据. 而且在提交表单数据时必须要有name属性去标识.
1)描述:表单是包含表单元素的区域. 表单元素是允许用户输入数据的部分. 表单元素的类型取决于type属性的属性值. 常见的属性值有:text,password,radio,checkbox,submit
2)再来一波表单相关的实例:
单选框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action=""><!--表单数据传到当前文件中-->
<input type="radio" name="sex" value="male">Male<br><!--name:表单元素的名称-->
<input type="radio" name="sex" value="female">Female
</form>
<p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>
</body>
</html>
注意上面一个实例:当我们选中其中一个单选框时,其它同名单选框不会被选择.
复选框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
</body>
</html>
对于这个实例,我们记住表单元素中复选框的属性值就行了~~(checkbox)
下拉列表:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
下拉列表:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="">
<select name="cars"><!--表单元素的名称-->
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
同样,这个实例中我们需要记住的是什么呢? 我们需要记住下拉列表的相关标签<select><option>. <option>是包含在<select>中使用的
通过上面的实例,相信已经懂得了简单的下拉列表. 接下来,我们看一下预选下拉列表
实例走起:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
看一下做标记部分, 我们会发现这个下拉列表选项已经默认被选定~
文本域:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<textarea rows="10" cols="30">
我是一个文本域。
</textarea>
</body>
</html>
在上面这个实例中,我们需要记住的是<textarea>标签, rows,cols两个属性. 这里还有个有意思的地方:虽然我们设定文本域的cols是30, 但是实际上能填下34个字符.
自定义按钮:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
简单,不做解释~~
有边框的表单:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
</body>
</html>
在这个实例中,我们可以看到两个陌生的标签:<fieldset><legend>. 那么这两个标签是做什么的呢？？
<fieldset>, 对form表单进行分组,分组后的表单元素会被包裹在一个边框中.
<legend>, 对分组后的表单元素做一个说明而已.
带有复选框的表单:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php" method="get">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br>
<input type="submit" value="提交">
</form>
</body>
</html>
在之前的实例中,我们已经知道复选框(checkbox)的存在. 现在我们来介绍一个有意思的属性:checked="checked"(默认选定)
带有单选框的表单:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php" method="get">
<input type="radio" name="sex" value="Male"> Male<br>
<input type="radio" name="sex" value="Female" checked="checked"> Female<br>
<input type="submit" value="提交">
</form>
</body>
</html>
如果你足够细心的话,会发现这个实例中也有checked="checked", 同样也是默认选定的意思.
41.几个陌生的表单标签
<label><fieldset><legend><optgroup><datalist><keygen><output>
<label>,和<input>联合使用, 实际上就是单纯的在网页上为用户输出提示信息.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击其中一个文本标签选中选项：</p>
<form action="demo_form.phpp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
<fieldset><legend>这两个标签一般同时使用. <fieldset>对表单进行分组,<legend>对表单分组进行文本说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击其中一个文本标签选中选项：</p>
<form action="demo_form.phpp">
<fieldset><legend>对表单分组进行描述说明</legend>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
</fieldset>
<fieldset><legend>对表单分组进行描述说明</legend>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>
<optgroup>, 这个标签通常是把下拉列表中有联系的选项组合在一起. 使用时用label属性对其进行相应的文档说明更恰当.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<select>
<optgroup label="Swedish Cars"><!--optgroup把下拉列表中有联系的选项包起来, 并用label属性进行相关的文本描述-->
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>
<datalist>, 实际上也是下拉列表. 通常和<input list="">联合使用,表示我们在表单中输入的内容可能存在于下拉列表中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
</body>
</html>
keygen, 对表单数据进行加密处理. 那这个标签具体怎么实现表单的加密的呢??
表单数据提交时, <keygen>标签会生成相应的密钥对,私钥存储在本地, 公钥放松给服务器
看以下实例:
<!DOCTYPE HTML>
<html>
<body>
<form action="demo-form.php" method="get">
用户名：<input type="text" name="usr_name" />
加密：<keygen name="security" />
</form>
</body>
</html>
42.框架
框架, 主要用到的标签是:<iframe>,这个标签所做的是在同一个浏览器窗口访问到其它网络资源.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe src="http://www.baidu.com/" width="200" height="200" frameborder="0"></iframe>
<iframe src="http://www.taobao.com/" width="200" height="200" frameborder="0"></iframe>
<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>
</body>
</html>
在这个实例中, 我们可以看到<iframe>标签中有一个属性:frameborder="0", 这个属性负责去除iframe窗口的边框
43.HTML脚本
直接看实例~~
实例(1):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
document.write("Hello World!")
</script>
</body>
</html>
在这个实例中可以看出:所谓的html脚本,实际上就是一些JS代码.
实例(2):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p>
</body>
</html>
在这个实例中,我们会注意到有<noscript>标签. 为什么会有这个标签呢?是因为有些浏览器不支持JS,当出现这种情况的时候,浏览器就会解析<noscript>标签包含的文本.
44.JS中的事件响应
实例:
(1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 JavaScript </h1>
<p id="demo">JS可以触发事件，就像按钮点击。</p>
<script>
function myFunction1(){
document.write("<p>nishishui</p>");
}
function myFunction2(){
document.getElementById("demo").innerHTML="给他英俊";
}
</script>
<input type="button" onClick="myFunction1()" name="button" value="点我1">
<button name="button" value="点我2" onClick="myFunction2()">点我2</button>
</body>
</html>
这个实例有点意思了,我们来看看~~
1)<button></button>, 之前不知道这个标签, 通过这个实例, 我才知道它还能这样用呢.
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction(){
document.getElementById("demo").style.color="#ff0000";
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
这个实例的重点是点击按钮, 触发事件, 事件响应(调用函数->通过标识找到HTML元素->改变文本颜色)
45.转义字符
转义字符, 准确来说是字符实体.
想必大家都遇到过这种情况:HTML脚本中不间断的空格/制表符/换行经过浏览器解析之后,在页面上只会显示出一个字符. 这种情况怎么解决呢?
这个时候就要用到HTML中的预留字符了~~最常用的预留字符是 , 代表空格.
46.URL
URL, 统一资源定位器. 说白了,就是一个网址.
大家有没有感觉到"网址"这个概念既熟悉又陌生, 下面就来详细的阐述一下网址~~
例如:http://www.baidu.com/index.html
http, 超文本传输协议. 它负责服务器向本地客户端(浏览器)输送文件. 并且规定了浏览器怎么去处理输送过来的数据.
www, 环球万维网. 整合了全球的资源.
baidu.com, 百度域名.
www.baidu.com, 网址(服务器名+域名)
- HTML详细教程
- html中json 实例详细说明教程
- Javadoc（HTML）转CHM详细教程
- android用jsoup解析html详细教程
- jQueryEasyUI实现房贷计算器详细教程1--HTML部分
- JQuery详细教程三之HTML(css() 与尺寸)
- 【HTML】HTML语言的使用方式和详细说明___完整教程（总结）
- HTML教程
- HTML教程
- HTML 教程
- html教程
- HTML教程
- HTML教程
- HTML 教程
- HTML 教程
- html教程
- HTML 教程
- HTML教程
- Kettle7.1 无法连接sqlserver2014
- java打印乘法口诀表
- JDK7 正则表达式 捕获组命名
- 【unity实用技能】Unity Mesh更新的时候增加内存
- 计时器的两种方法
- HTML详细教程
- 爬虫整体结构
- Ubuntu 如何安装Google Chrome浏览器
- 强大实用的jQuery幻灯片插件Owl Carousel
- Bridge+比赛
- 数据库设计原则
- HDU 1238 Substrings（KMP+暴力枚举）
- cmd命令行运行ionic serve时报错FILE_NOT_FOUND
- Linux常用命令大全
