竞赛部第五次培训总结

竞赛部第五次培训

文章目录

竞赛部第五次培训
HTML基础语法

1. 什么是网页
2. 什么是网页

静态网页
动态网页

3. HTML基础知识

HTML基础语法

1. 什么是网页

网页是一种可以在互联网上传输，能被浏览器认识和翻译成页面并显示出来的文件，网页是网站的基本构成元素。

网页实际上就是一个文件。一般网页上都会有文本和图片等信息，而复杂一些的网页上还会有声音、视频、动画等多媒体内容。

网页比报纸、广播、电视等传统媒介在信息传递上更加迅速、多样化，交互能力更强。

2. 什么是网页

静态网页

静态网页也称为普通网页，是相对网页而言的。静态网页不是指网页中的元素都是静止不动的，而是指网页文件中没有程序代码，只有HTML（超文本标记语言）标记，一般后缀为.htm、.html、.shtml或.xml等。在静态网页中，可以包括GIF动画，鼠标经过Flash按钮时，按钮可能会发生变化。

静态网页一经制成，内容就不会再变化，不管何人何时访问，显示的内容都是一样的。

如果要修改网页的内容，就必须修改其源代码，然后重新上传到服务器上。

动态网页

动态网页是指在网页文件中除了HTML标记以外，还包括一些实现特定功能的程序代码，这些程序代码使得浏览器与服务器之间可以进行交互，即服务器端可以根据客户端的不同请求动态产生网页内容。动态网页的后缀名通常根据所用的程序设计语言的不同而不同，一般为.asp、.aspx、cgi、.php、.perl、.jsp等。动态网页可以根据不同的时间、不同的浏览者显示不同的信息。常见的留言板、论坛、聊天室都是用动态网页实现的。

静态网页的特点
静态网页每个网页都有一个固定的URL

扫描二维码关注公众号，回复： 4474761 查看本文章
网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的。无需经过服务器的编译，直接加载到客户浏览器上显示出来。
静态网页的内容相对稳定，因此容易被搜索引擎检索。
静态网页没有数据库的支持。
静态网页的交互性较差，

在功能方面有较大的限制

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.背景音乐

loop中的数值是音乐循环的次数，可设置为任意正整数，若设为“-1”的话，音乐将永远循环。

src 的数值是背景音乐的地址

HTML注释
```
     注释标签用于在源代码中插入注释。注释不会显示在浏览器中。
```
可使用注释对您的代码进行解释，这样做有助于在以后的时间对代码的编辑。当编写了大量代码时尤其有用。

使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯。

使用注释的语法：

其他标签

<meta>标签

<meta>属于头部标签，应放在<head>与</head>之间，它的用法比较多，但最常用的是它的刷新功能。

实现刷新功能的语法：

该语句表示：页面打开5秒钟后自动转到百度主页。如果把url部分省略，则表示页面每5秒钟就自动刷新一次。