web前端最基础知识1-20集-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73381821/article/details/127436674

1.什么是HTML、CSS?

是做网站的编程语言。

浏览器把代码解析后的样子就是我们看到的网站，如何看到网站的原始代码呢？通过鼠标右键选择查看网页源代码。

引言

如何去写代码？写到哪里呢？

一个网站是由N多个网页组成的。每一个网页 .html文件

例如：电视剧,40集。 .mp4 文件

2.VSCode编辑器?

VS code下载地址:https://code.visualstdio.com/
如何安装插件？ 语言包、open in broswer、view in broswer

学习编辑器基本使用？

设置：文件-->首选项-->设置（大小、是否换行 word wrap)

创建文件、创建文件夹、重命名和删除

ctrl + s :保存

ctrl + a:全选

ctrl+x、ctrl+c、ctrl+v:剪切、复制、粘贴

ctrl + z、ctrl + y:撤消、前进

shift + end : 从头选中一行

shift + home :从尾部选中一行

shift + alt + ⬇：快速复制一行

alt + ⬆或⬇ ：快速移动一行

tab:向后缩进

tab+shift:向前缩进

多光标:alt + 鼠标左键

ctrl+d:选择相同元素的下一个

3.chorme浏览器?

Chorme下载地址:http://chrome.jscswv.cn/?bd_vid=10147324636337729275

百度统计浏览器市场份额:https://baijiahao.baidu.com/s? id=1740288357631882197&wfr=spider&for=pc

4.深入了解网站开发?

UI设计师 : 设计稿

web前端开发工程师(HS开发)

设计稿-->代码

数据库里的数据-->显示到页面

HTML + CSS

HTML : 结构

CSS : 样式

web后端开发工程师

5.五大浏览器:Google Chrome、Safari、IE、Opera、Firefox

6.web三大核心技术?

HTML

CSS

JavaScript

7.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>

HTML : 超文本标记语言包

超文本 : 文本内容 + 非文本内容（图片、视频、音频）

标记：<单词>

语言：编程语言

标记也叫做标签：

写法分成两种：

单标签<header>

双标签 <header></header>

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

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

HTML常见标签：

标签的属性：来修饰标签的，设置当前标签的一些功能。

<标签属性="值" 属性2="值2"···>

7.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>

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

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

<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文件

<html lang="en"> html文件的最外层标签：包裹着所有html标签 lang="en"表示是一个英文网站 lang="zh-CN"表示是一个中文网站

<head>

<title>Document</title> 设置网页的标题

</head>

<body>

显示网页内容的区域

</body>

</html>

8.HTML注释?

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

意义：

1.把暂时不用的代码注释起来，方便以后使用。

2.对开发人员进行提示。

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

1.ctrl + /

2.shift + alt + a

9.标题与段落?

标题 -> 双标签：<h1></h1> ··· <h6></h6>

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

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

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

10.文本修饰标签?

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

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

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

下标：<sub></sub>

上标：<sup></sup>

<p>
        a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>  H<sub>2</sub>O
 </p>

删除文本：<del></del>

插入文本：<ins></ins>

<p>
        促销 ： 原价<del> 300 </del>,现价<ins> 100</ins>.
</p>

注：一般情况下，删除文本都是和插入文本配合使用的。

11.图片标签?

img-> 单标签

src:引入图片的地址。

alt:当图片出现问题时，可以显示一段友好的提示文字

title:提示信息

width、height :图片的大小

12.路径的引入?

相对路径

绝对路径

<body>
    <img src="./32222.png" alt=b""> -->
    <img src="../img/新建文件夹/32222.png" alt="">
    <img src="C/img/新建文件夹/32222.png" alt="">
    <img src="/img/新建文件夹/32222.png" alt="">
</body>

13.链接标签?

a-> 双标签 <a></a>

href属性：链接的地址

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

base->单标签：作用是改变链接的默认行为

<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.qfedu.com">
<img src="./img/新建文件夹/32222.png" alt="">
</a>
<a href="http://www.baidu.com" target="_blank">访问百度</a>

14.锚点?

两种做法

1.#号 + id属性

2.#号 + name属性（注意name属性加给的是a标签）

<a href="#html">HTML</a>

<a href="#css">CSS</a>

<a href="#JavaScript">JavaScript</a>

<a name="html"></a>

<h2 >HTML超文本语言</h2>

<p>模拟的段落</p>

<p>模拟的段落</p>

15.特殊字符？

1.& + 字符

2.解决冲突啊左右尖括号、添加多个空格的实现

3.<>&nbsp.

16.列表标签?

1.无序列表 -> ul li 符合嵌套的规则

2.有序列表 -> ol li 一般用的比较少，可以用无序列表来实现

3.定义列表 ->dl dt dd 列表项需要添加标题和对白哦提进行描述的内容

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

</ul>

<ul>
        <li>
            <a href="#"><strong>中国天眼发现迄今最大原子气体结构</strong></a>
        </li>
        <li>
            <a href="#">5200多名同胞从乌克兰撤离</a></li>
        <li>
            <a href="#">武汉生物制品研究所成功分离猴痘病毒</a></li>
        <li>
            <a href="#">我国发现首个深水深层气田</a></li>
        <li>
            <a href="#">济南弯腰捡石子女孩回应走红</a></li>
 </ul>