本文非新手向教程，不讲解具体标签，只记录部分重点内容……
文章目录
- 一、HTML示例代码
- 二、如何书写一个标准的HTML5.0 网页
- 三、HTML:HyperText Markup Language 超文本标记语言
- 四、Head头部
- 五、标签
-
- 5.1 标签类型
- 5.2 布局标签
- 六、文本类型标签 （h1重要文字）
- 七、 图像标签
-
- 7.1 标签属性:
- 7.2 图像类型
- 7.3 图像路径
一、HTML示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>我的第一个网页</title>
</head>
<body>
<p>Hello，World！</p>
</body>
</html>
二、如何书写一个标准的HTML5.0 网页
1:创建文件,文件后缀一定是 .html #.htm旧版本网页
2.文件第一行加一句声明
<!DOCTYPE html>
，文档类型声明，此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
3.中间基本结构
<html> #根标签,在文件中最外标签
<head></head> #网页头部标签:全局定义 编码
<body></body> #网页主体 :用户可见区域
</html>
4.书写完成，用浏览器运行网页
三、HTML:HyperText Markup Language 超文本标记语言
1.作用:创建网页并且添加网页内容
2.HTML标准与历史
1995 HTML广泛使用 HTML1.0 2.0 3.0 4.0 XHTML1.0 HTML5.0
#HTM5与以前版本区别:严格
示例:
HTML4.0
<br> <BR> <Br> <br />
松散
HTML5.0
<br>
四、Head头部
头部标签:定义全局标签功能
-
<title></title>
标题:中间文字显示在浏览器标签左上角
#通常:保存网站名称
-
<meta charset="utf-8">
指定网页显示编码
#唯一 utf-8
-
<meta name="description" content="">
description="学子商城是WEB前端教学性网站,功能完备...."
-
<meta name="keywords" content="">
keywords="笔记本,PAD,手机"
-
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
#了解即可:只针对于IE浏览器识别使用
#指定IE浏览器-请使用最新内核来渲染网页
#IE6;IE7(IE6;IE7);IE8[6;7;8];IE11[6,7,8,9,10,11]
五、标签
HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
HTML 标签由开始标签和结束标签组成，某些 HTML 元素没有结束标签，比如
(1)单标记 <关键字>
示例:
<br>
<input type="text">
(2)双标记 ：必须成对出现 <关键字></关键字>
<form></form>
<div></div>
5.1 标签类型
| 块级标签 | 行内标签 | 行内块标签 |
|---|---|---|
| | |
| 单独成行,排列从上向下 | 与其它的行内标签，共用一行，一行放不下换行 | 与其它的行内标签共用一行，一行放不下换行 |
| / | 指定:宽度高度无效 | 可以指定宽度高度 |
5.2 布局标签
(1)
<div></div>
块级元素:区域 作用：设计网页布局
(2)
<span></span>
文本标签(一行)，内联元素，可用作文本的容器， 一行
(3)
<p></p>
段落，多行文本。单独成行,上下方向有垂直间距
<p>
特点
- 文本在一个段落中根据浏览器宽度自动换行
- 段落与段落之间有空隙
- 如果希望在文本中强制换行使用
六、文本类型标签 （h1重要文字）
#此类标签中间的内容是文本字符串
`<h1>标题..</h1><h2>标题..</h2>..<h6></h6> `
功能:
- 字体大小变化 ：h1最大 h6最小 ，文本加粗
- 单独成行 ，上下有垂直间距
-
h1保存当前网页中最重要的文字 “网站名称”
要求:一个网页只能使用一次 h1 #百度搜索引擎建议
七、 图像标签
在网页中
<img>
标签来定义网页中图像
7.1 标签属性:
| 属性 | 说明 |
|---|---|
| src | 必须添加属性,用于指定图像文件的路径和文件名 |
| width | 图像宽度 |
| height | 图像高度 |
| title | 提示文本,当鼠标移动到图像上显示文本内容 |
| alt | 替换文本,当图像不能正确显示时出现文本 |
为防止图片变形，只设置width改变大小即可
常见错误
原因1:图像名称拼写错误，但是图像存在
原因2:图象名称正确，但图像不存在
7.2 图像类型
- jpg/jpeg 色彩丰富/不支持动画， 透明 照片
- png 色彩比较丰富/透明 图标，按钮
- gif 色彩差/支持动画 小动态图
- webp 谷歌2015，有以上优点，小50% 兼容性差
7.3 图像路径
（1）相对路径
- 兄弟路径 #直接图片名称 src = “1.jpg”
HTML基础概念——head头部，及标签（文本、图像类型）一、HTML示例代码二、如何书写一个标准的HTML5.0 网页三、HTML:HyperText Markup Language 超文本标记语言四、Head头部五、标签六、文本类型标签 （h1重要文字）七、 图像标签 - 子目录路径 #文件夹/图片名称 src = “img/1.jpg”
HTML基础概念——head头部，及标签（文本、图像类型）一、HTML示例代码二、如何书写一个标准的HTML5.0 网页三、HTML:HyperText Markup Language 超文本标记语言四、Head头部五、标签六、文本类型标签 （h1重要文字）七、 图像标签 - 父目录路径 #先返回上一级目录“./” src = “./1.jpg”
HTML基础概念——head头部，及标签（文本、图像类型）一、HTML示例代码二、如何书写一个标准的HTML5.0 网页三、HTML:HyperText Markup Language 超文本标记语言四、Head头部五、标签六、文本类型标签 （h1重要文字）七、 图像标签
（2）绝对路径
-
网络：以http https开头
src = “https://www.baidu.com/img/PC_bdfdce6f6e5f722db0aabdf32d01a03a.gif”