HTML & CSS标签基础

最新推荐文章于 2024-05-16 02:33:44 发布

无名_log4j2

最新推荐文章于 2024-05-16 02:33:44 发布

阅读量460

点赞数 8

分类专栏： Javaweb学习文章标签： html css 前端

本文链接：https://blog.csdn.net/syste_return/article/details/138272498

版权

Javaweb学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML & CSS标签基础

HTML
CSS style设置
CSS选择器
代码展示

HTML

HTML是超文本标记语言(HyperText Markup Language)的缩写，是用于创建网页的标准标记语言。

HTML允许人们创建包含文字、图形、动画、声音、表格和链接等元素的网页。HTML文档的基本结构包括头部和主体两部分，其中头部包含浏览器所需的信息，如标题、元数据等，而主体则是网页的主要内容。

此外，HTML与CSS（层叠样式表）和JavaScript结合使用，可以进一步增强网页的外观和交互性，HTML5的引入为开发人员提供了更多语义化的元素，使代码更容易理解和修改，同时，响应式设计使得网页能够在不同设备上良好地显示。

基础标签

<html></html>最外部的框架，说明这是一个html格式的内容
<head></head>html的头部
<body></body>html的身体

<br>:换行;<hr>一条换行线
<img></img>插入图片
<vidio></vidio>插入视频
<audio></audio>插入音频

<h1></h1>~<h5></h5>标题1~5字体大小变小
<p></p>段落
<span></span>行内无语义标签

img标签使用

src：获取图片的路径
- 绝对路径"C:/path/to/picture"
- 相对路径 “./path/to/picture”
width&height:设置图片大小，两个同时设置可能会对图片进行拉伸
- 50px:50个像素
- 50%:占父标签的50%

Vidio & audio

src：同上
controls：设置播放器->一般默认controls

CSS style设置

行内样式

例：

<h1 style="color:red;">text</h1>

直接在标签处设置，只对当前标签有效

内嵌样式

例：

<style>
	h1{
		color:red;
	}
</style>

一般写在< head >里对全局的元素标签起作用

外联样式

xxx.css < link herf=“…”>

CSS选择器

元素选择器
- 标签名{…}
id选择器
- id名{…}
类选择器
- .class属性值{…}
  链接: link.

代码展示

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color:rgb(93, 86, 76);
        }
        .cls{
            color: red;
            font-size: 13px;
        }
        a {
            color:black;
            text-decoration: none;
        }
    </style>
</head>

展示的是内嵌式的几种选择器

无名_log4j2

关注

8
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
HTML & CSS标签基础

此外，HTML与CSS（层叠样式表）和JavaScript结合使用，可以进一步增强网页的外观和交互性，HTML5的引入为开发人员提供了更多语义化的元素，使代码更容易理解和修改，同时，响应式设计使得网页能够在不同设备上良好地显示。HTML文档的基本结构包括头部和主体两部分，其中头部包含浏览器所需的信息，如标题、元数据等，而主体则是网页的主要内容。HTML是超文本标记语言(HyperText Markup Language)的缩写，是用于创建网页的标准标记语言。展示的是内嵌式的几种选择器。
复制链接

扫一扫