前端学习笔记1

最新推荐文章于 2022-03-26 07:30:00 发布
最新推荐文章于 2022-03-26 07:30:00 发布
阅读量55 收藏
点赞数
分类专栏： 前端笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/httpkaidi/article/details/121604262
版权

网页
网页通常是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加+/-可以放大或缩小字体大小

ALT+B  打开默认浏览器

HTML基本结构 

文档类型声明标签 

<!DOCTYPE html>

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

<html lang="en">

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

<meta charset="UTF-8">

字符集，UTF-8万国码

HTML常用标签

标题标签

 <!-- 标题标签，h1字体最大,h6字体最小 -->
    <h1>前端笔记1</h1>
    <h2>前端笔记1</h2>
    <h3>前端笔记1</h3>
    <h4>前端笔记1</h4>
    <h5>前端笔记1</h5>
    <h6>前端笔记1</h6>

前端笔记1

前端笔记1

前端笔记1

前端笔记1

前端笔记1

前端笔记1

段落标签

把文字分为几个段落

  <p>这是一个段落</p>

换行标签

强制换行，单标签

<br />

文本格式化标签

<strong></strong> <b></b>  加粗标签
    <em></em>  <i></i>  文字倾斜标签
    <del></del>  <s></s>  删除线标签
    <ins></ins>  <u></u>  下划线标签
    推荐使用前者
  • 超链接a标签

超级链接<a标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像。
a标签的基本使用：

页面跳转  <a href="http://www.baidu.com">百度</a>

链接分类：
1.外部链接：必须以http://开头
2.内部链接：网站内部网页的相互链接，直接写网页名称即可
3.空连接：# 例：百度
4.下载链接：地址链接的是文件.exe或zip压缩包形式。例：图片
5.网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，等都可添加超链接
例：<img src="img.jpg/>
6.锚点链接：点击链接可以快速定位到页面中的某个位置

在链接文本的herf属性中，设置属性值为#名字的形式，如

<a href="#zhege">zhe</a>
  • 找到目标位置标签，里面添加一个id属性=刚才的名字，如 
    <h3 id="zhege">zhege</h3>

  • div标签

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

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

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

  • span标签

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

        <span>文本内容</span>

  • 图片标签

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

    <img src="图片路径" alt="图片加载失败显示的内容" title="提示信息">

src是的必须属性，用于指定图像文件的路径和文件名，单标签
alt 替换文本，当图片显示不出时替换图片。
title 提示文本，鼠标放在图片上时的显示信息
width/height 修改图片的宽度/高度（一般只需修改一个，图片会自动按比缩放）
border 设定图片的边框

属性不分前后顺序，属性与属性之间必须用空格分开
属性必须以键值对的形式出现，即key="value"形式

图片路径分类：
相对路径

绝对路径：指目录下的绝对位置，通常从盘符开始 。例：F:\VS Code Test（很少使用）

  • 注释标签
    <！–注释语句–>** 快捷键：ctrl+/

  • 特殊字符

     &nbsp;  空格
    &gt;   >
    &lt;   <
    例子：  &lt; 这是一个段落 &gt;   即p是一个段落字符

 

 

 

httpkaidi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发学习笔记1--基础
weixin_50119334的博客
09-12 316
@前端开发学习笔记 网页 网页通常是HTML格式 网页是构成网站的基本元素 常用浏览器 chorme 浏览器内核（渲染引擎）负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。 HTML 1.HTML是超文本标记语言，不是编程语言 2.是用于描述网页文档的一种标记语言 3.“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。 4.Web标准：由W3C组织和其他标准化组织制定的一系列标准的集合。 由结构，表现，行为三大方面构
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
01-08
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20 单位数字：10个（0-9） 2.二进制（计算机底层的进制）： 特点：满2进1 计数：0 1 10 11 100 101 110 111 单位数字：2个（0-1） 扩展：所有数据在计算机底层都会以二进制的形式保存。可以将内存想象成一个含有多个小格子的容器，每一个小格子中可以存储一个0或一个1，这一个小格
前端开发学习笔记一
weixin_33940102的博客
12-11 63
刚刚花了点时间学完html和css，同时粗略的看了一点javascript。于是看了一遍教程后，就动手做了下面这个页面。（这是原效果图） 其中有些问题，比如教程中的一些圆角按钮，是用一个三层嵌套然类似<ahref=''><strong><span>HOME</span></strong></a&...
前端开发基础学习笔记（二）：知识点--HTML文档标签
Hello_JayJay的博客
08-30 304
1.&lt;html&gt;标签内可以定义文档主语言： &lt;html lang="en-US"&gt; 2.无序列表(Unordered List)，包含在&lt;ul&gt;&lt;/ul&gt;之间，&lt;li&gt;&lt;/li&gt;为子项： &lt;ul&gt; &lt;li&gt;milk&lt;/li&gt; &a
前端开发学习笔记02----HTML基础
EddieEddieEddieJones的博客
04-05 660
HTML
h5前端学习笔记
03-21
【标题】"h5前端学习笔记"所涵盖的知识点主要集中在HTML5技术及其在前端开发中的应用。HTML5是超文本标记语言的最新版本，它引入了许多新的元素、API和特性，极大地增强了网页的交互性、可访问性和可用性。 【描述...
前端学习笔记（不断更新中）
01-08
1.img标签中alt：图片加载失败时的提示文字 2.a标签中的target： _blank：在新窗口中打开被链接文档 _top：在窗口主体中打开被链接文档 _self：在被点击时的同一框架中打开被链接文档（默认） _parent：在父框架中...
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
前端工程师学习笔记 超级详细
10-31
正则表达式学习笔记 微信小程序学习笔记 前端部署相关笔记 前端UI库使用记录笔记 前端JS工具库使用笔记 Webpack学习笔记 Vue笔记整合 UmiJS笔记 TypeScrip笔记 Scss笔记 React笔记 ReactHooks笔记 Promise学习笔记 ...
李立超JavaScript基础篇笔记
02-02
针对李立超JavaScript基础篇的教学视频，一集集整理出的笔记，以集数为目录，详细概括了李立超老师所讲的所有内容
前端开发笔记
huangqiang80的博客
07-18 506
前端开发笔记 文章目录前端开发笔记1、判断对象和数组是否为空2、js 分割字符串3、js 指定小数位数4、vue中使用input监听事件5、楼层跳转时，设置滚动条跳转距离6、vue添加监听和消除滚动条事件7、正则身份证验证8、vue中数组更新后，不能及时响应9、uniapp解决input设置高度后文字不垂直剧中10、uniapp文本输入限制为正整数11、uniapp用globalData定义全局变量 1、判断对象和数组是否为空 1.判断空对象 let obj = {} Object.keys(obj).le
前端入门笔记
qq_52262541的博客
08-02 84
HTML 1.什么是网页？ 网页是构成网站的基本元素，它通过由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾文件，因此将其俗称为HTML文件。 2.什么是HTML？ HTML 指的是超文本标记语言，它是用来描述网页的一种语言。 HTML 不是一种编辑语言，而是一种标记语言。 标记语言是一套标记标签。 3.Web标准提出的最佳体验方案：结构、样式、行为相分离。 结构写到HTML 文件中，表现写到CSS文件中，行为写到JavaScript文件中。 HTML语法规范
前端开发学习笔记（一）
在前端路上
04-18 510
单选框始终选中一个：设置为相同的“name”值。 默认选中：checkedvar _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");unescape()函数可对通过 escape() 编码的字符串进行解码。/*对IE9加载html5的新特性*/ <!--[if lt IE 9]
web前端学习笔记（一）基础版
qq_38291995的博客
05-21 207
之前在项目中负责过一部分前端的工作，但是并没有系统地学习过，每次都是用到什么去学什么，感觉脑子里没有一个体系，因此从今天开始从前端基础的html，css，javascript系统学习一下。 1. HTML（HyperText MarkUp Language）超文本标记语言 标签：<html>…</html> 元素：标签+内容 ...
尚硅谷李立超老师讲解web前端网课的笔记
m0_62658717的博客
01-17 857
初学 web 前端笔记一 刚刚看完网课，趁着脑子里还有点东西，小彭赶紧来做个笔记~接下来看吧： 一、软件的分类 1．系统软件：（我们买电脑或手机第一件事就是先激活或者安装一个“灵魂”——操作系统) -Windows -Linux -macOS 2．应用软件： -office -qq 3．游戏软件： -绝地求生 -王者荣耀 ps:如果没有软件，你的计算机或者手机是没有正常办法去使用的。作为程序员，或者说是软件工程师来讲，我们的任务就是开发软件。 二、软件的组成通常情况下，现...
前端开发学习笔记（1）
qq_45778682的博客
04-10 187
前端开发学习笔记（1） 如何向git仓库中导入文件 右键点击Git Bash Here git clone 仓库网址 -----克隆git资源作为工作目录 git status —查看文件状态 git add 文件名 —将文件导入暂存区 git commit -m "修改信息" —提交修改信息 git push —将暂存区文件导入库中 Node.js命令： 进入cmd node ----进入node npm install npm -g -----更新npm到最新版本 按两次c
【web前端笔记】尚硅谷web前端零基础入门HTML5+CSS3基础教程（李立超 超哥）笔记 P23图片标签
weixin_60737025的博客
03-26 429
图片标签 图片标签用于向当前页面引入一个外部图片 使用img标签来引入外部图片，img标签是一个自结束标签 img这种元素属于替换元素（基于块和行内元素之间），具有两种元素的特点 （img标签我们在审查元素的时候是看不到实体图片的，看到的只是它的src，浏览器根据src来显示内容，所以说它是一个替换元素） 属性： src属性指定的是外部图片的路径（路径规则和超链接是一样的） alt属性指的是如片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示 （比如说这张图片因为某些原因无法显示了，就
Web前端的学习笔记!!!
weixin_37150764的博客
10-26 170
目录 前端大杂烩笔记 不好理清的JS基础知识和CSS3选择器小结-第一章 面试题：node.js的基本知识点阐述 NodeJS知识点梳理-第一篇
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值