一、html简介
1、html是什么
Html是用来描述网页的一种语言。
(1)HTML 指的是超文本标记语言 (Hyper Text Markup Language)
(2)HTML 不是一种编程语言,而是一种标记语言(markup language,标记语言是一套标记标签(markup tag));
(3)HTML 使用标记标签来描述网页
超文本 标记 语言
语言:
人与计算机交互的工具
超文本:
(1)普通文本不能实现的,超文本可以实现,能实现普通文本不能实现的功能
(2)包括超链接的文本
标记:
就是标签,不同的标签能实现不同的功能
2、html能做什么
html通过标签的形式将信息展示给用户
3、html书写规范
(1)html结构
<html>
<head>
包括资讯信息:整个页面的属性、指导浏览器解析的标签、引入外部文件的标签
</head>
<body>
我们需要展示的信息
</body>
</html>
(2)html标签是以尖括号包裹关键字成对出现的,有开始标签和结束标签,支持正确的嵌套
(3)大部分标签有属性 格式:属性=“属性值”(多个属性之间用空格隔开)
(4)空标签:功能比较单一 ,例如:<br></br> === <br/>
(5)html不区分大小写,建议使用小写
需求:写一段文字,将其中的部分文字变成红色,字号变大
<html>
<head></head>
<body>
我请大家吃狗不理包子,大家很高兴!!!
</body>
</html>
meta标签
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
常用属性:
content:定义与http-equiv或name属性相关的元信息
http-equiv:把content属性关联到HTTP头部
name:把content属性关联到一个名称。
二、html基本标签
1、文件标签(结构标签)
<html><html>:根标签
<head>
<title></title>:页面的标题
</head>
<body></body>:内容
属性:
text:文本的颜色
bgcolor:背景色
background:背景图片
2、排版标签
(1)注释标签:<!--注释-->
(2)换行标签:<br/>
(3)段落标签:<p>文本文字</p>
特点:段与段之间有空行
属性:
align:对齐方式(有三个属性值:left center right)
(4)水平线标签:<hr/>
属性:
width:长度
size:粗度
color:颜色
align:对齐方式
尺寸的写法:
(1)像素:10px
(2)百分比:占据副标签的百分比,会随着副标签的大小进行变化
3、块标签
<div></div>:行级块标签
<span></span>:行内块标签
作用:
(1)<div></div>:div+css布局
(2)<span></span>:进行友好提示
<span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
图像标签:<img />(自关闭标签)
BMP:优点(无损压缩,图质最好),缺点(文件太大,不利于网络传输)
GIF:优点(动画存储格式),缺点(最多256色,画质差)
PNG:优点(可保存透明背景的图片),缺点(画质中等)
JPG:优点(文件小,利于网络传输),缺点(画质损失)
属性:
Src=图形地址(绝对路径和相对路径)
src="file:///C:/Users/Administrator/Desktop/lesson/image/hetao.jpg"
Width=宽度
Height=高度
Align=对齐方式,代表图片与相邻的文本的相对位置(有三个属性值:top middle bottom)
Alt=图片的文字说明
Title=鼠标悬停显示的文字描述
链接标签:<a></a>
属性:
href:跳转页面地址
name:名称,锚点
target:_self(自己) _blank(新页面,之前的页面还有), 默认是_self
作用:
(1)页面跳转,注意:要调到外网必须要加协议
(2)访问锚点;回到锚点(顶部、底部、中间),在访问锚点时的书写格式:#name的值;
1页面间链接,A页面到B页面
2锚链接,A页甲位置到A页面已位置或者A页面甲位置到B页面乙位置
3功能性链接,如QQ,email
<a href="tencent://message/?uin=1175497943&Menu=yes">点击QQ咨询</a>
<a href="mailto:[email protected]">点击邮箱联系我们</a>
行内元素(inline)和块元素(block)
特征:
块元素,无论内容多少,该元素独占一行。如:p、h1等
行内元素:由内容来撑开宽度,左右都是行内元素的可以排在一行.如:strong、a、em等