HTML常用标签&CSS基础

芒果软糖_

已于 2023-03-31 20:23:05 修改

阅读量1k

点赞数

文章标签： html css

于 2023-03-31 20:16:52 首次发布

本文链接：https://blog.csdn.net/m0_73908308/article/details/129867475

版权

一、HTML常用标签

1.标题标签h1-h6

实例：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

效果如下：

This is a heading

2.段落标签p

实例：

<p>This is a paragraph.</p>

效果如下：

This is a paragraph.

3.链接标签a

实例：

<a href="https://csdn.com.cn">This is a link</a>

效果如下：
This is a link

注释：在 href 属性中指定链接的地址。

4.图像标签img

实例：

<img src="img.jpg" width="100" height="100" />

5.水平线hr

实例：

<p>This is a paragraph</p>
<hr />

效果如下：
This is a paragraph

6.换行br

实例：

<p>This is <br/>a paragraph</p>

效果如下：

This is
a paragraph

7.短的引用q

实例：

<p>我们的目标是<q>拯救世界</q></p>

效果如下：

我们的目标是拯救世界

8.长的引用blockquote

实例：

<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

效果如下：

以下内容引用自 WWF 的网站：

五十年来，WWF 一直致力于保护自然界的未来。世界领先的环保组织，WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。

9.表格标签table:

实例：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

效果如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

10.表头标签th:

实例：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

效果如下：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

11.空单元格：

实例：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

效果如下：

row 1, cell 1	row 1, cell 2
	row 2, cell 2

12.无序列表ul列表项li

实例：

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

效果如下：

Coffee
Milk

13.有序列表ol列表项li

实例：

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

效果如下：

Coffee
Milk

14.自定义列表序列dl

实例：

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

效果如下：

Coffee

Black hot drink

Milk

White cold drink

注：自定义列表项以dt开始，自定义列表项的定义以dd开始

15.表单标签form

实例：

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

效果如下：
在这里插入图片描述

二、CSS基础

1.CSS发展历史

在这里插入图片描述

2.CSS的作用

主要用来设计网页的样式，美化网页
能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式
对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制

3.CSS的引用方式

引用方式共三种：

行内样式（元素上的style）

将css样式添加在HTML标签中,作为style样式的属性值

内部样式（文件头上的style元素）

在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置

外部样式（外部样式文件）

将css样式写入.css文件内，然后通过link标签链接

优先级自上而下降低

4.CSS的三大特性

在这里插入图片描述

5.CSS的常用属性

背景属性：
简写边框属性：
border属性是以下各个边框属性的简写属性：
1.border-width
2.border-style
3.border-color
实例：

<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<h1>border 属性</h1>

<p>此属性是 border-width、border-style 以及 border-color 的简写属性。</p>

</body>

效果如下：
在这里插入图片描述

简写轮廓属性：
outline 属性是以下各个轮廓属性的简写属性：
1.outline-width
2.outline-style
3.outline-color
实例：

<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
	<h1>outline 属性</h1>
	<p class="ex1">点状轮廓。</p>
	<p class="ex2">红色的点状轮廓。</p>
	<p class="ex3">5 像素的黄色实线轮廓。</p>
	<p class="ex4">粗的粉色凸脊轮廓。</p>
</body>