文章目录
1.前端开发简单分类
前端开发,这里是一个广义的概念,不单指网页开发,它的常见分类
- 网页开发:前端开发的主要领域,使用HTML、CSS 和 JavaScript等技术来创建运行在浏览器中的应用
- 桌面应用开发:虽然桌面应用通常是由后端语言(如C++、Java或C#)开发的,但现在也可以使用前端技术来开发桌面应用(电脑上的应用)。例如,Electron框架允许开发者使用HTML、CSS和JavaScript来创建跨平台的桌面应用
- 移动应用开发:开发手机应用,比如使用Java开发Android应用。
本篇博客分享网页开发的前端技术!网页开发,使用HTML、CSS和JavaScript这套技术来解决实际问题!而HTML负责网页的结构 (页面元素和内容),CSS负责网页的表现 (页面元素的外观、位置等页面样式,如:颜色、大小等),JavaScript负责网页的行为(交互效果)。
2.前端开发环境配置
下载vscode
官网中下载对应的安装包,安装即可。
插件下载
- Auto Rename Tag:自动补全功能
- view-in-browser:在vscode中打开页面。鼠标右键选择:View-in-Browser选项
- Live Server:自动刷新页面。鼠标右键选择:Open with Live Server选项
3.HTML的简单介绍
HTML(HyperText Markup Language,超文本标记语言),所谓的超文本,不仅可以定义文本信息还可以定义图片、音频、视频、表格、链接等内容。而标记语句是由标签构成的语言!HTML页面通过浏览器的渲染展示出来。
通过基础的HTML标签界面,展示Hello world
html
<html>
<head>
<title>the first page</title>
</head>
<body>
Hello world
</body>
</html>
html 标签是整个 html 文件的根标签、head 标签中写页面的属性、body 标签中写的是页面上显示的内容、title 标签中写的是页面的标题
什么是DOM树
DOM(Document Object Model)树是一个用于表示HTML或XML文档结构的模型。 Document 文档:对应的一个HTML文件或XML文件就是一个文档,而HTML和XML之间的区别在于,HTML侧重于展示信息,展示数据;而XML更侧重于存储数据!Object:一切皆对象,对应的文档是一个对对象,一个标签本质也是对象!
DOM树将文档表示为一个节点树,每个节点对应文档中的一个部分,如标签、属性、文本等。比如上面的基础代码可以表示成DOM树结构:
c
Document
└── html
├── head
│ └── title
│ └── "the first page"
└── body
└── "hello world
DOM树是动态的 ,可以使用JavaScript来修改DOM树,如添加、删除或修改节点,这将直接反映到浏览器显示的网页上。这是实现动态网页和Web应用程序的基础。
标签之间的简单关系
html和head,body这些是父子关系,而head和body标签是兄弟关系。
快速生成HTML的基础结构
在VSCode中我们安装插件可以通过快捷方式:!+ 回车键
生成HTML的基础结构代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
-
称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
-
<html lang="en">
其中 lang 属性表示当前页面是一个 "英语页面"(有些浏览器会根据此处的声明提示是否进行自动翻译). -
<meta charset="UTF-8">
描述页面的字符编码方式,告诉浏览器按照UTF-8的方式解码,当然编写代码的时候IDE设置的编码也要是UTF-8
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
,viewport 表示用户在设备上可以看到的网页的区域,"width=device-width, initial-scale=1.0"
在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放
4.常用的HTML标签介绍
段落标签:h1-h6
六个标签, 从 h1 - h6 数字越大,则字体越小;快捷键:ALT + Shift + 下箭头,快速复制粘贴
html
<body>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</body>
段落标签:p
在HTML代码中回车,浏览器不会解析成换行,需要加上p标签
html
<body>
纸上得来终觉浅,
绝知此事要躬行。
<p>纸上得来终觉浅,</p>
<p>绝知此事要躬行。</p>
</body>
换行标签:br
br 是 break 的缩写. 表示换行
html
<body>
<p>纸上得来终觉浅,<br> 绝知此事要躬行。</p>
</body>
格式化标签
在实际中,这种格式化的工作是让CSS来做的,但是HTML也提供一些,了解。
html
<body>
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
</body>
效果展示:strong 加粗 b 加粗 倾斜 倾斜 删除线 删除线 下划线 下划线
图片标签:img
-
img 标签必须带有 src 属性,表示图片的路径,当然路径的设置可以是相对路径也可以是绝对路径,对应绝对路径可以是磁盘路径或网络路径。
-
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
-
title: 提示文本. 鼠标放到图片上, 就会有提示.
-
width/height: 控制宽度高度.
-
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
html
<body>
<img src="./image/百度一下.jpg" alt="百度一下" title="百度一下">
</body>
超链接标签:a
- href: 必须具备, 表示点击后会跳转到哪个页面
- target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开
html
<body>
<a href="https://www.baidu.com/"></a>
</body>
html
<body>
<a href="https://www.baidu.com/">百度一下</a>
</body>
超链接跳转的几种方式:
-
外部链接: href 引用其他网站的地址
-
内部链接: 网站内部页面之间的链接. 写相对路径即可
html
<body>
<a href="./html02.html">跳转</a>
</body>
- 空链接: 使用 # 在 href 中占位
html
<body>
<a href="#">空链接</a>
</body>
- 下载链接: href 对应的路径是一个文件 (可以使用 zip 文件)
html
<body>
<a href="test.zip">下载文件</a>
</body>
- 网页元素链接: 可以给图片等任何元素添加链接
html
<body>
<a href="https://www.baidu.com/" target="_blank">
<img src="./image/百度一下.jpg" alt="图片加载失败" title="百度首页" ></a>
</body>
- 锚点链接: 可以快速定位到页面中的某个位置
html
<body>
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
</body>
表格标签
基本使用:table 标签: 表示整个表格、tr: 表示表格的一行、td: 表示一个单元格、th: 表示表头单元格. 会居中加粗、thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)、tbody: 表格得到主体区域
- align 是表格相对于周围元素的对齐方式. align="center",整个表格居中
- border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框
- cellpadding: 内容距离边框的距离, 默认 1 像素
- cellspacing: 单元格之间的距离. 默认为 2 像素
- width / height: 设置尺寸
html
<body>
<table align="center" border="1" cellpadding="20"
cellspacing="0" width="500" height="500">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>18</td>
</tr>
</table>
</body>
合并单元格
- 跨行合并: rowspan="n"
- 跨列合并: colspan="n"
html
<body>
<table align="center" border="1" cellpadding="20"
cellspacing="0" width="500" height="500">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td rowspan="2">男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
</tr>
</table>
</body>
列表标签
-
无序列表[重要]
ul
li
-
有序列表[用的不多]
ol
li
-
自定义列表[重要]
dl
(总标签)dt
(小标题)dd
(围绕标题来说明) 上面有个小标题 -
快捷方式:
ul>li*n[tab]
同理ol>li*n[tab]
html
<body>
<ul>
<li>这是无序列表1</li>
<li>这是无序列表2</li>
<li>这是无序列表2</li>
</ul>
<ol type="a">
<li>这是有序列表1</li>
<li>这是有序列表2</li>
<li>这是有序列表3</li>
</ol>
<dl>
<dt>这是自定义列表</dt>
<dd>这是自定义列表1</dd>
<dd>这是自定义列表2</dd>
<dd>这是自定义列表3</dd>
</dl>
</body>
表单标签
在HTML中,表单是由<form>
标签创建的,它用于收集用户输入的数据。表单域: 包含表单元素的区域(重点是from);表单控件: 输入框, 提交按钮等(重点是input)
<form>
标签:
html
<body>
<!--action:跳转的路径,method:请求的方法 -->
<form action="跳转的路径" method="post">
<!-- form标签中的内容 -->
</form>
</body>
<input>
标签:各种输入控件, 单行文本框, 按钮, 单选框, 复选框
- type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等
- name: 给 input 起了个名字. 尤其是对于单选按钮
- value: input 中的默认值
- checked: 默认被选中. (用于单选按钮和多选按钮)
- maxlength: 设定最大长度
html
<body>
<form action="跳转的路径" method="post">
<input type="text"> 文本框<br>
<input type="password"> 密码框<br>
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex" >女 单选框<br>
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打游戏 复选框<br>
<input type="button" value="我是个按钮" onclick="alert('hello')"><br>
</form>
</body>
- 提交按钮
html
<form action="test.html" method="get">
<input type="text" id="name" name="username">
<input type="submit" value="提交">
</form>
- 清空按钮
html
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
- 文件按钮
html
<body>
<form action="跳转的路径" method="post">
<input type="file">
</form>
</body>
label 标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验(下面:点击男也能选中);for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应
html
<body>
<form action="跳转的路径" method="post">
<label for="male">男</label><input type="radio" name="sex" id="male">
</form>
</body>
select 标签
option 中定义 selected="selected" 表示默认选中
html
<form action="跳转的路径" method="post">
<select>
<option>--请选择年份--</option>
<option selected="selected">1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>
</form>
textarea 标签
html
<textarea rows="3" cols="50"></textarea>
rows 和 cols 也都不会直接使用, 都是用 css 来修改
无语义标签: div 和 span
div 标签, division 的缩写, 含义是 分割;span 标签, 含义是跨度,就是两个盒子. 用于网页布局,div 是独占一行的, 是一个大盒子. span 不独占一行, 是一个小盒子.
html
<body>
<div>
<span>再见 </span>
<span>晚安 </span>
</div>
<div>
<span>再见 </span>
<span>晚安 </span>
</div>
</body>