模板 网站,网站平台建设费用的会计核算,用wix做外贸网站,得物app订单制作一、网页的组成
网页由三部分构成#xff1a;HTML、JavaScript、CSS。
#xff08;1#xff09;HTML HTML 相当于网页的骨架#xff0c;它通过使用标签来定义网页内容的结构。 举个例子#xff1a;
它把图片标签为img、把视频标签为video#xff0c;然后组合到一个界面…一、网页的组成
网页由三部分构成HTML、JavaScript、CSS。
1HTML HTML 相当于网页的骨架它通过使用标签来定义网页内容的结构。 举个例子
它把图片标签为img、把视频标签为video然后组合到一个界面里这种呈现方式就是HTML
如果你想找到它
比如我们打开任意一个网站
然后右键打开“检查”进入Elements面板 可以看到当我们鼠标放置在某一标签上时该标签标记的东西会被锁定然后呈现出来。
当很多个标签组合就成了我们看到的网页界面
2CSS
经过上文得知HTML 负责网页内容的结构
那么 CSS 则控制这些内容的样式和布局。 即CSS通过选择器决定网页元素的字体、颜色、间距、对齐方式、背景、边框等。 比如
打开Styles面板下面的各种各样就是在设置样式 3JavaScript
如果说HTML构建了网页、CSS装饰了网页。
那么JavaScript则提供了交互性
比如下图框中带js后缀的代码就是引入互动行为 二、制作一个简单网页
首先打开文本文件 第一步来定义文档类型 !DOCTYPE html 第二步要写 html langzh
……你的HTML代码
/html
html langzh我们可以理解为告诉电脑我们要开始写了
正常来说我们可以直接写html但加上 langzh就表示指定语言为中文。
结尾的/html代表到这里就结束了。
而中间部分则是我们要写的设置网页内容 第三部写head标签和body标签 html包括head标签和body标签
所以我们要写
head……/headbody……/body
head标签意思是网页头即说明一下页面需要的配置比如我们可以写
meta charsetUTF-8来表示指定网页编码为UTF-8
body标签的意思是网页体就是网页正文里要展现的东西比如我们可以写
div idword其中div表示定义一个区块这个区块的id是word之后我们就可以通过id来获得这个区块并进行相应的修改设置。 到此为止我们的完整代码如下 !DOCTYPE html
html langzh
headmeta charsetUTF-8title简单网页/title
/head
bodyheaderh1欢迎访问我的网站/h1/header div classcontainerh2关于我们/h2p这是一个简单的网页示例展示了HTML和CSS如何一起工作来构建网页结构和样式。/p/div
/body
/html其中h几表示几级标题p标签表示一个段落
之后我们把文件后缀改为html然后双击打开展示如下 三、相关概念
1节点和节点树
在HTML中我们把所有的标签内容都看出节点
而所有的节点构成了节点树HTML DOM树
至于节点树的构成相信如果你如果看了第二部分就明白了其构成如下 最顶端的节点称之为根节点
每个节点如果有的话上一个节点称为父节点下一个节点称为子节点。
同级的子节点称为兄弟节点
这些概念同理于 树 部分概念
2选择器
在说到CSS时我们提到了选择器那么这是什么呢 首先选择器是用来定位节点的 比如我们之前通过div来确定了一个id为word的节点
那么我们要去定位这个id有三个常用办法 第一类选择器以“ . ”开头 .word {background-color: yellow;
}
这会选中所有 classword 的元素并给它们加上黄色背景。 第二ID选择器以“#”开头 #word {font-size: 24px;
}这会选中具有 idword 的元素并将字体大小设置为 24px。 第三元素选择器选择所有指定标签的元素 p {color: blue;
}这会选中页面中的所有 p 标签并将它们的文字颜色设置为蓝色。 常见的 CSS 选择器及其语法规则汇总如下
元素选择器 选中指定标签的所有元素。 p { color: red; } 这会选中页面中的所有 p 元素并将它们的文字颜色设置为红色。
2. 类选择器 选中所有具有指定类的元素。类选择器以 . 开头。 .highlight { background-color: yellow; } 这会选中所有 classhighlight 的元素并为它们设置黄色背景。
3. ID 选择器 选中具有指定 ID 的元素。ID 选择器以 # 开头。 #header { font-size: 24px; } 这会选中 ID 为 header 的元素并将字体大小设置为 24px。
4. 通配符选择器 选中所有元素。 * { margin: 0; } 这会把页面中所有元素的外边距margin设置为 0。
5. 后代选择器 选中某个元素内部的所有指定子元素。空格表示层级关系选中某个元素的所有后代元素。 div p { color: blue; } 这会选中所有位于 div 内部的 p 元素并将它们的文字颜色设置为蓝色。
6. 子元素选择器 选中某个元素的直接子元素使用 符号表示。 div p { color: green; } 这会选中所有直接位于 div 元素内部的 p 元素而不会选中更深层嵌套的 p 元素。
7. 并列关系选择器兄弟选择器 **相邻兄弟选择器 ()**选中某个元素后紧跟的第一个兄弟元素。 h1 p { color: orange; } 这会选中紧接在 h1 元素后面的第一个 p 元素。 **通用兄弟选择器 (~)**选中所有在指定元素后面的兄弟元素。 h1 ~ p { color: purple; } 这会选中所有位于 h1 后面的 p 元素。
8. 属性选择器 根据元素的属性和属性值来选择元素。 input[typetext] { border: 1px solid black; } 这会选中所有 typetext 的 input 元素并给它们加上黑色边框。
9. 伪类选择器 选择元素的特定状态。 :hover当鼠标悬停在元素上时应用样式。 a:hover { color: red; } :first-child选中某元素是其父元素的第一个子元素。 p:first-child { font-weight: bold; }
10. 伪元素选择器 选中元素的特定部分如首字母、首行等。 ::before在元素的内容前插入内容。 p::before { content: Note: ; font-weight: bold; } ::after在元素的内容后插入内容。 p::after { content: .; }
11. 组合选择器
多个选择器结合起来使用达到更精确的选中效果。 后代选择器div p选中 div 内的所有 p 元素。类和元素选择器组合p.highlight选中所有同时拥有 highlight 类的 p 元素。
12. 通用选择器 **:not()**选中所有不符合某种条件的元素。 p:not(.special) { color: blue; } 这会选中所有不具有 special 类的 p 元素并将它们的颜色设置为蓝色。
13. 组选择器 通过逗号 , 组合多个选择器用于多个元素应用相同样式。 h1, h2, h3 { color: black; } 这会将 h1、h2、h3 元素的文字颜色设置为黑色。
