标签:color 解析 style keyword 术语 meta 属性 提升 匹配
HTML注释 <!--注释内容-->
用于描述代码功能,浏览器解析时会忽略注释内容。HTML元素
HTML文档的重要组成部分,一个HTML由大量元素组成,HTML中的所有内容结构,都是靠元素组织到页面的。
一般元素
<a href = "/classroom/17" > 立即加入 </a>:元素
<a> 标记名
<a href = "/classroom/17"> 起始标记:表示元素开始
</a> 结束标记 :表示元素结束
href = "/classroom/17" :属性
href :属性名
“/classroom/17”:属性值
立即加入:内容
空元素
又叫自闭合元素,空元素只有开始标记,没有元素内容和结束标记。
举例: 图片 <ing src= "图片路径"> alt="编程入门基础班">
注意: 视频和音频不是空元素。
一个元素的内容可以包含其他元素,形成嵌套的层次结构。
注意:两个元素之间不能相互嵌套
1.若A元素直接包含B元素则: A为B的父元素,B为A的子元素;
2.若两个元素有同一个元素:它们互为兄弟元素;
3.若A直接或间接包含B则: A是B的祖先元素,B是A的后代元素。
文档声明 <!DOCTPYE html>
html <html lang="zh-cmn-Hans">
head body
meta title 其他元素
1.文档声明:既不是元素也不是注释,总出现在代码第一行,告诉浏览器解析模式;
2.html元素:又叫根标记、根元素,它是其他所有元素的祖先元素;
相关属性:lang(语言) 该属性指定文档的文字使用何种自然语言书写的,可能会影响浏览器的语言阅读和翻译行为。
3.head元素:又叫文档头,它是html的第一个子元素;
head元素的内容不会显示到页面上,可以包含其它一些元素用于描述页面的附加信息;
meta(标识页面的其它元数据(页面相关的附加信息)这是一个空元素,作为head的第一个子元素);
title(标识文档标题,会显示在浏览器标题栏或标签页上)、keyword、description等,利于SEO(搜索引擎优化)
4.body元素:又叫文档提,网页中所有可视内容都放置在内,定义文档的内容结构。
***
绝对路径:当网站部署到服务器后,网站中的所有资源都可以通过一个地址(访问),这种格式书写的路劲,叫做绝对路径。
书写格式:协议://域名/目录
使用场景:
访问站外资源时,只能用绝对路劲
访问站内资源时,若网站已部署到服务器,可以使用绝对路径,并可以省略协议和域名
相对路径:是相对于当前资源的位置
书写格式:./路径
使用场景:只能用于访问站内资源
./表示当前资源所在目录,必须作为相对路径开始,可省略
../表示返回上一层目录。
1.使用外部样式表
<link rel = "styleshet" href="main.css"> 是<head>子元素。
特点:
1.CSS代码在一个独立的文件中,html通过link元素引入。
2.使HTML代码更加纯净,有利于程序员和搜索引擎的阅读。是开发页面的常见做法。
2.使用内部样式表
特点:
1.将CSS代码写到html文档的style元素中,style也是head子元素。
2.没有了样式表文件,在某些时候提升效率。
3.多个页面难以共享样式 ,不利于代码复用。
4.html和css代码混杂,不利于程序员和搜索引擎阅读。
5.在某些对效率要求苛刻或测试的场景下使用。
3.使用内部样式表
特点:
1.CSS代码写在某个元素开始标记的style属性中,行内样式,不写选择器
2.在某些时候提升效率。
3.多个元素难以共享样式,不利于代码复用。
4.不利于搜索引擎和程序员阅读。
5.在测试的场景下使用。
书写格式:/*注释内容*/ 快捷键:ctrl+?
css代码由一个一个规则组成,每个规则指定了哪些元素运用什么样式。
h1{color:red;text-align:center;} (规则)
选择器 声明块(样式)
1.元素选择器
书写格式:标记名{声明块} 意义:html中所有与标记名匹配的元素都应用声明块的规则。
2.类选择器 (多个类名 用空格隔开)
书写格式:.类名{声明块} 意义:所有class属性为指定类名的元素都应用声明块的规则。
3.id选择器 (id具有唯一性)
书写格式:#id值{声明块} 意义:属性id为指定值的元素,将应用声明块的规则。
和div没有本质区别,只不过有语义。
footer:用于表示页面或某个区域的脚注。
<a target="页面打开位置" href="目标"> 内容 </a>
标签:color 解析 style keyword 术语 meta 属性 提升 匹配
原文地址:https://www.cnblogs.com/codingFiend/p/9196717.html