前端开发基础之HTML、CSS和JavaScript详细介绍及其简单综合案例应用

需积分: 21 168 浏览量 2025-02-27 09:04:07 上传评论收藏 786KB PDF 举报

资源推荐

资源详情

资源评论

HTML+CSS+JS基础知识

文档作者

CSDN-码力无边

一、HTML 基础

1.1 什么是 HTML

HTML，即超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。

它通过一系列的标签（tags）来描述网页的结构和内容，这些标签就像是网页的 “骨架”，告诉浏览器如

何展示文本、图像、链接、表格等各种元素，从而将网页的内容呈现给用户。简单来说，HTML 是构建

网页的基石，没有它，网页就无法正常显示各种信息。例如，当你在浏览器中输入一个网址并访问时，

浏览器会读取该网页对应的 HTML 文件，然后根据其中的标签指令，将网页内容以正确的格式展示出

来。

1.2 HTML 文档结构

一个基本的 HTML 文档包含以下几个关键部分：

<!DOCTYPE html> ：这是文档类型声明，必须位于 HTML 文档的第一行，它告诉浏览器该文档遵循的

HTML 版本规范，在 HTML5 中，统一使用 <!DOCTYPE html> ，确保浏览器以标准模式渲染页面，避免

出现兼容性问题。

<html> ：这是 HTML 文档的根标签，所有其他 HTML 元素都包含在这个标签内，它标志着 HTML 文档

的开始和结束，一个 HTML 文件只能有一个 <html> 标签。

<head> ：头部标签，用于定义文档的头部信息，包含了一些辅助性的标签和元数据，如 <title> （定

义网页标题）、 <meta> （定义字符编码、页面描述等元信息）、 <link> （用于引入外部样式表

等）、 <script> （用于引入 JavaScript 脚本等）。这些信息不会直接显示在网页的主体内容中，但对

网页的正确显示和功能实现起着重要作用。例如， <title> 标签中的内容会显示在浏览器的标题栏上，

帮助用户识别页面； <meta charset="UTF - 8"> 用于设置网页的字符编码为 UTF - 8，确保网页能正

确显示各种字符。

<body> ：主体标签，包含了网页的可见内容，如文本、图像、链接、表格、表单等各种元素。用户在

浏览器中看到的实际内容都在 <body> 标签内。例如， <p>这是一个段落。</p> 这样的文本段落元素，以

及 <img src="image.jpg" alt="示例图片"> 这样的图片元素，都应该放在 <body> 标签中。

以下是一个简单的 HTML 文档结构示例：

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>我的第一个网页</title>

</head>

<body>

 <h1>欢迎来到我的网页</h1>

1.3 常用 HTML 标签

1.3.1 标题标签（ <h1> - <h6> ）

HTML 提供了六级标题标签，从 <h1> 到 <h6> ，用于定义不同级别的标题。 <h1> 是最高级别的标题，

通常用于表示网页的主标题， <h6> 是最低级别的标题。随着级别的降低，标题的字体大小会逐渐减

小，语义重要性也逐渐降低。例如：

在浏览器中显示时，各级标题会有明显的大小差异，便于用户区分页面内容的层次结构。一般来说，一

个网页中应该只有一个 <h1> 标签，用于突出页面的核心主题，其他级别的标题可以根据内容的逻辑结

构适当使用。

1.3.2 段落标签（ <p> ）

<p> 标签用于定义段落，它会自动在段落前后添加一些空白，使段落之间有明显的区分。在 <p> 标签内

可以放置文本内容，例如：

如果需要在段落内换行，可以使用 <br> 标签， <br> 是一个自闭合标签（即没有结束标签），例如：

1.3.3 链接标签（ <a> ）

<a> 标签用于创建超链接，通过设置 href 属性来指定链接的目标地址。例如，创建一个指向百度的外

部链接：

当用户点击 “点击访问百度” 这个文本时，浏览器会跳转到百度的网站。

如果要在新窗口中打开链接，可以设置 target 属性为 _blank ，例如：

还可以创建内部链接，用于在同一页面内跳转到指定位置。首先需要给目标位置的元素添加一个 id 属

性，例如：

 <p>这是一个简单的段落。</p>

</body>

</html>

<p>这是一个段落，用于展示一段相对独立的文本内容。可以包含多个句子，通过段落标签来组织和呈现，使

网页内容更加清晰易读。</p>

<p>这是第一行文本<br>这是第二行文本</p>

<a href="https://www.baidu.com">点击访问百度</a>

<a href="https://www.baidu.com" target="_blank">在新窗口访问百度</a>

其中， border="1" 属性用于设置表格的边框，值为 1 表示显示边框，值为 0 或不设置则表示不显示边

框（在实际应用中，常使用 CSS 来更灵活地设置表格样式）。

1.3.7 表单标签（ <form> 及相关输入标签）

<form> 标签用于创建表单，收集用户输入的数据。表单可以包含各种输入类型的元素，如文本框、密

码框、单选按钮、复选框、下拉菜单等。

文本框（ <input type="text"> ）：用于输入单行文本，例如：

这里的 <label> 标签用于为输入框提供描述信息， for 属性的值与对应的 <input> 标签的 id 属性值相

同，这样点击 <label> 文本时，会自动聚焦到对应的输入框。 name 属性用于标识输入框，在提交表单

时，服务器可以通过 name 来获取输入框的值。

密码框（ <input type="password"> ）：用于输入密码，输入的内容会以掩码形式显示（如星号或黑

点），例如：

单选按钮（ <input type="radio"> ）：用于从多个选项中选择一个，多个单选按钮需要设置相同的

name 属性，通过 value 属性来区分不同的选项，例如：

复选框（ <input type="checkbox"> ）：用于从多个选项中选择多个，每个复选框都有自己的 name

和 value 属性，例如：

下拉菜单（ <select> 和 <option> ）： <select> 标签创建下拉菜单， <option> 标签定义菜单中的选

项，例如：

<form>

 <label for="username">用户名：</label>

 <input type="text" id="username" name="username">

</form>

<form>

 <label for="password">密码：</label>

 <input type="password" id="password" name="password">

</form>

<form>

 <label for="male">男</label>

 <input type="radio" id="male" name="gender" value="male">

 <label for="female">女</label>

 <input type="radio" id="female" name="gender" value="female">

</form>

<form>

 <label for="hobby1">阅读</label>

 <input type="checkbox" id="hobby1" name="hobby" value="reading">

 <label for="hobby2">运动</label>

 <input type="checkbox" id="hobby2" name="hobby" value="sports">

</form>

剩余31页未读，继续阅读

评论收藏

内容反馈

码力无边-OEC

粉丝: 2911

前端开发基础之HTML、CSS和JavaScript详细介绍及其简单综合案例应用

HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip

JavaScript前端开发案例教程-源代码.rar

HTML5+CSS3+JavaScriptWeb前端开发案例教程（慕课版）-测试卷.rar

超经典的Web前端与移动开发基础视频 Web前端基础开发视频教程 移动开发基础视频教程

《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

《html+css+javascript 网页制作案例教程》源代码

HTML5+CSS3+JavaScript Web前端开发案例教程（慕课版）-源码.rar

HTML5+CSS3+JavaScript网页设计案例课堂-课本源代码.zip

157个HTML+CSS+JavaScript前端开发24实例

Web前端开发案例教程（HTML5+CSS3）（微课版）_PPT课件.zip

Web前端开发案例教程（HTML5+CSS3）（微课版）_源代码.zip

web前端基础案例

HTML+CSS+JavaScript原生购物网站首页案例

HTML5+CSS3+JavaScriptWeb前端开发案例教程（慕课版）-习题及答案.rar

前端开发 - HTML+CSS+JavaScript 学生成绩管理系统 - 响应式设计+动态交互 - 期末大作业参考

HTML5及CSS3web前端开发技术习题答案解析.pdf

网页设计与开发HTML、CSS、JavaScript实例教程教程 课后习题

《网页设计与制作项目教程(HTML+CSS+JavaScript)》-配套源码.zip

酒店前端项目，JavaScript+css+html,静态网页，适用于大作业，上机任务 多页面Javaweb

基于JavaScript技术的调查问卷HTML+CSS前端设计源码

《网页设计与制作项目教程（HTML+CSS+JavaScript）》源代码.zip

html、CSS、JavaScript

基于HTML、CSS、JavaScript的easy云盘前端设计源码

WEB程序课程设计——用html,css,javascript开发

html,css,js部分前端案例

WEB前端开发-案例汇总(81例).zip

前端开发权威指南——融合html javascript css php .doc

50个前端小案例中文注释 HTML+CSS+JS

fastadmin

微信小程序城市切换效果源码

最新资源

超经典的Web前端与移动开发基础视频 Web前端基础开发视频教程移动开发基础视频教程

网页设计与开发HTML、CSS、JavaScript实例教程教程课后习题

酒店前端项目，JavaScript+css+html,静态网页，适用于大作业，上机任务多页面Javaweb