HTML5教程从《HTML+CSS基础课程》学习笔记中的技巧
yund56 2025-04-26 20:23 13 浏览
本文为兄弟连云课堂《HTML+CSS基础课程》学习笔记 订阅走一波。
第一章：Html简介
1. Html、CSS和Javascript的关系
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
2. 标签初认识
1. 语法
标签由英文尖括号<和>括起来，html中的标签一般都是成对出现的，分开始标签和结束标签。标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。此外，HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。
2. html标签
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>1234567891011121312345678910111213
这个网页由一些html标签组成：
“勇气”是网页内容文章的标题，<h1></h1>就是标题标签，它在网页上的代码写成<h1>勇气</h1>。
“三年级时…我也没勇气参加。” 是网页中文章的段落，<p></p>是段落标签。它在网页上的代码写成<p>三年级时...我也没勇气参加。</p>
网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成<img src="1.jpg"。总结一下，可以这么说，网页中每一个内容在浏览器中的显示，都要存放到各种标签中。
<head>标签：文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
3. html文本基本结构
一个HTML文件是有自己固定的结构的。
<html>
<head>...</head>
<body>...</body>
</html>12341234
代码讲解：
1.<html></html>称为根标签，所有的网页标签都在<html></html>中。
2.<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、 <meta>等标签。
3.在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
4.HTML的代码注释
代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。语法：<!--注释文字 -->
- 上一篇：让 HTML5 来为你定位
- 下一篇：HTML5前景展望
相关推荐
- 可以免费将图片转为pdf吗?这10款软件工具快来试试看!
-
为什么越来越多的人选择将图片转为pdf呢？当然是为了便于管理和查阅啦！多张图片可以合并为一个PDF文件，实现跨平台无障碍分享，还能通过设置密码来保护隐私，何乐而不为呢？不知道具体怎么操作的赶紧看过来~...
- 西电计算机系90后博士:5年攻克一个难题，发表论文助力癌症治疗
-
学子加油【西电计算机系90后博士：5年攻克一个难题，发表论文助力癌症治疗】“不忘初心，砥砺前行，总有柳暗花明的那一刻。我虽然是计算癌症生物学方向的一名小小的研究者，但我很骄傲能通过计算手段为攻克癌症事...
- SCI论文格式模板使用教程(1)从期刊官网下载manuscript模板
-
问：每次写论文都要自己排版？答：不，其实写论文的时候可以不用每次都排版，设置好模板文件，导出.doc后即可自动排版！笔者之前都是先用Word写论文，然后自己排版，manuscript的格式不...
- 云南下半年全国计算机等级考试9月26日开考!考试科目、考点设置戳→
-
云南考生注意！今年下半年第58次全国计算机等级考试（NCRE）报考简章已公布今年考试时间为9月26日至27日考试科目有哪些？考点如何设置？哪些考点接受外校考生报考？......一起来看↓↓↓1考试级别...
- 分享6个免费下载电子书的网站
-
着急看书的宝子们看这里！收藏了一堆电子书网站终于能派上用场了~01/Z-Libraryhttps://zh.zlibrary-be.se/世界上最大的电子图书馆，拥有超千万的书籍和文章资源，99%的书...
- 文本、图像、点云任意模态输入，AI能够一键生成高质量CAD模型了
-
AIxiv专栏是机器之心发布学术、技术内容的栏目。过去数年，机器之心AIxiv专栏接收报道了2000多篇内容，覆盖全球各大高校与企业的顶级实验室，有效促进了学术交流与传播。如果您有优秀的工作想要分享，...
- 全栈工程师的百宝箱:黑魔法之文档篇
-
今天收集Session数据的时候收集到了这样的一条，就是“全栈工程师的工具箱”。星期一又想不到什么可以写的内容，就来这样的一篇好了。以下的内容都是压箱底的，找个地方好好收藏。这篇是文档相关篇，介绍一些...
- 测试人看的第一本书——《计算机软件测试》PDF高清版
-
马上年关了，2021年即将过去。回望这一年，你升职加薪了没？技术有提升没？不要日复一日的重复着当前的工作，拿着年初一样的薪资。是否感觉升职无望，跳槽涨薪没底气，技术没有一点提升？万丈高楼平地起，基础没...
- 尘梦知媃 (9 不是结束)
-
小序：“人生和剧本中第一个出现的人物往往不是主角”“命运会给你更好的那个人”，这是作者多年以后的深刻领悟，事实上那个对的人一直在你身边，只是人往往会被生活所迷惑，会走一些弯路。有些人和事一生就错过了，...
- 基于微信小程序的家政服务平台设计-计算机毕业设计源码+LW文档
-
摘要随着信息技术的发展，管理系统越来越成熟，各种企事业单位使用各种类型的管理系统来提高工作效率，从而降低手工劳动的弊端。传统模式的家政服务管理满足不了现代人的生活追求，服务质量、服务速度。随着互联网...
- 深入讲一下姜萍为什么要用国外的英文教材!
-
姜萍用英文的国外教材姜萍获得了2024年，阿里数学竞赛的12名，记者采访的时候发现姜萍学习偏微分方程用的竟然是纯英文的国外教材。有些人对此很不理解，我们有很多的数学教材，为什么要用国外的数学教材，而且...
- 面试官:如何进行 JVM 调优(附真实案例)
-
原创：程序员囧辉前言面试官：在工作中做过JVM调优吗？讲讲做过哪些JVM调优？我一个QPS不到10的项目，上次问我缓存穿透缓存雪崩，这次问我JVM调优，我是真滴难。不过大家别慌，热心的我给...
- 七夕前学起来，程序员的浪漫:三十行代码实现用她的名字作幅画
-
hello，各位小伙伴们大家早上|中文|晚上|凌晨好，相信看这篇文章的有很多新朋友，估计也有少量的老朋友，首先做个简短的自我介绍，我是一灰灰，码农界的资深搬运工；今天呢，没有站在我身边的捧哏老师，那就...
- 127.手摇计算机的收藏(我的民间收藏笔记)
-
1970年代前后，我国生产的手摇计算机，主要有上海飞鱼牌和通用牌手摇计算机，天津文化牌手摇计算机。这几种手摇计算机的收藏价，目前很不统一。品相好又能使用的收藏价大概为1500—7000元。品相不好又...
- 计算机毕业设计Hadoop+Hive+PySpark小说推荐系统 小说可视化
-
基于Spark+hadoop大数据小说数据分析推荐系统（完整系统源码+数据库+开发笔记+详细部署教程+虚拟机分布式启动教程）直拍源码包部署爬虫可用基于用户协同过滤算法开发技术介绍编辑器：Pychar...
- 一周热门
- 最近发表
- 标签列表
-
- filter函数js (37)
- filter函数excel用不了 (73)
- 商城开发 (40)
- 影视网站免费源码最新版 (57)
- 影视资源api接口 (46)
- 网站留言板代码大全 (56)
- java版软件下载 (52)
- java教材电子课本下载 (48)
- java技术的电子书去哪看 (33)
- 0基础编程从什么开始学 (50)
- java是用来干嘛的 (51)
- it入门应该学什么 (55)
- java线上课程 (55)
- 学java的软件叫什么软件 (38)
- 程序开发软件有哪些 (53)
- 软件培训 (59)
- 机器人编程代码大全 (50)
- 少儿编程教程免费 (45)
- 新代系统编程教学 (61)
- 共创世界编程网站 (38)
- 最容易入门的编程语言 (33)
- 亲测源码 (36)
- tan sin cos 图 (33)
- 三角函数积分公式表 (35)
- 函数的表示方法 (34)