浏览器(browser application)是用来访问和浏览万维网页面的客户端软件,是显示、运行网页的平台。
目前国内浏览器使用排行
浏览器有以下主要部分组成:
Web标准,使得Web开发更加容易。Web标准由万维网联盟(W3C)制定。
含义 | 内容 |
---|---|
结构 | 用于对网页元素的进行整理和分类,指的就是html; |
表现 | 用于设置网页元素的版式、颜色、大小等外观样式,指的就是css |
行为 | 指网页模型的定义以及交互的编写,主要指的就是javascript; |
简单理解,结构写到html文件中,表现写到css文件中,行为写到Javascript文件中。
Visual Studio Code (简称 VS Code / VSC) 是由微软开发的一款开源源代码编辑器,免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。
VSCode是免费的软件,下载地址链接:官网下载 (opens new window)
1.汉化
把中文插件Chinese(simplified) 安装一遍,然后重启软件即可。
2.在浏览器中打开网页
安装插件:Open HTML in Default Browser,用默认浏览器打开 HTML 文件 。
HTML 的全称为 超文本标记语言(Hyper Text Markup Language)
所谓超文本,因为它可以加入图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与各地主机的文件连接。
要创建一个HTML文档,最简单的方法是创建一个文本文件,然后将其扩展名保存成.html。
组成文档结构的元素只有4个,这也是任何HTML文档都必须有的元素。
<head>
元素提供了关于这篇文档的信息。<title>
定义页面标题。<body>
定义文档的主体,用户所看到的内容。文档结构说明:
<!DOCTYPE>
文档类型和版本的声明(HTML5版本号可以省略)。charset="UTF-8"
字符集
注意:UTF-8则包含全世界所有国家需要用到的字符,是目前最常用的字符集编码方式。
记住一点,以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。<!-- doc:document文档 type:类型 -->
<!DOCTYPE html>
<!-- 文档的主要语言为:en:英文;zh:中文 -->
<html lang="en">
<head>
<!-- charset:字符集 utf-8 万维码 -->
<meta charset="utf-8">
<title>myweb</title>
</head>
<body>
<!-- 我会很快完成第一个项目开发 -->
Hello,My first html page
</body>
</html>
<!--
1.<!DOCTYPE html>:文档的声明和版本的类型
2.<html lang="en">:文档主题语言
3.文档编码---utf-8
-->
元素(Element):由开始标签、闭合标签以及标签之间的内容组成。
元素可以用属性进行配置。属性由属性名和属性值组成,例如:
首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。
HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。
排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。
单词缩写: head 头部
为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
注意: h1 标签表示页面中最重要标题信息,要求只能有一个h1标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 总结:标题标签一共有六个 h1-h6 -->
<!-- h1标签只能有一个 -->
</body>
</html>
单词缩写: paragraph 段落
标签表示文本的段落,段落通常在文档中表示为文本块,会自动在其前后创建一些空白。
<p> 文本内容 </p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
</body>
</html>
<br/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
今天是<br/>美好的一天。
</body>
</html>
单词缩写: division 分开
div标签本身没有含义,在html中布局使用最多标签为div,用来为HTML文档内大块的内容提供结构。
<div> 这是块内容 </div>
<div> 这是块内容 </div>
<div> 这是块内容 </div>
注意点: 是块级元素,独占一行
单词缩写:span 跨度,跨距 。
span本身没有什么含义,可用作文本的容器,包含着文本内容,还可以通过对span标签对象设置不同样式实现我们要的美化效果。
<span> 文本内容 </span>
<span> 文本内容 </span>
<span> 文本内容 </span>
注意点: <span>是行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- div标签独占一行 上下排列 行--没有语义 -->
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<!-- span标签 多个span在一行内显示 空间不够 再换行 -->
<span>span标签</span>
<span>span标签</span>
<span>span标签</span>
</body>
</html>
在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
注意点: strong、em 、del 、ins 标签(推荐使用)有语义,起到加重语气的效果; b、 i 、s、 u标签是没有的语气
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>粗体</b>
<strong>粗体</strong>
<i>斜体</i>
<em>斜体</em>
<s>删除线</s>
<del>删除线</del>
<u>下划线</u>
<ins>下划线</ins>
<!-- strong、em、del、ins语音更加强烈 -->
</body>
</html>
单词缩写: image 图像
HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就需要使用图像标签,其基本语法格式如下:
<img src="图像URL" />
属性:
src:该属性指定图片文件所在的位置,可以是相对路径,也可以是绝对路径。
alt:该属性指定一段文本,用来作为该图片的提示信息。
height:指定图片的高度,属性值可以是百分比,也可以是像素值。
width:指定图片的宽度,属性值可以是百分比,也可以是像素值。
注意引入路径问题:
1. 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如<img src=”logo.gif” />。
2. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src="images/img01/logo.gif" />。
3. 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如<img src="../logo.gif" />。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--../:上一级
src:图片的路径
alt:当图片加载不成功时,用来作为该图片的提示信息
-->
<img src="images/google.png" alt="google图片" height="200" width="400">
</body>
</html>
单词缩写: anchor 锚
在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可,其基本语法格式如下:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性:
_self
和_blank
两种,其中_self
为默认值,_blank
为在新窗口中打开方式。注意点: 1.外部链接需要添加 http:// www.baidu.com (opens new window) 2.内部链接直接链接内部页面名称即可 比如 < a href=”index.html”> 首页 3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href=”#”),表示该链接暂时为一个空链接。 4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- href:超文本的引用,链接地址 -->
<a href="https://www.baidu.com">百度一下,你就知道</a>
<!-- ./:同级目录 -->
</br>
<a href="09.html-img.html">图片</a>
</br>
<a href="https://www.baidu.com" target="_blank">另起一个网页,到百度</a>
<a href="https://www.baidu.com" target="_self">本页面,到百度</a>
</br>
<!-- #不会刷新 -->
<a href="#">关于</a>
<a href="#">关于我们</a>
</body>
</html>
通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:
使用链接文本创建链接文本(被点击的元素)
<a href="#con">
使用相应的id名标注跳转目标的位置。 (找目标位置元素)
<p id="con">关于我们</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 锚点定位的目的:快速定位到本页面目标内容 -->
<!-- 1.设置a标签的href="#id名"
2.元素中设置id的属性id="#id名" -->
<a href="#home">首页</a>
<a href="#aboutus">关于我们</a>
<a href="#show">业务显示</a>
<a href="#contact">联系我们</a>
<p id="home">
get首页
</p>
<p id="aboutus">
get关于我们
</p>
<p id="show">
get业务显示
</p>
<p id="contact">
get联系我们
</p>
</body>
</html>
<head>
元素包含了所有的头部标签元素,使用link标签添加icon图标,meta标签添加网站相关信息。
添加icon图标
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
百度一下,你就知道
</body>
</html>
实体是浏览器用来替代特殊字符的一种编码,下表中列出了网页中常用的一些特殊字符。
最常用的字符实体
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格(不换行空格) | |   | |
空格(全角) |   |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
© | 版权 | © | © |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- :半角空格 -->
快 乐每一天!
<br/>
<!--   :全角空格 -->
努力 学习!
</br>
<!-- > :大于 < :小于 -->
<立大徳>
</br>
<!-- © :版权 -->
<div>
©版权问题
</div>
</body>
</html>
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。使用ctrl + / 或者 ctrl +shift + / 快捷键就可
<!-- 注释语句 -->
注意:注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。
1.双标签
由开始标签和结束标签组成的一对标签,它可以嵌套和承载内容。
<div>我是文字 </div>
2.单标签
指没有内容的标签,在开始标签中自动闭合。
<br />
标签的相互关系就分为两种:
1.嵌套关系
<head>
<title> </title>
</head>
2.并列关系
<head></head>
<body></body>
提示: 如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。如果是并列关系,最好上下对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- div和em是并且关系--兄弟
div和span:祖孙关系 腹肌关系
p和span:父子关系 -->
<div>
<p>
<span>
</span>
</p>
</div>
</body>
</html>
所谓标签语义化,就是指标签的含义,合适的地方给一个最为合理的标签。
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用 <ul> 标签
<ul> 是 unordered list 的缩写,表示无序列表。默认情况下,无序列表的每一项都使用实心圆符号表示;它有一个属性type,type属性值有disc(实心圆默认)、circle(空心圆)、square(实心正方形)、none(取消前缀)。
比如:我们把type="square"
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<!-- 无序列表-ul-li
注意:ul里只能嵌套li,li里面可以包裹任何内容-->
<li>包子</li>
<li>胡辣汤</li>
<li>油条</li>
<li>小米粥</li>
</ul>
<ul>
<li>小米粥
<ul>
<li>大米粥
<ul>
<li>八宝粥</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于
标签。每个列表项始于
列表项使用数字来标记。
<ol>:order list的缩写,表示有序列表。它为列表的每一项进行编号,默认的type类型是数字,且从数字1开始。它有两个属性:type和start。
一般<ol>与<li>配合使用,不建议在
中使用除了
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 有序列表 ol li -->
<ol type="I">
<li>美</li>
<li>好</li>
<li>的</li>
<li>一</li>
<li>天</li>
</ol>
</body>
</html>
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>:definition list的缩写,表示定义列表。<dl></dl>里面只能包含<dt>和<dd>。
<dt>:定义标题。<dt>和<dd>个数没有限制,通常是一个<dt>对应多个<dd>。
<dd>:definition description 的缩写,定义描述。定义描述一般是对定义标题的解释说明;但是自定义列表没有前缀,但有缩进。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- dl dt dd :自定义列表-->
<dl>
<dt>html标签</dt>
<dd>html</dd>
<dd>head</dd>
<dd>body</dd>
<dd>a</dd>
</dl>
</body>
</html>