• 它负责网页的三个要素之中的结构。
• HTML使用标签的的形式来标识网页中的不同组成部分。
• 所谓超文本指的是超链接,使用超链接可 以让我们从一个页面跳转到另一个页面
一个最基本的HTML页面:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> <h1>网页正文</h1> </body> </html>
• HTML中的标记指的就是标签。
• HTML使用标记标签来描述网页。
• 结构:
<标签名>标签内容</标签名>
<标签名 />
• 我们还将一个完整的标签称为元素。
• 这里我们可以将元素和标签认为是一个同义词。
<h1>一级标题</h1>
上边的h1我们就称为元素
<p>我是一个<em>段落</em></p>
p也是一个元素,em是p的子元素,p是 em的父元素。
<body>
<p><em>内容</em></p>
</body>
• body也是一个元素。
• body是p和em的祖先元素。
• p和em是body的后代元素。
• 可以为HTML标签设置属性。
• 通过属性为HTML元素提供附加信息。
• 属性需要设置在开始标签或自结束标签中。
• 属性总是以名称/值对的形式出现。
• 比如:name=“value” • 有些属性可以是任意值,有些则必须是指定值。
<h1 title="我是一个标题">标题</h1>
<img src="" />
• id – id属性作为标签的唯一标识,在同一个网页中不能 出现相同的id属性值。
• class – class属性用来为标签分组,拥有相同class属性的 标签我们认为就是一组,可以出现相同的class属 性,可以为一个元素指定多个class。
• title – title属性用来指定标签的标题,指定title以后,鼠 标移入到元素上方时,会出现提示文字。
• HTML注释中的内容不会在网页中显示。
• 格式: <!-- 注释内容 -->
• 合理的使用注释可以帮助开发人员理解网 页的代码。
• 注释不能嵌套!
• 为了让浏览器知道我们使用的HTML版本我 们还需要在网页的最上边添加一个doctype 声明,来告诉浏览器网页的版本。
• 我们使用的是html5的文 档声明 <!DOCTYPE html>
• 为了兼容一些旧的页面,浏览器中设置了 两种解析模式: – 标准模式(Standards Mode) – 怪异模式(Quirks Mode)
• 怪异模式解析网页时会产生一些不可预期 的行为,所以我们应该避免怪异模式的出 现。
• 避免的最好方式就是在页面中编写正确的 doctype。
• 在计算机的内部,文件都是以二进制编码 保存的。
• 所谓的二进制编码就是指1和0,也就是我 们的所有内容都需要转换为1和0。
• 中国两个字在计算机的底层保存的可能要 转换为10100101这种二进制码,这一过程 称为编码。
• 计算机在读取文件时需要将10100101在转 换为中国给我们显示这一过程称为解码。
• 这就带来一个问题,中国到底是10100101 还是01011010到底由谁说了算。
• 所以我们还需要一个东西称为字符集,字 符集规定了如何将文本转换为二进制编码。
• 常见的字符集:ASKII、ISO8859-1、GBK、 GB2312、UTF-8。
• 如果我们保存文件时使用的是utf-8进行编 码,而浏览器读取页面时使用gb2312,这 样就会导致页面中的内容不能正常显示, 也就是我们所说的乱码。
• 所以我们只需要统一两者使用的字符集就 可以解决乱码问题。
• 这里为了页面有更好的使用性,我们一般 使用utf-8。
• 保存文件的编码我们直接通过编辑器即可 指定,接下来就是要告诉浏览器使用什么 字符集去解析文件。
• 在html5中只需要使用meta标签即可完成 这个任务:
<meta charset="utf-8" />
• 作用: – <meta> 标签可提供有关页面的元信息,比如 针对搜索引擎和更新频度的描述和关键词。
– <meta> 标签位于文档的头部,不包含任何内 容。<meta> 标签的属性定义了与文档相关联 的名称/值对。
• 设置页面的字符集 – <meta charset="utf-8">
• 设置网页的描述 – <meta name="description" content="">
• 设置网页的关键字 – <meta name="keywords" content="">
• 请求的重定向 – <meta http-equiv="refresh" content="5;url=地址"/>
• 作用: – <html>标签用于告诉浏览器这个文档中包含 的信息是用HTML编写的。
• 用法: – 所有的网页的内容都需要编写到html标签中, 一个页面中html标签只能有一个。
– html标签中有两个子标签head和body。
• 作用: – <head>标签用来表示网页的元数据,head中 包含了浏览器和搜索引擎使用的其他不可见信 息。
• 用法: – head标签作为html标签的子元素的出现,一 个网页中只能有一个head。
• 作用: – <title>标签表示网页的标题,一般会在网页的标 题栏上显示。
– title标签中的文字,是页面优化的最重要因素。在 搜索引擎的搜索时最先看到的、最醒目的内容。
• 用法: – 建议将title标签紧贴着head标签编写,这样搜索 引擎可以快速检索到标题标签。
– 网站中的多个页面的title也不应该重复,这样不利 于搜索隐藏检索。
• 作用: – <body>标签用来设置网页的主体,所有在页 面中能看到的内容都应该编写到body标签中。
• 用法: – body标签作为html的子标签使用。
• 作用: – h1~h6都是网页中的标题标签,用来表示网页 中的一个标题,不同的是,从h1~h6重要性越 来越低。
– 标题标签相当于正文的标题,通常认为重要性 仅次于页面的title。
– 一般标题标签我们只会使用到h3,h3以后的标 题标签对于搜索引擎就没有什么意义了。
– 一个页面中只会使用一个h1标签。
• 作用: – <p>标签表示网页中的一个段落。
– 一般浏览器会在段落的前和后各加上一个换行, 也就是段落会在页面中自成一行。
• 作用 – <br />标签表示一个换行标签,使用br标签可 以使br标签后的内容另起一行。
• 作用: – <hr />标签是水平线标签,使用hr标签可以在 页面中打印一条水平线,水平线可以将页面分 成上下两个部分。
• 作用: – < img />标签是图片标签,可以用来向页面中 引入一张外部的图片。
• 属性: – src • 指向一个外部的图片的路径。
– alt • 图片的描述
• 作用: – <a>标签是超链接标签,通过a标签,可以快 速跳转到其他页面。
• 属性: – href • 指向一个链接地址
– target • 设置打开目标页面的位置,可选值:_blank新窗口、 _self当前窗口。
• 在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。 比如<和>,我们不能直接在页面中使用<和 >号,因为浏览器会将它解析为html标签。为了可以使用这些预留字符,我们必须在 html中使用字符实体。
• 语法: &实体名;
字符实体
• 小于号< – <
• 大于号> – >
• 空格 –
• 和符号& – &
• 版权© – ©
• 引号” – "
• 注册商标® – ®
• 商标™ – ™
• 层叠样式表 (Cascading Style Sheets)
• css可以用来为网页创建样式表,通过样式 表可以对网页进行装饰。
• 所谓层叠,可以将整个网页想象成是一层 一层的结构,层次高的将会覆盖层次低的。
• 而css就可以分别为网页的各个层次设置样 式。
• CSS的样式表由一个一个的样式构成,一个 样式又由选择器和声明块构成。
• 语法: – 选择器 {样式名:样式值;样式名:样式值; }
– p {color:red; font-size:12px;}
• 可以直接将样式写到标签内部的style属性 中,这种样式不用填写选择器,直接编写 声明即可。<p style="color: red;font-size: 30px"></p>
• 这种方式编写简单,定位准确。但是由于 直接将css代码写到了html标签的内部,导 致结构与表现耦合,同时导致样式不能够 复用,所以这种方式我们不使用。
• 可以直接将样式写到<style>标签中。
• 这样使css独立于html代码,而且可以同时为 多个元素设置样式,这是我们使用的比较多的 一种方式。
• 但是这种方式,样式只能在一个页面中使用, 不能在多个页面中重复使用。
<style> p{color:red; font-size: 30px;} </style>
• 可以将所有的样式保存到一个外部的css文 件中,然后通过<link>标签将样式表引入 到文件中。
• 这种方式将样式表放入到了页面的外部, 可以在多个页面中引入,同时浏览器加载 文件时可以使用缓存,这是我们开发中使 用的最多的方式。
<link rel="stylesheet" type="text/css" href="style.css">
元素选择器 标签名{ }
id选择器 #id {}
类选择器 .class{}
通配选择器 *{}
并集选择器 选择器1,选择器2,选择器N{}
交集选择器 选择器1选择器2选择器N{}
后代元素选择器 祖先元素 后代元素{}
子元素选择器 父元素 > 子元素 {}
• 祖先元素 – 直接或间接包含后代元素的元素。
• 后代元素 – 直接或间接被祖先元素包含的元素。
• 父元素 – 直接包含子元素的元素。 • 子元素 – 直接被父元素包含的元素。
• 兄弟元素 – 拥有相同父元素的元素。
• 正常链接 a:link
• 访问过的链接 a:visited(只能定义字体颜色)
• 鼠标滑过的链接 a:hover
• 正在点击的链接 a:active
• 获取焦点 :focus
• 指定元素前 :before
• 指定元素后 :after
• 选中的元素 ::selection
• 首字母 :first-letter
• 首行 – :first-line
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取属性值等于指定值的元素
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值中包含指定内容的元素
• :first-child – 选择第一个子标签
• :last-child – 选择最后一个子标签
• :nth-child – 选择指定位置的子元素
• :first-of-type – 寻找指定类型中的第一个子元素
• :last-of-type – 寻找指定类型中的最后一个子元素
• :nth-of-type – 选择指定类型的子元素
– 查找后边一个兄弟元素 • 兄弟元素 + 兄弟元素{}
– 查找后边所有的兄弟元素 • 兄弟元素 ~ 兄弟元素{}
从一组元素中将符合要求的元素剔除出去
语法 :not(选择器){}
为祖先元素设置样式,会同时应用到它的后代元素上,这一特性称为样式的继承。
通过样式的继承可以将一些样式统一设置个祖先元素,这样所有的后代都会应用到相同的样式。
但是并不是所有的样式都会继承,比如:背景相关的,边框相关的,定位相关的。具体参考文档
不同的选择器有不同的权重值:
– 内联样式:权重是1000
– id选择器:权重是100
– 类、属性、伪类选择器:权重是10
– 元素选择器:权重是1
– 通配符:权重是0
当样式发生冲突时,需要将相关的选择器优先级进行求和计算,优先级高的优先显示,如果优先级一样,则显示靠后的样式
优先级计算时,总大小不能超过他的最大的数量级
可以在样式后边添加一个!important,如果样式中添加了该内容,则该样式将会获取最大的优先级,将会优先于所有的样式显示,包括内联样式,但是这个属性要慎用。
浏览器在解析一组选择器时,是从后边往前一个一个的解析的
如果选择器编写过于长的话,浏览器解析起来性能会比较差,所以在编写选择器时,越短越好。
*通配选择器,性能也比较差,要避免使用通配选择器
• em标签用于表示一段内容中的着重点。
• strong标签用于表示一个内容的重要性。
• 这两个标签可以单独使用,也可以一起使 用。
• 通常em显示为斜体,而strong显示为粗体。
• i标签会使文字变成斜体。
• b标签会使文字变成粗体。
• 这两个标签和em和strong类似,但是这两 个标签没有语义。
• 所以根据html5标准,当我们只想设置文本 特殊显示,而不需要强调内容时就可以使 用i和b标签。
• small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信 息等。
• 浏览器在显示small标签时会显示一个比父 元素小的字号。
• 使用cite标签可以指明对某内容的引用或参 考。例如,戏剧、文章或图书的标题,歌 曲、电影、照片或雕塑的名称等。
• blockquote和q表示标记引用的文本。
• blockquote用于长引用,q用于短引用。
• 在两个标签中还可以使用cite属性来表示引 用的地址。
• sup和sub用于定义上标和下标。
• 上标主要用于表示类似于103中的3。
• 下标则用于表示类似余H2O中的2。
• ins表示插入的内容,显示时通常会加上下 划线。
• del表示删除的内容,显示时通常会加上删 除线。
• 如果你的内容包含代码示例或文件名,就 可以使用code元素。
• pre元素表示的是预格式化文本,可以使用 pre包住code来表示一段代码。
列表相关的元素都是块元素,他们之间可以互相嵌套
去除项目符号 list-style:none
使用ol和li来创建一个有序列表。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
使用ul和li来创建一个无序列表。
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
使用dl、dd、dt来创建一个定义列表。
<dl> <dt>定义项1</dt> <dd>定义描述1</dd> <dt>定义项2</dt> <dd>定义描述2</dd> <dt>定义项3</dt> <dd>定义描述3</dd> </dl>
• px – 如果我们将一个图片放大的话,我们会发现一个图片 是有一个一个的小色块构成的,这一个小色块就是一 个像素,也就是1px,对于不同的显示器来说一个像素 的大小是不同的。
• 百分比 – 也可以使用一个百分数来表示一个大小,百分比是相 对于父元素来说的,如果父元素使用的大小是16px, 则100%就是16px,200%就是32px。
• em – em和百分比类似,也是相对于父元素说的,1em = 1font-size,1em就相 当于100%,2em相当于200%,1.5em相当于150%。
•直接使用英文单词来表示颜色 red green blue orange
• 也可以使用计算机中常用的RGB值来表示 颜色。可以使用0~255的数值,也可以使 用0%~100%的百分比数。RGB(100%,0%,0%) RGB(0,255,0)
• 第一个数表示红色的浓度,第二个数表示 绿色浓度,第三个数表示蓝色的浓度。
• RGBA表示一个颜色和RGB类似,只不过比 RGB多了一个A(alpha)来表示透明度, 透明度需要一个0-1的值。0表示完全透明, 1表示完全不透明。 RGBA(255,100,5,0.5)
• 用的最多的颜色是十六进制符号。一个颜色值, 比如:#6600FF实际上包含了三组十六进制的 数字。
• 上边的例子中66代表红色的浓度,00代表绿 色的浓度,FF代表了蓝色的浓度。最后的颜色 是由这些指定浓度的红绿蓝混合而成的。
• 如果每一组数中的两个数字都相同,就可以把 十六进制的数字缩短为只有3个字符,如将 #6600FF缩短为#60F。
font-size用来指定文字的大小。
font-family可以指定标签中文字使用 的字体。 一般来说只有用户计算机中安装了我们指 定的字体时,它才会显示,否则这行代码 是没有意义的。通过font-family可以同时指定多个字体。 浏览器会优先使用第一 个,如果没有找到则使用第二个,以此类 推。
字体分类 • serif(衬线字体) • sans-serif(非衬线字体) • monospace (等宽字体) • cursive (草书字体) • fantasy (虚幻字体) • 以上这些分类都是一些大的分类,并没有 涉及具体的类型,如果将字体指定为这些 格式,浏览器会自己选择指定类型的字体。
font-style用来指定文本的斜体。 – 指定斜体:font-style:italic – 指定非斜体:font-style:normal
font-weight用来指定文本的粗体。 – 指定粗体:font-weight:bold – 指定非粗体:font-weight:normal
font-variant属性可以将字母类型设置为小 型大写。在该样式中,字母看起来像是稍 微缩小了尺寸的大写字母。
font可以一次性同时设置多个字体的样式。
• 语法: – font:加粗 斜体 小型大写 大小/行高 字体
• 这里前边几个加粗、斜体和小型大写的顺 序无所谓,也可以不写,但是大小和字体 必须写且必须写到后两个。
line-height用于设置行高,行高越大则行 间距越大。 行间距 = line-height – font-size
text-transform样式用于将元素中的字母全 都变成大小。 – 大写:text-transform:uppercase – 小写:text-tansform:lowercase – 首字母大写:text-transform:capitalize – 正常:text-transform:none
原文:https://www.cnblogs.com/ibabyli/p/12377910.html