HTML第一课

  目录

      • 一、网页
        • 1、什么是网页
        • 2、什么是HTML
        • 3、网页的形成
      • 二、常用的浏览器
          • 1、常用的浏览器
          • 2、浏览器内核
      • 三、==Web标准==
          • 1、为什么需要Web标准
          • 2、Web标准的构成
        • 四、HTML标签
          • 1、预备知识
            • 1.1、标签
            • 1.2、html结构标签(骨架标签)
          • 2、网页开发工具
            • 2.1、文档类型声明标签
            • 2.2、lang语言种类
            • 2.3、字符集
          • 3、HTML常用标签
            • 3.1、标题标签
            • 3.2、段落和换行标签
            • 3.3、文本格式化标签
            • 3.4、
              标签
            • 3.5、图像标签
            • 3.5、路径
            • 3.6、链接标签
          • 4、HTML中的注释和特殊字符
            • 4.1、注释
            • 4.2、字符实体
          • 五、零碎知识


一、网页

1、什么是网页

  网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。

  网页是网站中的一“页”,通常是HTML格式的文件,它要通过浏览器来阅读。

  网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以 .htm.html 后缀结尾的文件,因此称其为 HTML文件

2、什么是HTML

  HTML超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。

注释:
  html不是一种编程语言,是一种标记语言(Markup Language)。
  标记语言是一套标记标签(Markup Tag)。

  超文本
  有两层含义:
   1、它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
   2、它可以从一个文件跳转到另一个文件,与世界各地的主机连接(超链接)。

3、网页的形成

  网页是由网页元素组成的,这些元素利用html标签描述出来,通过浏览器解析来显示给用户的。
前端人员开发代码 —> 浏览器显示代码(解析、渲染) —> 生成最后的Web页面


二、常用的浏览器

  浏览器是由网页显示、运行的平台。

1、常用的浏览器

  IE、火狐(FireFox)、谷歌(Chrome)、Safari和Opera等,其中最常用的是谷歌浏览器。

2、浏览器内核

  浏览器内核是负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
FireFox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
Chrome/Opera Blink Chrome/Opera浏览器内核。Blink其实是Webkit的分支

  目前国内一般的浏览器采用的是Webkit/Blink内核,如360、UC、QQ、搜狗等。

三、Web标准

  Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

1、为什么需要Web标准

  浏览器不同,显示的页面或排版会有差异。

2、Web标准的构成

  主要包括结构(Structure)、表现(Presentation)和行为(Behavior)

标准 说明
结构 用于对网页元素进行整理和分类,指HTML
表现 用于设置网页元素的版式、颜色、大小等外观样式,指CSS
行为 指网页模型的定义及交互的编写,指JavaScript

  Web标准提出的最佳体验方案:结构、样式、行为相分离
  可以理解为:结构写到html文件中、表现写到CSS文件中、行为写到JS中。


四、HTML标签

1、预备知识
1.1、标签
	<html>html>  
	<br/>  

双标签关系:包含关系、并列关系

包含关系:

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

并列关系

	<head>  head>
	<body>  body>
1.2、html结构标签(骨架标签)
	<html>
		<head>
			<title> 样例 title>
		head>
	
		<body>
			哈哈
		body>
	<html/>

HTML第一课_第1张图片

2、网页开发工具
2.1、文档类型声明标签


文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页


表示当前页面采取的是HTML5版本来显示网页

注释:
声明位于文档中的最前面的位置,处于标签之前
不是html标签,是文档类型声明标签

2.2、lang语言种类

lang [language]

用来定义当前文档显示的语言

注释
1、en定义语言为英语[english]
2、zh-CN定义语言为中文
简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页
其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文

对浏览器和搜索引擎有一定作用

2.3、字符集

字符集(Character set)是多个字符的集合,以便计算机能够识别和存储各种文字。

标签内,可以通过标签的charset属性来规定html文档应该使用哪种字符编码。

<meta charset="UTF-8"/>

注释:
  必需。否则可能引起乱码。
  charset常用的值有GB2312、BIG5、GBK、UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。

3、HTML常用标签

让页面结构更清晰规范

3.1、标题标签
	<h1>h1> ~ <h6>h6>
3.2、段落和换行标签
    <p> p>  

换行标签

    <br/>  
3.3、文本格式化标签

HTML第一课_第2张图片

3.4、
标签

  没有语义,就是一个盒子,用来装饰内容。

  一行只能放一个

(大盒子)
  一行可以多个 (小盒子)

3.5、图像标签
	<img src="图像URL">  

其他属性:
HTML第一课_第3张图片
图像标签示例1:

	
		<html>
			<head>
				<title>图像标签示例title>
			head>
			<body>
				<img src="/i/eg_tulip.jpgimg.jpg"  alt="我裂开了" width="400" height="266" title="上海鲜花港 - 郁金香" />
			body>
	html>

运行结果:
HTML第一课_第4张图片
图像标签示例2:

	
		<html>
			<head>
				<title>图像标签示例title>
			head>
			<body>
			    <img src="img.jpg"  alt="我裂开了" width="400" height="266" title="上海鲜花港 - 郁金香" />
			body>
	html>

运行结果:
HTML第一课_第5张图片
注释:
  1、可以拥有多个属性,但必须写在标签名后面。
  2、属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
  3、属性采取键值对的格式,即属性=“属性值”。

3.5、路径

 1、目录文件夹和根目录
 2、相对路径
  以引用文件所在位置为参考基础,而建立出的目录路径,即文件相对于当前html页面的位置。

相对路径分类 符号 说明
同一级路径 文件位于html文件同一级
下一级路径 / 文件位于html文件下一级
上一级路径 . . / 文件位于html文件上一级

 3、绝对路径
  指目录下的绝对位置,直接到达的目标位置,通常是从盘符开始的路径,例"D:\Web\imgs\img.jpg"

3.6、链接标签
    <a href="跳转目标URL" target="目标窗口的打开方式">文本或图像a>
属性 作用
href 必需。用于指定链接目标的url地址
target 用于指定链接页面的打开方式。_self为默认值,表示在本页面打开新页面;_blank为在新窗口打开新页面

 1、外部链接
  例:

 2、内部链接
  网站内部页面之间的相互链接,直接链接内部页面名称即可。例:

 3、空连接
  

 4、下载链接
  1、如果href里面的地址是一个文件(.exe)、压缩包(.zip)等,会下载这个文件
  2、使用download属性

	<a download="filename">
	[filename:规定下载文件的名称]

示例

	
	<html>
		<body>
			<p>点击 W3School 的 logo 来下载该图片:<p>
			<a href="/i/w3school_logo_white.gif" download="w3logo">
				<img border="0" src="/i/w3school_logo_white.gif" alt="W3School">
			a>
		body>
	html>

运行结果:

HTML第一课_第6张图片
注释:
  1、只有 Firefox 和 Chrome 支持download属性
  2、在标签中必须设置href属性。
  3、该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

 5、锚点链接

作用
点击链接可以快速定位到页面中的某个位置

用法
在链接文本的href属性中,设置属性为 # 名字的形式,例
哈哈
找到目标位置标签,里面添加一个"id属性"="刚才的名字",例

哈哈大本营

[此处的p可以改成其它的,例如spanah1~h6等]。还可以使用哈哈大本营

	
	<html>
	<head>
		<title>锚点链接示例title>
	head>
	<body>
		<ul>
			<li><a href="#haha">哈哈a>li>
			<li><a href="#heihei">嘿嘿a>li>
		ul>
		<a name="haha">哈哈大本营1a>
		<h3 id="haha">哈哈大本营2h3>
		<p>哈了个哈p><p>哈了个哈p><p>哈了个哈p><p>哈了个哈p><p>哈了个哈p><p>哈了个哈p><p>哈了个哈p><p>哈了个哈p><p>哈了个哈p>
		<a id="heihei" style="color:red;">嘿嘿大本营a>
		<p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p>
		<p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p><p>嘿嘿嘿p>
  	body>
	html>

注释:
  用此方法进行页面内跳转,可以设置出一键回顶部效果,但看起来没有那么炫酷 (ˉ▽ ̄~)


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
    script>
head>

<body>
    <span>本例来自w3school官网span>
    <span>本例在安装邮件客户端程序后才能工作!span>
    <p>简单创建电子邮件链接
        <a href="mailto:[email protected]?subject=Hello%20again">发送邮件a>
    p>

    <p>复杂创建电子邮件链接
        <a
            href="mailto:[email protected][email protected][email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">
            发送邮件!
        a>
    p>
    
body>

html>
4、HTML中的注释和特殊字符
4.1、注释
	[快捷键Ctrl+/]
4.2、字符实体

在html页面中,一些特殊符号很难或不方便直接使用,此时需要字符实体来替代。

HTML第一课_第7张图片
注释:
  1、使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。
  2、HTML 中的常用字符实体是不间断空格( )。
  浏览器总是会截短 HTML 页面中的空格。如果在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,需要使用 字符实体.
  3、实体名称对大小写敏感!


五、零碎知识

HTML第一课_第8张图片
1、txt文档修改字体:格式 —> 字体

2、网页开发工具:Visual Studio Code
VSCode使用方法:
1)、打开软件
2)、新建文件(Ctrl+N)
3)、保存(Ctrl+S) [存为 .html 文件]
4)、生成页面结构:输入! 按下Tab键
5)、利用插件在浏览器中预览页面:单击鼠标右键,在弹出的窗口上点击"Open In Default Browser" (Alt+B)
[如果没有,有可能没安装插件open in browser;也可以安装live server,可以实时预览]

3、VSCode快捷键
显示所有命令 Ctrl+Shift+P
新建文件 Ctrl+N
转到文件 Ctrl+P
在文件中查找 Ctrl+Shift+F
开始测试 F5
放大缩小视图 Ctrl +、Ctrl -
注释 Ctrl+/
快速格式化代码 Shift+Alt+F
设置 Ctrl+,

4、Snipaste — 截图工具

常用快捷方式
截图,同时测量大小、设置箭头、书写文字等 F1
在桌面置顶显示 F3
对图片取色 点击图片+alt
切换去色模式 shift
取消图片显示 Esc
历史记录回放  , / .
缩放 鼠标滚轮 或 +/-
  对于 GIF 图片则是加速/减速
旋转  1/2
  对于 GIF 图片则是 上一帧/下一帧
镜像翻转  3/4
设置透明度  Ctrl + 鼠标滚轮 或 Ctrl + +/-
鼠标穿透  X,取消则按 F4
缩略图  Shift + 双击
图像标注  空格键
隐藏  左键双击

你可能感兴趣的:(HTML第一课)