[Java web编程]第2章 HTML与css网页开发基础(HTML基础)

版权声明:本文为博主自学期间所整理的文章,欢迎转载与分享,自学交流+V“zhangdonghui370” https://blog.csdn.net/sinat_34137390/article/details/81505010

 

一、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等

猜你喜欢

转载自blog.csdn.net/sinat_34137390/article/details/81505010