前端开发学习笔记1--基础

@前端开发学习笔记

网页

网页通常是HTML格式
网页是构成网站的基本元素
常用浏览器 chorme
浏览器内核（渲染引擎）负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

HTML

1.HTML是超文本标记语言，不是编程语言
2.是用于描述网页文档的一种标记语言
3.“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。
4.Web标准：由W3C组织和其他标准化组织制定的一系列标准的集合。
由结构，表现，行为三大方面构成
结构：用于对网页元素进行整理和分类，现阶段为HTML
表现：用于设置网页元素的版式颜色，大小等外观样式，主要 指css
行为：指网页模型的定义和交互的编写，现阶段主要为javascript
Web标准提出的最佳体验方案：结构，样式，行为相分离

##HTML语法结构
html主要是用来控制页面的结构。
1.HTML标签是由尖括号包围的关键词
2.通常是成对出现的，称为双标签
双标签分为包含关系和并列关系
3.有些特殊标签是单个标签，称为单标签

编程软件 vs code
在此软件中，创建html文件后输入！会出现下拉框，点击一个叹号的即会自动出现html骨架（输入时要切换成英文才可以！！！）
ctrl加+/-可以放大或缩小字体大小

HTML基本结构

    
        
    
    
          任风不解，由星不移，我有云知意。
    

文档类型声明标签

此行代码意思是：当前页面采取的是HTML5版本来显示网页
此声明位于文档最前方，且其并不是HTML标签

用于定义当前文档的显示语言，一般为zh-CN

字符集，UTF-8万国码

HTML常用标签

• 标题标签

 
 
任风不解，由星不移，我有云知意
 
任风不解，由星不移，我有云知意
 
任风不解，由星不移，我有云知意
 
任风不解，由星不移，我有云知意
 
任风不解，由星不移，我有云知意
 
任风不解，由星不移，我有云知意

任风不解，由星不移，我有云知意

任风不解，由星不移，我有云知意

任风不解，由星不移，我有云知意

任风不解，由星不移，我有云知意

任风不解，由星不移，我有云知意

任风不解，由星不移，我有云知意

• 段落标签
  把文字分为几个段落

代码敲烂，月薪过万！！！

• 换行标签
  强制换行，单标签

• 文本格式化标签

     加粗标签，
       文字倾斜标签,
      删除线标签
      下划线标签
  均推荐使用前者
  

• 超链接a标签

超级链接 a标签的基本使用：

页面的跳转安徽工业大学

、
链接分类：
1.外部链接：必须以http://开头
2.内部链接：网站内部网页的相互链接，直接写网页名称即可
3.空连接：# 例：安徽工业大学
4.下载链接：地址链接的是文件.exe或zip压缩包形式。例：图片
5.网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，等都可添加超链接
例：第二集

• 找到目标位置标签，里面添加一个id属性=刚才的名字，如

第二集介绍

• div标签

可定义文档的分区 division的缩写

标签可以把文档分割为独立的、不同的部分,div标签是在页面布局中使用的非常多的一个标签。没有语义，用于装内容的。

是一个盒子，用于布局，自己独占一行

   
关于h标签的内容
   
关于p标签的内容
   
关于a标签的内容
   
关于ul,ol,li标签的内容

• span标签

span 标签可以单独摘出某一块内容，多用于处理文本。span:跨度，跨距
也是用于布局，一行可以多个。

文本内容

• 图片标签

网页上除了有文字、超链接之外，还会有大量的图片。我们使用标签在网页中插入图片。图片标签的语法：

使用：

 
  
图片路径分类：
 相对路径
 
 绝对路径：指目录下的绝对位置，通常从盘符开始 。例：F:\VS Code Test（很少使用）
 
  
 
   
 
注释标签
 <！–注释语句–>** 快捷键：ctrl+/
 
 
   
 
特殊字符
 
 
  
 
  
      空格
>        >
<        <
等等
例子：  <  p  >  是段落字符      即
是一个段落字符