我的HTML&CSS学习总结

最新推荐文章于 2024-10-04 06:11:34 发布

killvector

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量158

点赞数

文章标签： html css 学习

本文链接：https://blog.csdn.net/killvector/article/details/125700277

版权

本文介绍了HTML的基础标签，包括标题、文本、图片、视频和表格的使用方法，并展示了CSS的基本语法，如id选择器、class选择器以及外部样式表、内部样式表和内联样式的应用。此外，还讲解了CSS中的后代选择器和子选择器，帮助读者理解如何控制网页元素的呈现效果。

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

HTML简介

HTML是超文本标记语言（HyperText Markup Language），是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

一、HTML总结

一、html基础标签

a.标题

1. HTML提供<h1>到<h6>六级不同大小的标题

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>

在这里插入图片描述

b.文本

<h1>皮肤半价</h1>
    <hr>
    <p>原价：<s>99</s>元<del>99</del>元
        现价：<b>49.5</b>元<strong>49.5</strong>元
        <u>买！</u>
        <ins>买！</ins>
        <i>666</i>
        <em>999</em>
    </p>

在这里插入图片描述

c.插入图片、音频和视频

 <h1>英雄联盟2022MSI</h1>
    <hr>
    <h2>RNG加油</h2>
    <br>
    <p><img src="media/1000.webp" alt="此站留名">
    </p>
    <a href="./音频标签.html" target="_blank">音乐:superSerct</a>
    <br>
    <a href="./视频标签.html" target="_blank">视频:emeny</a>

![在这里插入图片描述](https://img-blog.csdnimg.cn/391366b7b904414eb739e490ef2291dc.png#pic_center

d.表格

<table >
    <tr>
        <td>行 1, 列 1</td>
        <td>行 1, 列 2</td>
    </tr>
    <tr>
        <td>行 2, 列 1</td>
        <td>行 2, 列 2</td>
    </tr>
</table>

在这里插入图片描述

e.表单


//表单
<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname"><br>
    Password: <input type="password " name="password"><br>
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女<br>
    <input type="checkbox" name="hobby" value="Sleep">我喜欢睡觉<br>
    <input type="checkbox" name="hobby" value="Game">我喜欢打游戏<br>
    <input type="submit" value="提 交">
</form>

在这里插入图片描述

CSS简介

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

二、css总结

1.css基本语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

a.id选择器

HTML标签以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

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

b.class选择器

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

p class="center">居中显示</p>
<p class="red">我是红色</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也是红</p>
<style>
    .center{
  text-align: center;
}
.large{
  font-size: 40px;
}
.red{
  color: red;
}
</style>;

2.css生效方式

插入样式表的方法有三种:
a.外部样式表
b.内部样式表
c.内联样式

a.外部样式表

<head>
<link rel="stylesheet" type="text/css" href="Yonestyle.css">
</head>

b.内部样式表

<head>
<style>
hr {color:red;}
p {margin-left:40px;}
body {background-image:url("images/feacebook.gif");}
</style>
</head>

c.内联样式

内联样式，就是直接把样式规则直接写到要应用的元素中。

<h3 style="color:green;">做完美的事</h3>

3.组合选择器

a.后代选择器

<style>
        div p{
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
    <div>
        <p>这是儿子p1</p>
        <h1>鸡你太美</h1>
    </div>
</body>

在这里插入图片描述

b.子选择器

<style>
        div>a{
            color: brown;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">我是div的a</a>
        <p>
            <a href="#">p的a</a>
        </p>
    </div>
</body>