Web前端（HTMI+CSS）学习笔记

最新推荐文章于 2024-07-12 16:55:56 发布

Elviralk

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量1.4k

点赞数

文章标签：前端 css 学习

本文链接：https://blog.csdn.net/m0_74135603/article/details/127436211

版权

拨云见雾

一，HTML与CSS

1.什么是HTML与CSS？

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

2.如何创建一个.HTML文档？

（1）创立文档，用记事本打开并进行编辑，然后到浏览器中打开，该种方法相比之下效率低，易出错。

（2）使用编辑器——接下来的学习以VScode为例

二， VScode[轻量代码编辑器】

1.安装插件

（1）中文语言包

（2）Open in Brower与View in Brower 【可以让文件直接在浏览器中打开】

2.使用注意点

（1）编辑完的文档必须保存后才会在网页生效

（2）快捷键

ctrl+s:保存
ctrl+a:全选
ctrl+x/ctrl+c/ctrl+v:剪切/复制/粘贴
ctrl+z/ctrl+y:撤销/前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+PgDn:快速复制一行
alt+PgUp或PgDn：快速移动一行
alt+鼠标左键：多光标操作

(3)基本使用

设置：文件-首选项-设置（大小，是否换行word wrap）
创建文件，创建文件夹，删除，重命名

三， Chrome浏览器

是目前占据市场份额最大的浏览器,功能齐全，适合学习使用

（1）市场常见浏览器以及“五大”

常见浏览器

IE浏览器
火狐浏览器
谷歌浏览器
safari浏览器
必应浏览器

五大浏览器

IE
Chrome
Safari
Opera
Firefox

四，深入了解网站开发

UI设计师

进行网站页面设计，提供设计稿

web前端开发工程师

将设计稿变成代码，把数据库里的数据显示到页面

web后端开发工程师

数据的存储，功能的实现

五，前端三剑客

1.HTML——结构

2.CSS-——样式

3.JavaScript ——行为

六，HTML的结构与属性

1.【超文本标记语言】

超文本

文本内容+非文本内容（图片，视频，音频等）。

标记：

也叫做标签，标签分为单标签与双标签，标签是可以上下排列，嵌套，而标签属性是用来修饰标签的，设置当前标签的一些功能。

单标签<header>
双标签<header></header>
<标签   属性=“值”  属性=“值”>

七，HTML的初始代码

每一个.html文件都需要添加初始代码
快捷键：！+Tab
要符合.html文件的规范写法

初始代码

<!DOCTYPE   html>
<html   long="en">
<head>
        <meta  charset="UTF-8">
        <meta name="viewport"content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible"content="ie=edge">
        <title>Document</title>
 </head>
 <body>

</body>
</html>

八，.HTML的注释

<!--hello world-->

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

1. 意义

（1）将暂时用不到的代码注释起来，以方便以后使用。

（2）对开发人员进行提示

2. 快捷键添加注释与删除注释

Ctrl+/
Shift+alt+A 第一次选中，第二次取消

九，HTML语义化

根据网页中内容的结构，选择适合的HTML标签进行编写

1.在没有CSS的情况下，页面也能呈现很好的内容结构

2.有利于SEO让搜索引擎爬虫更好的理解网页

3.方便其他设备解析

4.便于团队开发和维护

十，标题与段落

标题与段落都是双标签
标签有六个等级，不同等级大小不同，大小由一级到六级依次变小，在一个网页中，h1标题最重要，一个.html文件中只能出现一次h1标题

标题<h>..</h>
段落<p>..</p>

十一，文本修饰标签

<strong></strong>强调（强调性比em更强）
<em></em>强调，文本斜体
<sub></sub>上标文本
<sup></sup>下标文本

十二，图片属性与标签

引入文件的地址路径

1.相对路径

容易移植

2.绝对路径

十三，跳转链接

href属性：链接地址

<a>herf="http://www.baidu.com">访问百度</a>

taeget属性

可以改变链接打开的方式，在默认情况下在当前页面打开

base标签

改变标签的默认，新窗口打开

十四，跳转锚点

1.#号 id属性

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

2.#号 name属性

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

特殊符号

1.&+字符

可以解决冲突，左右尖括号，添加多个空格的实现

十五，列表

1. 无序列表

<ul><li>列表的最外层容器，列表项，二者比较组合出现，他们之间是不能有其他标签的，符合嵌套规范

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

Type属性：改变前边标记的样式
{disc：默认值，实心圆 circle:空心圆square：实心方块}

2.有序列表

<ol><li>:列表的最外层容器，列表项，嵌套规范。

Type属性：改变前面标记的样式

有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表

3.定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述
 
<dl>
     <dt>HTML</dt>
     <dd>超文本标记语言</dd>
     <dt> .......</dt>
     <dd>.......</dd>
</dl>