第一周学习笔记

最新推荐文章于 2024-05-22 14:21:06 发布
最新推荐文章于 2024-05-22 14:21:06 发布
阅读量1k 收藏
点赞数
文章标签： 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74285167/article/details/127345154
版权

一、导学部分

1.什么是HTML、CSS？

他们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。

浏览器代码解析后的样子就是我们看到的网站，鼠标右键可以查看网页源代码。

2.如何去写代码？写到哪里？

一个网站是由多个网页组成的。
最简单的可以直接在记事本里写。

二、VS code

编辑器的基本使用

设置：文件 -> 首选项 -> 设置（字体大小、是否换行等）

ctrl + s : 保存
ctrl + a : 全选
ctrl + x、ctrl + c、ctrl + : 剪切、复制、粘贴
ctrl + z、ctrl + y : 撤销、前进
shift + end : 从头选中一行
shift + home : 从尾部选中一行
shift + alt + ↓ ：快速复制一行
alt + ↑或↓ ：快速移动一行

tab ：向后缩进
tab + shift ：向前缩进

多光标 ：alt + 鼠标左键
ctrl + d ：选择相同元素的下一个

三、Chrome浏览器

下载安装

四、深入了解网站开发

  • UI设计师：设计稿

  • web前端开发工程师（H5开发）

    设计稿 -> 代码
    数据库里的数据 -> 显示到页面
    HTML+CSS
    HTML ：结构
    CSS ：样式
    JS

  • web后端开发工程师

五、web前端的三大技术

HTML
CSS
JavaScript

六、HTML基本结构和属性

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

标记也叫做标签：

  • 单标签 < header>

  • 双标签< header>< /header>

    创建标签的快捷键：单词 + 快捷键 -> <单词>

标签是可以上下排列的，也可组合嵌套。

HTML常见标签

在这里插入图片描述

标签的属性

来修饰标签的，设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2” >

七、HTML初始代码

每个.html文件都有的代码叫做初始代码，要符合html文件的规范书写。

快速创建html的初始代码：！+ tab

<!DOCTYPE html>			文档声明：告诉浏览器这是一个html文件
<html lang="en">		html文件的最外层标签：包裹着所有html标签代码
						lang="en"表示是一个英文网站
						lang="zh-CN"表示一个中文网站
<head>					
    <meta charset="UTF-8">		元信息：是编写网页中的一些辅助信息
    							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>

八、HTML注释

写法：

<!-- 注释的内容 --> 在浏览器中看不到，只能在代码中看到注释的内容。

意义：

1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行提示。

快捷键添加注释与删除注释：

1.ctrl + /
2.shift + alt + a

九、HTML语义化

所谓的HTML语义化指的是，根据网页中内容的结构，选择合适HTML标签进行编写。

好处：

  1. 在没有CSS的情况下，页面也能呈现出很好的内容结构。
  2. 有利于SEO，让搜索引擎爬虫更好的理解网页。
  3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）
  4. 便于团队开发与维护。

十、标题与段落

标题→双标签 ：<h1></h1> ... <h6></h6>

在一个网页中，h1标题最重要，并且1个.html文件中只能出现一个h1标签。

h5、h6标签在网页中不经常使用。

段落->双标签：<p></p>

十一、文本强调标签

强调→双标签：<strong></strong>、 <em></em>

区别：

  1. 写法和展示效果是有区别的，一个加粗，一个斜体

  2. strong的强调性更强，em的强调性稍弱

下标： <sub></sub>
上标：<sup></sup>
删除文本、插入文本：<del></del>、<ins></ins>
注：一般情况下，删除文本都是和插入文本配合使用。

十二、图片标签和图片属性

img->单标签

<img src=" .... " alt=" .... " width="...." height="....">
  • src：引入图片地址
  • alt：当图片出现问题的时候，可以显示一段友好的提示文字
  • title：提示信息
  • width、height：宽和高

十三、引入文件的地址和路径

  • 相对路径
    .在路径中表示当前路径
    …在路径中表示上一级路径
    （代码方便移植）

  • 绝对路径
    图片在硬盘中的位置

避免使用反斜线

十四、跳转链接

  1. a -> 双标签 <a href="......"></a>

    • href属性 ：链接的地址
    • target属性 ：可以改变链接打开的方式

在默认的情况下：在当前页面打开 _self
新窗口打开 ：_blank

<a href="http://baidu.com">访问百度</a>
<a href="https://www.bilibili.com/video/BV1s34y1p763/?spm_id_from=333.788.recommend_more_video.6&vd_source=cdafebd704893867ab60772842e6f3b8">
    <img src="./UWK7NSO~$E1X{(`C%ROD6_6.gif" alt="" width="60" height="80">
</a>

效果图：
在这里插入图片描述

  1. base->单标签 ，作用就是改变链接的默认行为的。（一般写到head中）
<head>
   <base target="_blank">
</head>

十五、跳转锚点

实现一

  • #号(id属性)
    <a href="#1">一</a>    	定义链接"一"，跳转到id属性为"1"的段落
    <a href="#2">二</a>		定义链接"一"，跳转到id属性为"1"的段落
    <h1 id="1">第一个标题</h1> 	
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <h2 id="2">第二个标题</h2>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>

实现二

  • #号（name属性）
	<a href="#1">一</a>
    <a href="#2">二</a>
    <a name ="1"></a>
    <h1 >第一个标题</h1>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <a name="2"></a>
    <h2 >第二个标题</h2>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>

十六、特殊符号

在编写文本是，经常遇到无法输入的字符，还有在一段文字中加入多个空格时，页面并不会解析出多个空格。这些字符在Html中，有专门的代码。
在这里插入图片描述
使用方法： & + 字符

十七、列表标签

1.无序列表

<ul>、<li> :列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的。

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

可用 <strong></strong> 改变样式

2.有序列表

<ol>、<li> ：列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以代替有序列表。
type属性：改变前面标记的样式（一般用CSS控制

3.定义列表

使用场景：列表项需要添加标题和对标题进行描述的内容

<dl> : 定义列表
<dt> : 定义专业术语或名词
<dd> : 对名词进行解释和描述

例：

<dl>
        <dt>HTML</dt>
            <dd>超文本标记语言</dd>
        <dt>CSS</dt>
            <dd>层叠样式表</dd>
        <dt>JavaScript</dt>
            <dd>网页脚本语言</dd>
    </dl>

效果：
在这里插入图片描述

m0_74285167
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
python第一天学习笔记
01-03
第一天python学习成果，关于python环境下载安装详细流程
第一周第一天学习笔记
weixin_43225604的博客
03-19 823
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜体：Ctrl/Command + I 标题：Ctrl/Command + S
VR第一周学习笔记
baidu_35064668的博客
12-24 196
VR第一周学习笔记
第十一天学习笔记
CMBSNBB的博客
10-08 34
这是底层原理。
springboot学习笔记——第一天
m0_58889791的博客
03-19 90
有spring，springmvc，mybatis框架知识。
Java入门第一周学习笔记
09-14
适合新手小白，主要包括Java简介，常量和变量的概念，数据类型及转换，用户输入以及运算符等相关内容。
Nginx第一天学习笔记
05-05
Nginx第一天学习笔记
第一周第一天的学习笔记
03-19
第一周第一天的学习笔记
第二周第一天的学习笔记
03-25
第二周第一天的学习笔记
FME学习之旅---day27
summer_corner的博客
05-17 240
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
使用多实例学习进行乳腺癌组织病理学图像分类和定位
qq_47896523的博客
05-16 1232
乳腺癌是女性最主要的死亡原因，病理学家根据病理切片中观察到的各种视觉特征（例如细胞核的形态特征、细胞核的微观和宏观结构等）做出决定。计算机辅助诊断（CAD）系统可以帮助病理学家自动做出决策。卷积神经网络是最广泛使用的深度学习框架，用于学习图像类别之间的复杂判别特征。多年来，VGG16 [3] 和 ResNet18 [4] 等各种 CNN 架构在海量 ImageNet 数据集上产生了出色的结果。CNN 被用于医学图像以产生最先进的结果。为图像中存在的所有类别提供了定位信息。
引用实战学习
qiuzhiuser的博客
05-19 116
【代码】引用实战学习。
学习kong官方文档
好好学习日记
05-17 305
当然，我会用更简洁的方式重新解释这两个概念：Helm和Kubectl是Kubernetes生态系统中常用的两个工具，它们各自有不同的用途：
C语言查漏补缺学习【精简版】
qq_49288362的博客
05-18 714
逗号的组合关系是自左向右，所以左边的表达式会先计算，而右边的表达式的值就留下来作为逗号运算的结果。枚举类型名字通常并不真的使用，要用的是在大括号里的名字，因为它们就是常量符合，它们的类型是int,值则一次从0到n。当要传递的参数的类型比地址大的时候，这是常用的手段：既能用比较少的字节数传递值给参数，又能避免函数对外面的变量的修改。当需要一些可以排列起来的常量值时，定义枚举的意义就是给了这些常量的值的名字。16.*：是一个单目运算符，用来访问指针的值所表示的地址上的变量。
DB类的学习
2301_77523055的博客
05-15 381
"不返回结果集" 意味着执行 SQL 语句后，你不会得到一个可以逐行读取的数据集。相反，你可能会得到一个表示受影响的行数的整数，或者只是一个表示命令是否成功执行的确认。
RustGUI学习（iced/iced_aw）之扩展小部件（十九）：如何使用context_menu部件来创建右击菜单？
用沸腾的热血，支付我们的人生吧！
05-15 100
本专栏是学习Rust的GUI库iced的合集，将介绍iced涉及的各个小部件分别介绍，最后会汇总为一个总的程序。iced是RustGUI中比较强大的一个，目前处于发展中（即版本可能会改变），本专栏基于版本0.12.1.
llama-factory学习个人记录
最新发布
qq_55736201的博客
05-22 641
1.llama-factory部署在LLaMA-Factory项目中，单显卡可以用命令或训练，多显卡只能用用命令的方式。
Android OpenMAX（八）如何学习OMXNodeInstance
青山渺渺
05-15 251
OMXNodeInstance学习技巧
Winform控件学习笔记【第三天】——ListBox
06-13
好的，您的问题是Winform控件学习笔记【第三天】——ListBox。 ListBox是Winform中常用的列表框控件，它可以方便地展示一组数据，并且支持单选、多选等操作。下面是一些常用的ListBox属性和方法： 属性： - Items...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值