竞赛部第五次培训
HTML基础语法
1. 什么是网页
网页是一种可以在互联网上传输,能被浏览器认识和翻译成页面并显示出来的文件,网页是网站的基本构成元素。
网页实际上就是一个文件。一般网页上都会有文本和图片等信息,而复杂一些的网页上还会有声音、视频、动画等多媒体内容。
网页比报纸、广播、电视等传统媒介在信息传递上更加迅速、多样化,交互能力更强。
2. 什么是网页
静态网页
静态网页也称为普通网页,是相对网页而言的。静态网页不是指网页中的元素都是静止不动的,而是指网页文件中没有程序代码,只有HTML(超文本标记语言)标记,一般后缀为.htm、.html、.shtml或.xml等。在静态网页中,可以包括GIF动画,鼠标经过Flash按钮时,按钮可能会发生变化。
静态网页一经制成,内容就不会再变化,不管何人何时访问,显示的内容都是一样的。
如果要修改网页的内容,就必须修改其源代码,然后重新上传到服务器上。
动态网页
动态网页是指在网页文件中除了HTML标记以外,还包括一些实现特定功能的程序代码,这些程序代码使得浏览器与服务器之间可以进行交互,即服务器端可以根据客户端的不同请求动态产生网页内容。动态网页的后缀名通常根据所用的程序设计语言的不同而不同,一般为.asp、.aspx、cgi、.php、.perl、.jsp等。动态网页可以根据不同的时间、不同的浏览者显示不同的信息。常见的留言板、论坛、聊天室都是用动态网页实现的。
-
静态网页的特点
-
静态网页每个网页都有一个固定的URL
-
网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页的内容都是保存在网站服务器上的。无需经过服务器的编译,直接加载到客户浏览器上显示出来。
-
静态网页的内容相对稳定,因此容易被搜索引擎检索。
-
静态网页没有数据库的支持。
-
静态网页的交互性较差,
在功能方面有较大的限制
3. HTML基础知识
HTML是超文本标签语言(Hypertext Markup Language)的缩写,它是当今多种标签语言中的一种,是为Internet文档设计的标签语言。HTML虽然非常简单,容易掌握,但它也是重要的,因为它是网页设计与Web应用程序开发的基础。
- 常用文本标签
为了对网页中的文本元素进行修饰、排版,使网页丰富多彩,往往需要使用大量的标签符,文本标签分为文本的基本设置与文本的修饰设置。
注:
1.HTML 标签是由尖括号包围的关键词
2.HTML 标签通常是成对出现的
3.标签对中的第一个标签是开始标签,第二个标签是结束标签
4.开始和结束标签也被称为开放标签和闭合标签
- HTML基本结构
<html>
<head>
<title>标题</title>
</head>
<body>
body标签对之间的文本是可见的页面内容
</body>
</html>
- HTML5基本结构
<!DOCTYPE html> 位于 HTML5 文档中的第一行,也就是位于 <html> 标签之前,
该标签告知浏览器文档所使用的 HTML 规范。
<html >
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
-
HTML各种标签对
<head></head> - <head> 标签用于定义文档的头部,它是所有头部元素的容器。 - <body></body>
-
body 元素
定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。) -
标题标签
<hn>
(n=1,2,3,4,5…)
<hn>
标签用于设置网页中各个层次的标题文字,被设置的文字将以黑体显示,并自成段落。- 语法格式举例:<h1 align="center">标题部分</h1> - 属性说明:align属性用于设置标题的对齐方式,其参数为 left、center、right。
-
段落标签
<p></p>
浏览器是以无格式的方式显示HTML文档的,也就意味着HTML文档中的空格和Enter键是被浏览器所忽略的。
要将文本划分段落就必须使用分段标签<p>
。
<p>
标签是非空元素标签,所标识的文本,代表同一个段落,必须成对使用。两个段落间的间距等于两次换行的距离。
- 语法格式举例:<p align="center"> 段落内容 </p>
- 属性说明:align(对齐)属性的属性值有3个参数:left(默认)、center和right。
- 换行标签
<br>
是换行标签,在网页设计中比较常用。使用<br>
标签能够使文档在该标签处强制换行,这一点与<p>
相同。
但与<p>
不同的是换行后行之间不留空白行,页面看起来比较紧凑。
属于空标签,没有结束标签。
- 水平线标签
<hr>
<hr>
标签是水平线标签,可以在页面中产生一条水平线,用于分隔文档和修饰网页。<hr>
属于空元素标签,没有结束标签。
- 语法格式举例:<hr 属性>
- 常用属性说明:hr标签的常用属性如下表所示。
- 特定文字样式标签
定文字样式标签用来设置特殊的文字样式,以实现文字的特殊效果。这类标签是成对使用的,没有属性。
例如, a<sup>2</sup>+b<sup>2</sup>表示a2+b2。
- 列表标签
HTML中列表标签可分为:
- 无序列表
- 有序列表
- 嵌套列表
- 自定义列表
- 无序列表标签
<ul>
<ul>
称为无序列表标签或项目列表标签,用来在页面中显示项目形式的列表,列表中每一项的前面会加上○、●或■等符号,每一项需用<li>
标签,所以需要同<li>
结合使用。
-语法格式举例:
<ul>
<li type="circle">列表项1</li>
<li type="square">列表项2</li>
</ul>
-属性说明:<ul>的常用属性只有一个type,用来设定列表项前面出现的符号,
可取属性值有:
disc:列表项前面加上符号●。
circle:列表项前面加上符号○。
square:列表项前面加上符号■。
-
有序列表标签
<ol>
-<ol>称为有序列表标签或编号列表标签,用来在页面中显示编号形式的列表, 列表中每一项的前面会加上如A、a、i或I等形式的编号,编号会根据列表项的增删自动调整。 每一项需要用<li>标签,所以需要同<li>结合使用。 语法格式举例: <ol type="A" start="2"> <li>列表项1</li> <li>列表项2</li> </ol> 属性说明:<ol>标签的两个属性type和start用来控制顺序编号。 <li>用来标签列表的一项,需同<ul>或<ol>一起使用,它的属性有: type:用来设定列表项的符号,如果<li>用在<ul>里, 属性取值为disc、circle或square,如果<li>用在<ol>里,则属性取值为1、a、A、i或I。 value:此属性仅当<li>用在<ol>里有效,属性值为一整数,用来设定当前项的编号, 其后的项目将以此值为起始数目递增,前面各项不受影响。
-
超链接标签
<a>
超链接是网页的灵魂,web上的网页正是靠点击设置在文本、图像、flash等元素上的超链接才能实现相互间的访问。 建立超链接的标签是一对<a>…</a>,它是网页中最为常用的标签。 由于定义超链接时常常需要设置文件的路径,所以先介绍文件路径的写法,然后再介绍链接标签的用法。 链接是用标签<a>来定义的, 定义的语法为: <a href=“http://www.bilibili.com/” target=“_blank” title=“不要点开”>哔哩哔哩</a> 属性说明:<a>标签的属性如下表所示。
-
图像标签
<img>
Web上常用的图像格式有三种:JPEG、GIF、PNG。使用<img>在网页上加入图像的语法举例为: <img src="image/tu.jpg" width="100%" height="100" border="1" alt="图片"/> <img>不需要结束标签,只需在开始标签里设置属性即可。
-
表格标签
<table>
使用表格是网页中用来定位元素的重要方法,同时表格也是网页布局结构里不可或缺的一部分。 表格由一行或多行组成,每行又由一个或多个单元格组成。 HTML中一个表格通常是由<table>、<tr>、<td>三个标签来定义的,这三个标签分别表示表格、表格行、单元格。 在对表格进行设置时,可以设置整个表格(<table>)或表格中的行(<tr>)或单元格(<td>)的属性, 它们优先顺序为:单元格(<td>)优先于行(<tr>),行(<tr>)优先于表格(<table>)。 例如,如果将某个单元格的背景色属性设置为红色, 然后将整个表格的背景色属性设置为蓝色,则红色单元格不会变为蓝色。 在html文档中,表格是由table、th、tr、td等标签构成的。
<table>
称为表格标签,整个表格始于<table>
而终于</table>
,
它是一个容器标签,用于声明一个表格,<tr>、<td>
等只能在它的范围内使用。
< table border="1">
<tr>
<td>第一行第一格</td>
<td>第一行第二格</td>
</tr>
<tr>
<td>第二行第一格</td>
<td>第二行第二格</td>
</tr>
</table>
-
<td>
标签<td>在表格中表示一个单元格,是表格中具体内容的容器,使用时要放在<tr>与</tr>之间。
-
<th>
标签<th>在表格中也表示一个单元格,用法与<td>相同, 不同的是,<th>所标签的单元格中文本内容默认以粗体显示,且居中对齐。
-
文本框
<input type="text"> 文本框除了type属性外,其它常用属性有:
name:用来设定文本框的名称,所选名称必须在表单内唯一标识该文本框,名称字符串中不能包含空格或特殊字符,可以使用字母数字字符和下划线 (_) 的任意组合。表单提交到服务器后需要使用指定的名称来获取文本框的值。
value:用来设定文本框的默认值,也就是用户输入前文本框里显示的文本。 size:用来设定文本框最多可显示的字符数,也就是文本框的长度。 maxlength:用来设定文本框中最多可输入的字符数。通过此属性可以将邮政编码限制为6位数,将密码限制为10个字符,等等。
-
密码框
密码框用来让用户输入密码,当用户在密码框中键入时, 输入内容显示为项目符号或星号,以保护它不被其他人看到。定义密码框的语法为: <input type="password"> 密码框的其它属性设置与文本框相同。
-
单选按钮
单选按钮用来让用户只能从一组选项中选择一个选项,例如,性别的选择。 单选按钮通常成组地使用,在同一个组中的所有单选按钮必须具有相同的名称。定义单选按钮的语法为: <input type="radio"> 单选按钮除type外其它常用属性有: name:用来设定单选按钮的名称,作用同文本框的name。同一组中所有单选按钮的此属性必须设置相同的值,否则,各选项不会相互排斥。 value:用来设定在单选按钮被选中时发送给服务器的值。 checked:用来确定在浏览器中载入表单时,该单选按钮是否被选中。如果开始标签里加入checked一词,则初始被选中。
-
复选框
复选框用来让用户可以从一组选项中选择多个选项。定义复选框的语法为:
<input type="checkbox"> 复选框除type外其它常用属性有: name:用来设定复选框的名称,作用同文本框的name。 value:用来设定在复选框被选中时发送给服务器的值。 checked:用来确定在浏览器中载入表单时,该复选框是否被选中。如果开始标签里加入checked一词,则初始被选中。
-
下拉菜单
下拉菜单,也称下拉列表,用来让访问者从一个列表中选择一个项目。当页面空间有限,但需要显示许多菜单项时,下拉菜单非常有用。
定义一个下拉菜单的语法为:
<select>
<option selected>竞赛部</option>
<option>秘书部</option>
<option>计算机项目部</option>
</select>
一个下拉菜单由<select>
和<option>
来定义,<select>
提供容器,它的name属性意义同文本框的相同。
<option>
用来定义一个菜单项,<option>
与</option>
之间的文本是呈现给访问者的,
而选中一项后传送的值是由value属性指定的,如果省略value属性,则value的值与文本相同,加入selected属性可以使菜单项初始为选中状态。
- 列表
列表的作用与下拉列表相似,但显示的外观不同,列表在浏览器中显示时列出部分或全部选项,另外列表允许访问者选择一个或多个项目。定义列表的语法如下:
<select size="5" multiple>
<option>竞赛部</option>
<option>秘书部</option>
<option>计算机项目部</option>
</select>
跟下拉列表相比,多了两个属性:size和multiple。
size用来设定列表中显示的选项个数;加入multiple属性允许用户从列表中选择多项。
-
文本区域
<textarea>
文本区域使用户可以输入多行信息,例如,输入留言、自我介绍等。定义文本区域的语法为: <textarea>略略略略</textarea> 开始标签与结束标签之间的文本为初始值,可以为空,但结束标签一定要有且正确。
-
按钮
1.提交按钮用来将表单数据提交到服务器。 定义提交按钮的语法为:<input type="submit"> 2.重置按钮用来还原表单为初始状态。 定义重置安钮的语法为:<input type="reset"> 3.定义普通按钮的语法为:<input type="button"> 三种按钮的属性除type外,其它常用属性有: value:用来指定按钮上显示的文本。 name:用来指定按钮的名称。
-
<marquee>
标签<marquee>可以使其标签的内容产生滚动效果,网上常见的滚动信息公告板就是用它来实现的。 <marquee>标签的使用语法: <marquee>我可以滚动哦~</marquee> -背景 <body>
拥有两个配置背景的标签。背景可以是颜色或者图像。
1.背景颜色
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
2.背景图片
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。
URL可以是相对地址,如第一行代码。也可以使绝对地址,如第二行代码。
3.背景音乐
<bgsound src =“my.mp3" loop="-1">
loop中的数值是音乐循环的次数,可设置为任意正整数,若设为“-1”的话,音乐将永远循环。
src 的数值是背景音乐的地址
-
HTML注释
注释标签用于在源代码中插入注释。注释不会显示在浏览器中。
可使用注释对您的代码进行解释,这样做有助于在以后的时间 对代码的编辑。当编写了大量代码时尤其有用。
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯。
使用注释的语法:
- 其他标签
<meta>
标签
<meta>
属于头部标签,应放在<head>
与</head>
之间,它的用法比较多,但最常用的是它的刷新功能。
实现刷新功能的语法:
该语句表示:页面打开5秒钟后自动转到百度主页。如果把url部分省略,则表示页面每5秒钟就自动刷新一次。
-
特殊字符
特殊用途的字符在HTML中无法直接显示成原来的样式,想要在浏览器中显示这些字符就必须输入特殊字符实体来代替。
例如:© ™ ×… 这些符号怎么打呢?