HTML的入门及结构组成 html基本组成结构
gaoyangw 2024-11-13 10:36 44 浏览 0 评论
当大家在浏览网页的时候,是否思考过这样一个问题:怎样才能制作出一个网页呢?制作出一个网页是很简单的,只要知道什么是HTML并掌握HTML的基础知识就可以制作出一个简单的网页,今天我就为讲解HTML的入门及结构组成。
一、什么是HTML?
1、在我们开始学习HTML之前我们需要知道什么是HTML?
HTML的全称为Hyper Text Markup Language,中文名称为超文本标记语言,阅览方式为网页浏览器,同时HTML也被称为网页。
2、一个简单的HTML文档
二、HTML编辑器
我们在可以使用TXT文本文档或者专业的HTML编辑器来编辑HTML。
1、记事本
① 创建一个TXT文本
② 输入HTML代码
③ 点击文件—另存为—输入名称+“html”的后缀名即可得到你的第一个HTML文件。
④ 然后双击这个文件运行。
2、专业编辑器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
这其中我比较推荐HBuilder这款编辑器,界面简单,编辑起来很快。
三、HTML的组成部分
在上面的案例中我们可以看到HTML是由头部(head)和身体(body)所组成的。
1、头部(head)
通常包含标题(title),也就是一个网页的名称
2、身体(body)
body的部分是整个网页的重要内容部分,让人一眼就浏览到这个网页的内容,可以插入文本、图片、多媒体等内容。
四、HTML元素
l HTML元素是指以开始标签起始,以结束标签终止的元素:元素内容即为开始标签与结束标签之间的内容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等这些都是HTML元素,在上面的案例中就有六个元素。
l 也有部分元素只有开始标签,例如<br>,以开始标签的结束而结束。
五、HTML的属性
l 一般来说HTML的属性就是HTML元素的属性,属性可以在元素中添加附加信息。
l 属性总是以名称/值对的形式出现,比如:name=”value”。
l 属性一般描述于开始标签。
l style中会有更多的属性。
六、HTML格式化
HTML可定义很多供格式化输出的元素,比如粗体字和斜体字。
HTML文本格式化标签
标签 | 描述 |
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
HTML“计算机输出”标签
标签 | 描述 |
<code> | 定义计算机代码 |
<kdd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
HTML引文、引用及标签定义
标签 | 描述 |
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用语 |
<cite> | 定义引用、引证 |
<dfn> | 定义一个定义项目 |
七、HTML超链接
超链接可以是图片、文字、多媒体也可以是一个网址
示例:
结果:
点击带有下划线的两个字就可以进入某度的网站
八、HTML CSS
1、CSS是一种层叠样式表,可以修饰html元素的样式并可以精确地进行排版
2、CSS有三种方式:
l 内部样式,在HTML元素中使用“style”属性
l 内部样式表,在头部<head>区域使用<style>元素来包含CSS
l 外部引用,引用带有后缀css的文件,示例:
如果你看到了这里,就说明你已经打开了制作网页的大门啦~
相关推荐
- 百付科技智能拓客解决方案:搜索优化与搜索竞价的协同增长
-
百付科技通过“智能拓客+搜索优化”的深度协同,构建“DeepSeek技术占位+百度竞价引流+内容搜索沉淀”的全域营销闭环,帮助企业在搜索生态中实现从“流量获取”到“用户资产...
- 百度搜索10年来最大改版 搜索框、结果页、生态全面革新
-
7月2日,百度集团股份有限公司(以下简称“百度”)旗下百度搜索宣布进行十年来最大改版,从搜索框、搜索结果页到搜索生态全面革新。最直接的变化是经典的百度搜索框变大,成为“智能框”。原本只支持几十个字的搜...
- 百度搜索10年来最大改版,首次支持超千字文本输入
-
IT之家7月2日消息,在今日的百度AIDay开放日上,百度搜索宣布进行10年来最大改版。百度搜索框升级为“智能框”,支持超千字的文本输入,拍照、语音、视频等能力也全面加强,支持直接调...
- 百度搜索10年来最大改版:推出智能框、升级AI助手
-
7月2日,百度搜索宣布进行十年来最大改版,从搜索框、搜索结果页到搜索生态均有变化。百度搜索框变为“智能框”,支持超千字的文本输入,以及拍照、语音、视频等,还可以直接调取AI写作、AI作图等工具。最直接...
- 深入解析Go测试并行性优化:为何多核CPU无法加速你的测试?
-
一、问题背景:理论与现实的差距最近在优化某项目API测试时,遇到一个反直觉的现象:理论预期:设计为完全并行的测试套件,总耗时应接近最长单测用时实际表现:总耗时是最慢单测的7倍,CPU利用率始终低于50...
- 电脑C盘满了怎么清理?推荐几款靠谱的C盘清理软件
-
电脑c盘满了之后就会导致运行缓慢,而且还会影响到使用体验,到底应该如何来清理呢?今天就为大家来详细的介绍一下,并且推荐几个比较靠谱的c盘清理软件。等到c盘空间不足时,可以选择系统自带的磁盘清理工具。...
- NGINX 性能优化与高级配置:榨干服务器潜能,打造极致体验
-
NGINX以其卓越的性能和高并发处理能力闻名于世,但默认配置往往只是一个普适性的起点。要想真正发挥NGINX的潜能,满足日益增长的业务需求,深入理解其配置并进行精细化调优至关重要。这就像拥有一辆...
- 清理大师拖慢你的电脑?系统优化软件的黑历史你了解吗?
-
你是不是也用过“清理大师”“加速助手”这类软件?它们看起来能释放内存、优化系统,其实很可能反而拖慢了你的电脑。别再中招了,本篇告诉你它们到底在干什么,如何真正提升性能。...
- 游戏修复工具在手,游戏流畅度翻倍!
-
分享四款实用的修复工具,可以帮助不同需求的玩家解决游戏运行故障。1、通过『迅捷DLL修复助手』修复游戏...
- 网络曝光有哪些渠道?为什么好多事情曝光了才会处理!
-
网络曝光有哪些渠道?为什么好多事情曝光了才会处理!社交平台发布:利用微博、微信朋友圈、百度贴吧等社交平台发布相关信息。这些平台用户基数大,传播速度快,是曝光事件的有效渠道。专业媒体联系:如果事件影响较...
- 工业品网络营销/工业品网络推广如何避免价格战?
-
工业品网络营销/工业品网络推广如何避免价格战?产能过剩,现在行业竞争越来越卷了,客户动不动就比价格,有没有同感的老板呢?今天我用我们16年的工业品网络营销的经验,告诉你:好产品就该卖出他该有的价格。很...
- 科普宣传丨暴雨多发季节,这些防汛安全知识请牢记
-
【来源:桦甸发布】雨季来临时常都会出现暴雨大风等天气泥石流、滑坡等情况也时有发生给我们的日常生活带来一些安全隐患那么在防汛期间出行安全有哪些需要注意的地方呢?遇到暴雨怎么办呢?来源:网络综合编辑:高...
- 黄前镇开展“网络同心 文明同行”主题宣传活动
-
岱岳融媒讯:...
- 新闻稿如何发布效果好?新闻推广的重点与难点有哪些?
-
新闻推广是现代社会中不可或缺的一环。随着信息时代的到来,新闻如闪电般迅速传播,通过推广新闻可以让更多人了解并关注相关事件观点和产品。然而如何做到有效的新闻推广却是一个复杂而具有挑战性的过程。开明网络营...
- 百付科技百度营销全攻略:从百度 SEO 到百度一下首页的流量密码
-
在百度生态流量竞争白热化的2025年,百付科技以“百度SEO+纳米AI搜索”为核心,为企业提供从技术优化到商业转化的百度营销全案,助力抢占百度一下首页流量高地。一、百度营销的双轨策略...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 百度收录 (50)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 手机网站建设 (53)
- 网站维护 (53)
- 网页制作教程 (66)
- 百度收录批量查询工具 (48)
- 网站服务器 (53)
- 学生个人网页制作html (56)
- 一键优化 (67)
- 网页制作软件 (49)