网页前端培训笔记1

已于 2022-02-04 21:52:57 修改
阅读量455 收藏
点赞数 1
文章标签： 前端 html
于 2022-02-03 16:52:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63202674/article/details/122776449
版权

HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析.

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

HTML文档的后缀名

  • .html
  • .htm

以上两种后缀名没有区别，都可以使用。

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

 HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

HTML 网页结构

下面是一个可视化的HTML页面结构：

只有 <body> 区域 (白色部分) 才会在浏览器中显示

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta> 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域

<meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML <script> 元素

<script>标签用于加载脚本文件，如： JavaScript。

<script> 元素在以后的章节中会详细描述。

HTML head 元素

标签描述
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。此过程中题目逐渐变小。

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

………………………………

HTML 段落

HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

…………………………………

HTML 链接

HTML 链接是通过标签 <a> 来定义的。

<a href="https://www.runoob.com">这是一个链接</a>

提示:在 href 属性中指定链接的地址

……………………………………

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

<img src="/images/logo.png" width="258" height="39" />

注意： 图像的名称和尺寸是以属性的形式提供的。

……………………………………

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签参考手册。

下面列出了适用于大多数 HTML 元素的属性：

属性描述
class为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式（inline style）
title描述了元素的额外信息 (作为工具条使用)

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

<!-- 这是一个注释 -->

注释: 开始括号之后（左边的括号）需要紧跟一个叹号 ! (英文标点符号)，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

HTML 格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。

HTML 文本格式化标签

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

HTML "计算机输出" 标签

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

HTML 引文, 引用, 及标签定义

标签描述
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。

图片来源：菜鸟教程

空景 Sadnes╰つ677
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第五次网页前端培训笔记
m0_66405825的博客
02-09 507
1.学习网址 hbuilder第五次培训笔记 - 幕布 2.基础操作 3.基本框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基本使用</title> </head> <body> <!-- js的三种使用方式 1.行内JS 在html标签上直接写J5代码 ...
web前端笔记
07-28
【web前端笔记】是我在参加专业培训机构学习时整理的一系列笔记，主要涵盖了Web前端开发的基础知识、重要概念和技术栈。这些笔记旨在帮助初学者或有经验的开发者更好地理解和掌握前端开发的核心技能，同时也可供自我...
网页前端培训笔记6
qq_63202674的博客
02-11 143
代码1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> /** == 相等，比较值是否相等 === 全等，比较值和类型是否相等 */ var
网页前端培训笔记5
qq_63202674的博客
02-08 177
网页前端培训笔记5
HTML网页前端培训笔记
weixin_58627980的博客
02-04 764
1. 安装编程工具HBuilderX 学习html我选择HBuilderX工具。进入HBuliderX官网：https://dcloud.io/hbuilderx.html 点击DOWNLOAD,选择Windows标准版下载解压即可 2.html常用标签（直接上代码） <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>常用标签</title> &l
网页前端培训笔记2
zuihaodezijix的博客
02-06 458
select 下拉框 option 下拉框选项 input 输入 type 表示元素类型 text 文本框 password 密码框 radio 单选框 checkbox 复选框
第一次网页前端培训笔记
qq_63695729的博客
02-03 269
1. 安装编译器 HbuiderX 2.基础操作 学会新建项目 3.HTML基本框架 在菜鸟教程上学习HTML教程：基础、元素、属性、段落等。
第四次网页前端培训笔记
weixin_62243245的博客
03-05 404
一，视频资料 【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibiliCSS 教程 | 菜鸟教程 二，整体内容 1，css盒子模型 CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的. CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用"style"属性 内部样式表 -在HTML文档头部 <head> 区域使用<style>元素来包含C...
网页前端培训笔记7
qq_63202674的博客
02-11 553
资料来源 代码1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内置对象</title> </head> <body> </body> <!-- 内置对象 String ◦ charAt(idx) 返回指定位置处的字符 ◦ indexOf(Chr) 返回指定子
第六次网页前端培训笔记
qq_57231850的博客
02-10 466
一、总体概述 学习链接： 【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili HTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibili JavaScript 教程 | 菜鸟教程 本次学习的主要内容是JS的基础使用，其中包括运算符、数组，函数定义和函数调用。 二、学习内容 1、运算符 运算符分为两种，一种为算数运算符，一种为赋值运算符...
艺术培训学校响应式网页模板
01-23
"艺术培训学校响应式网页模板"是专为艺术教育机构设计的一种网页布局，旨在提供优秀的用户体验，无论用户使用何种设备访问。 此模板的核心特点在于其灵活性和自适应性。通过使用媒体查询（Media Queries）、弹性...
斑码教育大前端课堂笔记-css第一天
11-24
斑码教育是专注于IT技术培训的机构，其在前端开发领域的教学资源备受关注。本篇笔记是斑码教育sy101课程的第一天内容，主要围绕CSS（Cascading Style Sheets）展开，旨在帮助初学者系统地理解并掌握网页样式设计的...
达内培训笔记(5个月)
07-28
1. Servlet和JSP：用于处理HTTP请求和生成动态网页内容。 2. EJB（Enterprise JavaBeans）：提供服务器端的业务逻辑组件模型。 3. JMS（Java Message Service）：实现异步消息传递。 4. JPA（Java Persistence API）...
前端资料.zip
07-27
黑马程序员是一家知名的IT培训机构，他们提供的课程覆盖了多个技术领域，包括前端开发。这个压缩包很可能是为了帮助学员深入理解前端开发中的概念和技术，通过实际的代码示例来辅助学习。 在前端开发中，我们通常会...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 389
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1245
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1732
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 407
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值