Web前端HTML 开发学习笔记

摘要：

笔者跟随团队在近期项目中做了小程序开发部分工作，小程序测试开发需要有HTML/CSS/Javascript基础，借此总结一下HTML工作的学习笔记，和大家一起入个门。

HTML简介

HTML全称是HyperText Markup Language，超文本标记语言，是网页、常用浏览器、Web标准。

网页相关概念

网站是因特网上根据一定规则使用HTML等制作用于展示特定内容相关的网页集合。

网页由图片、链接、文字、声音、视频等元素组成，常见后缀为html，俗称为HTML文件。网页的这些元素是利用HTML标签描述出来，再通过浏览器解析来显示给用户的。网页是如何生成制作呢？前端人员书写HTML文件，然后用浏览器打开，就能看到了网页。

举个例子来展示一下。新建txt文件，填写内容如下：

将该文件另存为.html，并用浏览器打开，如图1

图1

超文本有2层含义：

可以加入图片、声音、动画、多媒体等内容，超越了文本限制；

可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

常用浏览器及内核

1) 浏览器

IE（含Edge浏览器）、Firefox、Chrome、Safari和Opera等，平时称五大浏览器。

2) 浏览器内核

浏览器内核负责读取网页内容，整理信息，计算网页的显示方式并展示页面。国内一般浏览器都会采用Webkit（Safari内核）/Blink（chrome和opera内核）内核，例如360、UC、QQ、搜狗等。

Web标准

Web标准是W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

为什么需要Web标准

浏览器不同，它们显示页面或排版就有些差异。遵循Web标准可以让不同开发人员写出的页面更标准、更统一，而且

l 让Web发展前景更广阔

l 内容更能被更广泛的设备访问

l 更容易被搜索引擎搜索

l 降低网站流量费用

l 使网站更易于维护

l 提供页面浏览速度

Web标准主要包括结构（Stucture）、表现（Presentation）和行为（Behavior）三方面。

结构：用于对网页元素进行整理和分类，主要指HTML；
表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS；
行为：网页模型的定义及交互的编写，主要指Javacript。

Web标准提出的最佳体验方案是结构、样式、行为相分离。可以简单理解为：结构写到HTML文件中，表现写到CSS中，行为写到Javacript文件中，如图2所示。

图2

HTML标签

l 标签的书写注意规范

l HTML骨架标签

l 超链接标签

l 图片标签并说出alt和title区别

l 相对路径的三种形式

HTML语法规范

1) HTML语法规范

HTML标签由尖括号包围着关键词，如<html>

HTML标签通常成对出现，称为双标签。第一个是开始标签，第二个是结束标签。

有些特殊的标签是单个标签，如<br />，叫单标签。

2) 标签关系

包含关系和并列关系

表示包含关系，例如

<head>

</head>

并列关系

HTML基本结构标签

基本结构标签（也称骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称HTML文档。

表1 HTML基本结构标签

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，称为根标签
<head></head>	文档的头部	注意在head标签中我们需要设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本放到body里面

第一个网页示例：

<html>

<head>

<title>第一个页面</title>

</head>

<body>

键盘敲烂，工资过万

</body>

</html>

基本结构标签图，例如图3。

图3

开发工具

敲写HTML推荐用VS code开发工具，安装时可以选择system版，选择面向计算机所有账户。

VScode 官方历史版本下载地址链接：

https://code.visualstudio.com/updates

图4

新建html文件，填写时以“！”开头。

图5

使用Vscode编写HTML主要步骤：

双击打开软件

新建文件

保存，注意一定要保存为.html文件

Ctrl+加号键，Ctrl+减号键，可放大缩小视图（字体）

生成页面骨架结构

输入!选择第一个，或输入!按Tab键

利用插件在浏览器中预览：双击，或鼠标右键在弹出窗口中点击“Open In Default Browser”。

代码实例：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

Writing code is a very happy things to do!^^

</body>

</html>

VSCode工具生成骨架标签新增代码

<!DOCTYPE>标签

文档类型声明，作用：告诉浏览器使用哪种HTML版本来显示网页。（HTML5、HTML4、HTMLx），创建在文件的最前面。

<!DOCTYPE html>:当前页面采取的是HTML5版本来显示网页。

lang语言

用来定义当前文档显示的语言。

en：定义语言为英语，英文网页

zh-CN：定义语言为中文，中文网页。

charset字符集

character set字符集。<head>标签内，通过<meta>标签的charset属性来定义HTML文档应使用哪种字符编码。

Charset常有：GB2312（简体中文）、BIG5（繁体中文）、GBK（国标简繁）和UTF-8（万国码，基本包含全世界所有国家需要用到的字符）。

一般统一使用UTF-8，避免乱码。

HTML常用标签

理解标签的含义，根据标签的语义，在合适地方给一个最为合理的标签，让页面结构更清晰。

标题标签、段落标签

标题标签 <h1>-<h6>

6个等级的网页标题，根据标题作用的重要性递减

实例：

<h1>标题一共六级选，</h1>

<h2>文字加粗一行显。</h2>

<h3>由大到小依次减，</h3>

<h4>从重到轻随之变。</h4>

<h5>语法规范书写后，</h5>

<h6>具体效果刷新见。</h6>

图6

段落标签paragraph

<p>标签用于定义段落

<p>我是一个段落标签</p>

换行标签break

<br />

标签语义：强制换行

特点：

<br />是个单标签；

<br />标签只是简单地开始新的一行，间距较小，跟段落不一样，段落之间会插入一些垂直的间距。

示例

图7

先复制所有的文字，再用标签使结构更清晰。在vscode中查看-切换自动换行。

文本格式化标签

文字粗体、斜体或下划线

标签语义：突出重要性，比普通文字更重要。

表2 文本格式化标签

语义	标签	说明
加粗	<strong></strong>或<b></b>	更推荐使用<strong>语义更强烈
倾斜	<em></em>或<i></i>	推荐使用<em>语义更强烈
删除线	<del></del>或<s></s>	推荐使用<del>语义更强烈
下划线	<ins></ins>或<u></u>	推荐使用<ins>语义更强烈

<div>和<span>标签

没有语义，是一个盒子，用来装内容的。

Div:Division缩写,分割、分区

Span：跨度、跨距

特点：

<div>标签用来布局，一行只能放一个；大盒子

<span>标签用来布局，一行上可以多个<span>。小盒子

图像标签和路径

图像标签

一图胜千言，<img>标签用于定义HTML页面中的图像。

src是<img>标签的必须属性，用于指定图像文件的路径和文件名。

属性：图像标签的特性。

步骤：把图片放到.html同目录下，再编写代码。

表3 图像标签的其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图8

这里有三个点请大家注意下：

图像标签可拥有多个属性，必须写在标签名img后面
属性之间不分先后顺序，标签名与属性、属性与属性间以空格分开
属性采取键值对格式，即key=”value”，属性=“属性值”

路径

工作中，用文件夹管理文件，方便查找。

目录文件夹：普通文件夹，存放了做页面所需的相关素材，如html文件、图片等。

图9

② VSCode打开目录文件夹

图10

图11

或者将文件夹拖到VSCode中。

③ 路径

页面中图片非常多，通常会新建一个文件夹存放图像文件（images），然后再查找图像，就需要采用“路径”方式来指定图像文件的位置。

路径分为：

相对路径

绝对路径

相对路径：以引用文件所在位置为参考基础，建立出的目录路径

表4 相对路径

分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src=”baidu.gif” />
下一级路径	/	图像文件位于HTML文件下一级如<img src=”images/baidu.gif” />
上一级路径	../	图像文件位于HTML文件上一级如<img src=”../baidu.gif” />

绝对路径

例如“E:\Excerciseqianduan\html”或完整的网络地址https://imgcps.jd.com/ling4/100009691096/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02f9d0/75ad164a/cr/s/q.jpg

超链接标签

<a>标签用于定义超链接，作用从一个页面链接到另一个页面

语法格式 anchor锚

<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像 </a>

表4 两个属性作用

属性	作用
href	指定链接目标的url地址，必须属性，当为标签应用该属性时，就具有超链接功能
target	指定链接页面的打开方式，_self为默认值，_blank为在新窗口中打开方式

链接分类：

l 外部链接，例如<a href=”http://www.baidu.com”>百度</a>

l 内部链接，网站内部页面之间相互链接

l 空链接，没有确定链接目标时，<a href=”#”></a>

l 下载链接，地址是一个文件或压缩包，会下载这个文件

l 网页元素链接，网页中的各种元素，如音频、视频等

l 锚点链接：点链接可快速定位到页面中的某个位置

在href属性中，设置属性值为#名字，如<a href=”#second”>第2集</a>

找到目标位置标签，里面加个id属性=刚才名字，如<h3 id=”second”>第2集介绍</a>

HTML中的注释和特殊字符

注释

以“”结束

特殊字符

图12

小提示：可重点掌握空格，大于号，小于号这三个。

HTML5

大家可主要了解这些：

² 书写表格

² 写出无序列表

² 写出3-4个常用input表单、类型

² 写出下拉列表表单

² 能使用表单元素实现注册页面

² 独立查阅W3C文档

表格标签

表格的主要作用

主要用于显示/展示数据

基本语法

<table>

<tr>

<td>单元格内的文字</td>

…

</tr>

…

</table>

<table></table>用于定义表格的标签

<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中

<td></td>用于定义表格中单元格，必须嵌套在<tr></tr>中。

td值表格数据（table data），即数据单元格的内容

表格属性

后面通过CSS设置

记住属性名，后面CSS使用

直观感受表格的外观形态

表5 表属性

属性名	属性值	描述
align	left center right	规定表格相对周围元素的对齐方式
border	1或””	规定表格单元是否拥有边框，默认为“”，无
cellpadding	像素值	规定单元边沿与其内容间的空白，默认1像素
cellspacing	像素值	规定单元格间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

表格结构标签

表格可能很长，分割成表头和表格主体。

<thead>表格的表头，<tbody>表格主体

图13

举例

图14

图15

<thead></thead>:定义表格头部，一般第一行，内部必须有<tr>标签，th表示表格头部的单元格

<tbody></tbody>:定义表格主体，用于放数据本体

以上都是在<table></table>标签中

表头单元格标签

<th>HTML表格的表头部分（table head），加粗居中，位于表格第一行

表格案例小说排行版

步骤：

制作表格结构

书写表格属性

合并单元格

合并单元格方式

跨行合并 rowsspan=“合并单元格的个数”

跨列合并 colspan=“合并单元格的个数”

图16

目标单元格（合并代码）

l 跨行：最上侧

l 跨列：最左侧

合并的步骤

先确定是跨行还是跨列合并
找到目标单元格，合并方式=合并的单元格数量，例如<td colspan=”2”></td>
删除多余单元格

列表标签

表格用来显示数据，列表用来布局的。列表特点：整体、有序，作为布局更加自由和方便。分为无序列表、有序列表和自定义列表。

无序列表

<ul>标签，列表项使用<li>标签定义

<ul>

…

</ul>

各列表项无顺序级别之分，是并列的

只能嵌套<li></li> ~~~专业

<li></li>可放任何元素，相当于一个容器

属性用CSS设置

有序列表

<ol>标签

<ol>

…

</ol>

<li></li>可容纳任何元素，相当于一个容器

有自己的样式属性，但是工作会用CSS设置

自定义列表

没有任何项目符号

图17 小米官网

<dl>标签，与<dt>(定义项目/名字)和<dd>（描述每个项目/名字）一起使用。

基本语法：

<dl>

</dl>

dl只能包含dt和dd

dt和dd个数无限制，一个dt对应多个dd

列表总结

表6 列表

标签名	定义	说明
<ul></ul>	无序标签	只能包含li，无序，li里面可包含任何标签，常用
<ol></ol>	有序标签	只能包含li，有序，li里面可包含任何标签，少用
<dl></dl>	自定义列表	只能包含dt和dd，dt和dd里面可包含任何标签

表单标签

表单的使用场景：

图 18

网页中的表单

图 19

为何需要表单呢

一般用来收集用户信息

表单组成

表单域、表单控件（表单元素）和提示信息3个部分构成

图 20

表单域

包含表单元素的区域

<form>标签，把它范围内的表单元素信息提交给服务器

例如性别，男 or 女

各种表单元素控件

</form>

表7 表单常用属性

属性	属性值	作用
action	url地址	指定接收并处理表单数据的服务器程序的url地址
method	get/post	设置表单数据的提交方式，取值为get或post
name	名称	指定表单名称，以区分同一个页面中的多个表单域

请大家注意：

写表单元素前要有个表单域对他们进行包含，表单域就是指form标签。

表单控件

l input输入表单元素

l select下拉表单元素

l textarea文本域元素

input输入表单元素：

<input>标签用于收集用户信息，单标签，包含type属性

表8 Type属性值

属性值	描述
button	定义可点击按钮（多数用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中字符被掩码
radio	定义单选按钮
reset	重置按钮，会清除表单中所有数据
submit	提交按钮，会把表单数据发送到服务器
text	单行的输入字段，可在其中输入文本，默认宽度为20字符

Input标签除了type属性外，还有常用的属性如下

表9 Input标签其他常用属性

属性	属性值	描述
name	用户自定义	定义input元素的名称
value	用户自定义	规定input元素值
checked	Checked	规定input元素首次加载时应被选中
maxlength	正整数	输入字段中字符的最大长度

name和value是每个表单元素都有的属性值，主要给后台人员使用

name表单元素的名字，要求单选和复选要有相同name值

checked属性针对单选和复选

maxlength最大字符数，一般很少用，用正则表达式最大最小

<label>标签

Input元素定义标注（标签）。

点击时，自动将焦点（光标）定位到选择的表单元素上，提高用户体验

语法：

核心：

for与id属性相同。

select下拉表单元素

select标签控件定义下拉列表

图21

…

</select>

至少包含一对选项；

<option>中定义selected=”selected”时，当前项为默认选中项

Textarea文本域表单元素

<textarea>多行文本输入的控件

语法：

文本内容

</textarea>

<textarea>可轻松创建多行文本输入框

cols=“每行中字符数”，rows=“显示行数”，开发中用CSS改变大小

总结：

input输入、select下拉、textarea文本域

这3种表单元素都应该包含在form表单域里，并有name属性

<form>

</select>

</form>

表单域 form 使用场景：提交区域内表单元素给后台服务器

文件域 file 是input type属性值，使用场景：上传文件；

文本域 textarea 使用场景：可以输入多行文字，如网站介绍、留言板、等

查阅文档

l 百度： www.baidu.com

l W3C: http://www.w3school.com.cn

l MDN: https://developer.mozilla.org/zh-CN/

posted @ 2021-07-28 08:03 枫叶151 阅读(191) 评论(0) 收藏举报

刷新页面返回顶部

竹梅

Web前端HTML 开发学习笔记