初识HTML、CSS

最新推荐文章于 2024-11-01 08:52:35 发布

shadow_tian1

最新推荐文章于 2024-11-01 08:52:35 发布

阅读量252

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/tian_98/article/details/108057664

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

VScode 插件

chinese (simplified) language pack
live server
open in browser
rest client
px2vw
node-snippets
markdown（编辑器）
autoprefixer
easy less
jquery code snippets
cssrem

快捷键：

同时操作多行代码：长按alt+鼠标选中
直接切换到下一行：ctrl+enter
复制本行到上/下一行：alt+shift+向上/向下
打开控制台：ctrl+shift+i（f12/右键检查）
ps切片保存：shift+ctrl+alt+s
ps缩放图片大小：alt+鼠标滚轮

五大主流(单内核)（有自己研发的内核（浏览器的渲染引擎，用来解析代码））浏览器：

Chrome谷歌浏览器（webkit->2013年webkit的分支内核Blink）
Firefox火狐浏览器（Gecko）
Safari苹果浏览器（webkit内核）
Opera欧朋浏览器（Blink内核）
IE浏览器（Trident）
（360浏览器、QQ浏览器等都是采用双内核trident&webkit）

网页组成：

结构层（html）：超文本标记语言（非编程语言）
表现层（css）：层叠样式表
行为层（js）：脚本语言

HTML文档（由html元素（开始标签到结束标签的所有代码）定义）基本结构：（！+enter）

<!-- 文档类型为html，这句话是告诉浏览器这是一个html5的页面，需要按照html5的方式去解析这个文档 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 编码方式 -->
    <meta charset="UTF-8">
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页小图标 -->
    <title>Document</title>
</head>
<body>    
</body>
</html>

HTML基本语法：

html元素语法：以开始标签起始，以结束标签终止；其内容为起止标签之间的内容；空元素在开始标签内进行关闭；大多数元素可有属性。
html标签：由尖括号包裹的关键词。
空元素：没有内容，在开始标签内关闭。
注释：提高可读性，不会显示，无影响。(ctrl+/)

常用的html标签

块级元素（块元素的特点：宽度默认100%，所以块元素一行默认只能放一个，块元素可以设置宽高，即使我们设置了宽度，仍旧是独占一行）
- 标题h1-h6标签
- 段落p标签
- div标签：用于布局，无实际含义。
- ul li无序列表标签 / ol li有序 / dl dt dd自定义
内联元素（行内元素的特点：宽度默认auto（auto表示按照内容宽度来决定），所以一行可以放多个行内元素，行内元素无法设置宽高css属性）
- span标签：为部分文本设置样式属性
- b标签：粗体文本
- strong标签：强调粗体
- i标签：斜体
- em标签：强调斜体
- a标签（超链接）：
  href属性（需要跳转的页面地址）
  title属性（鼠标移入时的提示文字）
  target属性（定义页面打开的位置：
  新窗口打开（_blank）；当前窗口打开（_self））
  锚点链接（指定跳转到具体的位置，结合id）
  同一页面指定位置：
  < p id = “box” >< /p>
  < a herf = “#box” >< /a>
  不同页面目标位置
  a.html页面的< div id =“box” >< /div>
  < a href = “a.html#box” >< /a>
- del/s：删除线
- sub：定义下标
- sup：定义上标
行内块元素，既具备行内元素的特征又具备块元素的特征,也就是说它可以和行内块元素一样显示在同一行，但是他还可以设置宽高，默认情况下行内块元素的大小也是由内容决定
- . img标签（空）：
  src属性（文件路径）
  alt属性（图片加载失败时的提示文字）
  title属性（图片标题，鼠标移入时的提示文字）
  width属性（宽）
  height属性（高）
- input
- 表格
相对路径（relative path）：
这个文件所在的路径引起的跟其他文件或文件夹的路径关系。
/根目录
./当前目录
. . /上一级目录
. . / . . /上上级目录
绝对路径（absolute path）：
带有域名或从盘符开始的路径
特殊标签：
- br标签：换行
- hr标签：分割线
  &：小于号（lt;）大于号（gt;）版权（copy;）空格（nbsp;）已注册（reg;）商标（trade;）元（yen;）
- 特殊字符编码对照表：link.
语义化：用合理的标签及其特有的属性去嵌套内容
作用：
- 没有css也能也能呈现好的内容结构
- 提高可读性，便于开发和维护
- 利于用户体验
- 和搜索引擎建立良好的沟通

列表：

无序列表：ul li（块级标签）：列表符为实心圆点（默认）
注意：ul的直接子元素只能是li标签，li可以嵌套其他标签
有序列表：ol li（块级标签）：列表符号为阿拉伯数字
定义列表：dl（定义列表的性质）
dt（列表项标题）
dd（列表项的内容）

    <!-- 无序列表 -->
    <ul>
        <li>鸡翅</li>
        <li>鸭脖</li>
        <li>猪蹄</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>鸡翅</li>
        <li>鸭脖</li>
        <li>猪蹄</li>
    </ol>
    <!-- 定义列表 -->
    <dl>
        <!-- 标题 -->
        <dt>绝味鸭脖</dt>
        <!-- 内容 -->
        <dd>鸡翅</dd>
        <dd>鸭脖</dd>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dd>西瓜</dd>
        <dt>蔬菜</dt>
        <dd>香菜生菜空心菜</dd>
    </dl>

表格：

由单元格组成，有行有列。

用途：显示数据，用来布局（不推荐）
表格特点：

表格的行高由一行里面最高的单元格决定
表格列宽由一列中最宽的单元格决定
表格如果没有定义宽度，默认由内容撑开

标签：table（定义表格区域）
           tr（定义表格的行）
           td（定义表格每行的单元格（列），正常字体左对齐）
           thead（定义表头部分（一般都在第一行））
           tfoot（定义表尾）
           tbody（定义表格主体部分）
           th（定义表头部分的单元格，水平垂直居中粗体）
默认表格没有边框
注意：保证每一行里面的单元格一致
table属性：
- 设置在table标签：
  - border：边框（值：长度值默认无边框）
  - cellpadding：单元格与内容之间的间距（值：长度值（px））
  - cellspacing：单元格与单元格之间的间距（值：长度值（px））
  - border-collapase：行和单元格的边是否合并
    - separate：边框独立
    - collapse：相邻边被合并
  - border-spacing：水平px 垂直px；
- 设置在tr或者td：
  - align：设置内容水平对齐方式（值：left 左对齐（默认值） right（右对齐） center（居中））
  - valign：设置内容垂直方向对齐方式（值：middle 居中（默认值） top（顶部对齐） bottom（底部对齐））
单元格合并：
- 跨列合并：colspan（水平合并）
- 跨行合并：rowspan（垂直合并）
  注意：合并之后删除被合并的单元格

	<table border="1" cellspacing="0">
        <!-- 行 -->
        <tr>
            <!-- 每列的单元格 -->
            <td rowspan="3">111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td rowspan="2">222</td>
            <td>222</td>
        </tr>
        <tr>
      
            <td>333</td>
        </tr>
    </table>
    <table border="1" cellspacing="0" cellpadding="5px" style="width: 400px; height: 400px;">
        <!-- 定义表头 -->
        <thead>
            <tr>
                <!-- 定义表头部分的单元格 -->
                <th align="left">学号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <!-- 主体 -->
        <tbody>
            <tr>
                <td align="center">1</td>
                <td align="right" valign="top">甜瓜</td>
                <td>22</td>
            </tr>
            <tr>
                <td>2</td>
                <td align="left" valign="bottom">泡芙</td>
                <td>18</td>
            </tr>
            <tr>
                <td>3</td>
                <td>海丽</td>
                <td>24</td>
            </tr>
        </tbody>
        <!-- 定义表尾 -->
        <tfoot>
            <tr>
                <td>总人数</td>
                <td colspan="2" align="center">3</td>
            </tr>
        </tfoot>
    </table>

CSS：

层叠样式表（cascading style sheet），主要用于页面的样式设置以及页面布局
作用：
- 文字的样式，大小，颜色，背景色，字体的系列…
- 图片的大小，背景图，边框，圆角…
- 页面布局
css语法：
选择器{
css属性：属性值
}
css的引用：
- 行内样式：在开始标签里面 style=“css属性”
  - 行内样式缺点：可读性差，没法复用
  - 不推荐使用，需要单独去设置元素的样式

 <div style="width: 100px;height: 100px;background-color:aqua;"></div>

内部样式：在head标签里面，用style标签包裹（在某个页面有单独的风格样式时使用）

<style>
    .common{
        width: 100px;
        height: 100px;
    }
</style>

外部样式：创建一个.css文档（直接写css语法），用link标签引入（放在head标签里面），里面的href属性引入css文件，rel='stylesheet’定义引入的文件是样式表文件（css文件）
- 推荐使用，完全结构和表现相分离
注释：/* 注释内容 */
行内>（内部和外部）
css选择器
- 标签选择器（ele）：就是根据html标签的名字来选择，如果html文档中有很多同名的标签，比如：有很多div标签，标签选择器就是把所有的div都选中；一般不用标签选择器，因为一个文档里面虽然可以出现很多div或其他同名标签，但是这都些标签的样式基本是不一样，如果需要一样的css风格，建议是用class选择器。
  - ele{
    css属性1：属性值1；
    css属性1：属性值1；
    }
- 通配符选择器 *（所有的元素）
- 类选择器 .class：class选择器是 . 开头，后面跟上html表的class属性名；class选择器是不唯一的，也就是说我们给多个html标签的class属性命名相同的名字。Class选择器用来给一些想要设置相同css样式风格的html标签设置命名。Class可以有多个名字，相当于是人的别名，比如：诸葛亮，又叫卧龙，又叫孔明先生，又叫诸葛孔明。
  - 多个class名字有什么用？
    - Class本来的意图是给多个相同class命名的标签设置统一样式，但是如果这些标签里面有一些是存在个性化设置的，可以通过再添加一个class名字去单独设置（注意，这个名字就不要和其他class重名了）
      多个class的作用也可以使用一个class和一个id来做到。
- Id选择器 #id：css里面使用的时候#开头，后面跟上html表的id属性名；id选择器是唯一的，也就是说我们给html的id属性命名的时候不要重名。Id选择器用来进行一些单独的、个性化的css设置
- 派生选择器：父级选择器空格子选择器；用来选择父级下面的所有符合条件的子级（这个子级不一定是孩子，也可以是孙子或后辈）；
  - 为什么使用派生选择器？
    - 因为我们常常使用class选择器，在不同的节点里面可能出现相同的class名字，但是这些内容可能略有不同，比如：广东彭于晏，北京彭于晏，南京彭于晏…大家都叫彭于晏，但是加了父级修饰后，就可以很好的区分开到底是哪个彭于晏

文字属性

font-size 设置文字大小（值：px）
font-weight 设置字体加粗效果
（值：bold 加粗
normal 正常（默认）
100-900:400正常 600加粗）
font-style 设置字体斜体效果
（值：normal 正常
italic 斜体）
font-family 设置字体系列
（值：微软雅黑（默认）
如果是英文的字体名称一定要加引号（全部加引号））
color 设置字体颜色
（值：颜色值）
line-height 设置行高
（值：px（让文本垂直居中））
复合属性：font：font-style font-weight font-size/line-height font-family;
（其他的都可以省略不写，font-size和font-family必须同时设置才会起作用）

文本属性

text-align：设置文本水平对齐方式（块元素起作用）
（值：left 左对齐（默认值）
right右对齐
center 居中对齐
justify 两端对齐（换行时的空余间隙））
text-indent ：设置首行缩进
（值：em 大小相对于字体的大小
2em 就是两个字体的大小
px）
text-decoration 设置文本修饰效果
（值：none无（默认值）
          underline 下划线
           overline 上划线
           line-through 中划线）
了解：text-decoration：线的位置线条的形状线条的颜色
- 线条形状：solid 实线/double 双实线/wavy波浪线/dashed 虚线/dotted 点状线
letter-spacing：字符与字符的间距
（值：px）
word-spacing：单词之间的间距
（值：px）

长度单位值

px：具体的像素值
em：相对单位，相对于文字大小
百分比：相对单位，相对父元素的宽
rem：相对单位，相对根标签字体大小

颜色值

关键词：颜色的单词
十六进制：#00（红）00（绿）00（蓝） - #ffffff
rgb(num,num,num)num取值范围：0-255：红绿蓝
rgba(num,num,num,alpha)alpha取值范围：0-1：透明度（小数点前的0可以省略，eg：.5）

盒模型

每一个元素都可以看作是一个盒子，都是由内容，内边距，边框，外边距组成。
盒子的实际占位宽 = 左右外边距+左右边框+左右内边距+width
盒子的实际占位高 = 上下外边距+上下边框+上下内边距+height
- 内容：width height
  - Width：设置宽度,inline标签无法设置宽度，不生效，block或inline-block才可以
  - Height：设置高度,inline标签无法设置高度，不生效，block或inline-block才可以
    值：px
块元素，不设置width,默认100%
扩展：常用于响应式
           min-width：范围（>=numpx）；当宽度小于num的时候，设置width=num.
           max-width ：范围（<=numpx）；当宽度大于num的时候，设置width=num.
           min-height
           max-height
内边距 padding：内容到边框之间的距离
- 值：px
  - 一个值：设置上下左右的内边距
  - 二个值：第一个值上下内边距第二个值左右内边距
  - 三个值：第一个值上内边距第二个值左右内边距第三个值下内边距
  - 四个值：上内边距右内边距下内边距左内边距
    - padding-top
    - padding-right
    - padding-bottom
    - padding-left
border：边框
- border：边框宽度边框的类型边框颜色（可省略）
  - border-width：numpx；
  - border-style：
    - 值：solid 实线 dotted 点线 double 双实线 dashed 虚线）
  - border-color：
  - border-top
  - border-right
  - border-bottom
  - border-left
  - border-top-width
  - border-top-style
  - border-top-color
    …
maigin 外边距
- 值：px
  - 一个值：上下左右
  - 二个值：上下左右
  - 三个值：上左右下
  - 四个值：上右下左
  - margin-top
  - margin-right
  - margin-bottom
  - margin-left

背景属性

background-color：设置背景色
- 值：颜色值
- padding,border,内容：可以被背景色填充
background-image：设置背景图片
- 值：url（背景图路径）
- 当盒子大小小于背景图片时，只显示盒子大小区域的图片
background-repeat：设置背景图的平铺方式
- 值：no-repeat （不平铺，只显示一次）
  repeat（平铺（默认值））
  repeat-x（水平方向平铺）
  repeat-y（垂直方向平铺）
  了解：
  background-repeat-x:
  background-repeat-y:
background-position：设置背景图片位置
- 值：水平方向垂直方向（x y）
- 如果值只设置一个值，垂直方向默认居中（center）
- px center right left top bottom
- 百分比（不是转成px，图片与盒子占位比例）
- 水平方向：正值向右移动；负值向左移动
- 垂直方向：正值向下移动；负值向上移动
- background-position-x:
- background-position-y:
background：背景复合属性
- bachground：背景色背景图片平铺方式背景定位；
- 可以单独定义一个背景色或者背景图
- 平铺方式和背景定位不可以单独设置（结合背景图使用）

选择器进阶

群组选择器：可以同时选中多个元素
- ele1,ele2,ele3…{
  }
- 有多个选择器组成，选择器逗号隔开
交集选择器：选中同时满足ele1和ele2的元素
- ele1ele2{
  }
- 两个选择器之间没有任何符号
后代选择器：选中ele1元素里面的ele2
- ele1 ele2{
  }
- 空格分开，选中的只有一个元素
子代选择器：选择父元素的直接子元素
- ele1>ele2{
  }
状态伪类选择器：
- 主要针对链接标签
  - -：link{ } 链接未被访问时的状态
  - -：visited{ } 链接被访问之后的状态
  - -：hover{ } 鼠标划入时的状态
  - -：active{ } 链接被激活时的状态
  - ：hover和：active是可以用在其他元素上的

总结：

标签分类：
（a标签不能嵌套a, h不能直接套h标签, p标签是不可以套块标签的）
- 块级标签：div h1-h6 p ol ul dl dt dd li
  - 特点：
    - 独占一行，从新的一行开始
    - 宽高，内边距，外边距，边框，行高都可以设置
    - 宽度默认100%
    - 块标签可以嵌套行内标签和行内块标签，也可以嵌套块标签
    - 三级元素就是指,只能嵌套内联元素的块级元素。p也恰好是其中之一。
- 行内标签：span a i b strong em del…
  - 特点：
    - 和行内标签在一行显示
    - 不可以设置宽高和垂直方向的外边距，内边距和水平的外边距可以设置
    - 宽度默认由内容撑开
    - 行内标签可以嵌套行内标签，a可以嵌套其他块标签
- 行内块标签：img td th
  - 特点：
    - 和行内标签或者行内块标签在一行排列
    - 可以设置宽高，以及内外边距
    - 宽度默认内容撑开

标签类型转换：display

值：
- block 转换为块元素
- inline 转换为行内元素
- inline-block 转换为行内块元素
- 块元素->inline inline-block
- 行内 ->block inline-block
- 行内块 ->block

css三大特性：

层叠性：同一选择器设置多个样式时并且同时作用在同一元素上面时，样式可以重叠
- 如果样式冲突，则就近原则（以下面设置为准）
- 如果样式不冲突，则同时起作用
继承性：子元素可以继承父元素的样式
- 可继承属性：
  - 文本属性：text- line-height
  - 字体属性：font-
  - color可继承（a标签除外）
  - 背景色不能被继承，透明色
  - width：伪继承
优先级：当样式冲突时，权值最大的选择器设置的属性起作用
- 选择器 / 权重
  
  !important>行内样式 > id选择器 > class选择器 > 标签选择器 > *(统配选择) > 继承(无权重)
  同样修饰一个html标签，权重大的就会覆盖权重小的。如果权重相同，那就看写作次序了，后写的覆盖前面的。
  我们可以通过派生选择器的做法去加权。
- */0
- ele / 1
- .class / 10
- #id / 100
- 行内 / 1000
- 选择器权重相加就是他的权值
- 特殊：
  - 行内样式高于内部和外部样式
  - 权重相等，就近原则
  - ！important 最高级别

居中

块元素水平居中：margin：auto；
- 注意：块元素需要有一个宽度，设置给居中元素的本身
行内元素 / 行内块元素：
- 水平居中：给父元素设置 text-align：center；
- 垂直居中：给父元素设置 line-height：

补充：

inline标记设置margin-top问题
- W3c规范说：margin的所有属性对于所有的元素都是生效的，但是margin的垂直属性（top和bottom）对于inline元素无效
- Margin的top和bottom对于inline标记无效
margin折叠
- 相邻的两个元素（父子，兄弟）,如果都是block元素，在设置margin的时候，会有margin折叠的现象;要想打破这种现象，不要相邻（不要让父亲和孩子的margin挨着）即可。
- 注意：margin折叠只存在于block元素的上下（top和bottom），左右不存在
- 打破margin折叠的做法：
  - 1、不相邻：
    - 1）给父亲设置border边框，孩子的margin-top就会首先接触到父亲的border；这样一来父亲和孩子的margin就不会相邻
    - 2）给父亲设置padding，孩子的margin-top就会首先接触到父亲的padding区域；这样一来父亲和孩子的margin就不会相邻
  - 2、w3c规范说明
    - 1）任何一个float浮动元素只要设置了left或right就不会产生margin折叠
    - 2）任何一个设置display:inline-block的元素也不会产生margin折叠
字体图标一般用i标签包裹
li标签设置悬浮颜色，选中时其下的i标签能继承，但其下的a标签不能被继承：

   /* li 标签hover之后选中它下面的.fa 或 a 或 span */
	li:hover .fa,li:hover a,li:hover span{
	color: blue;
	}
	/* li标签hover之后，它的背景色变成白色 */
	li:hover{
	background-color: #fff;
	}

margin值传递与塌陷：

父子元素的margin值的传递，当父子元素的作用在同一边界：
- 如果设置子元素的margin-top，则会传递到父元素身上，使父元素整体下移。
- 如果同时设置父子元素的margin-top：
  - 两个正值，取最大值
  - 两个负值，取绝对值最大的
  - 一正一负，取和
  - margin值可以是负值
    解决方法：
  - 尽量把间距作为padding处理
  - 给父元素设置边框（可以设置边框颜色transparent 透明）
  - 给父元素设置overflow：hidden属性（BFC）
    overflow：hidden 设置文本溢出隐藏
兄弟元素的垂直margin塌陷问题：
- 当两个兄弟元素的**垂直方向**的margin作用在同一区域时：
  - 如果是两个正值，取其最大的
  - 两个负值，取绝对值最大
  - 一正一负，取和
    解决：
  - 只作为一个元素的margin值处理
  - 给任意一个兄弟元素包裹一个div，给这个div设置overflow：hidden
  - 两个兄弟都包裹一个div，设置overflow：hidden

浮动：

有浮动属性的元素会脱离标准文档流，在其父元素内一行排列，直到碰到其包含框或者另一个浮动元素为止。提升层级（半层级），文字、图片不会覆盖。

浮动属性：float
值：
- left 左浮动
- right 右浮动
- none 不浮动（默认）
作用：元素在一行排列，页面布局
标准文档流：在页面上，所有的元素默认从左到右，从上到下排列

浮动带来的问题：

浮动元素脱离文档流，不占位，使父元素的高度塌陷，影响后续布局

解决方法：（清浮动）
- 给父元素设置固定的高度（不够灵活，height需要随着里面元素的多少进行变换）
- 给父元素设置overflow：hidden；
  - 因overflow：hidden本身是有作用的，可能会冲突，不建议。
- 在浮动元素的最后面添加一个空的div，给这个div设置clear：both；
  - clear：both；清除前面浮动元素带来的影响
  - 页面会代码冗余，不推荐
- 利用伪元素：（推荐使用）原理和第三条一样
  .clearfix：：after{
          content：‘ ’；
          display：block；
          clear：both；}
  - 给浮动元素父元素添加类名：clearfix
  - ：：after 在元素的最后面追加一个伪元素{
    content：‘ ’；设置为元素的内容，必须有
    }
    - css属性可以作用在伪元素上面
    - 生成的伪元素是行内元素
  - ：：：before 在父元素的最前面追加一个伪元素{
    content：‘ ’；设置为元素的内容，必须有
    }
    - css属性可以作用在伪元素上面
    - 生成的伪元素是行内元素}