HTML笔记-CSDN博客

本文链接：https://blog.csdn.net/m0_59418670/article/details/118254608

1.什么是HTML、CSS?

（html与css相互配合）

是做网站的编程语言。
浏览器把代码解析后的样子就是我们看到的网站，如何看到网页的原始代码呢？通过鼠标右键查看与网页源代码。
如何去写代码？写到哪里呢？

一个网站是由N多个网页组成的。每一个网页就是一个.html文件
比喻:网站就像电视剧，由很多集组成。

2.VSCode编辑器？

VS cobe下载地址:地址
如何安装插件？主要插件:语音包(Chinese)、open in browser、view in borwser

方法、作用(由于软件下载好后，其内容全部都是英语，这时咱们可以在最左侧图标找到扩展，在里面搜索安装一些插件，Chinese插件可以将内容改为中文，open in browser插件可以在编辑器点击鼠标左键找到Open ln Default Browser打开( 运行) 编写好的html文件。view in borwser插件可以在编辑器菜单上点击鼠标左键找到View ln Browser打开(运行)编写好的html文件（两者作用都一样，只是打开方式不一样）)
学习编辑器基本使用？
设置:文件(在左上角)->首选项->设置（字体大小，、是否换行（自动折行）word wrap）
创建文件、创建文件夹、重命名和删除
快捷键

ctrl+s:保存
ctrl+a:全选
ctrl+x、ctrl+c、ctrl+v:剪切、复制、粘贴
ctrl+z、ctrl+y:撤销（后退一步)、前进（前进一步）
shift+end:从头选中一行
shifr+home尾部选择一行
shift+allt+↓:快速复制一行
alt+↑或↓:快速移动一行
tab:向后缩进
tab+shift:向前缩进
多光标:alt+鼠标左键
ctrl+d:选择相同元素的下一个

3.chrome浏览器？(谷歌浏览器)

Chrome下载地址:地址

4.深入了解网上开发？

一个网页是由下面三种职位相互合作开发

UI设计师:设计稿
web前端开发工程师(H5开发):将设计稿转成代码、将数据库里的数据显示到页面、HTML+CSS(HTML:结构、CSS:样式)
wen后端开发工程师:把网站产生很多数据存储起来

5.web前端的三大核心技术？

HTML:结构
CSS:样式
JavaScriot:行为

6.HTML基本结构和属性？

HTML:超文本，标记语言。

超文本:文本内容+非文本内容(图片、视频、音频等)
标记:<单词>
标记叫做标签:比如<header> <footer>
写法分成两种:
1. 单标签 <img>
2. 双标签 <header></header>
语言:编程语言

创建标签的快捷键:单词+tab键可以转换为<单词>(如果是单标签会转换为单标签，如果是双标签会转换为双标签)
标签是可以上下排列，也可以组合嵌套
HTML常见标签:HTML5元素标签含义大全
标签的属性:来修饰标签的，设置当前标签的一些功能。

<标签属性=“值” 属性2=“值2”>

7.HTML初始代码？

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

<!DOCTYPE html>     文档声明：告诉浏览器这是一个html文档
<html lang="en">             html文件的最外层标签。包裹着所有html标签代码      lang="en"表示是一个英文网站       lang="zh-CN"表示一个中文网站
<head>
   <meta charset="UTF-8">      元信息:是编写网页中的一些赋值信息。charset="UTF-8"国际编码,让网页不出现乱码情况。charset属性规定html文档的字符编码,防止乱码 
   <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>

8.HTML注释？

写法:<！-- 注释的内容 -->在浏览器中看不到，只能在代码中看到注释的内容。
意义:

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

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

ctrrl+/
shift+alt+a

9.标题与段落？

标题是双标签:<h1></h1>…<h6></h6>
在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。
段落是双标签:<p></p >

10.文本修饰标准？

强调->双标签:<strong></strong>``<em></em>

区别:

写法与展示效果是有区别的，<strong></strong>对加粗<em></em>字体斜体
<strong></strong>强调性更强。<em></em>强调性稍弱
强调性稍弱

下标文本:<snb></sub>
上标文本:<sup></sup>
删除文本:<del></dei>
插入文本:﹤ins></ins>

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

图例

a²+b²=c²

a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>

H<snb>2</snb>O

促销:原价~~300~~，现价100。

促销:原价<del>300</del>，现价<ins>100</ins>。

11.图片标签？

<img>(单标签)向网页中镶入一部图像，具有以下属性。

src:引入图片的地址
alt:当图片出现问题的时候，可以显示一段友好的提示文字
title:提示信息，当我们把鼠标放到标签上时，该提示信息就会显示出来。(所有html标签都可以拥有)
width、height:控制图片的大小，单位是像素(直接输入数字)。建议设置该属性，这样可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。
写法:

< img  src="图片地址"  alt="图片出现问题，代替图片的文字"  width="***"  height="***">

12.引入文件的地址路径

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。
. 在路径中表示当前路径，通常情况下可省略
. . 在路径中表示上一级路径
图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如< img src=”logo.gif” />。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如< img src=”img/img01/logo.gif” />。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/”，如果是上两级，则需要使用 “…/ …/”，以此类推，如< img src=”…/logo.gif” />

绝对路径

绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

编写文件的时候，绝对路径在电脑的任何一个文件中都能够找到（需要写全部的路径，从什么盘开始）
格式比喻：

D:/Hbulider/HBuilder/tools/nview/index.js（文件绝对路径）
http://c.biancheng.net:80/view/7410.html（网络绝对路径）

13.链接标签？

<a></ a>双标签

href属性:链接属性
target属性:可以改变链接打开的方式，默认情况下:在当前页面打开_self 新窗口打开_blank(如果只想要在当前页面打开，可以不用设置target属性)

<base>单标签:作用就是改变链接的默认行为(该标签是写在初始标签中的标签中的)
图例

<!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>
    <base target=_blank>(在这里)
</head>
<body>
    
</body>
</html>

14.跳转锚点

跳转锚点:在页面内跳转到指定地点
跳转锚点也是用 < a>< /a> 标签实现，有两种实现方式：

#+ id属性（id必须是唯一的）

图例：


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