6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

html笔记01-html基本概念

2022-04-14 1 108 web前端社区

6.jpg 0 前端程序猿

html笔记01-html基本概念

HTML简介

HTML 是网页使用的语言,定义了网页的结构和内容。浏览器访问网站,其实就是从服务器下载 HTML 代码,然后渲染出网页。

HTML 的全名是“超文本标记语言”(HyperText Markup Language),蒂姆·伯纳斯-李(Tim Berners-Lee)发明。它的最大特点就是支持超链接,点击链接就可以跳转到其他网页,从而构成了整个互联网。

1999年,HTML 4.01 版发布,成为广泛接受的 HTML 标准。2014年,HTML 5 发布,这是目前正在使用的版本。

浏览器的网页开发,涉及三种技术:HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容,CSS 样式表定义网页的样式,JavaScript 语言定义网页与用户的互动行为。HTML 语言是网页开发的基础,CSS 和 JavaScript 都是基于 HTML 才能生效,即使没有这两者,HTML 本身也能使用,可以完成基本的内容展示。本教程只介绍 HTML 语言。

文件后缀名

html网页文件以 .html 或.htm结尾,两种后缀名没有区别,都可以使用

网页的基本结构

  1. <!doctype html> 声明html5.0版本
  2. <html lang="zh"> //网页的根元素,lang是告诉浏览器或者搜索引擎网页内容的格式(zh是中文,en是英文)
  3. <head> 网页的头部,主要是给浏览器的信息,头部的内容除了title以外,其他都是用户看不见的。
  4. <title>第1个网页</title> 网页的标题
  5. <meta charset="uft-8" > 元数据,设置网页的编码,告诉浏览器用对应的编码渲染html内容
  6. </head>
  7. <body> 身体部分,所有用户可见内容都是写在这里
  8. 我是一个html网页
  9. </body>
  10. </html>

记事本创建

创建一个.txt的记事本文件,把后缀名改为.html,输入网页基本结构,就是一个网页文件。

网站的基本目录结构


标签: html的标记是放在<>里面,一般放在<>里面的叫标签。

元素: 标签包裹起来的内容也可以叫元素

块级元素

独占一行,内容没有把一行占完,但是块级元素会占满整行。后面给内容会被换行

行内元素(内联元素)

不会独占一行,内容的宽高就是元素的宽高。

标签嵌套规则: 块级元素可以嵌套块级元素和行内元素,行内元素不能嵌套块级元素。

html的空格和换行: html是有自己的处理规则,标签内容开始和结束的空格和换行会被忽略,内容之间的会被缩减为1个空格。

注释: <!-- --> 浏览器不会渲染出来,主要是给编程人员看的。

自闭合标签和一般标签的区别

  1. 一般标签成对出现,中间可以插入别的标签或者内容。
  2. 自闭合标签单个出现,只能定义一些属性,不能插入别的标签或者内容

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

通常 一个 HTML 元素包含了开始标签与结束标签,

<p>hello world</p> 整个这一段叫p元素

块级元素,行内元素

所有元素可以分成两大类:块级元素(block)和行内元素(inline)。

块级元素默认占据一个独立的区域,在网页上会自动另起一行,占据 100% 的宽度。

  1. <p>hello</p>

p元素是块级元素,因此浏览器会将内容分成两行显示。

  1. <span>hello</span>

行内元素默认与其他元素在同一行,不产生换行。如span就是行内元素,通常用来为某些文字指定特别的样式。

span元素是行内元素,因此浏览器会将两行内容放在一行显示。

属性


属性(attribute)是标签的额外信息,使用空格与标签名和其他属性分隔。

  1. <img src="a1.jpg" width="100">

<img>标签有两个属性:srcwidth

属性可以用等号指定属性值,比如上例的a1.jpg就是src的属性值。属性值一般放在双引号里面,这不是必需的,但推荐总是使用双引号。

注意,属性名是大小写不敏感的,onclickonClick是同一个属性。

空格和换行

HTML 语言有自己的空格处理规则。标签内容的头部和尾部的空格,一律忽略不计。

  1. <p> hello world </p>

hello前面的空格和world后面的空格,浏览器一律忽略不计。

标签内容里面的多个连续空格(包含制表符\t),会被浏览器合并成一个。

  1. <p>hello world</p>

helloworld之间有多个连续空格,浏览器会将它们合并成一个。网页渲染的结果是,helloworld之间只有一个空格。

  1. <p>hello
  2. world
  3. </p>

浏览器还会将文本里面的换行符(\n)和回车符(\r),替换成空格。

helloworld之间有多个换行,浏览器会将它们替换成空格,然后再将多个空格合并成一个。网页渲染的结果是,helloworld之间有一个空格。

HTML 源码里面的换行,不会产生换行效果。

注释

HTML 代码可以包含注释,浏览器会自动忽略注释。注释以<!--开头,以-->结尾。

  1. <!-- 这是一个注释 -->

注释可以是多行的,并且内部的 HTML 都不再生效了。

  1. <!--
  2. <p>hello world</p>
  3. -->

上面代码是一个注释的区块,内部的代码都是无效的,浏览器不会解析,更不会渲染它们。

注释有助于理解代码的含义,复杂的代码块前面最好加上注释。

URL 介绍


域名是ip地址的别名(小名)。

127.0.0.1(是保留地址) 是代表本地电脑 ——->对应本地域名就是localhost

URL 是“统一资源定位符”(Uniform Resource Locator)的首字母缩写,中文译为“网址”,表示各种资源的互联网地址。下面就是一个典型的 URL。

  1. https://www.baidu.com/path/index.html

所谓资源,可以简单理解成各种可以通过互联网访问的文件,比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL,才能在互联网上获取它们。

只要资源可以通过互联网访问,它就必然有对应的 URL。一个 URL 对应一个资源,但是同一个资源可能对应多个 URL。

URL 是互联网的基础。互联网之所以“互联”,就是因为网页可以通过“链接”(link),包含其他 URL。用户只要点击,就可以从一个 URL 跳转到另一个 URL,前往不同的网站。

网址的组成部分

URL 由多个部分组成。下面是一个比较复杂的 URL,实际的 URL 通常不会有这么多部分。

  1. https://www.baidu.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor

我们看看,这个 URL 的各个部分。

协议

协议(scheme)是浏览器请求服务器资源的方法,上例是https://的部分,表示使用 HTTPS 协议。

互联网支持多种协议,必须指明网址使用哪一种协议,默认是 HTTP 协议。也就是说,如果省略协议,直接在浏览器地址栏输入www.baidu.com,那么浏览器默认会访问http://www.baidu.com。HTTPS 是 HTTP 的加密版本,出于安全考虑,越来越多的网站使用这个协议。

HTTP 和 HTTPS 的协议名称后面,紧跟着一个冒号和两个斜杠(://)。其他协议不一定如此,邮件地址协议mailto:的协议名后面只有一个冒号,比如mailto:test@baidu.com

主机

主机(host)是资源所在的网站名或服务器的名字,又称为域名。上例的主机是www.baidu.com

有些主机没有域名,只有 IP 地址,比如192.168.2.15。这种情况常常出现在局域网。

端口

同一个域名下面可能同时包含多个网站,它们之间通过端口(port)区分。“端口”就是一个整数,可以简单理解成,访问者告诉服务器,想要访问哪一个网站。HTTP 协议的默认端口是80,如果省略了这个参数,服务器就会返回80端口的网站。

端口紧跟在域名后面,两者之间使用冒号分隔,比如www.baidu.com:80

路径

路径(path)是资源在网站的位置。比如,/path/index.html这个路径,指向网站的/path子目录下面的网页文件index.html

互联网的早期,路径是真实存在的物理位置。现在由于服务器可以模拟这些位置,所以路径只是虚拟位置。

路径可能只包含目录,不包含文件名,比如/test/,甚至结尾的斜杠都可以省略。这时,服务器通常会默认跳转到该目录里面的index.html文件(即等同于请求/test/index.html),但也可能有其他的处理(比如列出目录里面的所有文件),这取决于服务器的设置。一般来说,访问www.baidu.com这个网址,很可能返回的是网页文件www.baidu.com/index.html

查询参数

查询参数(parameter)是提供给服务器的额外信息。参数的位置是在路径后面,两者之间使用?分隔,上例是?key1=value1&key2=value2

查询参数可以有一组或多组。每组参数都是键值对(key-value pair)的形式,同时具有键名(key)和键值(value),它们之间使用等号(=)连接。比如,key1=value就是一个键值对,key1是键名,value1是键值。

多组参数之间使用&连接,比如key1=value1&key2=value2

1

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3