【前端开发】HTML & CSS

最新推荐文章于 2024-07-24 22:39:14 发布
最新推荐文章于 2024-07-24 22:39:14 发布
阅读量218 收藏 1
点赞数
分类专栏： 【前端开发基础】 文章标签： css vscode html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45292794/article/details/119144516
版权

文章目录

0 学习体系

在这里插入图片描述

1 HTML

Hyper Text Markup Language

1.1 基础
1.1.1 基本概念

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.1.2 小案例

变粗

Name: xhh
<strong>变粗的方式</strong>
1.1.3 网页框架

在这里插入图片描述

<html>
	<head>
		<title>
			这里是标题
		</title>
	</head>
	<body>
		这里是内容
	</body>
</html>

在这里插入图片描述

1.1.4 开发工具

vscode

在这里插入图片描述

1.1.4 语法规范

注释

<!-- 在vscode 注释快捷键： ctrl + / -->

标签的构成
在这里插入图片描述

标签属性

在这里插入图片描述
标签关系
在这里插入图片描述

1.2 基本标签

在这里插入图片描述

1.2.1 排版标签

标题
在这里插入图片描述

段落
在这里插入图片描述

换行

在这里插入图片描述

水平线

在这里插入图片描述

<!-- hx  1-6 标题 -->
<h1>标题1</h1>

<!-- 段落 -->
<p>段落内容</p>

<!-- 强制换行 -->
<p>段落<br>内容</p>

<!-- 水平分割线 -->
<hr>
1.2.2 文本格式化标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>加粗</b>
    <u>下划线</u>
    <i>倾斜</i>
    <s>删除线</s>

    <!-- 分割线 -->
    <hr>
    <strong>加粗</strong>
    <ins>下划线</ins>
    <em>倾斜</em>
    <del>删除线</del>
</body>
</html>

在这里插入图片描述

1.2.3 媒体标签

图片标签

<!-- src:原路径  alt:加载失败显示 title:提示文本 -->
<img src="./xhhh.jpg" alt="load error" title="mcy">

在这里插入图片描述

<!-- 宽 高, 如果只设置一个 会进行等比例缩放 -->
<img src="./xhhh.jpg" alt="load error" title="mcy" width="100" height="100">

在这里插入图片描述

音频标签

在这里插入图片描述

视频标签

在这里插入图片描述

1.2.4 链接标签

在这里插入图片描述
在这里插入图片描述

<a href="https://www.nowcoder.com/">点击这里</a>

在这里插入图片描述
在这里插入图片描述

1.2.5 总结

在这里插入图片描述

1.2.6 综合案例

在这里插入图片描述

1.3 常用标签
1.3.1 列表标签

应用场景
在这里插入图片描述

无序列表

在这里插入图片描述

<h5>水果标签</h5>
<ul>
    <li>苹果</li>
    <li>西瓜</li>
    <li>草莓</li>
</ul>

在这里插入图片描述

有序列表

在这里插入图片描述

<h5>成绩排行榜</h5>
<ol>
    <li>xhh: 100</li>
    <li>mcy: 99</li>
</ol>

自定义列表

在这里插入图片描述

<h5>帮助中心</h5>
<dl>
    <dt></dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>
1.3.2 表格标签

表格基本标签
在这里插入图片描述

<h4>表格</h4>
<table>
    <tr>
        <td>name</td>
        <td>age</td>
    </tr>
    <tr>
        <td>xhh</td>
        <td>18</td>
    </tr>
    <tr>
        <td>mcy</td>
        <td>9</td>
    </tr>
</table>

相关属性
在这里插入图片描述

<h4>表格</h4>
<table border="1" width="300" height="200">
    <tr>
        <td>name</td>
        <td>age</td>
    </tr>
    <tr>
        <td>xhh</td>
        <td>18</td>
    </tr>
    <tr>
        <td>mcy</td>
        <td>9</td>
    </tr>
</table>

标题和表格单元头

在这里插入图片描述

<table border="1" width="300" height="200">
    <caption><h3>姓名和年龄信息</h3></caption>
    <tr>
        <th>name</th>
        <th>age</th>
    </tr>
    <tr>
        <td>xhh</td>
        <td>18</td>
    </tr>
    <tr>
        <td>mcy</td>
        <td>9</td>
    </tr>
</table>

结构标签

在这里插入图片描述

<table border="1" width="300" height="200">
    <caption><h3>姓名和年龄信息</h3></caption>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>xhh</td>
            <td>18</td>
        </tr>
        <tr>
            <td>mcy</td>
            <td>9</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>name-end</td>
            <td>age-sum</td>
        </tr>
    </tfoot>
</table>

合并单元格
在这里插入图片描述

<table border="1" width="300" height="200">
    <caption><h3>姓名和年龄信息</h3></caption>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>xhh</td>
            <td rowspan="2">18</td>
        </tr>
        <tr>
            <td>mcy</td>
            <!-- <td>9</td> -->
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>name-end</td>
            <td>age-sum</td>
        </tr>
    </tfoot>
</table>
1.3.3 表单标签

input
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<body>
    <br><br><br><br>
    <!-- form 实现按钮功能 -->
    <form>
        姓名: <input type="text" placeholder="请输入姓名"><br><br>
        密码: <input type="password" placeholder="请输入密码"><br><br>
        性别：<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女 <br><br>
        爱好：<input type="checkbox"> 敲代码 <input type="checkbox"> 打篮球 <br><br>
        <input type="file" multiple> <br><br>
        
        <!-- 提交按钮 -->
        <input type="submit">
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 普通按钮 -->
        <input type="button" value="xhh普通按钮">
    </form>
</body>

在这里插入图片描述
在这里插入图片描述

button

在这里插入图片描述

<body>
    <form>
        <!-- 提交按钮 -->
        <button type="submit">xhh-提交按钮</button>
        <!-- 重置按钮 -->
        <button type="reset">xhh-重置按钮</button>
        <!-- 普通按钮 -->
        <button type="button">xhh-普通按钮</button>
    </form>
</body>

select

在这里插入图片描述

所在城市：<select>
    <option>xhh</option>
    <option selected>mcy</option>
    <option>xyz</option>
</select>

textarea

在这里插入图片描述

<textarea cols="30" rows="10">
    今天，还是喜欢你...
</textarea>

lable

在这里插入图片描述

<!-- 第一种 目的->点击文字也可以选择到框 -->
<!-- 第一种 -->
<input type="checkbox" id="one"><label for="one">敲代码</label>
<!-- 第二种 -->
<label>
    <input type="checkbox">打篮球
</label>
1.3.4 语义化标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.3.5 字符实体

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.3.6 综合案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <!-- 大标题 -->
        <h2>青春不常在，抓紧谈恋爱</h2><hr>
    </header>
    <section>
        <form>
            <!-- 主题内容 -->
            昵称: <input type="text" placeholder="请输入昵称"><br><br>
            性别: <input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女<br><br>
            生日: <input type="data" placeholder="1996/01/01"><br><br>
            <select>
                <option>上海</option>
                <option selected>北京</option>
            </select><br><br>
            婚姻状况: 
            <input type="radio" name="hy" checked> 未婚 
            <input type="radio" name="hy"> 已婚
            <input type="radio" name="hy"> 保密<br><br>
            个人介绍: <br><textarea cols="40" rows="10"></textarea>
            
            <h3>我承诺</h3>
            <ul>
                <li>18</li>
                <li>have love</li>
            </ul>
            <label>
                <input type="checkbox">同意所有条款<br><br>
            </label>
            <button type="submit">免费注册</button>
            <button type="reset">重置</button><br><br>
            <a href="#">点击回到顶端</a>
        </form>
    </section>
</body>
</html>

在这里插入图片描述

2 CSS

在这里插入图片描述

2.1 基本引入

基本用法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

CSS的引入方式
在这里插入图片描述
在这里插入图片描述

2.2 基础选择器
2.2.1 标签选择器

在这里插入图片描述

2.2.2 类选择器

在这里插入图片描述
在这里插入图片描述

2.2.3 id选择器

在这里插入图片描述

在这里插入图片描述

2.2.4 通配符选择器

在这里插入图片描述
在这里插入图片描述

2.3 字体和文本样式
2.3.1 字体

字体大小
在这里插入图片描述
字体粗细
在这里插入图片描述
是否倾斜
在这里插入图片描述
常见的字体和字体系列

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • swsf 可以省略前两个

在这里插入图片描述

2.3.2 文本

文本的缩进 text-indent
在这里插入图片描述

文本水平对齐方式 text-align
在这里插入图片描述

文本修饰 text-decoration
在这里插入图片描述

案例
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.3.3 line-height行高

在这里插入图片描述

2.3.4 （扩展）颜色取值

在这里插入图片描述

2.4 选择器进阶
2.4.1 复合选择器（空格和>）

后代选择器
在这里插入图片描述
在这里插入图片描述
子代选择器
在这里插入图片描述
在这里插入图片描述

2.4.2 并集选择器(,)

在这里插入图片描述
在这里插入图片描述

2.4.3 交集选择器（紧挨着）

在这里插入图片描述
在这里插入图片描述

2.4.4 Emmet语法

在这里插入图片描述

2.4.5 hover伪类选择器

在这里插入图片描述
在这里插入图片描述

2.4.6 进阶选择器的总结

在这里插入图片描述

2.5 背景相关属性
2.5.1 背景颜色

在这里插入图片描述

2.5.2 背景图片

在这里插入图片描述

2.5.3 背景平铺

在这里插入图片描述

2.5.4 背景位置

在这里插入图片描述

2.5.5 背景属性连写

在这里插入图片描述

2.5.6 拓展写法

在这里插入图片描述
在这里插入图片描述

2.6 元素显示模式
2.6.1 块级元素

在这里插入图片描述

2.6.2 块内元素

在这里插入图片描述

2.6.3 行块元素

在这里插入图片描述

2.6.4 元素显示模式转换

在这里插入图片描述
在这里插入图片描述

2.6.5 扩展

在这里插入图片描述
在这里插入图片描述

2.7 CSS三大特性
2.7.1 继承性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.7.2 层叠性

在这里插入图片描述

2.7.3 优先级

在这里插入图片描述
在这里插入图片描述

张林克
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Web前端开发】——HTML和CSS基础
msmxsd的博客
03-03 111
HTML和CSS基础前言一、HTML元素嵌套元素空元素HTML文档详解标记文本标题元素段落元素列表链接二、CSSCSS规则集详解多元素选择不同类型的选择器字体和文本字体选择盒子模型文档体的格式图像居中 前言 超文本标记语言 (英语：Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言 HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一、HTML元素 嵌套元素 可以将一
【一、前端开发基础】HTML+CSS基础
qq_48687155的博客
07-27 655
前端开发基础-HTML+CSS基础
web前端 html+css+javascript网页设计实例 企业网站制作
热门推荐
weixin_44790790的博客
08-17 8万+
(案例源码链接在文章末尾，仅供学习参考) 一、在浏览器中的运行结果： 二、部分代码 1.HTML： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>启乐官网</title> <link rel="stylesheet" href="style.css"/> <script src="myjs.j
【JavaWeb】前端开发三剑客之CSS(上)
冲击大厂之路!!!
01-20 2593
前端开发三剑客学习之CSS(上)。
使用 HTML & CSS 编辑静态网页
weixin_60808029的博客
03-14 5994
文章目录一、HTML 概念概述二、HTML 语法使用说明三、CSS 概念概述四、CSS 中的选择器和属性 一、HTML 概念概述 HTML 是最基础的网页开发语言。是 Hyper Text Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。 超文本 是指用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 标记语言 是指由标签构成的语言。语法格式：<标签名称>。标记语言不是编程语言，是没有任何逻辑性的。 html文档后缀名 .html 或者.
前端开发三件套HTML&CSS&JavaScript
02-23
0 前端三件套 HTML CSS JavaScript 1.HTML 1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单 2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式...
学成在线**静态网页项目**前端html&css&flex
03-12
运用了html，css，flex布局等知识，适用于前端初学者练习静态网页的制作，以便于熟练掌握前端基础知识的运用。...通过参与这个项目，学习者可以逐步提升自己的前端开发能力，为将来的职业发展打下坚实的基础。
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【描述】中的“零基础前端开发html5+css3视频尚品汇项目源码”表明这个教程不仅包括理论讲解，还可能包含实际的项目实践，比如“尚品汇”项目。这里的“html5+css3”意味着课程内容会涉及最新的HTML5和CSS3技术，这...
前端开发基础：HTML+CSS
04-06
自学前端的第一天，整理了一些笔记，希望可以帮助到大家，主要是HTML和CSS的内容，谢谢
HTML&CSS.zip
04-13
前端开发是现代互联网产品设计的关键部分，HTML和CSS是这个领域不可或缺的基础。理解并熟练掌握这两门技术，不仅可以创建出符合设计要求的网页，还能提高开发效率和用户体验。随着Web技术的不断发展，HTML5和CSS3的...
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 326
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css性能优化的方法
jht_520的博客
07-21 303
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
CSS相关记录
oThrowsException的博客
07-24 536
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS学习笔记[Web开发]
Jenlibein的博客
07-19 691
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。CSS指的是层叠样式表* (CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在CSS 文件中***：**也称级联样式表。一张 HTML 页面 可以有 多个样式下面是一张提供了四个不同样式表的 HTML 页面。
CSS 创建：从入门到精通
wjs2024的博客
07-24 272
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
css上下动画 和淡化
ssorth的博客
07-24 230
上下动画
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1169
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
CSS的常见难见
weixin_62432037的博客
07-24 976
选择器的优先级是指在多个选择器匹配同一元素时，决定哪个样式生效的规则。优先级越高的选择器，其样式越优先应用。
CSS（四）——CSS Text(文本）
最新发布
m0_62701594的博客
07-24 968
颜色属性被用来设置文字的颜色。
尚硅谷web前端html5&css3
06-28
尚硅谷是一家提供IT技术培训的机构，其中包括Web前端HTML5和CSS3的课程。HTML5是一种用于创建网页内容的标记语言，而CSS3则是一种用于网页样式设计的语言。学习这两门技术可以帮助人们更好地设计和开发网页，提高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值