首页 > Web开发 > 详细

HTML和CSS基础

时间:2020-02-28 17:12:52      阅读:50      评论:0      收藏:0      [点我收藏+]

一、HTML和CSS简介

HTML(Hypertext Markup Language): 超文本标记语言。

• 它负责网页的三个要素之中的结构。

• 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注释中的内容不会在网页中显示。

• 格式: <!-- 注释内容 -->

• 合理的使用注释可以帮助开发人员理解网 页的代码。

• 注释不能嵌套!

doctype

• 为了让浏览器知道我们使用的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> 标签的属性定义了与文档相关联 的名称/值对。

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标签只能有一个。

    – html标签中有两个子标签head和body。

<head>

• 作用: – <head>标签用来表示网页的元数据,head中 包含了浏览器和搜索引擎使用的其他不可见信 息。

• 用法: – head标签作为html标签的子元素的出现,一 个网页中只能有一个head。

<title>

• 作用: – <title>标签表示网页的标题,一般会在网页的标 题栏上显示。

    – title标签中的文字,是页面优化的最重要因素。在 搜索引擎的搜索时最先看到的、最醒目的内容。

• 用法: – 建议将title标签紧贴着head标签编写,这样搜索 引擎可以快速检索到标题标签。

     – 网站中的多个页面的title也不应该重复,这样不利 于搜索隐藏检索。

<body>

• 作用: – <body>标签用来设置网页的主体,所有在页 面中能看到的内容都应该编写到body标签中。

• 用法: – body标签作为html的子标签使用。

<h1>~<h6>

• 作用: – h1~h6都是网页中的标题标签,用来表示网页 中的一个标题,不同的是,从h1~h6重要性越 来越低。

    – 标题标签相当于正文的标题,通常认为重要性 仅次于页面的title。

    – 一般标题标签我们只会使用到h3,h3以后的标 题标签对于搜索引擎就没有什么意义了。

    – 一个页面中只会使用一个h1标签。

<p>

• 作用: – <p>标签表示网页中的一个段落。

    – 一般浏览器会在段落的前和后各加上一个换行, 也就是段落会在页面中自成一行。

<br />

• 作用 – <br />标签表示一个换行标签,使用br标签可 以使br标签后的内容另起一行。

<hr />

• 作用: – <hr />标签是水平线标签,使用hr标签可以在 页面中打印一条水平线,水平线可以将页面分 成上下两个部分。

<img />

• 作用: – < img />标签是图片标签,可以用来向页面中 引入一张外部的图片。

• 属性: – src • 指向一个外部的图片的路径。

    – alt • 图片的描述

<a>

• 作用: – <a>标签是超链接标签,通过a标签,可以快 速跳转到其他页面。

• 属性: – href • 指向一个链接地址

    – target • 设置打开目标页面的位置,可选值:_blank新窗口、 _self当前窗口。

实体(转义字符) 

• 在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。 比如<和>,我们不能直接在页面中使用<和 >号,因为浏览器会将它解析为html标签。为了可以使用这些预留字符,我们必须在 html中使用字符实体。

• 语法: &实体名;

字符实体

• 小于号< – &lt;

• 大于号> – &gt;

• 空格 – &nbsp;

• 和符号& – &amp;
• 版权© – &copy;

• 引号” – &quot;

• 注册商标® – &reg;

• 商标™ – &trade;

CSS

• 层叠样式表 (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">

 

二、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标签用于表示一个内容的重要性。

• 这两个标签可以单独使用,也可以一起使 用。
• 通常em显示为斜体,而strong显示为粗体。

<i>和<b>

• i标签会使文字变成斜体。

• b标签会使文字变成粗体。

• 这两个标签和em和strong类似,但是这两 个标签没有语义。

• 所以根据html5标准,当我们只想设置文本 特殊显示,而不需要强调内容时就可以使 用i和b标签。

<small>

• small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信 息等。

• 浏览器在显示small标签时会显示一个比父 元素小的字号。

<cite>

• 使用cite标签可以指明对某内容的引用或参 考。例如,戏剧、文章或图书的标题,歌 曲、电影、照片或雕塑的名称等。

<blockquote>和<q>

• blockquote和q表示标记引用的文本。

• blockquote用于长引用,q用于短引用。

• 在两个标签中还可以使用cite属性来表示引 用的地址。 

<sup>和<sub>

• sup和sub用于定义上标和下标。

• 上标主要用于表示类似于103中的3。

• 下标则用于表示类似余H2O中的2。

<ins>和<del>

• ins表示插入的内容,显示时通常会加上下 划线。

• del表示删除的内容,显示时通常会加上删 除线。

<code>和<pre>

• 如果你的内容包含代码示例或文件名,就 可以使用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值

• 也可以使用计算机中常用的RGB值来表示 颜色。可以使用0~255的数值,也可以使 用0%~100%的百分比数。RGB(100%,0%,0%)   RGB(0,255,0)

• 第一个数表示红色的浓度,第二个数表示 绿色浓度,第三个数表示蓝色的浓度。

RGBA

• 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

 

HTML和CSS基础

原文:https://www.cnblogs.com/ibabyli/p/12377910.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!