免费建网站家谱系统,扫描件怎么能生成WordPress,坑梓网站建设咨询,中国建设银行笔试确认网站目录 1.网页的组成
2.HTML
#xff08;1#xff09;标签
#xff08;2#xff09;比较重要且常用的标签#xff1a;
①列表标签
②超链接标签 #xff08;a标签#xff09;
③img标签#xff1a;用于渲染#xff0c;图片资源的标签
④div标签和span标签
…目录 1.网页的组成
2.HTML
1标签
2比较重要且常用的标签
①列表标签
②超链接标签 a标签
③img标签用于渲染图片资源的标签
④div标签和span标签
3属性
4常用的语义化标签
5元素的分类及特点
①块元素
②行内元素
③行内块元素
6文件路径
7HTML的基本结构
8节点树及节点间的关系
3.CSS
1引入css的方法
2选择器
3单位
4css三大特性 1.网页的组成
网页可分为三个部分——HTML、CSS和JavaScript。如果把网页比作一个人的话HTML相当于骨架JavaScript相当于肌肉CSS相当于皮肤三者结合起来才能形成一个完善的网页。
2.HTML
HTML是用来描述网页的一种语言全称为超文本标记语言。网页包含文字、按钮、图片和视频等各种复杂的元素其基础架构就是HTML。不同类型的文字通过不同类型的标签来表示 如图片用img标签表示视频用video标签表示段落用p 标签表示 他们之间的布局又常通过布局标签 div 嵌套组合而戚成各种标签通过不同的排列和嵌套才形成了网页的框架。
我们可以随意打开一个网站比如京东首页然后单击鼠标右键选择“检查元素”菜单或者按 F12即可打开浏览器开发者工具接着切换到 Elements 面板这时候呈现的就是京东网首页对应的 HTML它包含了一系列标签浏览器解析这些标签后便会在网页中将它们渲染成一个个节点这便形成了我们平常看到的网页。
1标签
是由w3c提前制定好的一些针对于html文档的标记符号,这些符号是具备各自的含义的。具体在html中的变现形式 由 括起来的对象 比如: html head body
需要注意的是: ①标签通常是成对出现的,但也有极少部分只有开始标签,没有结束标签 称作 单标签或者空标签 比如:meta ②标签是允许嵌套的,但是要符合嵌套的标准
通常,我们也会将标签称作为元素 例如根元素 、head元素等
2比较重要且常用的标签
①列表标签 1有序列表,表示如下
olli/lili/lili/li
/ol
2无序列表表示如下
ulli/lili/lili/li
/ul
3定义列表表示如下
dldt/dtdd/dddt/dtdd/dd
/dl 注列表之间是可以相互嵌套的 ②超链接标签 a标签 1可以访问到外部网络的资源 2可以访问本地网页资源 3可以作为锚点在当前页面指定位置进行定位跳转
③img标签用于渲染图片资源的标签
④div标签和span标签 小tiphref和src的区别 href和src都是指向外部资源地址或者本地资源地址 不同点 href属性: 1通过该属性去关联另一份外部资源文件 2如果被关联的资源文件在页面渲染时需要用到该资源中的内容时它会下载该资源 3如果需要下载资源文件内容时并行下载的方式不会阻塞页面的渲染 src属性 1通过该属性去访问到对应的外部资源并替换掉该标签的内容 2src属性肯定是会下载对应路径的资源的 3src的下载不是并行下载在页面渲染时如果遇到src那么会将该资源全部下载完毕并且解析后才会继续渲染页面后续的内容src会阻塞页面的渲染 3属性
通常格式keyvalue注有时候只有key没有value即表示逻辑值的时候
①全局属性全部元素都具备例idclassstyle等等
②局部属性只能某些元素使用
4常用的语义化标签
标题标签h1-h6标签、段落标签p标签、i/em标签斜体、b/strong标签粗体、blockquote/q标签引用等等。
5元素的分类及特点
①块元素 1块元素具有布局特点,一般常用页面的整体布局 2块元素独占(其父元素)页面的一行 3块元素可以嵌套任何类型的元素(除p元素以外,p元素中不能嵌套任何的块元素) 4块元素可以设置宽,高 默认的宽度是其父元素的宽度 5块元素默认高度是由内容决定的
②行内元素 1正常情况下,行内元素是不会换行的 2行内元素会在一行排不下时进行换行 3行内元素不能设置宽 高 行内元素的宽和高都是由其内容决定的 4行内元素一般不会嵌套块级元素,大多数是嵌套文本或者其他的行内元素
③行内块元素 1.行内块元素不会独占一行,在一行排列 2.可以设置宽高(默认是内容的宽 高)
注元素之间可以相互进行转换使用diaplay:block(inline/inline-block);
6文件路径
①相对路径与当前的文件是没有联系的不是根据当前该文件所处的位置去访问对应的资源。
②绝对路径从当前文件出发去寻找其他的资源当前的位置为中心。
7HTML的基本结构
!DOCTYPE html
html
headmeta charsetUTF-8titleThis is a Demo/title
/head
bodydiv idcontainerdiv classwrapperh2 classtitieHello Morld/h2p classtextHello, this is a parpgtaph./p/div/div
/body
/html8节点树及节点间的关系
在HTML中,所有标签定义的内容都是节点,这些节点构成一个 HTML节点树,也叫HTMLDOM树。
先来看一下什么是 DOM。DOM 是 W3C万维网联盟的标准英文全称是 Document Object Model即文档对象模型。它定义了访问 HTML 和 XML 文档的标准。根据 W3C 的HTMLDOM 标准,HTML 文档中的所有内容都是节点。 整个网站文档是一个文档节点。每个 html 标签对应一个根节点即上例中的 html 标签它属于一个根节点。节点内的文本是文本节点比如 a 节点代表一个超链接它内部的文本也被认为是一个文本节点。每个节点的属性是属性节点比如 a 节点有一个 href 属性它就是一个属性节点。注释是注释节点在 HTML 中有特殊的语法会被解析为注释它也会对应一个节点。 因此HTML DOM 将 HTML 文档视作树结构这种结构被称为节点树如下图所示。可通过这棵树访问所有节点。可以修改或删除它们的内容也可以创建新的元素。这颗节点树展示了节点的集合以及它们之间的联系。这棵树从根节点开始然后在树的最低层级向文本节点长出枝条 节点树中的节点彼此之间都有层级关系。常用父节点、子节点和同级节点描述这种关系。父节点拥有子节点位于相同层级上的子节点称为同级节点兄弟或姐妹。 在节点树中顶端的节点称为根节点根节点之外的每个节点都有一个父节点节点可以有任何数量的子节点叶子是没有子节点的节点同级节点是拥有相同父节点的节点 下面的图片展示出节点树的一个部分以及节点间的关系 3.CSS
1引入css的方法
①行内样式直接在标签内通过style设置。
②内联样式在head标签里写style标签在其编写样式即可。
③外联样式通过link标签引入外部的css文件。
2选择器
①基础选择器元素选择器、id选择器、类选择器、通配符选择器
②复合选择器交集选择器、并集选择器
③关系选择器子代选择器、后代选择器、兄弟选择器
④属性选择器例[tytlename]
⑤伪类选择器 1结构伪类 :first-of-type | :last-of-type | :nth-of-type() 2动态伪类 link | hover | active | visited
⑥伪元素选择器 ::first-letter | ::first-line | ::selection | ::before | ::after
3单位
①长度单位px、em、rem、vh和vw
②比例单位%
③颜色单位颜色单词、RGB格式、RGBA格式、#十六进制
4css三大特性
①层叠性当有多个相同选择器或者同类型的选择器选中同一个元素并为其设置同一个样式属性的不同属性值会优先使用靠近元素的选择器所设置的样式。
注意当选择器权重优先级不同时无法通过层叠性解决样式冲突
②优先级权重
通配符选择器元素选择器类/伪类选择器id选择器行内样式!important无限大
③继承性子元素后代元素继承父元素祖先元素已经定义过的属性即字体相关 、字体颜色、 列表相关的、文本相关的等。
