认识 HTML、CSS、JS
这篇文章介绍HTML、CSS、JS,以及他们之间的关联
总的来讲:
HTML标签:是页面的核心内容,定义了页面有什么内容。
CSS:控制HTML元素的排版布局和展示方式,是美化页面文档的。
JavaScript:让用户与页面进行交互,或在网页背后默默操控网页,以便让显示的内容与效果有所改变。对网页来说就是上帝之手。
更多具体基础认识请参考:
- HTML 基础 - 学习 Web 开发 | MDN (mozilla.org)
- CSS 基础 - 学习 Web 开发 | MDN (mozilla.org)
- JavaScript 基础 - 学习 Web 开发 | MDN (mozilla.org)
- 获取去搜:菜鸟教程。
HTML是什么
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言,而网页最初是为了实现知识共享而诞生的一个产物。
HTML 文档 = 网页,HTML文档最常见的使用方式是用浏览器查看,Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。用于处理HTML文档的各种软件有一个共同的名称叫做用户代理(user agent)。浏览器是最流行、最重要、最强势的的用户代理,但不是唯一的一种,记住:你的HTML文档有可能会给别的一些软件处理。
HTML文档的构成和相关概念
HTML文档的名字通常以.html
结尾,HTML文档是HTML元素的集合。
HTML元素通常指开始标签、结束标签以及标签之间的内容,如:<p>hello word!</p>
。
HTML元素有些是单标记,即只有开始标签并配合斜杠即可,如: <img />、<hr/>
。
HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内部,如常见的 <title>中单一姐</title>
,即title标签。除了可包含用于说明HTML文档的元素,head元素还能放link标签,用来规定文档与外部资源(如CSS样式表)的关系,定义内嵌CSS样式,放置和载入脚本程序(JavaScript)。
HTML 元素属性
HTML元素的开始标签里可以放一些叫做属性的东西,属性由属性名和属性值组成,属性值通常由双引号或单引号包括。如:<p color="red">hello world</p>
这句中的 color="red" 就是一个属性设置,表示字体要显示为红色。有些属性是所有标签共有的,有些则是某个标签特有的。
还有一些奇葩属性,只是一个词就可以了而不需要值,比如:disabled,hidden(有此属性,效果相当于jquery中的 **.hide())。
自定义数据属性
属性可以自定义,但必须以 "data-"开头,这些自定义元素是指浏览器应当忽略不认识的属性,但结合css和JS使用时,用处很大,很常见。可以为任何需要的元素附加上自定义数据属性,由于JavaScript能够轻松获取自定义数据属性,因此,你几乎可以在每一个浏览器中都使用自定义数据属性。
所有的浏览器都支持通过JavaScript的getAttribute()
方法读取这些自定义属性,但我们也可以用别的方式访问自定义数据属性,比如 dataset 对象。它用于转换自定义数据属性(attribute,系标签属性)为DOM对象属性(property),访问方式如下。var height = link.dataset.height;如果存在一个如data-mobile-image-size这样包含短横线命名的自定义数据,就不得不用dataset.mobileImageSize这样的形式来访问它。对应到dataset对象上的属性需转换为骆驼拼写法。
块级元素和行内元素
HTML元素在某个维度上可以分为块级元素和内联元素(或叫行内元素)。
块级元素在浏览器显示时,通常会以新行来开始(和结束),即浏览器会在其前后显示空行,即视觉上有上下间距。
内联元素在显示时通常不会以新行开始。
大部分HTML元素是块级的元素。详见:块级元素 - HTML(超文本标记语言) | MDN (mozilla.org)
注意:
width
这个CSS属性对块级元素有效,行内元素会忽略这个属性,比如labele
标签,但是对这样的行内元素使用display:inline-block;
设置后即可设置宽度。
父元素、子元素、后代元素和兄弟元素
HTML文档中,元素之间有明确的关系。一个元素a可以包含多个子元素,而这些子元素里又可以包含另一些元素,所有这些元素都是元素a的后代元素(因为都在其中包含),子元素是关系最近的后代元素,类似儿子的概念。具有同一个父元素的几个元素互为兄弟元素。
一个元素可以拥有多个子元素,但只能有一个父元素(即最近的外层元素)。举个例子:html元素里包含head元素和body元素,body里只包含了一个div元素,div里面包含了一个p元素。那么,html元素里面所有的元素都是其后代元素,而head和body是其子元素,head和body互为兄弟元素。p元素的父元素是div,div没有兄弟元素。
注意:一个元素能以什么样的元素为父元素或子元素是有限制的。所以元素之间并不是可以随便嵌套的。
相对URL
以当前文档路径为基点,进而定位其他资源的一种“路径字符串”,以便在当前文档中引用其它资源。
“/”表示网站根目录(文件夹),
“../”表示上级目录,
“../../”表示上级录的上级录。
站内引用最好用相对URL,这样即使域名改变了或网站根目录名改变了,文档仍不受影响。
什么是响应式Web 设计
在考虑好同一个网页在不同尺寸屏幕大小的布局呈现方式后,然后进行编码实现这些呈现方式,即让网站的网页显示效果(布局效果)能够在不同屏幕大小,如电脑、平板、移动设备上都有清楚且接近的显示效果,而不至于为每个设备屏幕情况都要写一个页面或网站。这整个过程就是响应式web设计。即:
- 确定网页可展示或需展示的内容
- 根据内容设计不同屏幕的展示方式,即不同布局。
- 编写一套代码文件,实现在不同屏幕尺寸下的呈现。
HTML文档中使用css的三种方式
CSS简介
CSS(层叠样式表)用来规定HTML文档的呈现形式(外观和布局)。CSS样式由一条或多条以分号隔开的样式声明组成。每条声明包含着一个CSS属性和该属性的值,二者以冒号分隔。如:color:red;
HTML描述了网页内容(有什么,没有什么),CSS设定这些内容如何排版布局和显示,起到美化文档的作用。
“笨蛋才会为完美的CSS方案纠缠不休”。因为一种效果的实现方式可能有很多种,你只要能实现,且代码写着舒服就行了。
1、引用CSS文件,即外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点(多个页面)外观。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>HTML文档引入样式表时的媒体类型
当我们给页面添加样式表时,可以指定样式要应用的媒体类型。大多数情况下,我们使用screen类型。然而,我们还可以使用print类型来定义一个只在页面打印(或者用户使用打印预览功能)时才加载的样式表。如:
<link rel="stylesheet" href="print.css" type="text/css" media="print">
2、直接在文档内利用<styel>
标签写页面样式
当单个HTML文件需要特别样式时,就可以使用内部样式表。你可以在 head 标签之间通过<style>
标签定义内部样式表。
<head> <style type="text/css"> body { color: rgb(57, 57, 57); letter-spacing: 0pt; font-size: 14pt;"} p {margin-left: 20px} </style> </head>
3、内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性(style)。样式属性中可以包含任何 CSS 属性。以下示例代码显示出如何改变段落的颜色和左外边距。
<p style="color:red; margin-left:20px;">测试用代码</p>
HTML文档中引入script的位置
HTML和CSS只是静态的显示出网页,就像一个漂亮的word文件一样。网页要想动起来,比如对用户的点击做出反应,那就得用上JavaScript(JS)代码。
在过去,在页面<head>
标签里加载JavaScript文件是一种很常用的实践方式,之后使用诸如jQuery的document.ready()方法来等待DOM(Document Object Model,文档对象模型)准备就绪,以对DOM进行操作。但是现在的推荐做法是在页面底部加载所有的脚本,这样可以获得更好的性能。因此,我们也将这么做,所有的脚本包括jQuery,都将放在页面底部,但是需要在元素加载之前对DOM进行操作的场景除外。
默认情况下,浏览器一遇到script元素就会暂停处理HTML文档,转而载入脚本文件并执行其中的脚本。在脚本执行完毕之后浏览器才会继续解析HTML。一般把JS文件放在HTML元素最后,还有,在HTML5中可以用defer属性达到同样的目的。浏览器在遇到带有defer属性的script元素时,会将脚本的加载和执行推迟到HTML文档中所有元素都已得到解析之后。defer属性只能用于外部脚本文件,它对文档内嵌脚本不起作用
浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面。各个script元素依次(即按其定义的次序)同步(即在脚本加载和执行进程中不再管别的事情)执行。使用了async属性后,浏览器将在继续解析HTML文档中其他元素(包括其他script元素)的同时异步加载和执行脚本。如果运用得当,这可以大大提高整体加载性能。使用async属性的一个重要后果是页面中的脚本可能不再按定义它们的次序执行。因此如果脚本使用了其他脚本中定义的函数或值,那就不宜使用async属性。
noscript元素可以用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。
前端编程建议
这里说的前端编程是指:运用HTML、CSS、JavaScript,来综合进行编程(网页开发)。
页面设计原则建议
最佳方式是“移动优先”,即先为小屏做设计,然后再为大屏添加更多的内容。这种方式将促使你对内容和用户做更全面深入的考量。优先考虑为大屏进行页面内容设计、之后再试图为小屏缩小页面将导致一系列问题。
元素使用建议
你写HTML文档的时候,建议用那些不具有显示效果样式的元素,想实现某种显示效果完全可以给该元素加个类名,然后依需求定义该类的CSS。
注意:通常可以在写HTML文档前,先来段CSS代码清除该页面的所有标签的默认样式,比如边距啥的。
行为和内容分离
确保行为与内容分离,就像确保描述内容与样式设置分离那样。所以,尽量少在页面元素上直接使用如onclick。建议定义class,JS基于该class设置相关事件。 另外,注意,在写点击事件时,用下 preventDefault方法阻止默认的事件行为。
$("a.popup").click(function(event){ event.preventDefault(); window.open(this.getAttribute('href')); });
如果你打算使用背景图片,你需要紧记以下几点:
背景图像多少会增加页面的加载时间,这个时间是否是可接受的?
背景图像是否与页面中的其他图象搭配良好?
背景图像是否与页面中的文字颜色搭配良好?
图像在页面中平铺后,看上去还可以吗?
对文字的注意力被背景图像喧宾夺主了吗?
其他细节相关
网站图标
除了CSS样式表,link元素最常见的用处要算定义与页面联系在一起的图标。各种浏览器处理这种图标的方式有所不同,常见的做法是将其显示在相应的标签页标签上或收藏夹中相应的项目前(如果用户收藏了这个页面的话)。
如:<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
这句代码用来设置浏览器选项卡左边显示的网站图标
注意:如果网站标志文件位于“/favicon.ico”(即Web服务器的站点根目录),那就不必用到link元素。大多数浏览器在载入页面时都会自动请求这个文件,就算没有link元素也是如此。
id属性和定位、<a>
标签的href属性值和定位
id属性还可以用来导航到文档中的特定位置。倘若有个名为example.html的文档中包含一个id属性值为myelement的元素,那么使用example.html#myelement这个URL即可直接导航至该元素。该URL的末尾部分(#加上元素id值)称为URL片段标识符(fragment identifier)。
另外, <a>
标签的href属性的值如果设为例如:“#mytarget”,那么在点击的时候,会跳转到当前页面中应用此ID(mytarget)的元素,如果找不到那则会转到name属性值为mytarget的元素。
空格
- HTML要求浏览器将连在一起的几个空白字符折算为一个空格
URL和字符编码
URL 只能使用 ASCII 字符集来通过网络进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格,URL 编码通常使用 + 来替换空格。
更新于:2023-3-30
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤