html+css

最新推荐文章于 2023-08-06 09:02:27 发布

ichao66

最新推荐文章于 2023-08-06 09:02:27 发布

阅读量504

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/sqdz123/article/details/131520838

版权

一、html

HTML是超文本标记语言的缩写，是用于创建网页和其他类似文档的标准语言。

1.标题标签

HTML中的h标签是标题标签（Header Tag），用于定义网页中的标题。h标签共有6个级别，如下：

h1标签代表最高级别的标题，h6标签代表最低级别的标题。

<h1>大标题</h1>
<h2>副标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.列表标签

HTML中的列表标签有三种类型：

有序列表（Ordered List）使用 <ol> 标签，每个列表项使用 <li> 标签，表示有一定顺序的列表，每个列表项前面有数字编号。
```
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>
```
输出效果为：
第一项
第二项
第三项

2.无序列表（Unordered List）使用 <ul> 标签，每个列表项使用 <li> 标签，表示无顺序的列表，每个列表项前面有小圆点。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

输出效果为：

第一项
第二项
第三项

3.自定义列表（Definition List）使用 <dl> 标签，每个列表项使用 <dt> 标签表示名称，使用 <dd> 标签表示名称的解释。

<dl>
  <dt>HTML</dt>
  <dd>用于创建网页的标准标记语言。</dd>
  <dt>CSS</dt>
  <dd>用于描述网页样式的语言。</dd>
</dl>

3.表格

HTML中的表格使用<table>标签来定义，通过<tr>标签定义行，通过<th>或<td>标签定义列，其中<th>表示表头单元格，会被加粗居中显示，而<td>表示普通单元格。

4.超链接

HTML超链接（Hyperlink）是一种可以在网页上跳转到其他网页、图片、音频、视频、文档等资源的链接。超链接可以使用以下代码创建：

<a href="链接地址">链接文字</a>

其中，href属性指定了链接的目标地址，链接文字是用户点击时显示的文本。

5.图片

在 HTML 中插入图片，可以使用 <img> 标签，具体语法如下：

<img src="图片地址" alt="替代文本">

其中，src 属性指定图片的 URL 地址，alt 属性指定在无法加载图片时显示的替代文本。

6.表单标签

HTML表单标签用于创建包含用户输入字段的表单，用户可以在这些字段中输入数据。以下是一些常用的HTML表单标签：

<form>：定义一个表单。
<input>：定义一个输入字段。
<textarea>：定义一个多行文本输入字段。
<select>：定义一个下拉列表。
<option>：定义下拉列表中的选项。
<button>：定义一个按钮。
<input type="checkbox">：定义一个复选框。
<input type="radio">：定义一个单选按钮。
<input type="submit">：定义一个提交按钮。
<input type="reset">：定义一个重置按钮。
checked作用于单选框和复选框的默认选择。
selected用于下拉列表的默认选择。

二、css

1.css引入

在HTML文档中引入CSS样式表有多种方式，下面是一些常用的方式：

内联样式：在HTML标签的style属性中直接嵌入CSS样式。

<p style="color: blue;">123</p>

内部样式表：使用<style>标签在HTML文档的<head>部分定义CSS样式。

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>123</p>
</body>

外部样式表：创建一个独立的CSS文件，然后使用<link>标签将其链接到HTML文档。

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>123</p>
</body>

上述代码中的href属性指定了外部样式表文件的路径。

导入样式表：在<style>标签内使用@import规则导入外部样式表。

<head>
  <style>
    @import url("styles.css");
  </style>
</head>
<body>
  <p>123</p>
</body>

在上述代码中，@import规则指定了外部样式表文件的路径。

这些方式可以根据需要和项目要求进行选择。通常，推荐使用外部样式表，因为它使样式的管理和维护更加方便，并支持样式的复用。

2.基本选择器

基本选择器是CSS中最基本的选择器类型，它们允许你通过元素类型、类名、ID等属性选择HTML元素。下面是几个常见的基本选择器：

元素选择器：通过元素类型选择HTML元素。

p {
  color: blue;
}

上述示例中，选择所有的 <p> 元素并将文本颜色设置为蓝色。

2.类选择器：通过类名选择HTML元素。

.abc {
  background-color: yellow;
}

上述示例中，选择所有具有abc 类的元素并将背景颜色设置为黄色。

3.ID 选择器：通过元素的唯一ID选择HTML元素。

#header {
  font-size: 24px;
}

上述示例中，选择具有 header ID 的元素并将字体大小设置为24像素。

4.属性选择器：通过元素的属性选择HTML元素。

input[type="text"] {
  border: 1px solid #ccc;
}

上述示例中，选择所有 type 属性值为 text 的 <input> 元素并将边框设置为1像素的实线边框。

这些基本选择器可以单独使用，也可以组合使用以选择特定的HTML元素，并为它们应用样式。

3.css选择器

伪类选择器是CSS中的一种选择器，用于选择元素的特定状态或位置。它们以冒号（:）开头，用于在元素的基本选择器后面添加额外的选择条件。以下是一些常见的伪类选择器：

:hover：选择鼠标悬停在元素上的状态。

a:hover {
  color: red;
}

上述示例中，当鼠标悬停在链接（<a>）元素上时，将文本颜色设置为红色。

2.:active：选择元素被激活（鼠标按下或键盘焦点）的状态。

button:active {
  background-color: yellow;
}

上述示例中，当按钮（<button>）被点击时，将背景颜色设置为黄色。

这些只是一些常见的伪类选择器示例，还有其他伪类选择器可用于选择元素的不同状态和特性。通过使用伪类选择器，可以对元素根据其状态和位置应用不同的样式。

ichao66

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html+css

HTML是超文本标记语言的缩写，是用于创建网页和其他类似文档的标准语言。1.标题标签HTML中的h标签是标题标签（Header Tag），用于定义网页中的标题。h标签共有6个级别，如下：h1标签代表最高级别的标题，h6标签代表最低级别的标题。2.列表标签HTML中的列表标签有三种类型：输出效果为：第一项第二项第三项 2.无序列表（Unordered List）使用标签，每个列表项使用标签，表示无顺序的列表，每个列表项前面有小圆点。输出效果为：3.表格 HTML中的表格
复制链接

扫一扫