HTML开发笔记:1.环境、标签和属性、CSS语法

news2024/11/28 2:51:06

一、环境与新建

        在VSCODE里,加载插件:“open in browser”

        然后新建一个文件夹,再在VSCODE中打开该文件夹,在右上角图标新建文档,一定要是加.html,不要忘了文件后缀

        复制任意一个代码比如:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请投币</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: 'Comic Sans MS', cursive, sans-serif;
        }
        h1 {
            font-size: 4rem;
            color: #ff6347;
            text-shadow: 2px 2px 4px #000000;
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }
    </style>
</head>
<body>
    <h1>第一个网页</h1>
</body>
</html>

        鼠标右击空白处单击【open In Default Browser】查看运行结果。

        网页弹出即说明新建成功。

二、标签和属性详解

1.标题标签 <h1> 到 <h6>

标题标签用于定义文档中的标题和子标题。<h1> 是最高级别的标题,通常用于主标题,而 <h6> 是最低级别的标题,用于最小的子标题。数字越大,字体越小

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

2.段落标签 <p>

段落标签用于定义文本段落。浏览器会自动在段落前后添加一些空白。

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

3.链接标签 <a>

链接标签用于创建超链接,指向其他网页或同一网页的不同部分。href 属性指定了链接的目标URL。

<a href="https://www.example.com">访问示例网站</a>

图片标签 <img>

图片标签用于在网页中嵌入图像。src 属性指定了图像文件的路径,alt 属性提供了图像的替代文本。

<img src="image.jpg" alt="描述图片的文本">

4.列表标签

无序列表 <ul>:列表项前面有项目符号。

有序列表 <ol>:列表项前面有数字或字母。

列表项 <li>:用于定义列表中的每一项。

<ul>

  <li>无序列表项1</li>

  <li>无序列表项2</li>

</ul>

<ol>

  <li>有序列表项1</li>

  <li>有序列表项2</li>

</ol>

5.表格标签

表格 <table>:定义一个表格。

表格行 <tr>:定义表格中的一行。

表格数据 <td>:定义表格中的一个单元格。

表格头 <th>:定义表格中的表头单元格。

html

<table>

  <tr>

    <th>表头1</th>

    <th>表头2</th>

  </tr>

  <tr>

    <td>数据1</td>

    <td>数据2</td>

  </tr>

</table>

6.表单标签

表单 <form>:定义一个表单,用于收集用户输入。

输入 <input>:定义一个输入字段,可以有不同的类型,如文本、密码、单选、复选等。

按钮 <button>:定义一个按钮,可以用于提交表单或执行其他操作。

html

<form action="/submit" method="post">

  <label for="username">用户名:</label>

  <input type="text" id="username" name="username">

  <br>

  <label for="password">密码:</label>

  <input type="password" id="password" name="password">

  <br>

  <button type="submit">提交</button>

</form>

7.特殊字符

HTML中有一些特殊字符需要使用字符实体来表示,以避免与HTML标签冲突。

空格:&nbsp;

小于号:&lt;

大于号:&gt;

和号:&amp;

html

<p>这是一个包含特殊字符的段落:&lt; &gt; &amp; &nbsp;</p>

三、CSS

CSS(Cascading Style Sheets,层叠样式表)是一种用于描述HTML或XML文档外观和格式的样式表语言。CSS的主要作用是分离内容和表现,使得网页的结构和样式可以独立修改,提高了代码的可维护性和可重用性。

1. CSS的基本概念

层叠:多个样式可以作用在同一个HTML元素上,同时生效。

样式表:定义如何显示HTML元素的规则集合。

2. CSS的好处

功能强大:可以控制网页的几乎所有视觉表现。

内容与样式分离:降低耦合度,便于维护和协作。

提高开发效率:样式可以复用,减少重复代码。

3. CSS的使用方式

内联样式:在标签内使用style属性指定CSS代码。

内部样式:在<head>标签内使用<style>标签定义CSS。

外部样式:通过<link>标签引入外部CSS文件。

4. CSS语法

格式:

css

选择器 {

    属性名1: 属性值1;

    属性名2: 属性值2;

    ...

}

选择器:用于筛选具有相似特征的元素。

5. 选择器类型

基础选择器:

id选择器:#id属性值{}

类选择器:.class属性值{}

元素选择器:标签名称{}

扩展选择器:

通用选择器:*{}

并集选择器:选择器1, 选择器2{}

子选择器:选择器1 > 选择器2{}

后代选择器:选择器1 选择器2{}

属性选择器:元素名称[属性名="属性值"]{}

伪类选择器:元素:状态{}

例如:

#uniqueID { color: green; }

.commonClass { font-weight: bold; }

div { background-color: yellow; }

6. 常用CSS属性

字体和文本

font-size:字体大小

color:文本颜色

text-align:对齐方式

line-height:行高

背景

background:背景颜色或图片

边框

border:边框样式

尺寸

width:宽度

height:高度

盒子模型

margin:外边距

padding:内边距

box-sizing:控制盒子尺寸计算方式

布局

float:浮动

position:定位

例如:

body {

    font-family: Arial, sans-serif;

    background: url('background.jpg');

    border: 1px solid black;

    width: 50%;

    height: 300px;

    margin: 20px;

    padding: 10px;

}

7. CSS的引入方式

行内式:直接在标签的style属性中添加CSS样式。

内嵌式:在<head>标签内加入<style>标签。

外链式:使用<link>标签引入外部CSS文件。

例如:

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

8. CSS的选择器

标签选择器:根据标签名选择元素。

类选择器:根据类名选择元素。

id选择器:根据id选择元素。

后代选择器:选择某个元素的后代元素。

子选择器:选择某个元素的直接子元素。

伪类选择器:根据元素状态选择元素。

例如:

ul li { color: purple; }

.container > p { text-decoration: underline; }

a:hover { color: orange; }

9. CSS的属性

布局常用属性:width, height, background, border, padding, margin, float

文本常用属性:color, font-size, font-family, font-weight, line-height, text-decoration, text-align, text-indent

例如:

h1 {

    color: navy;

    font-size: 2em;

    text-align: center;

    text-indent: 20px;

}

10. CSS的元素溢出

overflow属性:控制溢出内容的显示方式,可选值有visible, hidden, auto

例如:

div {

    width: 100px;

    height: 100px;

    overflow: auto;

}

11. CSS的显示特性

display属性:控制元素的显示类型,可选值有none, inline, block, inline-block

例如:

span { display: block; }

div { display: none; }

12. 盒子模型

内容:元素的实际内容区域。

内边距:内容与边框之间的空间。

边框:围绕内容的线条。

外边距:元素与其他元素之间的空间。

例如:

.box {

    width: 200px;

    padding: 20px;

    border: 5px solid gray;

    margin: 20px;

}

13. CSS的优先级

优先级规则:内联样式 > ID选择器 > 类选择器 > 元素选择器

!important:用于提升某个样式的优先级,应谨慎使用。

例如:

#special { color: blue; }

.text { color: red !important; }

14. CSS的继承

继承属性:某些属性会自动继承父元素的值,如color, font-family等。

例如:

body { font-family: 'Arial', sans-serif; }

p { color: inherit; }

15. CSS的单位

绝对单位:如px, pt等。

相对单位:如em, rem, %等。

例如:

div {

    width: 50%;

    font-size: 1.2em;

}

16. CSS的响应式设计

媒体查询:根据不同的设备特性应用不同的样式。

例如:

@media (max-width: 600px) {

    body { background-color: lightgreen; }

}

17. CSS的预处理器

Sass/SCSS, Less, Stylus:提供变量、嵌套、混合、函数等高级功能,增强CSS的可编程性。

例如:

$primary-color: #333;

body {

    color: $primary-color;

}

18. CSS的命名规范

BEM(Block Element Modifier):一种命名约定,提高代码的可读性和可维护性。

例如:

.block__element--modifier { color: blue; }

19. CSS的最佳实践

模块化:将CSS分成多个模块,便于管理和复用。

性能优化:减少重绘和回流,提高页面加载速度。

可访问性:确保所有用户都能无障碍地访问网页。

例如:

/* 模块化 */

.button {

    padding: 10px 20px;

    border: none;

    background-color: #007BFF;

    color: white;

}

/* 性能优化 */

.lazy-load {

    background: url('lazy-image.jpg') no-repeat center;

    background-size: cover;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1938031.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

reserve和resize

void test_vector4() {vector<int> v1;//cout << v1.max_size() << endl;//v1.reserve(10);v1.resize(10);for (size_t i 0; i < 10; i){v1[i] i;}for (auto e : v1){cout << e << " ";}cout << endl;} 在上面这段代码中对…

数学建模--国赛备赛---TOPSIS算法

目录 1.准备部分 1.1提交材料 1.2MD5码相关要求 2.TOPSIS算法 2.1算法概述 2.2基本概念 2.3算法核心思想 2.4拓展思考 3.适用赛题 3.1适用赛题说明 3.2适用赛题举例 4.赛题分析 4.1指标的分类 4.2数据预处理 4.2.1区间型属性的变换 4.2.2向量规范化 4.3数据加…

vue 侧边锚点外圆角

环境&#xff1a;uniapp、vue3、unocss、vant4 效果&#xff1a; 代码 主要是&#xff1a;pointTop 、pointCentent 、pointBottom&#xff0c;这三个样式 html <div v-show"!showPoint" class"fixedLeftDiv"><div><div class"pointT…

RPG素材Unity7月20闪促限时4折游戏开发资产兽人角色模型动画休闲放置模板物理交互流体水下焦散VR界面UI2D模板场景20240720

今天这个是RPG素材比较多&#xff0c;还有一些休闲放置模板、FPS场景素材、角色模型、动画、特效。 详细内容展示&#xff1a;www.bilibili.com/video/BV1Tx4y1s7vm 闪促限时4折&#xff1a;https://prf.hn/l/0eEOG1P 半价促销&#xff1a;https://prf.hn/l/RlDmDeQ 7月闪促…

java开发报错合集

mapstruct 1. 报错信息&#xff1a; mapstruct 错误 java.lang.NoSuchMethodError: Ljava/lang/Double 错误 解决方案&#xff1a; mapstruct 错误 java.lang.NoSuchMethodError: Ljava/lang/Double 错误_mapstruct nosuchmethoderror-CSDN博客 2. 报错信息&#xff1a; maps…

数据结构——线性表(单链表)

一、链式存储结构定义 线性表的链式存储结构定义是指使用指针将线性表中的元素按照其逻辑次序依次存储在存储空间中&#xff0c;通过指针来表示数据元素之间的逻辑关系。具体来说&#xff0c;链式存储结构由数据域和指针域组成&#xff0c;数据域存储数据元素的数值&#xff0…

手机接Usb hub再连接电脑下D+D-波形

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

UE4-光照渲染、自动曝光、雾

目录 一.光源种类 二.灯光的移动性 三.自动曝光 四.指数级高度雾 五.实现光束 一.光源种类 1.定向光源 用来模拟现实中的太阳光。 2.点光源 比如现实中的灯泡 3.聚光源 4.矩形光源 是这几个光源中性能开销最大的&#xff0c;一般不用到游戏场景中&#xff0c;因为游…

win安装mysql

解压到目录没如果多个mysql创建不同的名字 创建data和my.ini my.ini内容 [client] default-character-setutf8mb4[mysqld] #设置3306端口 port 3306 # 设置mysql的安装目录 basedirF:\mysql-5.7.31 # 设置mysql的数据存放目录 datadirF:\mysql-5.7.31\data # 允许最大连接数 …

ComfyUI面部修复FaceDetailer使用指南

原文&#xff1a;ComfyUI面部修复完全指南 (chinaz.com) 让我们开始使用ComfyUI中的人脸详细修复器吧。人脸详细修复器节点乍一看可能很复杂&#xff0c;但不要担心&#xff0c;我们会一点一点地分解它。通过理解每个输入、输出和参数&#xff0c;你很快就能像专业人士一样使用…

处理AI模型中的“Type Mismatch”报错:数据类型转换技巧

处理AI模型中的“Type Mismatch”报错&#xff1a;数据类型转换技巧 &#x1f504; 处理AI模型中的“Type Mismatch”报错&#xff1a;数据类型转换技巧 &#x1f504;摘要引言正文内容1. 错误解析&#xff1a;什么是“Type Mismatch”&#xff1f;2. 数据类型转换技巧2.1 检查…

大数据环境下的房地产数据分析与预测研究的设计与实现

1绪论 1.1研究背景及意义 随着经济的快速发展和城市化进程的推进&#xff0c;房地产市场成为了国民经济的重要组成部分。在中国&#xff0c;房地产行业对经济增长、就业创造和资本投资起到了重要的支撑作用。作为中国西南地区的重要城市&#xff0c;昆明的房地产市场也备受关…

SwiftUI 在 WWDC 24 之后的新变化

文章目录 前言视图集合新的标签栏体验英雄动画滚动位置Entry 宏预览其他总结 前言 WWDC 24 已经到来&#xff0c;我们有很多内容要讨论。每年&#xff0c;SwiftUI 都会通过引入更多功能来赶上 UIKit。今年也不例外。让我们深入了解 SwiftUI 框架引入的新功能。 我首先要提到的…

JavaDS —— 优先级队列(堆) PriorityQueue

优先级队列的概念 我们在前面就已经学习过队列&#xff0c;队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队列时&#xff0c;可能需要优先级高的元素先出队列&#xff0c;那么在该场景下&#xff0c;使…

详解数据结构之队列、循环队列(源码)

详解数据结构之队列、循环队列(源码) 队列属于线性表 队列&#xff1a;就好比如&#xff0c;我们在排队买东西时排队&#xff0c;第一个先来的第一个买&#xff0c;最后一个到的最后一个买&#xff0c;这里的队列也是满足先进先出&#xff0c;后进后出的规律&#xff08;First …

如果用MATLAB函数delayseq可以对分数延时,但是延时后波形较原波形有幅度上的改变

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

Adobe国际认证详解-视频设计认证专家行业应用场景解析

在当今数字化时代&#xff0c;视频设计已成为各行各业不可或缺的一环。而视频设计认证专家&#xff0c;作为经过Adobe国际认证体系严格考核的专业人才&#xff0c;更是行业内炙手可热的存在。他们凭借深厚的视频设计理论基础和实践经验&#xff0c;为行业提供了高质量的视频设计…

ROS2中间件

ROS2 是重新设计的 Robot Operating System&#xff0c;无论从用户API接口到底层实现都进行了改进。这里主要关注ROS2 的中间件。 1. 通信模式 ROS2 使用DDS协议进行数据传输&#xff0c;并通过抽象的rmw&#xff0c;支持多个厂家的DDS实现&#xff08;FastDDS&#xff0c;Cyc…

Django 执行原生SQL

在Django中&#xff0c;你可以使用Raw SQL queries来执行原生的SQL查询。这对于需要进行复杂查询或Django的ORM无法满足的查询非常有用。 1&#xff0c;添加模型 Test/app11/models.py from django.db import modelsclass Post(models.Model):title models.CharField(max_le…

arthas:介绍

文章目录 一、Arthas&#xff08;阿尔萨斯&#xff09;能为你做什么&#xff1f;二、运行环境要求三、快速安装四、卸载五、通过浏览器连接arthas 一、Arthas&#xff08;阿尔萨斯&#xff09;能为你做什么&#xff1f; Arthas是Alibaba开源的Java诊断工具&#xff0c;深受开发…