.1 HTML简介
什么是HTML?
HTML 是用来描述网页的一种语言。
l HTML 指的是超文本标记语言: Hyper Text Markup Language
l HTML 不是一种编程语言,而是一种标记语言
l 标记语言是一套标记标签 (markup tag)
l HTML 使用标记标签来描述网页
l HTML 文档包含了HTML 标签及文本内容
l HTML文档也叫做 web 页面
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
实例解析
l DOCTYPE 声明了文档类型
l 位于标签 <html> 与 </html> 描述了文档类型
l 位于标签 <body> 与 </body> 为可视化网页内容
l 位于标签 <h1> 与 </h1> 作为一个标题使用
l 位于标签 <p> 与 </p> 作为一个段落显示
<!DOCTYPE html> 在HTML5中也是描述了文档类型。
1.1.3 HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
l HTML 标签是由尖括号包围的关键词,比如 <html>
l HTML 标签通常是成对出现的,比如 <b> 和 </b>
l 标签对中的第一个标签是开始标签,第二个标签是结束标签“/”
l 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
1.1.4 HTML 元素
"HTML 标签" and "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素:
<p>This is a paragraph.</p>
1.1.5 Web 浏览器
Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari,Chrome)是用于读取HTML文件,并将其作为网页显示。
浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:
1.1.6 HTML 网页结构
下面是一个可视化的HTML页面结构:
1.1.7 HTML版本
从初期的网络诞生后,已经出现了许多HTML版本:
1.1.8 <!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的,以下方式均可:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
常见的 DOCTYPE 声明
u HTML 5
<!DOCTYPE html>
u HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
u HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
u HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同,但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
u XHTML 1.0 Strict
这个 DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
u XHTML 1.0 Transitional
这个 DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
u XHTML 1.0 Frameset
这个 DTD 与 XHTML 1.0 Transitional 相同,但是允许使用框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
u XHTML 1.1
这个 DTD 与 XHTML 1.0 Strict 相同,但是允许添加模块(例如为东亚语言提供 ruby 支持)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
1.2HTML基础
1.2.1 标题<h1…h6>
HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.
h是英文header标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构、写作文、PPT等。h1是主标题,h2是副标题,h3、h4、h5、h6依次递减字体的大小。
实例:
1.2.2 段落<p>
HTML 段落是通过标签 <p> 来定义的,P是英文paragraph段落的缩写,经常被用来创建一个段落,就和你写作文一样。
1.2.3 链接<a>
HTML 链接是通过标签 <a> 来定义的.a标签,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。在 href 属性中指定链接的地址。
使用target属性,可以定义被链接的文档在何处打开,target=“_blank”会在新窗口打开文档。
<a href="http://www.edu360.cn/" target="_blank">这是一个链接!</a>
<hr> 标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。
1.2.4 折行
<br/>元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
文本格式化
HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
1.2.5 表格
表格由<table>标签来定义。每个表格均有若干行(由<tr> 标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:
表格的表头使用th标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
行合并和列合并:
1.2.6 列表
HTML 支持有序、无序和定义列表:
有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项项使用数字来标记。
观察在ol添加type属性,type=”A”或者type=”a”或者type=”i”或者type=”I”
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用 <li> 标签。
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
1.2.10区块
HTML 可以通过 <div> 和 <span>将元素组合起来。
Ø 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>
Ø 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
Ø <div>元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
1.2.11布局
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
1.2.12 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
文本域(Text Fields)
文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
密码字段
密码字段通过标签<input type="password"> 来定义:
单选按钮(Radio Buttons)
<input type="radio"> 标签定义了表单单选框选项:
复选框(Checkbox)
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
下拉列表
文本框
按钮
1.2.13 head头部
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>.
Title元素
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
l 定义了浏览器工具栏的标题
l 当网页添加到收藏夹时,显示在收藏夹中的标题
l 显示在搜索引擎结果页面的标题
一个简单的 HTML 文档:
<link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你需要指定样式文件来渲染HTML文档:
<meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
<meta>一般放置于 <head>区域
<script> 元素
<script> 标签用于定义客户端脚本,比如 JavaScript。
<script> 元素既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。
JavaScript 通常用于图像操作、表单验证以及动态内容更改。
1.1 HTML属性
属性是 HTML 元素提供的附加信息。
A
Href 目标链接地址
Img
Src 目标源
Table
Tr
Td
Th
Rowspan
Colspan
Ol
type
Input
Type: text文本框|password|radio|checkbox|hidden|submit
Name
Id
Value
Textarea
Rows
Cols
Form:
Action
Method:get|post
Select:
Mutiple
Name
id
HTML 属性
l HTML 元素可以设置属性
l 属性可以在元素中添加附加信息 about an element
l 属性一般描述于开始标签
l 属性总是以名称/值对的形式出现,比如:name="value"。
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么必须使用单引号,例如:name='John "ShotGun" Nelson'
大多数 HTML 元素都拥有class/id/style/title的属性。
TML提交按钮是一种HTML表单元素,允许用户将表单数据提交到服务器。提交按钮通常与表单元素(如文本框和下拉列表)一起使用,以便用户可以输入并提交信息。在HTML中,提交按钮通常使用标签来定义。
如何编写HTML提交按钮代码?
要创建HTML提交按钮,您需要使用标签,并将type属性设置为“submit”。例如,以下代码会创建一个名为“submit”的提交按钮:
```
```
在这个例子中,“action”属性指定了表单数据提交到的URL,“method”属性指定了提交表单的HTTP方法(通常是POST或GET)。按钮的“value”属性指定了按钮上显示的文本。
如何自定义HTML提交按钮样式?
默认情况下,HTML提交按钮的样式取决于用户的操作系统和浏览器。但是,您可以使用CSS样式表来自定义按钮的外观。例如,以下代码将创建一个红色的提交按钮:
```
```
在这个例子中,我们使用了style属性来设置按钮的背景颜色和文本颜色。您还可以使用其他CSS属性来自定义按钮的大小、边框等。
如何使用JavaScript处理HTML提交按钮?
您可以使用JavaScript来添加交互性和验证表单数据。例如,以下代码将在用户单击提交按钮时弹出一个提示框:
```
```
在这个例子中,我们使用了onsubmit属性来指定当表单提交时要运行的JavaScript函数。此函数返回true或false,如果返回false,则表单将不会提交。在这个例子中,我们使用confirm()函数显示一个提示框,并在用户单击“确定”时返回true。
总结
HTML提交按钮是Web表单中的重要元素,允许用户将表单数据提交到服务器。您可以使用标签来创建提交按钮,并使用CSS样式表自定义外观。您还可以使用JavaScript添加交互性和验证表单数据。通过掌握HTML提交按钮的知识,您可以创建复杂的Web表单,并收集和处理用户数据。
、下拉框操作
实现效果如下:
完整源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<select name="scolor" id="scolor">
<option value="0">==请选择==</option>
<option value="red">==红色==</option>
<option value="green">==绿色==</option>
<option value="blue">==蓝色==</option>
</select>
<br />
<input type="button" value="添加一个选择" onclick="Test1();" />
<input type="button" value="获取选中项的索引" onclick="Test2();" />
<input type="button" value="获取选中项的文本" onclick="Test3();" />
<input type="button" value="获取选中项的值" onclick="Test4();" />
<input type="button" value="删除选中项" onclick="Test5();" />
<input type="button" value="让指定的项被选中" onclick="Test6();" />
<input type="button" value="修改选中项" onclick="Test7();" />
<input type="button" value="清空项" onclick="Test8();" />
</body>
<script language="javascript" type="text/javascript">
function Test1(){
var scolor=document.getElementById("scolor");
scolor.options.add(new Option("黄色"));//选项的文本和值是一样
//第二种方式
scolor.options.add(new Option("橙色","orange"));//添加指定文本和值的选项
//作业:再添加一个选项,要求是第2个选项,第二个选项变为最后一个
}
function Test2(){
var scolor=document.getElementById("scolor");
alert(scolor.selectedIndex);
}
function Test3(){
var scolor=document.getElementById("scolor");
alert(scolor.options[scolor.selectedIndex].text);
}
function Test4(){
var scolor=document.getElementById("scolor");
//alert(scolor.options[scolor.selectedIndex].value);
alert(scolor.value);
}
function Test5(){
var scolor=document.getElementById("scolor");
scolor.options.remove(scolor.selectedIndex);
}
function Test6(){
var scolor=document.getElementById("scolor");
//scolor.selectedIndex=2;//控制索引
scolor.value="green";//控制值
}
function Test7(){
var scolor=document.getElementById("scolor");
scolor.options[scolor.selectedIndex]=new Option("羞羞色","yellowyellow");
}
function Test8(){
var scolor=document.getElementById("scolor");
/*
for(var i=0;i<scolor.options.length;i++){
scolor.options.remove(i);
}
remove只能删除一次,无法删除多个,使用循环也不行,原因是从0索引开始删除,没删除一个索引会产生变化,那么倒序从后往前删除即可。这里再提供一个简单的办法
*/
scolor.options.length=0;
}
</script>
</html>
*请认真填写需求信息,我们会在24小时内与您取得联系。