前端基础(二)

 HTML常用标签:

标签基本结构:双标签:开始标签(<标签名>)+包裹内容+结束标签(</标签名>)

                         单标签:自成一体,无法包裹内容

标签与标签之间的关系:嵌套关系(父子关系)、并列关系(兄弟关系)。

框架常用标签:在用HTML书写网页时,需要先建立骨架,再填充内容。

固定结构:整体、头部、标题、主题。

整个网页由<html></html>包裹,<head></head>决定头部,<body></body>决定主体。

<html>

<head>
<title>我的第一个 HTML 页面</title>//title标签包裹内容是建设网页名字。
</head>

<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>

</html>

快捷键:!+回车快速建立框架。

注释:快捷键ctr+/  注释形式:<!--    -->

单标签:<hr>、 <br>

排版标签:

标题标签:

<h1>一级标题</h1>

<h2>二级标题</h2>

......

<h6>六级标题</h6>( 标题大小依次递减,独占一行,文字加粗)

段落标签:<p>内容</p>(段落之间存在间隙,独占一行)

换行标签:<br>强制换行,单标签。

水平线标签:<hr>添加分割线,单标签。

文本格式化标签:

 图片来自w3school.com

链接标签:<a href="url">Link text</a>

媒体标签:

图像标签:

<img src=" ">

<img> 是空标签,只包含属性,没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。

src 指 "source"。源属性的值是图像的 URL 地址。(即路径)

空标签:

  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

绝对路径与相对路径:参看前端注意(一)

音频标签:音频文件在不同的浏览器和硬件上不同,制作网页时应确保音频在任一载体上能够播放。

  • 使用插件:<embed> 元素、<object> 元素(定义外部内容)
  • 使用HTML5中的<audio>元素直接
  • 使用超链接

视频标签:

同上述音频标签1、2引用方式,加上<video>。

表单与表格:参看前端注意(一)

CSS基础:

CSS发展历史:

CSS的诞生:扒一扒 CSS 语言的诞生史 - 知乎 (zhihu.com)

CSS发展史:(2条消息) CSS 二十年发展简史_CSDN资讯的博客-CSDN博客

CSS作用:

  • 可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制;
  • 控制页面布局
  • 可以将许多网页的风格格式同时更新。(可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。)

引用方式:

有三种插入样式表的方法:

  • 外部 CSS:写在一个单独的.css文件中,需要通过link标签在网页中引入。
  • 内部 CSS:写在style标签中,通常在head标签中写入。
  • 行内 CSS:写在标签的style属性中。

当为某个 HTML 元素指定了多个样式时,优先级从高到低:

  1. 行内样式(在 HTML 元素中)
  2. 外部和内部样式表(在 head 部分)
  3. 浏览器默认样式

三大特性:

  • 层叠性
  • 继承性
  • 优先级

层叠性:

当多种CSS样式叠加(对同一个元素来说,设置多个样式时会出现样式冲突)

同一个元素设置不同的样式:层层叠加,共同作用在标签上。

同一个元素设置相同的样式:层层覆盖,最后一个样式生效。

注:只有当选择器优先级相同时,才能通过层叠性判断结果。

继承性:

子元素有默认继承父元素样式的特点。

可以继承的常见属性:

文字类属性有继承性。

与块级元素相关的如边框、外边距、内边距、背景、定位、元素高度等属性都不具有继承性。

注:<a>标签继承color元素时失效,<h>系列标签在继承font-size元素时失效。

优先级:

同一个元素指定多个选择器,就会有优先级的产生。

  • 选择器相同,则执行层叠性
  • 选择器不同,则根据选择器权重执行

不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式:!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承

注:!important

  1. 写在属性值的后面,分号前。
  2. 不能提升继承的优先级,只要是继承,优先级最低
  3. 实际开发中不建议用

权重叠加计算:

复合选择器需要通过权重叠加计算方法来判断哪个选择器优先级最高,会生效

权重叠加计算公式:每一级之间不存在进位

第一级;      第二级;      第三级;      第四级

 0;          0;            0;           0;

行内样式个数;id选择器个数;类选择器个数;标签选择器个数(复合选择器中)

比较:

  1. 先比较第一级数字,如果能比较出来,之后的数字不需要看   
  2. 如果第一级数字相同,依次往下比较
  3. 如果最终所有数字都相同,则比较层叠性(谁写在最下面就用谁)

注:!important如果不是继承,则优先级最高

常用属性:

文字:font-style/font-weight/font-size/font-family等

颜色:color

背景相关:background-color /background-image: url()背景图片/background-repeat背景平铺/background-position:背景定位/等

CSS 选择器分为五类:

  • 简单选择器(根据名称、id、类来选取元素)
  • 组合器选择器(根据它们之间的特定关系来选取元素)
  • 伪类选择器(根据特定状态选取元素)
  • 伪元素选择器(选取元素的一部分并设置其样式)
  • 属性选择器(根据属性或属性值来选取元素)
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值