HTML&CSS学习总结

傲然而立

已于 2022-07-08 13:23:26 修改

阅读量141

点赞数

文章标签：前端 html css

于 2022-07-08 13:17:24 首次发布

本文链接：https://blog.csdn.net/qq_56451578/article/details/125667338

版权

HTML&CSS学习总结

HTML

一.介绍

1.HTML是超文本标记语言（HyperText Markup Language）的缩写，使用它来架构一个网页最基本的内容和结构，在未使用css的情况下，HTML构建的网页只有“骨”。
2.HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。

二.标记

1.元素解释

<p>*!*</p>

如上所示
开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

2.HTML结构

<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

3.注释

HTML以作为注释标记
例如

<!-- <p>我在注释内！浏览器将忽略我</p> -->

4.空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素，如下：

<!-- 换行 -->
<p>我可以<br>换行</p> 
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>

5.属性

以属性名称=“属性” 的形式，如下

<input type="text">
<input type="password">

6.标题

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，如下所示：

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

7.文本格式

<mark>特别标记</mark>

特别标记

<del>删除</del>

删除

<s>不再准确或不再相关的内容</s>

~~不再准确或不再相关的内容~~

<ins>文档的补充</ins>

文档的补充

<u>下划线</u>

下划线

<small>小字体</small>

小字体

<strong>粗体</strong>

粗体

<em>斜体</em>

斜体

提示：HTML 是用来表现页面内容而不是对页面进行修饰的，专门的页面美化需要CSS。

8.超链接

语法

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明：
href即为要跳转去的地址 URL（Uniform Resorce Locator)
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击。

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<!-- 文档其余部分 -->
<h2 id="C4">某元素</h2>
<!-- 文档其余部分 -->
<a href="#C4">超链接</a>
<!-- 文档其余部分 -->

注意：
元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
超链接中的地址需要有#符号。

9.图片及文件路径

<img src=" alt="MDB Logo" width="200" height="200">

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

图片路径

<img src="picture.jpg">

该图片文件与当前文档在同一目录中

<img src="./images/picture.jpg">

该图片文件在当前目录下的images目录中

<img src="../picture.jpg">

该图片文件在上一级目录中

10.表格

<table>
    <tr>
      <th></th>
    </tr>
    <tr>
      <td></td>
    </tr>
  </table>

<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）

11.列表

无序列表

<ul>
  <li></li>
</ul>

无序列表使用

标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
如

<ul type="square">
  <li></li>
</ul>

有序列表

<ol>
  <li></li>
</ol>

有序列表使用

标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

<ol type="a">
  <li></li>
</ol>

12.表单

当网站需要获取我们的一些信息时，我们就需要使用表单（form）来让用户填写或选择。

请输入如下代码进行学习：

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

提示：当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。

13.显示

HTML 的元素可以以称为区块或内联的方式进行显示。

区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

内联元素
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

<h3>下面的元素将在一行中显示</h3>
<span>aaaaa</span>
<input name="aa">
<span>111</span>
<a href="">bbbb</a>
<img src="">

预设格式
如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。

<!-- pre标签中的内容将保持格式不变 -->
<pre>
             
</pre>

特殊字符
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）

<hr>
<h2>test.html</h2>
<pre>
  &lt;h1&gt;这是个一级标题&lt;/h1&gt;
  &lt;p&gt;这是一个段落&lt;p&gt;
<pre>

CSS

一.介绍

CSS是级联样式表（Cascading Style Sheets）的缩写，用它来改变HTML页面的结构和样式，为网页充实“骨肉”。

二.样式

1.元素解释

/* 这是CSS的注释 */
/* 建议每条申明占一行 */
p{
  color:red;
  text-align:center;  /* 文本居中 */
}

选择器是您需要改变样式的对象（p）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值由冒号分隔。
选择器

（1）id选择器

/* 注意：id选择器前有 # 号。 */
#aa{
  color: blue;
}

（2）class选择器

/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}

（3）元素选择器

p{
  color:red;
  text-align:center;  /* 文本居中 */
}

2.CSS位置

（1）外部样式表

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>111</h1>
  <hr>
  <p class="haha">2</p>
</body>
</html>

在同一目录新建一个样式表文件mycss.css（注意后缀名为css）

（2）内部样式表

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .aa{
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>111</h1>
  <hr>
  <p class="aa">2</p>
</body>
</html>

（3）内联样式

<h3 style="color:green;">123</h3>

直接把样式规则直接写到要应用的元素中。

（4）优先级

样式的优先级问题，从高到低分别是：
内联样式
内部样式表或外部样式表
浏览器缺省样式

3.颜色，尺寸，对齐

（1）颜色

我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。

<h3 style="background-color:#ff0000;">#ff0000</h3>

（2）尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。

.example {
  width: 100%;
  height: 200px;
}

（3）对齐

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可。

.example {
  text-align: center;
}

4.盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：

box

说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

如下

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}

一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距
因此，我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度。

5.边框和边距

（1）边框

.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

（2）边距

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

6.定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

（1）static

设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

（2）relative

设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移
试试如下的代码：

.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}

（3）fixed

设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
如下的代码将会在浏览器右下角固定放置一个按钮元素：

.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f0f;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
  height: 5000px;
  width: 5000px;
  padding: 20px;
  background-color: darkkhaki;
}

（4）absolute
设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。

7.溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条
以上内容较好理解，请自行进行验证。
关于滚动，我们还可以单独对上下或左右方向进行，如下代码所示：

.example-overflow-scroll-y {
  width: 200px;
  height: 100px;
  background-color: #eee;
  overflow-y: scroll;
}

8.浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。

.example-float-right {
      float: right;
    }

9.不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高，如下图所示：

img {
      width: 25%;
      border-radius: 10px;
      float: left;
      margin: 10px;
    }
    .opacity-2 {
      opacity: 0.2;
    }

10.组合选择器

前面我们学习了 CSS有三种选择器：元素、id 和 class 。但我们也可以进行组合，以得到简洁精确的选择。
下面我们介绍两种组合选择器。

后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
参见如下代码：

<html>
<head>
  <style>
    .a p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="a">
    <p>1</p>
    <p>2</p>
    <span>
        <p>3</p>
    </span>
  </div>
  <p>4</p>
  <p>5</p>
</body>
</html>

只作用于1，2，3

子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接

元素。
参见如下代码：

<html>
<head>
  <style>
    .aa > p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="aa">
    <p>1</p>
    <p>2</p>
    <span>
        <p>3</p>
    </span>
  </div>
  <p>4</p>
  <p>5/p>
</body>
</html>

只作用于1，2。

11.伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
使用伪类/伪元素的语法如下：

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */

selector:pseudo-class/pseudo-element {
  property:value;
}

以下是常用的伪类/伪元素的简单使用：

a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
/ 鼠标移到段落则改变背景颜色 */

p:hover {background-color: rgb(226, 43, 144);}

p:first-line{color:blue;} /* 段落的第一行显示蓝色 /
p:first-letter{font-size: xx-large;} / 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 /
h1:after { content:url(smiley.gif); } / 在每个一级标题后插入该图片 */

傲然而立

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS学习总结

HTML&CSS总结
复制链接

扫一扫