物联网技术部培训——网页前端之HTML

此博文用Markdown所写，会自动将标签转换成HTML，故以下有关标签都以代码块表示

网页

物联网技术部培训——网页前端之HTML
1. 什么是网页
- 1.1 网页类型
- - 1.1.1 静态网页
  - 1.1.2 动态网页
2. HTML
- 2.1 HTML文件
- 2.2 Web浏览器
- 2.3 在正式写代码之前的准备工作
- - sublime安装和准备
- 2.4 html有什么基础语法？
- - 2.4.1 文本标签
  - 2.4.2 基本结构
  - 2.4.3 HTML标签+元素的注意事项
  - 2.4.4 HTML的注释
  - 2.4.5 语法
  - - ① 声明
    - ② HTML头部和主体
    - ③ 基础标签对
    - ④ 列表
    - ⑤ 表格
    - ⑥ 表单
    - - input标签
      - input总结
      - 下拉菜单
      - 列表
      - 文本区域
      - marquee标签

1. 什么是网页

1.1 网页类型

网页分为静态网页和动态网页两种类型。

1.1.1 静态网页

不是说页面是静止的称为静态网页，而是页面内容不涉及到后端数据库，每个人进入这个页面都是一样的内容。

1.1.2 动态网页

也不是说页面是动态的称为动态网页，而是和后端数据库有交互，在网页里的操作需要后端数据库的支持。

2. HTML

HTML是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)用一套标签来作为标记 (markup tag)
HTML 使用标签来描述网页
HTML 运行在浏览器上，由浏览器来解析。
HTML文件的后缀名可以是.html也可以是.htm。

2.1 HTML文件

HTML文件由 HTML 元素组成，一个 HTML 元素包含了一个开始标签与结束标签以及之间包含的内容，如下实例:
HTML 元素:

<p>红色的部分是一个元素</p>

2.2 Web浏览器

Web浏览器（如谷歌浏览器，Edge，Firefox，Safari）读取HTML文件，并将其作为网页显示，但是不会显示 HTML 标签，因为标签是用来决定如何展现页面内容的。

2.3 在正式写代码之前的准备工作

sublime安装和准备

安装包链接: https://pan.baidu.com/s/1SJdApwOV7KjJT3TTR-365g.

2.4 html有什么基础语法？

2.4.1 文本标签

我们上面讲过，html是一种标记语言，和你们现在接触到的C语言和C++在代码风格上有很大的不同，但都是英文输入法！！

html中，用标签作为标记，为了对网页中的文本元素进行修饰、排版，使网页丰富多彩，往往需要使用大量的标签符。

文本标签分为文本的基本设置与文本的修饰设置。
1、HTML 标签是由尖括号包围的关键词，比如
2、HTML 标签通常是成对出现的，比如和，但是也有单个出现的，比如说

3、标签对中的第一个标签是开始标签，第二个标签是结束标签，这个和C语言中的大括号对{}很像
4、开始和结束标签也被称为开放标签和闭合标签

HTML的主要组成部分就是这些标签对和标签！！！

2.4.2 基本结构

<!DOCTYPE html>
<html>
<head><title>网页在浏览器工具栏上显示的标题</title>
</head>
<body>主体内容
</body>
</html>

每次修改后一定要按Ctrl + S 保存！第一次在浏览器中打开是鼠标右键“在浏览器中打开（open in Browser）”。已经在浏览器中打开过的保存后刷新那个页面就好。

2.4.3 HTML标签+元素的注意事项

1、不要忘记结束标签
在HTML语法中，你即使忘记了使用结束标签，大多数浏览器也会正确地显示 HTML，因为关闭标签是可选的，但但但千万不要依赖这种做法！忘记使用结束标签会产生不可预料的结果或错误。
2、HTML 空元素（类似C语言的转义字符）

没有结束标签的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
严谨写法：在开始标签后添加斜杠，比如 <br/> （ = <br>……</br> ）、 <hr/>、<input/>、<img/>、<link/>、<meta/> ，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br/> 其实是更长远的保障。
3、HTML使用小写标签
HTML并不像C和C++一样对大小写很敏感，比如说<P>等同于<p>。建议统一使用小写标签。

2.4.4 HTML的注释

注释作用同C语言，只是符号不一样
C: //…… (一般快捷键：Ctrl + / )
*……*\
HTML:
(只有这一种，快捷键也是：Ctrl + / )

2.4.5 语法

① <!DOCTYPE> 声明

声明必须是 HTML 文档的第一行，位于标签之前。声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：

doctype 声明是不区分大小写的，声明方式以下均可：

② HTML头部和主体

<head>元素是所有头部元素的容器。
<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 、<style>。如：如果发现你打开的网页出现了乱码，在<head>下一行加上
<meta charset=“utf-8”>来指定使用utf-8编码格式，有些浏览器（如360浏览器）会设置GBK为默认的编码，则这时你需要设置为<meta charset=“gbk”>
<body>元素定义网页的主体。包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）

③ 基础标签对

标题标签<hn>
<hn>标签用于设置网页中各个层次的标题文字，被设置的文字将以黑体显示，并自成段落。<hn>中的n是一个1-6的数字，通过<h1> - <h6>来定义从大到小的标题。语法示例：
<h1 align=“center”>这是一个h1标题</h1>属性说明：
align属性用于设置标题的对齐方式，其属性值有 left （默认） 、center、right。

段落标签<p>
浏览器是以无格式的方式显示HTML文档的，也就意味着HTML文档中的空格和Enter键是被浏览器所忽略的。要将文本划分段落就必须使用分段标签<p>。两个段落间的间距等于两次换行的距离。语法格式举例：
<p align="center"> 段落内容 </p>属性说明：
align（对齐）属性的属性值有3个参数：left（默认）、center和right。

链接标签<a>
超链接是网页的灵魂，web上的网页正是依靠点击设置在文本、图像、flash等元素上的超链接才能实现相互间的访问。<a href="https://www.w3school.com.cn/">这是一个链接</a>由于定义超链接时常常需要设置文件的路径，所以先介绍文件路径的写法，然后再介绍链接标签的用法。

绝对路径和相对路径： https://blog.csdn.net/Yeoman92/article/details/52736504.

图像标签<img>
Web上常用的图像格式有三种：jpg、gif、png。
使用<img>在网页上直接加入图像的语法举例为：
<img src=“0.jpg” width=“100%” height=“100” border=“1” alt=“照骗”/>
可以看到<img>标签是一个空元素，不需要结束标签，但后面有个 / 。

换行标签<br/>或者<br>
<br>是换行标签，在网页设计中比较常用。使用<br>标签能够使文档在该标签处强制换行，这一点与<p>相同。但与<p>不同的是换行后行之间不留空白行，页面看起来比较紧凑。<br>属于空标签，没有结束标签。但是在使用的过程中，为了正常关闭空元素，我们最好使用<br/>。空格：&nbsp

水平标签<hr><hr>标签是水平线标签，可以在页面中产生一条水平线，用于分隔文档和修饰网页。<hr>属于空元素标签，没有结束标签。故最好使用<hr/>语法格式举例：
<hr color="red" align="center" width="200" size="10“/>常用属性说明：hr标签的常用属性如右表所示。

④ 列表

（Unordered List）无序列标签<ul>
整个无序列表始于<ul>标签。每个列表项始于<li>标签。
语法格式举例：
<ul><li type="circle">列表项1</li><li type="square">列表项2</li>
</ul>属性说明：<ul>的常用属性只有一个type，用来设定列表项前面出现的符号，可取属性值有：
disc：列表项前面加上符号●。
circle：列表项前面加上符号○。
square：列表项前面加上符号■。

有序列标签<ol>
语法格式举例：
<ol type="A" start="2"><li>列表项1</li><li>列表项2</li>
</ol><ol>属性说明：
type： 序号类型start：开始顺序编号
reversed：规定列表顺序为降序

⑤ 表格

<table>称为表格标签，整个表格始于<table>而终于</table>，它是一个容器标签，用于声明一个表格，<tr>、<td>等只能在它的范围内使用。例如：
<table border="1">
<tr><th>表头</th>
</tr>
<tr><td>1,1</td><td>1,2</td>
</tr>
<tr><td>2,1</td><td>2,2</td>
</tr>
</table>

 <tr>用来标签表格行，是单元格（<td>或<th>）的容器，使用时要放在<table>容器里。<tr>常用的属性有：
align：设定这一行单元格中内容的水平对齐方式，属性值为left、center、right。
valign：设定这一行单元格中内容的垂直对齐方式，属性值有：top、middle、bottom。
bgcolor：用来设定这一行的背景颜色。

⑥ 表单

HTML 表单用于收集用户输入，比如注册、登录等等。
类似于表格的<table>……</table>，表单用<form>……</form>作为大容器包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<form>姓名： <input type="text" name="name"<br>性别： <input type="radio" name="sex" value="男" checked><input type="radio" name="sex" value="女">
</form>

input标签

<input type="text">
文本框除了type属性外，其它常用属性有：
name：设定文本框的名称，在所在表单中属性值不能相同，名称 字符串中不能包含空格或特殊字符，可以使用字母数字字符   和下划线 (_) 的任意组合。表单提交到服务器后需要使用指   定的名称来获取文本框的值。
value：设定文本框的默认值，也就是用户输入前文本框里显示    的文本。
size：设定文本框最多可显示的字符数，也就是文本框的长度。
maxlength：用来设定文本框中最多可输入的字符数。通过此属 性可以将邮政编码限制为6位数，将密码限制为10个字符等等。

 密码框用来让用户输入密码，当用户在密码框中键入时，输入内容显示为项目符号或星号，以保护它不被其他人看到。定义密码框的语法为：
<input type="password">密码框的其它属性设置与文本框相同，只是type不同。

单选按钮用来让用户只能从一组选项中选择一个选项，例如，性别的选择。定义单选按钮的语法为：<input type="radio">
单选按钮除type外其它常用属性有：name：用来设定单选按钮的名称，作用同文本框的name。同      一组中所有单选按钮的此属性必须设置相同的值，否      则，各选项不会相互排斥。value：用来设定在单选按钮被选中时发送给服务器的值。checked：是否默认被选中。如果开始标签里加入checked一        词，则初始被选中。

 复选框用来让用户可以从一组选项中选择多个选项。定义复选框的语法为：
<input type="checkbox">
复选框除type外其它常用属性有：name：用来设定复选框的名称，作用同文本框的name。value：用来设定在复选框被选中时发送给服务器的值。checked：用来确定在浏览器中载入表单时，该复选框是否被选中。如果开始标签里加入checked一词，则初始被选中。

1.提交按钮用来将表单数据提交到服务器。定义提交按钮的语法为：<input type="submit">2.重置按钮用来还原表单为初始状态。定义重置安钮的语法为：<input type="reset">3.定义普通按钮的语法为：<input type="button">三种按钮的属性除type外，其它常用属性有：value：用来指定按钮上显示的文本。name：用来指定按钮的名称。

input总结

<input type="text">        文本框
<input type="password">    密码
<input type="radio">       单选
<input type="checkbox">    复选
<input type="button">      普通按钮
<input type="submit">      提交按钮
<input type="reset">       重置按钮

下拉菜单

 下拉菜单，也称下拉列表，用来让访问者从一个列表中选择一个项目。当页面空间有限，但需要显示许多菜单项时，下拉菜单非常有用。
定义一个下拉菜单的语法为：
<select><option>江苏省</option><option selected>湖南省</option>
</select>一个下拉菜单由<select>和<option>来定义，<select>提供容器，它的name属性意义同文本框的相同。<option>用来定义一个菜单项，<option>与</option>之间的文本是呈现给访问者的，而选中一项后传送的值是由value属性指定的，如果省略value属性，则value的值与文本相同，加入selected属性可以使菜单项初始为选中状态。

列表

列表的作用与下拉列表相似，但显示的外观不同，列表在浏览器中显示时列出部分或全部选项，另外列表允许访问者选择一个或多个项目。
定义列表的语法如下：
<select size=“2" multiple><option>常州市</option><option selected>济南市</option>
</select>
跟下拉列表相比，<select>多了两个属性：size和multiple。   size：设定列表中显示的选项个数；multiple：允许选择多项。
在不同操作系统中，选择多个选项的差异：windows：按住 Ctrl 按钮来选择多个选项Mac：按住 command 按钮来选择多个选项
由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。

文本区域

文本区域使用户可以输入多行信息，例如，输入留言、自我介绍等。
定义文本区域的语法为：<textarea>燃烧我的卡路里！</textarea>开始标签与结束标签之间的文本为初始值，可以为空，但结束标签一定要有且正确。

marquee标签

<marquee>可以使其标签的内容产生滚动效果，网上常见的滚动信息公告板或者广告就是用它来实现的。<marquee>标签的使用语法：<marquee>内容产生滚动效果</marquee>
值得一提的是，因为html可以进行嵌套使用，在<marquee>标签内的内容可以是超链接，也可以是图片等等。