HTML介绍
Web服务本质
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
HTML是什么？
- 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名： .html或.htm
HTML不是什么？
HTML是一种标记语言（markup language），它不是一种编程语言。
HTML使用标签来描述网页
HTML文档结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
- 通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签
<!DOCTYPE html>声明为HTML5文档
html标签
- 作用：用于告诉浏览器这是一个网页，也就是说告诉浏览器我是一个HTML文档
- 注意：其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间
head标签
- 作用：用于给网站添加一些配置信息
- 列如：外挂一些外部的css/js文件；添加一些浏览器适配相关的内容
- 注意：一般情况下，写在head标签内部的内容不会显示给用户查看，也就是说一般情况下写在head标签内部的内容我们都看不到
title标签
- 作用：专门用于指定网站的标题，并且这个指定的标题将来还会作为用户保存网站的默认标题
- 注意：title标签必须写在head标签里面
body标签
- 作用：专门用于定义HTML文档中需要显示给用户查看的内容（文字/图片/音频/视频）
- 注意：虽然说有时候将内容写到了别的地方在网页中也能看到，但是千万不要这么干，一定要将需要显示的内容写在body中；一对html标签中（一个html开始标签和一个html标签结束）只能有一对body标签
HTML标签
HTML标签格式
- HTML标签是有尖括号包围的关键字，如<html>,<div>等
- HTML标签通常是陈规定出现的，比如：<div>和</div>, 第一个标签是开始，第二个标签是结束。结束标签会有斜线。
- 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg"/>等。
- 标签里面可以有若干属性，也可以不带属性。
标签的语法
- <标签名 属性1="属性值1" 属性2="属性值2"......>内容部分</标签名>
- <标签名 属性1="属性值1" 属性2="属性值2"....../>
几个很重要的属性
- id：定义标签的唯一ID，HTML文档树中唯一
- class：为html元素定义一个或多个类名(classname)（CSS样式类名）
- style：规定元素的行内样式（CSS样式）
HTML标签分类
- 单标签：只有开始标签没有结束标签，也就是由一个<>组成的
<meta charset="UTF-8" />
- 双标签：有开始标签和结束标签，也就是由一个<>和一个</>组成的
<html> </html>
HTML标签关系分类
- 并列关系（兄弟/平级）
<head> </head> <body> </body>
- 嵌套关系（父子/上下级）
<head> <meta charset="UTF-8" /> <title>百度一下,你就知道123</title> </head>
HTML注释
<!--注释内容-->
注释是代码之母。
HTML常用标签
head内常用的标签
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
Meta标签
Meta标签介绍：
- <meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
- <meta>标签位于文档的头部，不包含任何内容。
- <meta>提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同网页的功能。
- http-equil属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">
- name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院">
body内常用的标签
基本标签(块级标签和内联标签)
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <!--p标签：段落标签，注意：在浏览器中会单独占一行--> <p>段落标签</p> <!--标题标签--> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线 分割线--> <hr>
特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
div标签和span标签
- div：div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
- span：span标签用来定义内联（行内）元素，并无实际的意义。主要是通过CSS样式为其赋予不同的表现。
div和span有什么区别?
- 1.div会单独的占领一行,而span不会单独占领一行
- 2.div是一个容器级的标签, 而span是一个文本级的标签
块级元素与行内元素的区别
所谓块级元素，是以另起一行开始渲染的元素，行内元素则不需要另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签。
img标签
- 作用：在网页上插入一张图片
- 格式：
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
- 属性：
属性名称 作用 src(source) 告诉浏览器需要 插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片alt(alternate) 规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本title 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示) height 设置图片显示的高度 width 设置图片显示的宽度 - 注意点：img标签添加的图片默认的不是占一整行空间；如果想让图片等比拉伸，只写高度或者宽度即可；如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示；如果img标签指定的宽高, 那么系统会按照指定的宽高来显示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img标签</title> </head> <body> <!-- 1.img标签中的img其实是英文image的缩写 所以img标签的作用, 就是告诉浏览器我们需要显示一张图片 2.img标签格式: <img src=""> 其实img标签中的src是英文source的缩写 所以img标签中的src就是用来告诉img标签, 需要显示的图片名称 3.注意点 - 和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行 - 如果我们手动指定了img标签显示的图片的宽度和高度, 有可能会导致图片变形, 那么如果又想指定宽度和高度, 又不想让图片变形. 我们可以只指定宽度和高度其中的一个值即可 - 只要指定了高度, 系统会自动根据高度计算出宽度, 只要指定了宽度, 系统会自动根据宽度计算出高度, 并且都是等比拉伸的, 也就是说不会变形 4.img中的其它属性 width: 宽度 height: 高度 所以在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高 如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示 如果img标签指定的宽高, 那么系统会按照指定的宽高来显示 title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容 alt其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容 --> <img src="images/QRCode.jpg"> <img src="images/QRCode.jpg" width="300" height="478"> <img src="images/QRCode.jpg" width="100" height="478"> <img src="images/QRCode.jpg" height="178"> <img src="images/QRCode.jpg" width="100"> <img src="images/QRCode.jpg" width="100" title="这个是图片"> <img src="images/QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了"> </body> </html>