初学HTML+CSS 笔记历程(2)

207 阅读9分钟

visual studio code 的使用

1、打开文件夹,创建文件的方式有2种:

(1)可以选择在本地磁盘下所选打开文件内进行新建文件

(2)在vs code中鼠标移至资源管理器下方的空白处,在所打开文件的旁边有四个小标志,依次为新建文件、新建文件夹、刷新资源管理器、在资源管理器中折叠文件。

2、新建文件后,若是想要在新建文件1下再一次创建新建文件2,则选中新建文件1,在点击上面小标志中的第一个小加号 新建文件 即可 或者选中新建文件1,单击右键,显示出的一列对应选项中有新建文件的标识 即可。

注意:优先级的考虑。

3、若是想查看文件所在位置,选中文件,点击右键,点击在资源管理器中打开即可查看,也可以鼠标移动到所选文件,不点击,则一旁会出现文件的绝对路径。

4、想要查找文件中所需要的内容,按 Ctrl+f 快捷键,一旁会出现一个搜索框,在搜索框中输入自己要查找的内容,回车,则文件中你所要找的内容会出现一个阴影层覆盖,表示被查到。

5、在文件夹中查找所需内容,上方弹出搜索框,输入内容,下方则会出现结果以及在哪一个文件中的信息,十分方便有用。

6、资源管理器中的大纲是用来敲代码的。

7、自动保存:上方文件选项中的,若是没勾选了,则编辑文件时,上方会有白点,有编辑未保存,点击 Ctrl+s 即可保存,若是勾选了,软件会自动帮你随时保存,尽可能不勾选,对电脑伤害大,养成自己保存的习惯。

8、替换:若是想要替换所选内容,点击Ctrl+f 输入被替换内容,在左边点击向下小箭头,弹出输入框,输入你要替换的内容,一旁有两个标识,一个是替换,替换当前所选的内容,一个是全部替换,将所选内容一样内容全部替换。

9、查看:布局中,可将文件分为两个布局中,选中所要的文件,点击向任意方向(自己决定)布局即可。

10、帮助:快捷键参考,可以一看。

11、删除:选中所选文件,点击右键,即可删除,(包括磁盘中的文件一起删除)。

标签的使用及规范

标题标签

单词缩写:head 头部,标题

为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标签,即:h1、h2、h3、h4、h5、h6,由小到大,依次递减,需要注意的是:h1标签因为重要,尽量少用,h1大多都是给logo/title使用。

直接在body内写内容则与普通文本一样

标题<h1>—<h6>:引起换行,有大小区分,h1最大,h6最小

快捷键:h{标题}*6即可快速生成六个标题,从大到小,从上到下。

段落标签

与标签相似,但有不同,无大小区分,但普通文本与段落标签有换行大小的区分,有段前断后,不会对字体进行修饰。

语法格式:<p>我是一个段落</p>

paragraph:P标签的缩写。

&nbsp:空格,用于前进格的使用。

分割线:可以在内直接加,也可以使用标签<hr>水平分割。

水平线标签

在网页中会经常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单的通过标记来完成。<hr>就是创建横跨网页水平线的标记。

<hr> :单标签

换行标签

换行不产生空隙,和普通文本换行一样。

div span标签

<div>: 用来布局会换行最多,例如盒子,不会对文本进行修饰,无段前断后。

<span> :用来布局文本最多,和普通文本一样,无区别。

文本修饰标签

<i> <b> <s> <u> 都是双标签 不会换行 由自己的修饰

<i>:倾斜

<b>:加粗

<s>:删除线

<u>:下划线

<em> <strong> <del> <ins> 效果与前面的一一对应。

前者与后者相比,后者有语义化效果原则,html趋向语义化,建议用后者,效果都一样。

标签之间的嵌套:一个标签的开始和结束必须被包含在另一个标签在里面。

链接标签 :

<a href="跳转目标" target="目标窗口的弹出方式">链接的文本或图像</a>

href:用于指定链接目标的url地址,是Hypertext Reference的缩写,意思是超文本引用。只有使用这个属性,标签才具有链接功能。

target:用于指定链接页面的打开方式,其取值有 _self_blank两种,self表示在本窗口中打开链接页面,blank表示在新窗口中打开。

链接的分类:

1.外部链接 :需要添加http:// 的域名,如 <a href="http://www.baidu.com/">百度</a>

2.内部链接:网站内部页面之间的相互链接,直接链接内部页面名称,如<a href="index.html">内部链接</a>

3.空连接:如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href=“#”),表示该链接暂时为一个空链接。

或者设置href属性值为"javascript:;" 两者的区别:前者当页面出现滚动条时,点击会滚动到页面顶部,后者不会

4.下载链接:

如果href里面地址是一个压缩包或xlxs浏览器无法解析的文件,会下载这个文件,如<a href="image.zip">下载图片</a>

但像txt,jpg这些浏览器支持直接打开的文件是不会执行下载的,而是会直接预览图片或文本。(加download属性+open with live server)

5.网页元素链接:在网页中各种网页元素,如文本、图像、表格、音频、视频等都可以插入超链接

base标签 :

base 单标签,可以设置整体链接打开的状态是以新窗口打开还是在当前窗口中打开。

注释标签 :

<-- -->

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签,注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时可以看到。

行级标签

特点:可以和其他元素保持在同一行,不可以自动换行,但不能设置宽高 常见的行级标签:a,span,strong,u(下划线),em(强调),i(斜体),sub(下标),sup(上标)

块级标签

特点:不可以和其他元素保持在同一行(独占一行),可以自动换行,能设置宽高 常见的块级标签:div,p,h1-h6,ul,li,dl(定义列表,跟ul…li类似),dt(定义了定义列表中的项目),dd(定义描述项目的内容,跟dt一起搭配)

行内块级标签

特点:可以和其他元素保持在在一行,还能能设置宽高 常见标签:textarea,input,img,button

注意:行内(不能设置宽高 不能换行):span i b s u em ···ins 而块级(可以设置宽高、换行):h1—h6 div p body 而行内块继承了两者的特性。

图像标签

<img>,通过空格和标签分隔开。

属性:

src:图片的地址。

alt:提示作用,当图片加载出错,显示alt的文字信息。

border:边框 值为数字

width:图片宽度 值数字

height:图片高度 值数字

如果只写width或者height属性,对应的宽高等比例缩放。

特性:没有换行,可以设置宽高。

属于行内块级标签。

html标签嵌套规则

  1. 内联不能嵌套块级,块级可以嵌套内联元素

  2. 有几个特殊的块级元素只能嵌套内联元素,不能嵌套块级元素:h1~h6、p、dt,p标签不能嵌套块级元素甚至不能嵌套p元素,只能嵌套内联元素,不然对p嵌套的块级元素设置css不起作用

  3. <li> <dd>标签可以嵌套任何元素 <li> <ul><li></li> </ul> </li>

  4. <a>标签最好不要嵌套块级元素,可以嵌套内联元素。但是不能嵌套<a>标签和<input>之类的标签

  5. ul和ol的子元素只能是li,不能是别的元素

  6. button里面不要嵌套a标签,不然在js里面会有两个事件,还有就是button里面放img要记得给图片添加alt属性

锚点定位 :

通过创建描点链接,用户能够快速定位到目标内容,创建描点链接分为两步:

1、在跳转目标的位置添加id名标注 2、使用链接文本

例如

<body>

`<a href="#case1">test1</a>`
`<a href="#case2">test2</a>`
	
<div id="case1">举头望明月</div>
<div id="case2">低头思故乡</div>

</body>

使用两个a标签,一个a标签的href属性值设置为另一个a标签的name属性值,并且用#标识

<body>

<a href="#name1">HTML</a>
<a name="name1"></a>
<h1>HTML</h1>

</body>

路径

绝对路径:

网络路径—网上的图片 http:// ········

磁盘路径—磁盘上的图片位置,例如D: · · · · ·

相对路径:

./ :能访问与当前文件同层级的文件或文件夹。

../ :能访问与当前文件上层的文件夹同层级的文件或文件夹。

../../ :能访问与当前上两层同层级文件的文件或文件夹

../*n :能访问与当前上n层同层级文件的文件或文件夹

注意:不要超过四层!!!

快捷方式

声明语句:声明当前的版本,告诉浏览器当前页面使用的什么版本

快捷方式:! enter html:5 ! tab

HTML5 的声明版本 :<! DOCTYPE html >

作用:HTML有很多版本,每个版本存在很多差异性,为了浏览器编译渲染我们的页面,我们需要在第一句声明我们使用的版本。

lang =”en“:说明整个文档使用的是什么语言。

en :英文 fr :法语 zh :中文 zh-CN:中文简体 ja:日语

作用:样式行为,SEO(搜索引擎的优化)

例如 字体样式,浏览器使用默认样式,我们提供给语言,浏览器使用我们给的对应语言样式,也有可能会和本地语言进行对比。

SEO:搜索网站时,需要知道网站使适用的国家和地区,更好的去搜索你想要的页面。

charset=“utf—8”:设置字符集。

计算机不能识别人的语言,只能识别机器的语言

unicode:将每一个语言的每一个字符都制定了统一且唯一的二进制编码。

utf—8:能够表示unicode中任意字符

GB2312:中文简体

GBk:兼容了GB2312,包含了所有中文

BIG5:繁体中文 港澳台

<meta charset ="utf-8"> 
IE 按照最高标准版本 11=EDGE <meta http-equiv="x-ua-compatible" content ="IE=edge">
移动端
<meat name ="viewport" content ="width=device -width,initial-scale=1.0">
网页的标题
<title>Document</title>