前端与HTML | 青训营

_阔乐加冰
110 阅读4分钟

前端与HTML

什么是前端？ 前端工程师是使用web前端技术栈解决多端图形用户界面交互问题的工程师。 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。

在计算机编程中，前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

说得简单些：前端就是用户能够看到的界面——网页、app、小程序等。我们通过代码来让这些界面更美观、更丰富、和用户更有互动性。

包括但不限于HTML、CSS、JavaScript等技术栈。

  1. 解决人机交互问题
  2. 跨终端
  3. web技术栈

前端技术栈

  1. HTML负责页面结构、内容
  2. CSS设置页面样式
  3. JavaScript定义网页的行为
  4. 浏览器可通过HTTP协议和服务器进行通信

前端应该关注功能、美观、无障碍、安全、性能、兼容性。

HTML(HyperText Markup Language）

什么是html?
html是超文本标记语言,是用来描述web文档的一种标记语言,使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。

  • HyperText 图片 标题 连接 表格
  • Markup Language 标签

插入图片的标签

<img src="图片名">

HTML的基本语法

HTML文件中的标签都是由一对尖括号包含的，标签间的关系有两种：包含和并列。简单的来说，包含关系就相当于是父子关系，如下代码中的<html></html>与<head></head>就是包含关系，<html>相当于是<head>的父亲，<head>是<html>的儿子，<head>需要写在<html>标签的里面。另一种并列关系就相当于是兄弟关系，就像<head>和<body>，处于同一级别。

html基本代码

<!DOCTYPE html>    // 文档类型声明
<html>                       //根标签
	<head>             //头部标签
		<meta charset="utf-8" />  //源信息标签 可以设置代码以及关键字
		<title>页面标题</title>
	</head>
	<body>             //内容
		<h1>一级标题</h1>
                <p>段落内容</p>
	</body>
</html>
  • html标签是HTML文件的根标签
  • head标签是文档的头部标签
  • title标签用于文档标题
  • body标签相当于是文件的主体

注：其中DOCTYPE是告诉浏览器，当前当前的文本是HTML5。html标签 是HTML的开头和结尾标签，lang="en"表示语言是英文，也可以lang="zh"中文，也可以不写，不影响。 head是HTML的头部标签，里面可以写标题以及编码等，body则是HTML的主体内容。

HTML语法

  1. 标签和属性不区分大小写，推荐小写
  2. 空标签可以不闭合。比如 input、meta
  3. 属性值推荐用双引号包裹
  4. 某些属性值可以省略，比如 required、readonly

标题h1~h6 字体变小

列表标签

  • ol 有序列表
  • ul 无序列表

定义列表 dl>dt>dd

链接<a href="地址"></a>

插入图片<img src=" 地址"/> alt标签：图片加载不出来便会显示文字

插入音频<audio src=" 地址"></audio>

插入视频<video src=" 地址"></aideo>

输入<input>

文本框内有文字提示 <input placeholder="文字内容">
调节范围  <input type="rang">
文本框内输入1~10的数字 <input type="number" min="1" max="10">
日期选择框 <input type="date" min="2023-07-27">
文本框多行输入 <textarea>内容</textarea> 

复选框<input type="checkbox">
单选框<input type="radio">
下拉选择 <select><option>
自由输入提示<input list="countries">

引用

长引用 <blockquote>
短引用<cite>
引用（带引号）<q>
强调 <strong> <em>

HTML、CSS、JavaScript之间的关系

现实生活中我们所看到的网站基本上都是由HTML、CSS、JavaScript三个部分组成的。即分为结构，表现，行为三大部分。

结构——HTML——对网页元素进行整理，分类。
表现——CSS——设置网页元素的版式，颜色，大小等外观样式。
行为——JavaScript——网页模型的定义及交互编写。

通俗的来讲，我们可以把这三个部分形象的比喻成一间房子装修使用的过程。

结构——类似于一间毛胚房，在需要开窗，开门的地方留好洞，即完成基本的框架。
表现——相当于装修这间毛胚房，粉刷，添置家具等美化这间房子。
行为——即人们入住这间房子，开灯等与这间房子产生交互。

语义化的好处：

  1. 代码可读性
  2. 可维护性
  3. 搜索引擎优化
  4. 提升无障碍性

如何做到语义化：

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

可以结合自己学到的内容在软件上实践，能够更好的理解每个知识点，HTML5还有许多的标签，掌握了课上所学便可在网上查找，做出一个简单的网页。

avatar
文章
阅读
粉丝