前端学习第一天-html基础

达标要求

  • 网页的形成过程

  • 常用的浏览器及常见的浏览器内核

  • web 标准三层组成

  • 什么是HTML

  • 熟练掌握HTML文档结构

  • 熟练掌握HTML常用标签 

1. 初识web前端

  • Web前端是创建Web页面或App等前端界面呈现给用户的过程。

  • Web前端开发是从网页制作演变而来,早期网站主要内容都是静态,用户使用网站的行为也以浏览为主。

  • 随着互联网技术的发展,各种终端设备应用程序与用户沟通交互的界面,都是由Web前端开发完成。现今,前端开发领域就更加广泛,包含后端(nodejs),小程序开发,Android和ios的App开发,游戏,大数据,桌面应用等。

  • 目前,Web前端开发已成为互联网公司必备职业之一。

2. 了解网页和浏览器

2.1 什么是网页

  • 网页是网站的基本单位,也叫Web页面,是承载各种网站应用的平台。

  • 网页由主要由文字,图片和链接构成,除此之外,网页的元素还包括表格、动画、音频、视频等等。

2.2 网页的形成过程

代码通过浏览器解析、渲染,然后形成Web页面,通过浏览器打开展示的效果。

2.3 浏览器

浏览器(browser application)是用来访问和浏览万维网页面的客户端软件,是显示、运行网页的平台。

国际上常用的浏览器有:

1.IE浏览器 → Edge浏览器

2.谷歌(Chrome)浏览器

3.safari浏览器

4.火狐(Firfox)浏览器

5.Opera浏览器

被称为五大浏览器,其中谷歌浏览器在全球市场上占有率最高,开发人员一般使用的都是谷歌浏览器来进行测试。

2.4 浏览器的组成部分

浏览器有以下主要部分组成:

  1. 用户界面 包括浏览器中可见的地址输入框,浏览器前进返回按钮,打开书签,打开历史记录等用户可操作性的功能选项。

  2. 浏览器引擎(渲染引擎) 渲染引擎负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

  3. JS 解释器 用来解释和执行 JavaScript 代码,例如 V8 引擎,执行 javascript语言来实现网页的动态效果。

  4. 网络功能模块 浏览器开启网络线程发送请求或下载资源文件的模块。

  5. 数据持久化存储 处于持久层,浏览器需要在硬盘中保存类似 cookie 的各种数据。

2.5 什么是浏览器的内核(重点)

   浏览器内核包括两部分:渲染引擎和js引擎。渲染引擎负责读取网页内容,整理讯息,计算网页的显示方式并显示页面,js引擎是解析执行js获取网页的动态效果。
浏览器内核名称
IE浏览器内核Trident内核,也是俗称的IE内核;
Chrome浏览器内核以前是Webkit内核,现在是Blink内核
Safari浏览器内核Webkit内核;
Firefox浏览器内核Gecko内核,俗称Firefox内核;
Opera浏览器内核最初是自己的Presto内核,现在是Blink内核;

2.6 浏览器的战争

浏览器大战(Browser wars),指不同的网络浏览器为了争取用户优先使用占取市场份额的战争。

浏览器本身只是一个用来检索、展示以及传递Web信息资源的一个应用程序,但是由于他本身的意义让他成为了互联网的入口,让市场有了供给需求的关系,因此浏览器之间的竞争是不可避免的。

3. Web 标准

Web标准,使得Web开发更加容易,Web标准由万维网联盟(W3C)制定。

3.1 为什么要Web标准?

  • 对于浏览器开发商和 Web 程序开发人员在开发新的应用程序时遵守指定的标准更有利于 Web 更好地发展。

  • 开发人员按照 Web 标准制作网页,这样对于开发者来说就更加简单了,因为他们可以很容易了解彼此的编码。

  • 将确保所有浏览器正确显示您的网站而无需费时重写。

3.2 Web 标准构成

  • Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。

  • w3c 万维网联盟组织,制定web标准的机构。

  • 主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

    web主要包括结构、表现、行为三方面:

含义内容
结构用于对网页元素的进行整理和分类,指的就是html;
表现用于设置网页元素的版式、颜色、大小等外观样式,指的就是css
行为指网页模型的定义以及交互的编写,主要指的就是javascript;

简单理解,结构写到html文件中,表现写到css文件中,行为写到Javascript文件中。

4. VSCode的基本使用

Visual Studio Code (简称 VS Code / VSC) 是由微软开发的一款开源源代码编辑器,免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 diff、git 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

4.1 VSCode安装

VSCode是免费的软件,下载地址链接:官网下载

4.2 扩展程序(安装各种插件)

1.汉化

安装插件:Chinese(simplified) 安装一遍,然后重启软件即可。

2.在浏览器中打开网页

安装插件:Open HTML in Default Browser,用默认浏览器打开 HTML 文件 。

3.格式化代码

安装插件:JS-CSS-HTML Formatter,当你Ctrl+S保存代码时,自动格式化代码。

5. HTML简介

HTML 的全称为 超文本标记语言(Hyper Text Markup Language)

所谓超文本,因为它可以加入图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与各地主机的文件连接。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)

  • HTML 不是一种编程语言,而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag)

总结: 网页是由网页元素组成的 , 这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户了。简而言之,HTML语法是用来描述文档内容的。

5.1 HTML发展历程

5.2 什么是XHTML?

XHTML 指的是可扩展超文本标记语言,XHTML 是更严格更纯净的 HTML 代码

HTML和 XHTML之间有什么区别

  • XHTML 与 HTML 4.01 几乎是相同的

  • XHTML 是更严格更纯净的 HTML 版本

  • XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML,例如它要求标签必须小写,标签必须被正确关闭,标签顺序必须正确排列,对于属性都必须使用双引号等。

5.3 HTML文档结构

要创建一个HTML文档,最简单的方法是创建一个文本文件,然后将其扩展名保存成.html。

组成文档结构的元素只有4个,这也是任何HTML文档都必须有的元素。

  • <html>文档中最大的标签,我们称为根标签。

  • <head>元素提供了关于这篇文档的信息。

  • <title>定义页面标题。

  • <body>定义文档的主体,用户所看到的内容。

5.4 完整的文档结构

文档结构说明:

  • <!DOCTYPE>文档类型和版本的声明(HTML5版本号可以省略)。

  • lang:HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。

    根据 W3C 推荐标准,您应该通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明。

  • charset="UTF-8"字符集

    注意:

    1.UTF-8则包含全世界所有国家需要用到的字符,是目前最常用的字符集编码方式。

    2.记住一点,以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

5.5 HTML元素

元素(Element):由开始标签、闭合标签以及标签之间的内容组成。

5.6 HTML属性

元素可以用属性进行配置。属性由属性名和属性值组成,例如:

  • 属性总是写在开始标签中。

  • 属性名和元素名之间要有一个空格。

  • 属性名后面要跟一个等号(=)。

  • 属性值使用双引号括起来。

  • 一个元素可以有多个属性,这些属性之间以空格分隔。

6.HTML常用标签

首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。

HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。

6.1 排版标签

排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。

6.1.1 标题标签

辅助记忆: head 头部

为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题

 <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

注意: h1 标签表示页面中最重要标题信息,要求只能有一个h1标签。

6.1.2 段落标签

辅助记忆: paragraph 段落

标签表示文本的段落,段落通常在文档中表示为文本块,会自动在其前后创建一些空白。

<p>  文本内容  </p>

6.1.3 水平线标签

辅助记忆: horizontal 横线

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。

<hr />

6.1.4 换行标签

  • 辅助记忆: break 打断 ,换行

  • 在HTML中,用来设置文本强制换行显示。

<br/>

6.1.5 div标签

  • 辅助记忆: division 分开

  • div标签本身没有含义,在html中布局使用最多标签为div,用来为HTML文档内大块的内容提供结构。

    <div> 这是块内容 </div> 
    <div> 这是块内容 </div>
    <div> 这是块内容 </div>

注意点: <div></div>是块级元素,独占一行

6.1.6 span标签

  • 辅助记忆:span 跨度,跨距 。

  • span本身没有什么含义,可用作文本的容器,包含着文本内容,还可以通过对span标签对象设置不同样式实现我们要的美化效果。

    <span> 文本内容 </span> 
    <span> 文本内容 </span>
    <span> 文本内容 </span>

注意点: <span></span>是行内元素

6.1.7 排版标签总结

6.2 文本格式化标签(熟记)

在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

注意点: strong、em 、del 、ins 标签(推荐使用)有语义,起到加重语气的效果; b、 i 、s、 u标签是没有的语气

6.3 图像标签img (重点)

辅助记忆: image 图像

HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就需要使用图像标签,其基本语法格式如下:

<img src="图像URL" />

属性:

  • src:该属性指定图片文件所在的位置,可以是相对路径,也可以是绝对路径。

  • alt:该属性指定一段文本,用来作为该图片的提示信息。

  • height:指定图片的高度,属性值可以是百分比,也可以是像素值。

  • width:指定图片的宽度,属性值可以是百分比,也可以是像素值。

  • title:当光标放置图片上时的提示的文本信息。

  • 注意引入路径问题:

    1. 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如<img src="logo.gif" />。  
    2. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src="images/img01/logo.gif" />。  
    3. 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如<img src="../logo.gif" />。 

6.4 链接标签(重点)

辅助记忆: anchor 锚

在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可,其基本语法格式如下:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性:

  • href( Hypertext Reference的缩写):意思是超文本引用,用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。

  • target:用于指定链接页面的打开方式,其取值有_self_blank两种,其中_self为默认值,_blank为在新窗口中打开方式。

注意点:

1.外部链接需要添加 http://www.baidu.com

2.内部链接直接链接内部页面名称即可 比如 < a href="index.html"> 首页

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为"#"(即href="#"),表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

6.5 锚点定位

通过创建锚点链接,用户能够快速定位到目标内容。

创建锚点链接分为两步:

  1. 使用链接文本创建链接文本(被点击的元素)

    <a href="#con">   
  2. 使用相应的id名标注跳转目标的位置。 (找目标位置元素)

    <p id="con">关于我们</p> 

6.6 网页的icon图标和网站相关信息

<head> 元素包含了所有的头部标签元素,使用link标签添加icon图标,meta标签添加网站相关信息。

  • 添加icon图标

    <link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon"> 
  • meta元素可提供有关页面的元信息(meta-information),是html语言head区的一个辅助性标签,位于文档的头部,属性定义了与文档相关联内容。

    <meta charset="UTF-8">
    <meta name="keywords" content="弱电工程,弱电工程公司,和智电子,弱电工程公司,安防监控工程,综合布线,酒店弱电工程" />
    <meta name="description" content="和智电子科技有限公司, 是一家集施工研发,销售,服务于一体的高新技术企业,公司已成功承揽过各类企业弱电工程,酒店弱电工程,政府弱电工程,安防监控工程,智能弱电工程,综合布线工程等。" />

6.7 使用特殊字符

实体是浏览器用来替代特殊字符的一种编码,下表中列出了网页中常用的一些特殊字符。

最常用的字符实体

显示结果描述实体名称实体编号
空格(不换行空格)&nbsp;&#160;
空格(全角)&emsp;&#8195;
<小于号&lt;&#60;
>大于号&gt;&#62;
©版权&copy;&#169;

6.8 注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。使用ctrl + / 或者 ctrl +shift + / 快捷键就可

<!-- 注释语句 -->  

注意:注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。

7. HTML标签分类

1.双标签

由开始标签和结束标签组成的一对标签,它可以嵌套和承载内容。

<div>我是文字</div>

2.单标签

指没有内容的标签,在开始标签中自动闭合。

<br/>

8. HTML标签关系

标签的相互关系就分为两种:

1.嵌套关系

<head>  <title> </title>  
</head>

2.并列关系

<head></head>
<body></body>

提示: 如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。如果是并列关系,最好上下对齐。

9.HTML标签的语义化

所谓标签语义化,就是指标签的含义,合适的地方给一个最为合理的标签。

  1. 方便代码的阅读和维护

  2. 同时让浏览器可以很好地解析,从而更好分析其中的内容

  3. 使用语义化标签会具有更好地搜索引擎优化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/715729.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sklearn.preprocessing.RobustScaler(解释和原理,分位数,四分位差)

提示&#xff1a;sklearn.preprocessing.RobustScaler&#xff08;解释和原理&#xff0c;分位数&#xff0c;四分位差&#xff09; 文章目录 [TOC](文章目录) 一、RobustScaler 是什么&#xff1f;二、代码1.代码2.输出结果 总结 提示&#xff1a;以下是本篇文章正文内容&…

ELK学习

ELK 一、ELK介绍 &#x1f604; “ELK”是三个开源项目的首字母缩写&#xff0c;这三个项目分别是&#xff1a;Elasticsearch、Logstash 和 Kibana。Elasticsearch 是一个搜索和分析引擎。Logstash 是服务器端数据处理管道&#xff0c;能够同时从多个来源采集数据&#xff0…

网络编程(IP、端口、协议、UDP、TCP)【详解】

目录 1.什么是网络编程&#xff1f; 2.基本的通信架构 3.网络通信三要素 4.UDP通信-快速入门 5.UDP通信-多发多收 6.TCP通信-快速入门 7.TCP通信-多发多收 8.TCP通信-同时接收多个客户端 9.TCP通信-综合案例 1.什么是网络编程&#xff1f; 网络编程是可以让设…

网络安全-appcms-master

一、环境 gethub上面自己找appcms-master 二、开始闯关 原理&#xff1a;在评论的时候提交可以提交到管理员列表去&#xff0c;管理员一看cookie和地址就被盗走了 点进去软件后会发现提交按钮 随便提交一下看看 放到div标签里面是不是有可能可以做&#xff0c;看看后台吧 那…

VUE CLI3项目搭建 ESLint配置

VUE项目框架配置 一、工具准备 Node.js安装 安装方法&#xff1a;点击查看WebStorm安装 下载地址&#xff1a;点击查看 二、环境准备 镜像准备 1.查看代理&#xff1a;npm get registry 2.设置淘宝镜像 2.1临时使用. npm --registry https://registry.npm.taobao.org ins…

【电机仿真】空间矢量脉宽调制(SVPWM)算法与实现

前言 文章【电机仿真】永磁同步电机模型中所提及了PMSM数学模型&#xff0c;模型算法是电机控制的理论基础&#xff0c;但在实际控制中&#xff0c;需要将这两部分具象化。实际电机所需要的总是三相电流或者电压&#xff0c;控制对象为逆变器中的开关器件&#xff0c;我们需要将…

springboot基于web的音乐网站论文

音乐网站 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了音乐网站的开发全过程。通过分析音乐网站管理的不足&#xff0c;创建了一个计算机管理音乐网站的方案。文章介绍了音乐网站的系统分析部分&#xff0c…

114.龙芯2k1000-pmon(13)- 串口如何用

本文是讲原理图的部分&#xff0c;跟pmon的关系不大&#xff01;&#xff01; 参考手册&#xff1a;《龙芯2K1000处理器用户手册.pdf》 刚刚看数据手册&#xff0c;让我是有点惊讶&#xff0c;但是也让我迷惑。&#xff08;一个串口复用为4个是啥意思&#xff1f;&#xff09;…

Java项目:32 基于springboot的课程作业管理系统(含源码数据库+文档免费送)

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 管理员&#xff1a;首页、个人中心、公告信息管理、班级管理、学生管理、教师管理、课程类型管理、课程信息管理、学生选课管理、作业布置管理…

CK98-数学家键盘配置

官方驱动和说明书下载地址 https://www.coolkiller.cn/download/lists_6.html 介绍&#xff1a;https://new.qq.com/rain/a/20221229A09B1M00 官方CK-98数学家驱动版本&#xff08;谨慎更新&#xff09; 如果升级驱动出现问题&#xff0c;重启驱动软件后会默认让你恢复的。 …

利用小蜜蜂AI智能问答ChatGPT+AI高清绘图生成图文故事案例

利用小蜜蜂AI智能问答ChatGPTAI高清绘图生成图文故事案例 这段时间利用小蜜蜂AI网站做了一些编程、绘图以及数据分析方面的案例。再过几个月&#xff0c;我的大孙子就要出生了。我要用小蜜蜂AI智能问答和AI高清绘图为大孙子生成一个1-9的数字图文故事。 小蜜蜂AI网站可以扫如…

程序项目打包发布方法,采用InstallShield软件

重点&#xff1a; 1.程序项目做出来了&#xff0c;需要打包发布给用户。如何打包是关键。 2.采用InstallShield软件进行发布。 步骤一&#xff1a;创建一个依赖三方库配置环境的bat文件的项目。 &#xff08;主要测试三方库打包 和如果有bat文件&#xff0c;需要先创建环境&…

一文认识蓝牙(验证基于Aduino IDE的ESP32)

1、简介 蓝牙技术是一种无线通信的方式&#xff0c;利用特定频率的波段&#xff08;2.4GHz-2.485GHz左右&#xff09;&#xff0c;进行电磁波传输&#xff0c;总共有83.5MHz的带宽资源。 1.1、背景 蓝牙&#xff08;Bluetooth&#xff09;一词取自于十世纪丹麦国王哈拉尔Haral…

Springboot+vue的商业辅助决策系统的设计与实现(有报告)。Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的商业辅助决策系统的设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的商业辅助决策系统的设计与实现&#xff0c;采…

Leetcode210. 课程表 II

Every day a Leetcode 题目来源&#xff1a;210. 课程表 II 解法1&#xff1a; 什么是拓扑排序&#xff1f; 我们考虑拓扑排序中最前面的节点&#xff0c;该节点一定不会有任何入边&#xff0c;也就是它没有任何的先修课程要求。当我们将一个节点加入答案中后&#xff0c;我…

html5新增标签+css3新增标签

新增标签 一.html5新增标签1.语义化标签2.多媒体标签&#xff08;1&#xff09;视频video&#xff08;2&#xff09;音频audio&#xff08;3&#xff09;.总结 3.input属性4.表单属性 二.css3新增选择器1.新增选择器&#xff08;1&#xff09;属性选择器&#xff08;2&#xff…

Ubuntu进入python时报错:找不到命令 “python”,“python3” 命令来自 Debian 软件包 python3

一、错误描述 二、解决办法 进入”/usr/bin”目录下&#xff0c;查看/usr/bin目录中所有与python相关的文件和链接&#xff1a; cd /usr/bin ls -l | grep python 可以看到Python3指向的是Python3.10&#xff0c;而并无指向python3的软连接 只需要在python与python3之间手动…

Github配置SSH免密认证

以Ubuntu Server为例 生成SSH ssh-keygen -t ed25519 -C "your_emailexample.com" 如果系统不支持Ed25519算法&#xff0c;使用旧的命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 根据提示生成公私钥文件&#xff0c;记下位置…

前端学习、CSS

CSS可以嵌入到HTML中使用。 每个CSS语法包含两部分&#xff0c;选择器和应用的属性。 div用来声明针对页面上的哪些元素生效。 具体设置的属性以键值对形式表示&#xff0c;属性都在{}里&#xff0c;属性之间用;分割&#xff0c;键和值之间用:分割。 因为CSS的特殊命名风格…

MySQL 常用优化方式

MySQL 常用优化方式 sql 书写顺序与执行顺序SQL设计优化使用索引避免索引失效分析慢查询合理使用子查询和临时表列相关使用 日常SQL优化场景limit语句隐式类型转换嵌套子查询混合排序查询重写 sql 书写顺序与执行顺序 (7) SELECT (8) DISTINCT <select_list> (1) FROM &…