前端html+css

HTML

课程简介

  1. 软件
  2. 客户端与服务器
  • 网页 B/S架构 broswer/server
    优点：无需更新、无需安装、跨平台
  • 图形化界面 C/S架构 client/server

网页简史

  1. 网页
  • 浏览器对网页进行渲染之后才能呈现出来
  • 前端工程师负责编写网页的源代码
  1. 浏览器
  • 不同的浏览器对于代码识别不一样
  • 网页开发标准 W3C标准
  1. 网页的组成
  • 结构：HTML用于描述页面的结构
  • 表限：CSS用于控制页面中元素的样式
  • 行为：Javascript用于响应用户的操作

HTML简介（Hypertex Markup Language超文本标记语言）

  1. 纯文本编辑器写的称为文本
  2. 超文本
  3. 使用记事本也可以编写网页（不是完整的网页）

编写第一个网页

  1. <标签名>内容</标签名>
  2. 完整的html网页：
  <html>
          <head> head中的内容不会被显示
                  <title>标题栏内容</title>
          </head>
          <body> 
              body中的内容可以被呈现
                  <p>段落标签</p>
                  <h1>一级标题标签</h1>
                  <h2>二级标题标签</h2>
          </body>
  </html>

自结束标签和注释

  1. 有一些标签不是成对出现的，存在一些自结束标签
  2. <!--注释的内容在网页中是不呈现的，但是在源码中可以查看，用于解释说明,注意要求简单明了-->
  3. 注释中不支持 嵌套

标签中的属性

  1. 在标签中的开始标签、自结束标签可以设置属性，但是结束标签不可以
  2. 属性是一个名值对（x=y）
  3. 属性和属性、属性和标签之间要使用空格隔开
  4. 属性名不能瞎写，应该根据文档中的规定来填写，有的属性有值，有的属性没有值，如果属性有值，属性值应该用引号引起来

文档声明(doctype用来告诉浏览器当前网页的版本)

  1. html5文档声明 <!doctype html> <!Doctype HTML>

字符编码

  1. 写在head标签中设置网页中的字符集，避免网页乱码问题<meta charset='utf-8'>，需要和编辑器的编码一致

实体

  1. 在我们网页中编写的多个空格会被浏览器自动解析成1个空格（经常使用空格、换行来使得代码格式化）
  2. 如果需要使用html中的特殊符号，需要使用实体或者转义字符
  3. 实体的语法：&实体的名字;
&nbsp; 空格
&gt; 大于
&lt; 小于

行内元素和块元素

  • 块元素（block element）：在网页中一般通过块元素来进行布局
  • 行内元素(inline element)：主要用来包裹文字，一般会在块元素中放置行内元素，而不会在行内元素中放置块元素，块元素中什么都能放，存在一种例外：p标签中不能放标题标签
  • 浏览器在解析网页中会对一些不规范的写法进行修正
    eg. p元素中嵌套了块元素、根元素中存在head、body以外的子元素、标签写在了根元素的外部

meta标签

  1. meta标签用于设置网页的一些元数据，但是元数据不是给客户看的，而是用于浏览器可以通过检索到这些元数据
  2. 属性：name指定数据的名称，content指定数据的内容
    数据的名称有如下几种：
    keywords：表示关键字，可以用于同时指定多个关键字，多个关键字之间用逗号隔开；
    description：用于指定网站的描述，在浏览器中的搜索的网页介绍；
    author、generator、referrer
  3. title标签的内容会作为搜索超链接上的文字显示

语义化标签

  • 在一个页面中独占一行的元素称为块元素
  • 不会独占一行的元素称为行内元素(inline element)
  1. html关注的是标签的语义，css关注的是标签的样式
  2. h1-h6标签
  • 一共有6级标题
  • h1到h6的重要性是逐渐减少的，h1最重要，h6最不重要
  • h1标签的重要性仅次于title标题
  • 一般情况下一个页面只有一个h1，只会用到h1-h3,h4-h6基本很少使用。
  • h1-h6也是块元素
  1. p标签
  • p标签也是一个块元素，独占一行
  • p标签表示页面中的一个段落
  1. hgroup标签
  • hgroup为标题标签进行分组
  • 有关系的标题标签才适合放到hgroup标签中
  1. em标签
  • 用于表示语音语调的一个加重
  • em标签是行内元素
  1. strong标签
  • 用于表示强调，内容重要性
  • em标签和strong标签的一个区别：em标签表示语气上的一个加重，而strong标签表示内容上的一个重要
  1. blockquote标签
  • blockquote标签是一个块元素
  • 用来表示一个长引用
  1. q标签
  • q标签表示一个短引用
  • q标签是一个行内元素
  1. br标签
  • br标签表示换行
  1. header标签：表示网页的头部
  2. main标签：表示网页的主体部分（一个网页中只会有一个main）
  3. footer标签：表示网页的底部
  4. nav标签：表示网页的导航
  5. aside标签：和主体相关的其他内容（侧边栏）
  6. article标签：表示一个独立的文章
  7. section标签：表示一个独立的区域 header以下的标签不能表示时，使用section
  8. div标签：没有语义，用来表示一个区块
  9. span标签L没有语义，行内元素，一般用于在网页中选择文字
  10. 列表：有序列表、无序列表、定义列表
无序列表 使用ul标签来创建无序列表
<ul>
    <li> </li>
    <li> </li>
    <li> </li>
</ul>
有序列表 使用ol标签来创建有序列表
<ol>
    <li> </li>
    <li> </li>
    <li> </li>
</ol>
定义列表 使用dl标签来创建定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明
<dl>
  <dt>定义的内容</dt>
  <dd>解释说明定义的内容</dd>
</dl>

ul是unordered lists的缩写 (无序列表)
li是list item的缩写 （列表项目）
ol是ordered lists的缩写（有序列表）
dl是definition lists的英文缩写 (自定义列表)
dt是definition term的缩写 (自定义列表组)
dd是definition description的缩写（自定义列表描述）
nl是navigation lists的英文缩写 （导航列表）
tr是table row的缩写 （表格中的一行）
th是table header cell的缩写 （表格中的表头）
td是table data cell的缩写 （表格中的一个单元格）
cell (巢)
cellpadding （巢补白）
cellspacing （巢空间）

a标签

超链接可以使我们从一个页面跳转到另外一个页面/当前位置的其他位置

  • a标签是行内元素
  • a标签里面可以嵌套任何元素（除a标签外）
  • 属性：href指定跳转的目标路径，可以是一个外部网站的地址，也可以是内部的路径；target属性：用来指定超链接打开的位置，可选值：_self 默认值 在当前页面中打开超链接，_blank 在一个新的页面中打开超链接
  • href中的值设置为#，可以回到当前页面最顶部；可以跳转到页面的任何位置，href中的值设置为#id名
  • 在开发中可以将#作为超链接的占位符，也可以使用javascript:;作为href的属性值，此时点击这个超链接什么也不会发生
  • 当我们需要跳转到到一个服务器内部的页面时，一般我们都会使用相对路径
  • 相对路径使用./、../写开头，如果没有写./也没有写../，则相当于写了./
  • ./表示当前文件所在目录下
  • ../表示当前文件所在目录的上一级
  • ../../表示当前文件所在目录的上上一级
  • ../../../表示当前文件所在目录的上上上一级
  • ../../../../表示的同理类推

图片标签

  • 使用img标签来引入外部图片，img标签是一个自结束标签
  • 属性： src指定图片的路径，可以引用外部图片，也可以使用内部图片；alt是图片的描述，这个描述在默认情况下一般不会显示，但是有些浏览器在无法加载的时候显示，搜索引擎会根据alt的内容来试别图片，如果不写alt属性则图片不会被搜索引擎所搜索；width属性设置图片的宽度（单位是像素）；height属性设置图片的高度（单位是像素）
  • 宽度属性或者高度属性中如果只修改了一个，则另一个也会等比例缩放；但是如果同时设置了宽度和高度，则不会等比例缩放；在真实使用中，一般只指定一个高度或者一个宽度；在pc端，一般情况下不建议修改图片大小，需要多大的图片就裁多大，在移动端经常需要对图片进行缩放，主要是大图缩小
  • img标签属于替换元素，介于块元素和行内元素之间
  • 图片的格式：
    jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图；一般用来表示照片
    gif：支持的颜色比较少，支持简单透明，支持动图；适合表示颜色单一的图片，动图
    png：支持的颜色比较丰富，支持复杂透明，不支持动图；颜色丰富，复杂透明图片（为网页而生）
    webp：这种格式是谷歌推出的专门用于网页中图片的一种格式，具备图片格式的所有优点，缺点：兼容性不好（轻易不使用，如果要使用需要适配）
    base64：可以将图片用base64进行编码，这样可以将图片转化为字符，可以通过字符来进行引入图片；一般都是需要和网页一起加载的才需要使用base64；在线网站可以进行图片的转化，转成base64
    效果一样用小的，效果不一样用效果好的

内联框架iframe

  1. 用于向当前页面中引入一个其他页面
  2. 属性：src指定引入的网页的路径；frameborder指定内联框架的边框写0和1两种值即可

audio标签

  1. audio标签用来向页面中引入一个外部的音频文件
  2. 音频文件在引入时，默认情况下是用户不能自己控制的
  3. audio的属性：
  • src：属性音频文件的路径
  • controls：是否允许客户自己控制播放停
  • autoplay设置自动播放，如果设置了会自动播放，浏览器会自动播放音乐，但是目前来讲大多数浏览器都不会自动播放
  • loop：音乐是否会循环播放
  • source标签：除了通过src来指定外部文件的路径意外，还可以通过source标签来指定文件；可以通过source标签指定多个音频路径，如果mp4格式不符合就可以指定ogg格式，再不符合就提示文字，或者可以提供ie8兼容的embed标签

vedio标签

  1. vedio标签：使用vedio标签来引入视频文件
  2. 使用的方法和audio一样，可以用source中放置多个source标签来解决、embed标签解决ie8兼容性问题

CSS

  • 层叠样式表（网页是一个多层的结构，通过css为每一层设置样式，而最终我们能看到的是网页的最上层）
  • css可以用来设置网页元素的样式
  1. 第一种方式：通过内联样式、行内样式：在标签内通过style属性设置元素的样式，名:值;
    缺点：使用内联样式只能对一个标签生效，如果需要使用到多个标签，就需要对每个标签都复制一遍，修改起来也较为麻烦；不方便维护；开发时绝对不要使用内联样式
  2. 第二种方式：将样式编写到head中的style标签里、内部样式表 *
  • 可以同时为多个标签设置样式，并且修改时只需要修改一处即可应用全部
    优点：内部样式表更加方便进行复用
    缺点：内部样式表只能对一个网页进行生效，它里面的样式不能跨页面使用
  1. 第三种方式：外部样式表，可以将样式写到一个css样式表
  • 通过link标签来引入外部的css文件，link标签的属性rel:stylesheet，属性href指定样式表的路径
    优点：可以使用外部样式表使得在不同网页中进行服用，可以使用到浏览器的缓存机制，提高用户的体验

css的基本语法

父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素一定也是它的祖先元素
后代元素：直接或者间接被祖先元素包含的元素叫做后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素

  1. 在style标签中的要遵守css的规则，注释/* css的注释会被浏览器自动忽略 */
  2. 选择器 声明块
    选择器：通过选择器可以选中页面中的指定元素
    比如p的作用就是选中页面中的指定元素
    声明块：通过声明块来为元素设置样式；声明块由一个一个的声明组成；声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以:连接,以;隔开，最后一个名值对的分号可以省略
    元素选择器：根据标签名来选中指定的元素，语法：标签名{}
    id选择器：根据元素的id属性值选中一个元素，语法：#id属性值{}
    类选择器：根据元素的class属性值来选中一类元素，.class属性值{}，可以为一个元素指定多个class属性 属性之间用空格隔开
    通配选择器：为所有元素设置通用的样式，语法:*{}
    交集选择器：同时选中符合多个条件的元素，语法：选择器1选择器2选择器3{}，如果选择器中有元素选择器一定要以元素选择器开头
    选择器分组（并集选择器）：同时选择多个选择器对应的元素，语法：选择器1，选择器2{}
    子元素选择器：选中指定父元素的指定子元素，语法：父元素 > 子元素 （> 子元素 >....>子元素）{}
    后代元素选择器：选中指定元素的后代元素，语法：祖先 后代 （后代 ... 后代）{}
    兄弟元素选择器：选中元素的下一个兄弟，语法：元素 + 下一个指定兄弟{}
    选择下边所有的兄弟：语法：元素 ~ 下一个所有的兄弟{}
    属性选择器：语法：[属性名]选择拥有该属性名的元素、[属性名=属性值]选择含有指定属性和属性值的元素、[属性名^=属性值]选择含有以指定属性值开头的元素、[属性名$=属性值]选择以指定属性值结尾的元素、[属性名*=属性值]选择其中含有指定属性值的元素
    伪类选择器：伪类用来描述一个元素的特殊状态、伪类一般以:开头
    第一个子元素 语法：:first-child
    最后一个子元素 语法：:last-child
    选中第n个子元素 语法：nth-child()
    n的范围为0到正无穷、填写为n表示选择所有
    n为2n、even的时候表示为偶数位置
    n为2n+1、odd的时候表示奇数位置
    以上伪类都是根据所有的子元素进行排序的
    :first-of-type
    :last-of-type
    :nth-of-type
    这几个伪类的功能和上述的类似，不同的地方是在同类型的元素中进行排序的
    :not() 否定伪类 将符合条件的元素从选择器中去除

超链接的伪类

  1. :link表示没有访问过的链接
  2. :visited 用来表示访问过的链接；由于隐私的原因，visited伪类只能修改链接的颜色
  3. :hover 表示鼠标移入的效果
  4. :active 用来表示鼠标点击的效果

伪元素

  1. 伪元素用两个::来表示，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
  2. ::first-letter 表示第一个字母
  3. ::first-line 表示第一行
  4. ::selection 表示选中的内容
  5. ::before ::after 必须结合content属性来使用

样式的继承

  1. 我们为一个元素设置的样式同时也会应用到它的后代元素上
  2. 继承是发生在祖先和后代之间的
  3. 继承的设计是方便让我我们将统一的样式设置到共同的祖先元素上，这样只需要设置一次，即可以让所有元素都具有该样式
  4. 并不是所有的样式都会被继承，比如：背景相关、布局相关

选择器的权重

  1. 样式的冲突————通过不同的选择器选择了相同的元素并为相同的样式选择了不同的值
  2. 发生冲突时，应用哪个样式由样式选择器的优先级决定
  3. 选择器的权重：内联样式1,0,0,0>id选择器0,1,0,0>类和伪类选择器0,0,1,0>元素选择器0,0,0,1>通配选择器0,0,0,0>继承的样式没有优先级
  4. 比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的），选择器的累加不会超过最大的数量级，类选择器在高也不会超过id选择器；如果优先级计算后相同，此时则优先使用靠下的样式；可以在某一个样式的后边添加一个!important，则此时这个样式会获取最高的优先级，甚至超过内联样式（但是注意开发时需要慎重使用）

像素和百分比

  1. 像素：屏幕是由一个一个的小点点构成的；不同屏幕的像素大小是不同的，像素越小的显示越清楚；所以同样的200px在不同屏幕下显示不同
  2. 百分比：也可以将属性设置为相对于其父元素的百分比；设置百分比使子元素跟随父元素有所改变

em、rem、颜色单位

  1. em显示相对于自身的元素的字体大小来计算的
  2. 1em = 1font-size 1font-size = 16px
  3. rem是相对于根元素的字体大小
  4. 颜色单位：在css中可以直接使用颜色来设置各种颜色：red、yellow、blue、green；但是在css中直接使用颜色是非常不方便的；通过RGB值可以表示所有的颜色，RGB通过三种颜色的不同溶度调出其他颜色；每一种颜色的范围都在0-255之间
  5. RGBA是在RGB的基础上加了一个a表示透明度，1表示不透明，0.5表示半透明0表示完全透明
  6. 十六进制的RGB值：语法：#红色绿色蓝色，颜色浓度通过00-ff，ff表示浓度最大，00表示浓度最小；例如:#ff0000表示红色；如果说颜色两位重复可以进行缩写，例如#aabbcc -> #abc
  7. HSL：H色相表示颜色(0, 360)；S表示颜色饱和度（颜色的浓度）0%-100%(百分号一定要记得写)；L表示颜色的亮度0%-100%（100%表示最亮，0%表示最暗）

文档流

  1. 网页是由一层一层叠加起来的；可以通过css设置样式；用户能看到的是网页的最上一层；最底下一层就叫做文档流；我们创建的元素默认都是以文档流中进行排列的
  2. 元素只有两种状态：在文档流中、不在文档流中（脱离文档流）
  3. 元素在文档流中的特点
  • 块元素：在页面中独占一行；默认宽度是父元素的全部（把父元素填满）；默认高度是被内容撑开
  • 行内元素：在页面中不会独占一行，只占自身大小；行内元素在页面中左向右排列，如果一行之中不能容纳下所有的行内元素，则会在第二行继续自左向右排列（书写习惯一致）
posted @ 2022-12-22 20:02  小红的小耳朵  阅读(19)  评论(0)    收藏  举报