前端_html

最新推荐文章于 2024-06-04 15:17:26 发布
最新推荐文章于 2024-06-04 15:17:26 发布
阅读量418 收藏
点赞数
分类专栏： 前端_html 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46287385/article/details/120717419
版权

前端_html

一、Web前端开发

1.1、常用的前端工具

1.1.1、Nodpad++

可以取代记事本，有列表标记、自动换行、英文检查、同时编辑多个文件、不限制撤销次数和特殊的英文会标出别的颜色。
特点：没有代码提示，语法高亮，适合英语不好的初学者。（有代码提示的工具不适合初学者记住各种方法的写法，可能会影响笔试）

1.1.2、Visual Studio Code

可以运行在mac、windows和linux系统上，针对编写现代web和云应用的跨平台源代码编辑器，是微软推出的良心之作。
特点：几乎支持所有的主流开发语言的语法高亮、智能代码补全、自定义快捷键、颜色区分和括号匹配。

1.2、浏览器

1.2.1、浏览器大战

第一次浏览器大战，微软发布的IE4.0版本因为比网景公司的浏览器更好的遵循了W3C（world wide web consortium）提出的互联网标准且可以提供一些类似MP3播放之类的功能比网景的浏览器更好，所以网景公司输给了微软公司，网景将公司卖给了AOL。1998年，网景公布了它的浏览器源码，并重新命名为Mozilla，全部程序进行了重写。
2004年基于Mozilla源码的Firefox首次登台，拉开了第二次浏览器大战。第二次大战一些新的基于不同引擎的浏览器也加入了阵营，比如挪威的opera（基于presto引擎）。

1.2.2、五大主流浏览器

Internet Explorer（Windows默认安装）
微软公司推出的一款网页浏览器，简称IE。
Opera浏览器
挪威Opera Software ASA公司旗下的浏览器。1995年，挪威发布了第一版的opera浏览器，使用自己研发的Presto内核。2016年，奇虎360和昆仑万维收购了Opera浏览器，丢弃了强大的presto内核改用google开源的webkit内核，后来，随着Google将浏览器的内核改为blink内核。
Safari浏览器
苹果macos中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
Firefox浏览器
Mozilla Firefox，中文俗称火狐，是一个自由及开放源码的网页浏览器，使用Gecko排版引擎，支持多种操作系统：mac、Windows、linux等。
chrome浏览器
Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括webkit，目标是提升稳定性、速度和安全，并创造出简单且有效率的使用者界面。

1.2.3、浏览器内核

浏览器最重要（核心）的部分是“Rendering Engine”——渲染引擎，俗称浏览器内核。
渲染引擎：负责对网页语法的解释并渲染网页。
渲染引擎决定了如何显示网页的内容以及页面的格式信息，不同的浏览器内核对网页语法的解释不同，因此，同意网页在不同的内核的浏览器里面的渲染效果不同，所以网页编写者需要在不同内核的浏览器中测试网页显示效果。
四大内核： Trident（IE内核）、webkit、blink和Gecko。
五大主流浏览器都是单核浏览器，但随着浏览器的发展，也出现了双核浏览器，比如：QQ浏览器、360浏览器。

1、IE内核：Trident内核，俗称IE内核
2、Chrome浏览器内核：统称Chrome内核，以前是Webkit内核，现在是Blink内核
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核
4、Safari浏览器内核：Webkit内核
5、Opera浏览器内核：以前是Presto内核，后来是Webkit内核，现在是Blink内核

二、HTML概述

2.1、网页、网站、应用程序

网站：在因特网上根据一定的规则，使用标准通用标记语言下的一个应用制作的用于展示特定内容相关网页的集合。 简单的来说，网站就是一种沟通工具，人们可以通过网站发布信息，也可以获取自己想要的信息。
网页：构成网站的基本元素，是承载各种网站的应用平台。简单的理解：网站由网页构成。 网页是一个包含HTML标签的纯文本文件，可以存放在任意一台计算机中，是超文本标记语言格式。网页要通过浏览器来阅读。
应用程序：为了完成某项或者某几项特定任务而被开发运行于操作系统之上的计算机程序。

2.2、什么是HTML

HTML（Hyper Text Markup Language）超文本标记语言，超文本就是指页面内可以包含图片、链接、音乐、视频等非文字元素。
HTML是一种用于创建网页的标准标记语言，用来描述网页的一种语言，不是编程语言。标记语言指的是由一套标记标签组成的语言。HTML文档包含了HTML标签以及文本内容，该文档也叫做web页面，使用HTML来建立自己的web站点，html运行在浏览器上，由浏览器来解析。
超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。

2.3、什么是HTML5

万维网的核心语言——超文本标记语言的第五次重大修改。
HTML5是链接手机、平板电脑、pc以及其他移动终端的桥梁，可以更丰富地展现页面，让视频、音频、游戏以及其他元素构成一场华丽的代码盛宴。

2.4、Web基础概述

2.4.1、网站构成

网站由三个主要部分构成：网站域名、网站程序、网站空间。
网站域名：访问网站所用的网址，比如：baidu.com。
网站程序：包括用户浏览网站所看到的页面和网站后台管理程序，现在一般都是用成熟的网站管理系统。
网站空间：虚拟主机或服务器，用域存储网站程序及资料，并提供网站程序运行所需要的环境。

2.4.2、页面构成

页面由结构层、表现层、行为层三个部分组成。
eg：当你准备盖一个房子，你需要先盖一个毛坯房，这个就是结构层；盖好毛坯房以后，住进去需要装修，这个就是表现层；装修好可以入住了，但是你想要比较智能化的家，安装了智能AI，你设置了拉开窗帘开灯等功能，就是所谓的行为层。
对于页面来说：
结构层-----> HTML
表现层----->CSS，层叠样式表，用于控制网页样式并允许将样式信息与网页内容分离的一种标记语言。
行为层----->JavaScript，脚本语言，用来给页面添加动态效果和动态交互

2.4.3、B/S、C/S

B/S：浏览器/服务器模式
优点：可在任何地方进行操作不用安装软件
C/S：客户端/服务器模式
优点：交互性强、具有安全的存取模式、响应速度快

三、HTML文档

3.1、HTML文档声明

网页文件即HTML文件，其后缀名为.html。任何一个HTML页面，第一行要用<!DOCTYPE…>进行声明，<!DOCTYPE…>不是HTML标签，它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

3.2、HTML文档根标签

<html>元素是HTML页面的根元素，此元素可以告知浏览器这是一个HTML文档。
<html></html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
头部由<head>标签定义，主体由<body>标签定义。

3.3、头部head标签

<head></head>标签包含了文档的元（meta）数据，用于定义文档的头部，它是所有头部元素的容器。

head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
head标签的子标签：

  • base：描述基本的链接地址、链接目标，该标签作为HTML文档中所有的默认链接标签（base会对html文档中所有url产生作用，慎用）
  • link：定义文档与外部资源的关系，通常用于链接到样式表
  • script：引入外部js或定义内部js代码
  • style：用于html文档的样式文件引用地址
  • title：定义文档的标题，是head部分中唯一必需的元素
  • meta：元，基本的配置项目
meta标签相关：

 1. 指定字符集：charset就是charactor set即字符集。
 	浏览器通过meta来看网页是什么字符集，若meta写的和声明的不匹配，那么浏览器就是乱码。
 	<meta charset="utf-8">
 2.	页面描述，name即名字，content即内容，只要设置Description页面描述，那么百度搜索就可以显示这些。
 	<meta name="description" content="具体描述。。。">
 3.	关键字：告诉搜索引擎，此网页干啥的，能提高搜索命中率，有助于引擎seo优化
 	<meta name="Keywords" content="网易，邮箱，游戏，新闻">
 4.	重定向：
 	<meta http-equiv="refresh" content="3,http://www.baidu.com">
 5.	页面刷新
 	<meta http-equiv="refresh" content="3">
 6.定义网页作者
	<meta name="author" content="W">	
   

其他标签：
1、定义标题
   <title>百度一下，你就知道</title>

2、加载网页logo
   <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">

3、引入外部css文件
   <link rel="stylesheet" href="my.css">

4、引入本地css样式
   <style>p {
     
      color: rebeccapurple;
      }
   </style>

5、引入文件js，不建议在head标签引用js,需在body标签最后引用
   <script src="hello.js"></script>

3.4、主体body

body元素定义文档的主体，包含了可见的页面内容。

3.5、HTML5的优缺点

优点:

1、网络标准统一、HTML5本身是由W3C推荐出来的。

2、多设备、跨平台

3、即时更新。

4、提高可用性和改进用户的友好体验；

5、有几个新的标签，这将有助于开发人员定义重要的内容；

6、可以给站点带来更多的多媒体元素(视频和音频)；

7、可以很好的替代Flash和Silverlight；

8、涉及到网站的抓取和索引的时候，对于SEO很友好；

9、被大量应用于移动应用程序和游戏。

缺点:

1、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。

2、完善性：许多特性各浏览器的支持程度也不一样。

3、性能：某些平台上的引擎问题导致HTML5性能低下。

4、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

3.6、HTML标签分类

html标签又叫html元素，它分为块级元素、行内块元素和行内元素（内联元素），也可以分为块级元素、行内元素两大类。

3.6.1、块级元素

块级元素是指本身样式属性为display：block；的元素。我们通过用块级元素进行大布局。
特点：独占一行，可以设置宽高。
在不设置宽高的情况下，块级元素的宽高由它本身内容的宽高决定。

常用的块级元素：

  1. div：常用块级元素
  2. h1-h6：标题标签，字体大小逐次递减
  3. hr：水平线分割元素
  4. ol：有序列表
  5. ul：无序列表
  6. li：列表项
  7. dl：自定义列表
  8. dt：自定义列表项
  9. dd：定义描述
  10. table：表格
  11. p：段落
  12. form：交互表单

3.6.2、行内块元素

行内块元素指本身属性为display：inline-block；的元素。
特点：有多大占多大，可以设置宽高
常用行内块元素：img：图片标签

3.6.3、行内元素

内联元素指本身属性：display：inline；的元素。常用行内元素进行文字、小结构的搭建
特点：有多大占多大，不可设置宽高
常用的行内元素：

  1. span：范围标签
  2. a：超链接，锚点
  3. b：加粗
  4. strong：加粗强调
  5. i：斜体
  6. em：斜体强调
  7. del：文档中已被删除的文本
  8. br：强制换行
  9. u：下划线
  10. textarea：文本域，多行文本输入框
  11. input输入框
  12. select：下拉列表
  13. sub：下标
  14. sup：上标
  15. small：小字体文本

 1. b和strong的区别：
 		b和strong都是粗体显示
		b是没有任何语义的，strong是有语义的代表与其更强烈的强调文本
 2. i和em的区别：
 		i和em都是斜体表示
 		i是没有任何语义的，em代表强调文本

3.7、HTML和CSS中的长度单位

3.7.1、绝对长度单位

px
像素长度和在显示器上看到的文字屏幕像素无关。

3.7.2、相对字体的长度

em
一个相对单位。在没有任何css规则的前提下：1em=16px 浏览器默认字体大小16px。
em单位是相对于父元素，当设置了font-size属性以后，它会逐级向上相乘。假设父子元素的font-size都是2em，那么实际上，父元素的font-size是4em。
rem
rem和em都是相对单位，但是rem总是相对于根元素。

3.8、标签及属性语法

3.8.1、标签语法规则

  • HTML元素以开始标签起始，以结束标签终止
  • 元素的内容是开始标签和结束标签之间的内容
  • 某些HTML元素具有空内容（empty content），空元素在开始标签中进行关闭
  • 大多数HTML元素拥有属性

双标签：<开始标签>标签内容</结束标签>
单标签（空标签）：<开始标签/>

3.8.2、属性语法规则

  • HTML元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性以名称/值的形式出现，比如：id=”eg“

四、HTML标签元素

4.1、HTML文档结构相关标签

  • html：告诉浏览器其是一个html文档
  • head：定义文档的头部，所有头部元素的容器。head中的元素可以引用脚本，指示浏览器在哪里找到样式表，提供元信息等
  • body：定义文档的主体，包含文档的所有内容
  • base：定义页面中所有链接的默认地址或默认目标（可能对文档中的url产生影响，慎用）
  • meta：定义文档的元信息
  • link：定义文档与外部资源的关系，链接到表
  • script：定义客户端脚本
  • style：定义文档的样式信息
  • title：定义文档的标题

4.2、HTML基础块级标签

  • 标题元素：h1-h6标签，大小逐级递减，不要为了生成粗体或大号文本使用标题
  • 段落标签：p标签，p元素会自动创建上下间隙。
  • 水平线标签：hr标签，在页面创建一条水平线

4.3、HTML基础布局标签

div：将文档分割成独立的、不同的部分。

4.4、HTML基础行内标签

  • 范围标签：span，用来组合行内元素
  • 换行标签：br，插入一个简单的换行符
  • 超链接：a，使用超链接与网络上的另一个文档相连

4.4.1、超链接

a标签定义超链接，最重要的属性是href，它指示链接的目标

默认情况下，链接将以以下形式出现在浏览器中：

  • 一个未被访问过的链接显示为蓝色字体并带有下划线
  • 点击链接时，链接显示为红色并带有下划线
  • 访问过的链接显示为紫色并带有下划线
基本语法：
<a href="目标链接地址" target="目标窗口位置">
 	链接文本或图
 </a>
最低0.47元/天 解锁文章
小万是个小趴菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Notepad_v7.8.9_nodpad++_
10-04
代码查看，编辑，支持utf-8等多种编码格式
Notepad++ 的下载安装及常用配置
程序前行者的博客
09-18 1万+
Notepad++ 的下载安装及常用配置。
2024最新最全 Notepad ++ 安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了！！！
最新发布
2401_84488651的博客
06-04 7149
—————————
Notepad ++ 安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了
Python_0011的博客
06-25 2万+
网络安全行业产业以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。
Notepad++ 开源文本和代码编辑器
蚩尤后裔-汪茂雄
01-05 1万+
目录 notepad++ 概述与下载 notepad++ 概述与下载 1、notepad++ 是一个免费的、开源的文本和源代码编辑器。用 c++ 编程语言编写的 notepad++ 以精简的功能和简化流程为傲，以创建一个轻便高效的文本记事本程序。在实践中，这意味着高速和可访问的、用户友好的界面。 2、notepad++ 官网地址：https://notepad-plus.en.softonic.com/。推荐从官网进行下载，下载后解压即可使用。 3、工具默认是英文，可以切换语言：settings(
个人博客前端html.rar_html5前端_html博客_个人博客 前端_博客html_简洁博客前端
07-13
一份简洁宽屏的个人博客网站的前端，用html5写成。
1_html_前端_源码
10-01
本资料包“1_html_前端_源码”显然是关于使用HTML进行前端网页设计的实例。 描述中提到的"基于html css js的前端网页简洁设计"意味着这个项目结合了HTML、CSS（Cascading Style Sheets）和JavaScript这三大前端核心...
文件_supposewx7_html_前端_
10-01
在这个“文件_supposewx7_html_前端_”的压缩包中，我们可能会找到关于HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript等基础前端技术的详细资料，这些都是构建Web页面的核心。 首先，HTML是构建网页内容的...
HTML_WEN前端_giveizf_
09-30
在这个名为"HTML_WEN前端_giveizf_"的压缩包中，我们可以预见到包含了一些关于HTML学习的资料。 首先，HTML的基本结构包括头部（`<head>`）、主体（`<body>`）两部分。头部通常用来定义页面元数据，如字符编码（`...
suning_前端_
09-29
【标题】"suning_前端_" 指的可能是一个以苏宁为背景的前端开发项目，专注于网页前端的管理系统和JSON数据的批量导入数据库功能。这个项目的特点是简单易懂，设计风格可能较为可爱，适合初学者或者作为毕业设计的...
nodpad++web开发工具
09-30
这个版本有下载插件的管理工具，有利于安装插件nodpad++.用起来很不错
2023最新最全 Notepad ++ 安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了！！！
logic1001的博客
11-27 3万+
网络安全行业产业以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。
Notepad++下载安装介绍教程（附上Notepad++安装包）
努力让自己发光，对的人才能迎着光而来
12-06 4万+
Notepad++下载安装介绍教程（附上Notepad++安装包）
Notepad++ 下载与安装教程
热门推荐
梁辰兴的博客
03-08 5万+
Notepad++是程序员必备的文本编辑器，Notepad++中文版小巧高效，支持27种编程语言，通吃C,C++ ,Java ,C#, XML, HTML, PHP,JS 等，Notepad++中文版编辑器可完美地取代微软的记事本。
Notepad++ 下载与安装教程(非常详细)，从零基础入门到精通，看完这一篇就够了（附安装包）
qq_44005305的博客
08-16 2万+
软件：Notepad++版本：7.7语言：简体中文大小：3.98M安装环境：Win11/Win10/Win8/Win7硬件要求：CPU@2.0GHz 内存@4G(或更高）下载通道①百度网盘丨64位下载链接：[提取码]：kwii下载通道①百度网盘丨32位下载链接：提取码：7kmi。
nodpad++正则
jiangliuhuan123的博客
02-21 1389
首先，注意Notepad++正则表达式字符串最长不能超过69个字符。notepad中正则表达式的语法。
Notepad++的安装和基本使用
qq_51550750的博客
11-23 1万+
安装Notepad++ 这是我提供的安装包： 链接: https://pan.baidu.com/s/1DHZyd985vBHzlyjNgPK_4A 提取码: 8q1o –来自百度网盘超级会员v4的分享 安装： 1.双击： 2.选择语言： 3.开始安装，点击下一步： 4.接受许可证协议： 5.选择安装的位置，然后下一步： 6.下一步： 7.创建桌面快捷方式，然后开始安装： 8.最后等一会儿就完成咯： 桌面上有Notepad++的快捷方式： 默认打开Notepad++了，下面进行设置 No
HTML5前端开发与设计基础
"Web Development and Design Foundations with HTML5 8E" 是一本由TerryAnn Felke-Morris编著的教育书籍，主要针对前端开发初学者，涵盖了HTML5、CSS、JavaScript、JQuery等核心技术。 本书详细讲解了Web开发与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值