前端学习的准备内容&html常见标签

最新推荐文章于 2024-10-04 22:04:56 发布

那么遥远

最新推荐文章于 2024-10-04 22:04:56 发布

阅读量141

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_46022982/article/details/115902497

版权

前端web学习笔记

学习习惯

写博客：（CSDN，简书，博客园，51CTO，掘金）
记笔记: Markdown —— Typora软件

前端常见编辑器：

WebStorm 最完善，最重的
NodePad++ 小巧快速
VSCode 微软发布的编辑器
HbuilderX 国产编辑器，新出bug多，不断更新
SublimeText
EditPlus 小巧快速

常见浏览器：

主流浏览器：

Chrome
FireFox
Internet Explorer
Opera

其他浏览器：

（套盒浏览器）
UC 360 ……
百度统计流量研究所

服务端和客户端（前后端）
客户的计算机运行叫客户端（用户看到的界面，用户交互作用）
服务器上运行的叫服务端（负责处理数据）
根据世界结构不同分为：
C/S结构——Client/Server （客户机/服务器）
B/S结构——Browser/Server （浏览器/服务器）

历史

1991.8.6 蒂姆伯纳斯李万维网发明人
浏览器：渲染网页，作用：把程序员写的代码渲染成为我们看见的网页！
万维网初期没有规范，不同浏览器不同渲染
1994年建立万维网联盟（W3C）
作用：制定了网页开发的标准，使不同的浏览器中有相同的效果。
结构 - HTML
表现 - css
行为 - javascript

html

超文本标记语言

*（只能文本存数据，不能存图片视频）

<html>
      <head>网页的头部，内容不会直接显示在网页中，主要帮助浏览器或搜索引擎解析网页！
             <title> 网页标题，搜索引擎主要根据title中的内容判断网页的主要内容<title>
       </head>
       <body> 网页内容</body>
</html>

就像外衣，就像内衣
标签一般成对出现，但也存在单个标签（自标签）
Html注释：
迭代
网页版本
HTML4 —> HTML5
文档声明（doctype）：用来告诉浏览器网页版本
让文档按标准渲染网页

<!DOCTYPE html>

网页中英文识别

<!DOCTYPE html>
<html lang="en">
  <!-- 
      "en"表示英文网站（谷歌浏览器打开会显示是否需要翻译） 
      "zh"表示中文网站
  -->
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body></body>
</html>

开发网页模拟显示服务器地址

http://127.0.0.1:5500/01.html

可以模拟真实上线的效果

判断掌握一个html标签

语义和标签，标签用在什么地方
属性，有什么属性
单双标签

进制：

十进制：

满十进一

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ……

二进制：

满二进一
0 1 10 11 100 110 111 …

八进制：

满八进一
（使用少）

十六进制：

满十六进一
0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 13 14 15 ……1a 1b 1c ……
计算机底层都会以二进制形式保存

字符编码

所有的数据在计算机中存储都是以二进制，文字也不例外
编码—将字符转化为编码
解码—将二进制转换为字符
字符集—编码和解码采用的规则
乱码问题—不匹配就会出现乱码现象
常见的字符集：
ASCII
GBK
UTF-8 万国码（通用支持所有国家语言）

特殊符号

Html实体（转义字符）
实体名字： &nbsp；空格，&gt；大于号，&lt；小于号，&copy；版权符号

HTML常见标签

meta标签

<meta chersrt="utf-8">

hr标签

分隔符标签

<hr >

br标签

换行标签

<br >

原样显示标签

原样显示，用于网页代码显示
双标签

<pre></pre>

div标签

块标签（常用标签）
双标签

<div></div>

em，strong 标签

表示强调表示强调！
用法基本一致，根据习惯使用
双标签

del，ins 标签

~~表示已经被删除的标签，~~被插入的文本
常用于价格~~表示之前的价格~~表示现在的价格
双标签

sub,sud标签

_{文字下标文字上标}
常用于化学表达式和平方
双标签

img标签

链接图片
单标签

<img src="图片地址" title="" alt="">

src里填图片地址包括相对地址和网络地址
title里填写
alt里填写图片的内容描述，图片加载不出来时显示alt内容
（搜索引擎检索时会根据alt属性检索 ）

相对路径与绝对路径

绝对路径

本地绝对路径

C:\Library\200524\index.html

后端程序用来读取文件

网络绝对路径

https://www.baidu.com/img/pc_cc75653cd975aea6d4ba1f59b3697455.png

文件中网络中的绝对路径（如一张图片的图片地址）
网络绝对路径就是URL；

相对路径

要引用的文件中同级目录（ . / ）
要引用的文件中上级文件中或者更上级文件中

…/ 上级目录

…/…/上上级目录

…/…/…/上上上级目录

html 中使用路径的场景

img 标签引入图片
video 标签引入视频

超链接标签

<a harf="百度链接地址" terget="_blank">链接百度</a>

链接到其他网页
tergrt=“_self” 默认属性，在本窗口打开
tergrt=“ _blank” 在新标签页打开
超链接如果链接到的是图片，视频，pdf,会直接打开 (纯文本的浏览器基本都可以打开)
如果链接到的是doc，压缩包，等浏览器打不开的，浏览器会直接下载
发邮件📧
- <a href="mailto:1440869418@qq.com">发送电子邮件</a>
打电话☎️
- <a href="mailto:1440869418@qq.com">发送电子邮件</a>
发短信💻
- <a href="sms:10086">发短息给我</a>
打开app
- ?
当href 为空时目标文件为页面本身，点击会刷新页面

锚点

使用锚点不会刷新页面，刷新页面相当于用服务器中重新下载网页，不刷新可以省流量
定义锚点

第一种方法：<a name="here1"></a>

第二种方法：常用给标签设置id属性（id名就为锚点名）

<div id="here1">锚点</div>

放在需要到达的地方

跳转到锚点

<a href="#here1">跳转</a>

href 中只输入#会跳转到顶部

<a href="#">跳转到顶部</a>

用锚点跳转到其他页面

<a href="需要跳转网页的地址#锚点名">跳转到其他页面</a>