HTML-CSS

Britney 发布于

最后更新于

文章访问量

web标准<—W3C(World Wide Web Consortium,万维网联盟)

组成 说明
HTML 网页的结构（页面元素和内容）
CSS 网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
JavaScript 网页的行为（交互效果）

HTML结构

1
2
3
4
5
6
7
8
9
<html>
  <head>
             <!--网页头部：用来存放给浏览器看的信息，如：CSS样式-->
  </head>
  <body>
             <!--网页主体：用来存放给用户看的信息，如：文字、图片、视频-->
  </body>
</html>

快捷键

生成结构：!+enter（vs code）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 声明文档的类型为html -->
<!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>

行注释：ctrl+/（IDEA）
块注释：ctrl+shift+/

标题排版

素材网址: https://news.cctv.com/2024/05/15/ARTIflTnFvNMx9nUVc4PA7T2240515.shtml

HTML-CSS参考文档：https://developer.mozilla.org/zh-CN/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
</head>
<body>
  <!-- 定义网页标题, 标题内容： 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
  <!-- a 超链接标签：
    href：链接地址 - url地址
    target：打开方式 
      _blank: 新窗口打开
      _self: 当前窗口打开 -->
  <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
  <a href="https://news.cctv.com/" target="_blank">央视网</a>
  2024年05月15日 20:07
</body>
</html>

标题样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<!-- 方式二：内部样式 -->
<!-- <style>
  span{
    color: gray;
    }
</style> -->

<!-- 方式三：外部样式 -->
<link rel="stylesheet" href="css/news.css">

</head>
<body>
  <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
  <a href="https://news.cctv.com/" target="_blank">央视网</a>
<!-- 方式一：行内样式 -->
  <!-- <span style="color: gray;">2024年05月15日 20:07</span> -->
<span>2024年05月15日 20:07</span><!-- 方式二 -->
</body>
</html>

方式三：news.css

1
2
3
span{
  color: gray;
  }


css注释：/* */

1
2
3
4
5
6
7
8
9
10
span{
    /* 关键字 */
    /* color: gray; */
    /* RGB表示法 */
    /* color: rgb(128, 128, 128); 可用截图工具取色*/
    /* RGBA表示法 */
    /* color: rgba(128, 128, 128, 0.5); */
    /* 16进制表示法 */
    color: #808080;
    }

css选择器：选取需要设置样式的元素（标签）的

优先级：ID>类>元素
元素选择器

1
2
3
4
5
6
7
8
<style>
/* 元素选择器：标签名{...} */
  span{
    color: gray;
    }
</style>
...
<span>2024年05月15日 20:07</span>

类选择器

1
2
3
4
5
6
7
8
<style>
/* 类选择器： .class属性值{...} */
  .cls{
    color: gray;
    }
</style>
...
<span class="cls">2024年05月15日 20:07</span>

ID选择器

1
2
3
4
5
6
7
8
<style>
/* ID选择器： #id属性值{...} */
  #time{
    color: gray;
    }
</style>
...
<span class="cls" id="time">2024年05月15日 20:07</span>

去除超链接的下划线

1
2
3
4
5
6
7
<style>
a{
    text-decoration: none;
    }
</style>
...
<a href="https://news.cctv.com/" target="_blank">央视网</a>

正文排版

视频音频标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 换行 -->
<br>
<!-- 定义一个视频，引入video/news.mp4 -->
<!-- video标签属性：
        src: 视频地址
        controls: 显示播放控件（去掉后视频不会显示播放控件，只是一张图片）
        autoplay: 自动播放（去掉不会自动播放了）
        width: 视频宽度（建议：宽度和高度只设置一个，另一个会自动适配）
        height: 视频高度
          单位：px：像素、
               %：百分比（相当于父元素的百分比）
-->
<video src="video/news.mp4" width="500" height="300" controls="controls"></video>
<!-- 引入音频 -->
<audio src="audio/news.mp3" controls="controls"></audio>

段落标签

1
2
3
4
<!-- 段落标签p -->
<p>

</p>

图片标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 定义一张图片，引入 img/1.gif -->
<!-- img标签属性：
        src: 图片地址
        1.绝对路径
          1.1 绝对磁盘路径C:/Users/Administrator/Desktop/img/1.gif（不推荐）
          1.2 绝对网络路径http://www.baidu.com/img/1.gif（网站中右键在标签页中打开图片）
        2.相对路径
          2.1 ./：相对目录(./可以省略)，如：./img/1.gif
          2.2 ../：上一级目录
width: 图片宽度（建议：宽度和高度只设置一个，另一个会自动适配）
height: 图片高度
-->
<img src="img/1.gif">

正文样式

加粗标签b/strong

1
2
3
4
<p>
  <b>央视网消息</b>
  <!-- <strong>央视网消息</strong> -->
</p>

设置行高

1
2
3
4
5
6
<style>
    p{
      line-height: 2;/* 行高：2倍行高 */
                    /* 单位也可用px */
      }
</style>

首行缩进（空格&nbsp）

1
<strong>&nbsp;&nbsp;&nbsp;&nbsp;央视网消息</strong>
1
2
3
4
5
<style>
    p{
      text-indent: 2em;/* 缩进：2个文字宽度 */
    }
</style>

页面布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    #content-container{
      width: 800px;/* 宽度 */
      margin-left: auto;/* 居中 */
      margin-right: auto;
    }
</style>

<body>
<div id="content-container">
  <h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
  <a href="https://news.cctv.com/" target="_blank">央视网</a>
  <span>2024年05月15日 20:07</span>
  <p> </p>
...
</div>
</body>

盒子模型

盒子:页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

布局标签
在网页开发中，常使用 <div> 和 <span> 两个无语义的布局标签进行结构排版和样式控制。
<div> 标签特点 <span> 标签特点
默认独占一行（块级元素） 默认不换行，可在一行中显示多个（行内元素）
宽度默认占满父容器，高度由内容撑开 宽高均由内容撑开
可设置宽高（width、height） 不建议设置宽高，设置无效或不生效
Britney

Britney

I'm OOO🖥.If anything urgent,please pay or pray.

5
1
0
NOTICE

欢迎访问我的博客！有任何问题请留言~

CATEGORIES
TAGS