HTML & CSS 学习总结

最新推荐文章于 2024-08-18 21:08:41 发布

m0_73895349

最新推荐文章于 2024-08-18 21:08:41 发布

阅读量24

点赞数

文章标签： html css 学习

本文链接：https://blog.csdn.net/m0_73895349/article/details/131425679

版权

本文介绍了HTML的基本结构和常见元素，如标题、段落、链接、表格和列表。CSS方面，讲解了选择器、颜色、尺寸、对齐、盒子模型和定位的概念，以及如何通过浮动和定位实现布局。此外，还涉及了HTML中的表单元素和交互功能。

摘要由CSDN通过智能技术生成

一、HTML

HTML，全称是“Hyper Text MarkupLanguage”（超文本标记语言），HTML是一门描述性语言。

1.创建新文件

首先进入vscode，然后点击文件—新建文件—输入带有.html后缀的文件名，至此可以看到一个空的文件
在这里插入图片描述

样例

![<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑 :) </p>
</body>
</html>]

运行结果

2.html的基础结构

<!DOCTYPE html>//声明文档类型。出于历史原因需要，现在可有可无
<html></html>//这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>//这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8"> //这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。 
<title></title>//设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>// 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
<p>我在注释外，可以显示！</p>
<!-- <p>我在注释内！浏览器将忽略我</p> -->

3.html中的标签

页面组成元素：
1.文本
2.图片
3.超链接

学习了以下内容。

一级标题标签 <h1></h1> (有一到六级h1-h6，重要程度依次递减，搜索引擎检索完title后会立即检索h1内容)
换行标签<br />
水平线标签<hr />
段落标签 <p></p>
超链接标签<a></a>
图片标签<img />
注释标签<!-- -->
纯粹块元素<div></div> (没有任何语意，不会为里面的内容设定任何默认样式，用作页面布局）
纯粹内联元素<span></span> （没有任何语意，专用来选中文字，然后为文字设定样式）
粗体标签：<b></b>
斜体标签：<i></i>

4.html中的表格

基本结构：表格（table标签）、行（tr[table row]标签）和单元格（td[table data cell]）标签。
完整结构：除基本结构的三部分外，表格还有caption、th等。
caption标签为表格标题，一个表格只能有一个标题，标题都是位于整个表格的第一行；
th（table header cell）为表头单元格标签。
一个完整的表格包含：table、caption、tr、th、td。为更深一步对表格进行语义化，HTML引入thead、tbody和tfoot标签，将表格划分为三部分：表头、表身和表脚，表格语义更加良好，结构更加清晰，也具有更好的可读性和可维护性。

  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

运行结果

html中的列表

在HTML中，列表共有3种：有序列表、无序列表和定义列表。
在有序列表中，列表项之间有先后顺序之分。在无序列表中，列表项之间是没有先后顺序之分的。而定义列表是一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分。

<ol>和</ol>标志着有序列表的开始和结束，而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。

注意，ol标签和li标签是配合一起使用，不可以单独使用，而且ol标签的子标签只能是li标签。
我们可以通过使用type属性来改变列表项符号，属性值有：1、a、A、i 和 I。
无序列表同理，标签为ul，type属性取值有：disc（实心圆，默认值）、circle（空心圆）和square（正方形）。
定义列表（definition list），由两部分组成：名词和描述，标签为dl。
dt为（definition term，定义名词），dd为（definition description，定义描述）。dt标签用于添加要解释的名词，dd标签用于添加该名词的具体解释。
样例：
无序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

html中的表单

如果想要做出一个动态页面，我们需要借助表单来实现（所以此节内容也会稍多一些）。

文本框、按钮、下拉菜单等是常见的表单元素。

如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。表单是我们接触动态页面的第一步。其中表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。

表单标签有五种：form、input、textarea、select和option。
常见的按钮有三种：普通按钮（button）、提交按钮（submit）和重置按钮（reset）。三种标签外观上一致，但功能各不相同。

普通按钮一般情况下是配合JavaScript进行各种操作，value属性为按钮上的文字；
提交按钮一般用来给服务器提交数据，针对当前form标签；
重置按钮一般用来清除用户在当前所在“form标签”表单中输入的内容。
文件上传，type属性为“file”，功能的实现需要用到后端技术。

单行文本框只能输入一行文本，而多行文本框可以输入多行文本，使用textarea标签，而不是input。

语法：<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

多行文本框的默认显示文本是在标签对内部设置，而不是在value属性中设置的。

对于文本框，现在我们可以总结出以下2点。

HTML有3种文本框：单行文本框、密码文本框、多行文本框。
单行文本框和密码文本框使用的都是input标签，多行文本框使用的是textarea标签。
下拉列表，由select和option这两个标签配合使用来表示，可以将下拉列表看成一种“特殊的无序列表”。与无序列表类似，使用ul和li两个标签配合使用。
下拉列表是最节省页面空间的一种方式，它在默认情况下只显示一个选项，点击后才会看到全部选项。
select标签有两个常用属性，multiple和size。
multiple设置下拉列表可以选择几项，默认为1项，可以使用“Ctrl+鼠标左击”进行多选。
size设置下拉列表显示几个列表项，取值为整数，Chrome浏览器最低为4。
option标签有两个常用属性，selected和value。
selected：是否选中，无属性值
value：选项值。
几乎所有表单元素都有value属性，value属性是配合JavaScript以及服务器进行操作的。

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名" required><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码" required><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>

在这里插入图片描述

二、CSS

CSS，即“Cascading Style Sheets”（层叠样式表），是用来控制网页外观的一种技术。

1. CSS选择器

html中元素的id和class属性，一般情况下，id和class都可以用来选择元素，以便进行CSS操作或者JavaScript操作。
id属性具有唯一性，也就是说，在一个页面中相同的id只能出现一次。
class属性，与编程语言中的“类”类似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使相同class的元素具有相同的CSS样式。
常用的有五种选择器：元素选择器；id选择器；class选择器；后代选择器和群组选择器。
选择器语法：
选择器{属性1：取值1；属性2,：取值2；…}
元素选择器，就是选中相同而元素，然后对相同的元素定义同一个css样式。

id选择器

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

class 选择器

/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

css中的样式

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

<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<hr>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>

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

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>
  </body>
</html>

再建css文件

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
  height: 100px;
  width: 500px;
  background-color: rgb(73, 138, 60);
  text-align: right;
}

3.对齐
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐）。

4.盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。
掌握盒子模型需要从两方面理解：一是理解单独一个盒子的内部结构（往往是padding）；二是理解多个盒子之间的相互关系（往往是margin）。
每个元素都看成一个盒子，盒子模型是由四个属性组成的：content（内容）、padding（内边距）、border（边框）和margin（外边距）。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。记住，所有的元素都可以看成一个盒子。

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
    <div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
  </body>
</html>


```cpp
.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}
.box2 {
  height: 300px;
  width: 300px;
  background-color:#004d61;
  color: aliceblue;
  border: 10px solid blue;
  padding: 25px;
  margin: 25px;
}

在这里插入图片描述

5.边框
几乎所有元素都可以定义边框，如div、img、table和span。边框样式的属性有三个：border-width：边框的宽度；border-style：边框的外观和border-color：边框的颜色。三种属性同时设定，边框才会生效。
border-style常用取值有三种：none（无样式）、dashed（虚线）和solid（实线）。还有一些不常用的，如hidden、dotted、double等。
三种属性可以进行简写，如：border：1px solid red；分别对应width、style和color属性。
此外，一个元素其实有四条边（上下左右），上面是对边框整体做样式设置，我们也可以针对某条边设置不一样的样式。
样例：

<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>

.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;
}

在这里插入图片描述
6.定位
CSS定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动，能够创建多种高级而精确地布局。

固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。
语法：position: fixed;top: 像素值;bottom: 像素值;left: 像素值;right: 像素值;
说明：fixed结合后面的四个属性一起使用。top、bottom、left和right四个属性用来设置元素相对浏览器的位置（参考对象是浏览器的四条边），一般只会用到其中两个。固定定位最长用于实现“回到顶部”。

相对定位，是相对于该元素的初始位置计算得到的。
语法：position：relative；top：像素值；bottom: 像素值;left: 像素值;right: 像素值;
说明：relative结合后面四个属性一起使用，一般只会用到两个注意，在默认情况下，固定定位元素的位置是相对浏览器而言，而相对定位元素的位置是相对于原始位置而言！依旧选择两个属性值即可。

绝对定位，能够非常精确地将元素定位到任何想要的位置，在几种定位方式中使用最为广泛。
语法：position：absolute；top：像素值；bottom: 像素值;left: 像素值;right: 像素值; 说明：absolute属性同样是与后四个属性一起使用的，先使用“position：absolute”使元素成为绝对定位元素，再用后四个属性设置元素相对浏览器的位置，一般还是只用到两个。元素成为绝对元素后，这个元素就完全脱离文档流了，绝对定位元素之前或之后的元素会认为这个元素不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。

总结：默认情况下，固定定位和绝对定位的位置是相对于浏览器而言的，而相对定位的位置是相对于原始位置而言的。
静态定位，默认属性语法：position：static 说明：静态定位是元素position属性的默认值，如果想要使元素从其他定位方式变成静态定位，需要使用“position：static”来实现。

7.浮动
浮动是CSS布局的最佳利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。例如我们可以通过设置float属性让元素向左浮动或者向右浮动，以便让周围的元素或文本环绕着这个元素。
语法：float：取值；
说明：取值有两个，left（元素向左浮动）和right（元素向右浮动）。
将元素设置浮动后，块元素的宽度不再延伸，而是由内容宽度决定其宽度。

我们还可以使用clear属性来清除浮动。
语法：clear：取值；