关于HTML CSS的视频笔记1——20集

已于 2022-10-22 19:44:31 修改
阅读量1.5k 收藏 4
点赞数 2
文章标签： css html 前端
于 2022-10-21 01:50:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74114238/article/details/127419504
版权
本文是一份HTML CSS的视频笔记，涵盖了从HTML CSS的基础概念、编辑器使用，到浏览器操作、HTML基本结构与属性、标签的语义化、链接与锚点等内容，旨在帮助初学者掌握网页开发的核心技术。
摘要由CSDN通过智能技术生成

关于HTML CSS的视频笔记）

文章目录

一、HTML CSS系列教程之导学

1、拨云见日
HTML CSS 切图流程 PC企业站布局 PC游戏站布局
2、溯本求源
扩展HTML CSS HTML5新语法 CSS3新语法 兼容与hack
3、风生水起
弹性布局 网格布局 移动端布局 响应式布局 Bootstrap
巧夺天工
预编译css postcss CSS架构 高级功能 CSS与JS交互

二、什么是HTML CSS

1、是做网站的编程语言，需要配合使用
2、浏览器把代码解析后的样子就是我们看到的网站，如何看到网站的原始代码？
通过鼠标右键选择查看网络源代码
3、如何写代码？写到哪里呢？
一个网站是由N多个网页组成的，每一个s:网页是.html文件
4、如何创建文件？
新建文件夹-勾选查看文件扩展名-新建文本文档-将.txt改为.html-打开方式选记事本-填写内容拖到浏览器里

三、宇宙第一编辑器 VS Code

VS Code下载地址

2、VS Code使用功能：如何安装插件 语音包 open in browser(打开文件，跳到浏览器）view in brower
3、学习编辑器基本使用
ctrl+s：保存、ctrl+a：全选、ctrl+z、ctrl+x、ctrl+c、ctrl+v:撤销、剪切、复制、粘贴、ctrl+y：前进、Shift+end：从头选中一行、Shift+home：从尾部选中一行、Shift+alt+↓：快速复制一行、tab：向后缩进、tab+Shift：向前缩进

四、chrome浏览器

1、多光标：alt+鼠标左键、选择相同元素的下一个：ctrl+d
2chrome浏览器

chrome浏览器下载地址

百度统计浏览器市场份额 68.88%

五、深入了解网站开发

网络开发：HTML：结构，CSS：样式
HTML是身体，css是衣服，Java是人的高级动作 web前端的三大核心技术
ui设计师：设计稿

六、web前端的三大核心技术


  <style>
  div{ color:red; font-style:italic; }

  </style>
<div>HTML+CSS系列教程</div>

<script>
let div =document.querySelector('div');
let timer = null;
let flag = true;
div.onmouseover =function(){
    timer = setinterval(()=>{
        if(flag){
            div.style.color ='blue';
            div.style.fontstyle ='normal';
        }
        else{
            div.style.color ='rad';
            div.style.fontstyle = 'italic';
        }
        flag = !flag;   
    },500);
};
div.onmouseout =function(){
        clearinterval(timer);
};                             

</script>

七、HTML基本结构与属性

HTML：超文本 标记 语言
超文本：文本内容+非文本内容（图片 视频 音频等）
标记：<单词>
语言：编程语言
标记也叫做标签:

<header> <footer>

写法分为两种:

单标签：

<header>

双标签：

<header></header>

创建标签快捷键:单词+tab -> <单词>
标签可以上下排列，也可以组合嵌套
HTML5元素含义大全
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2”>

八、HTML初始代码

每个.html文件都有的代码叫做初始代码，要符合HTML文件的规范写法
！+ tab：快速的创建html的原始代码

<!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>
    
</body>
</html>

lang="en"表示英文网站，lang="zh-CN"表示中文网站

九、HTML的注释

在浏览器中看不到，只能在代码中看到注释的内容

<!--注释的内容-->

意义：
1、把暂时不用的代码注释起来，方便以后使用
2、对开发人员进行提示
快捷增加注释与删除注释：
1、ctrl + /
2、Shift + alt + a

十、HTML语义化

是指根据网页中内容的结构，选择适合的HTML标签进行编写
好处：
1、在没有css的情况下,页面也能呈现出很好的内容结构。
2、有利于SEO，让搜索引擎爬虫更好的理解网页
3、方便其他设备解析（如屏幕阅读器、盲人阅读器等）
4、便于团队开发与维护

十一、标题与段落

h标签
p标签
标题->双标签：

… 

<!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>
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
</body>
</html>

在一个网页中 h1最重要，并且一个.html文件中只能出现一次h1标签
h5，h6标签在网页中不经常使用
段落 —> 双标签：

十二、文本修饰标签

<strong> :表示强调,会对文本进行加粗 
<em>:表示强调，会对文本进行斜体 
<sub> <sup>:下标文本，上标文本
<del> <ins>:删除文本，插入文本

<!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>
    <p>
        <strong>这是一段需要强调的文本</strong>
        <em></em>这是一段需要强调的文本
    </p>
    <p>
        a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
        H<sub>2</sub>O
    </p>
    <p>
        促销：原价<del>300</del>,现价<ins>100</ins>
    </p>
</body>
</html>

十三、图片标签与图片属性

src：引入图片的地址
alt：当图片出现问题的时候，可以显示一段友好的文字
title：提示信息
width height 图片的大小

<!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>
    <img src="https://img2.baidu.com/it/u=1676290284,1478443622&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="库里高清图片"
    title="勇士总冠军" width="300" height="300">   
</body>
</html>

十四、引入文件的地址路径

绝对路径
相对路径

<!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>
    <img src="./src=http___ci.xiaohongshu.com_0cac723f-d0e4-87db-a557-963123df0098_imageView2_2_w_1080_format_jpg&refer=http___ci.xiaohongshu.webp" alt="">
</body>
</html>

十五、跳转链接

<a> 标签—>双链接
<base>标签->单标签改变标签的默认行为

href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 —self 新窗口打开_blank

<!DOCTYPE html>
<html lang="en">
<base target="_blank">
<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>
    <!-- <a href="http://www.baidu.com">访问百度</a>
    <a href="www.qfedu.com">
        <img src="./src=http___ci.xiaohongshu.com_0cac723f-d0e4-87db-a557-
        963123df0098_imageView2_2_w_1080_format_jpg&refer=http___ci.xiaoh
        ongshu.webp" alt=""> -->
    <!-- <a href="http://www.baidu.com"target="_blank">访问百度</a>   -->
    <a href="http://www.baidu.com">访问百度</a>
    <a href="http://www.baidu.com">访问百度</a> 
    <a href="http://www.baidu.com">访问百度</a> 
    <a href="http://www.baidu.com">访问百度</a> 
    <a href="http://www.baidu.com">访问百度</a> 
    </a>
</body>
</html>

十六、跳转锚点

实现一
#号
id属性
实现二
#号
name属性

<!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>
    <a href="#HTML"></a>
    <a href="#CSS"></a>
    <a href="#JavaScript"></a>

    <h2 id="html">html链接</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <h2 id="CSS">CSS层叠样式表</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <h3 id="JavaScript">JavaScript脚本</h3>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>

</body>
</html>

十七、特殊符号

<!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>
    <p>
     &it;html&gt;
    </p>
    <p>
        hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world
    </p>
</body>
</html>

十八、无序列表

ul li ->符合嵌套的规范 中间不能出现别的标签
type属性：改变前面标记的样式

<!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>
    <ul>
       <li>第一项</li>
       <li>第二项</li>
    </ul>
</body>
</html>

十九、有序列表

  • 列表最外层容器
    一般用的比较少 可以用无序列表替代
    省略

  • 二十、定义列表

    :定义列表 定义专业用语和名词
    对名词进行解释和翻译
m0_74114238
关注
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
vue + canvas 截取视频的预览图
web前端学习总结
03-13 4820
vue + canvas 截取视频的预览图 在页面中加载太多的视频，会造成页面加载慢，所以在显示视频的地方显示视频的预览图。用vue 和 canvas 截取视频的预览图。 demo: <template> <div id="demo"> <div class="video-wrapper" :style='videoBgStyle(item)' v-for="(i...
HTML CSS学习笔记1——概述
coising的博客
01-10 260
概述 今天开始学前端啦（封校ing） …导入markdown 标题怎么有问题 文章目录HTMLCSS执行代码开发环境 HTML 超文本标记语言 hyper text markup language 书写一级标题 <h1>一级标题</h1> 推荐网站 w3c MDN CSS 用于描述页面展示，包括颜色（背景 字体） ，布局，字体 决定了页面长什么样 执行代码 浏览器执行(内核）->页面 浏览器： 1.shell 2.core chrome:webkit/blink safari
尚硅谷前端入门html+css学习笔记——HTML4
qq_62237063的博客
08-04 899
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频网页（淘宝、京东）、小程序（支付宝、抖音）、数据可视化（智慧工地可视化大数据展示平台）、服务器、客户端全称：HyperText Markup Language 译为： 超文本标记语言1996年W3C制定HTML规范，2014年HTML5由W3C正式发布。
CSS学习笔记1——使用方法和基本样式
weixin_64248111的博客
07-24 449
CSS的全称是“Cascading Style Sheets”，中文意思是“层叠样式表”。它是一种用于控制网页样式和布局的样式语言。有人说做网页就像搭积木,HTML语言可以说是定义积木搭建的结构，CSS就是定义每块积木的外观，大小，颜色等等。这篇希望介绍一下CSS的基本使用和基本样式。
JavaWeb笔记整理——HTML、CSS、JavaScript
i_Water_boy的博客
04-23 985
Java程序员必备前端技术栈——Html、css、JavaScript以及应用笔记详细整理
web前端html和css笔记3——动画
weixin_46039828的博客
11-12 326
web前端html和css笔记3——动画
html css笔记实例,HTML/CSS基础课程笔记——HTML
weixin_42545163的博客
06-15 128
HTML/CSS基础课程笔记——————————————————————HTML章em,strong,span(是行标签，在P里面显示在同一行！strong默认是粗体。em默认是斜体。em(2em的意思就是文字的2倍大小，中文文字的段前习惯空两个文字的空白可以用p{text-indent:2em;}来实现)span是没有语义的也就是没有默认样式，它的作用就是为了设置单独的样式用的)(是实现引用文本...
HTML学习笔记5——CSS美化
qq_45569406的博客
08-10 477
HTML学习笔记5——CSS美化
html css布局 慕课,HTML/CSS基础课程笔记————CSS布局模型
weixin_30672649的博客
06-20 139
—————————css布局模型————————CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型：1、流动模型(Flow)2、浮动模型 (Float)3、层模型(Layer)————————————————流动模型(一)先来说一说流动模型，流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模...
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
01-08
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 ...
HTML5学习笔记（总结提炼版）——002 CSS
03-14
CSS提供了多种布局方式，包括流体布局（使用百分比定义元素尺寸，自适应屏幕大小）、定位布局（使用`position`属性，如`static`、`relative`、`absolute`和`fixed`）、Flex布局（弹性盒子，适用于一维布局）以及Grid...
前端工程规范-3：CSS规范（Stylelint）
Vinca@的博客
09-26 1069
Stylelint 是一个灵活且强大的工具，适用于保持 CSS 代码的质量和一致性。结合其他工具（如 Prettier 和 ESLint），可以更全面地保障前端代码的整洁性和可维护性。
css实现四角边框
freedms的博客
09-24 344
【代码】css实现四角边框。
CSS学习 - 常用属性
Aaron121314的博客
09-25 477
font-style、font-variant、font-weight、font-size/line-height 以及 font-family 的简写属性。要按照顺序，可以不设置某个值，未设置的使用默认值。border-width、border-style 以及 border-color 的简写属性。可以去这边查看几乎所有的属性。
CSS 的user-select属性，控制用户是否能够选中文本内容
最新发布
读心悦
09-29 298
CSS的属性是一个在CSS3 UI规范中新增的功能，用于控制用户是否能够选中文本内容。这个属性在保护网站内容不被轻易复制、提高用户体验等方面有重要作用。以下是关于。
css 下拉框展示：当hover的时候展示下拉框 z-index的用法解释
jjw_zyfx的博客
09-26 506
css 下拉框展示：当hover的时候展示下拉框
CSS-Day2
m0_74039531的博客
09-26 845
padding: 0;} 移除列表前面的标记。
CSS入门与HTML5元素详解——第1天笔记
在"CSS第1天笔记"中，本课程作为前端与移动开发学院的基础课程，旨在引导学员快速入门CSS，总共涵盖6天的学习内容。第一天主要回顾了HTML基础知识，并介绍了CSS的基本概念和应用。 首先，回顾了HTML的基本元素，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值