JavaWeb入门-HTML和CSS3

最新推荐文章于 2023-05-11 23:32:19 发布

Ayin的学习笔记

最新推荐文章于 2023-05-11 23:32:19 发布

阅读量388

点赞数

分类专栏：笔记文章标签： css3 html

本文链接：https://blog.csdn.net/AyinMars/article/details/120855547

版权

网页的组成部分页面一共由三个部分组成，分别是内容（结构）、表现、行为。内容（结构）是我们在页面中可以看到的数据，我们称之为内容，一般用HTML来实现。表现，指的是这些内容在页面上的表现形式，比如说：颜色、布局、大小等等，一般用CSS实现。行为，指的是页面元素中与输入设备交互的响应，一般使用JavaScript实现。HTMLHTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTM

摘要由CSDN通过智能技术生成

网页的组成部分

页面一共由三个部分组成，分别是内容（结构）、表现、行为。

内容（结构）是我们在页面中可以看到的数据，我们称之为内容，一般用HTML来实现。

表现，指的是这些内容在页面上的表现形式，比如说：颜色、布局、大小等等，一般用CSS实现。

行为，指的是页面元素中与输入设备交互的响应，一般使用JavaScript实现。

HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

创建一个HTML文件

<!--  注释！！！ -->
<!-- DOCTYPE:  使用规范 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--  meta标签一般用来做SEO  -->
    <meta charset="UTF-8">
    <meta name="keyworlds" content="好好学习，天天向上。">
    <meta name="description" content="Java是世界上最好的语言">
    <!-- 网页标题标签 -->
    <title>Title</title>
</head>
<!-- body标签代表网页主体 -->
<body>
    <font color="red">Hello World！</font>
</body>
</html>

上述代码实例中，html标签表示HTML的开始，lang="zh_CN"表示中文！head标签代表网页头部，meta描述性标签，用于描述网站的一些信息，body标签代表网页主体。

可以看到HTML的代码是由一个个标签来组成的，标签的格式为两个尖括号：<标签名>封装的数据</标签名>，标签名大小写不敏感，且拥有自己的属性，分为基本属性和事件属性，基本属性就是简单的样式修改，事件属性就是可以直接设置时间响应后的代码，在分类上，也可以具体分为单标签和双标签！

常用标签

字体标签

<font> 规定文本的字体、字体尺寸、字体颜色。

color：规定字体颜色
size：规定字体大小
face：规定字体样式

<font size="3" color="red">字体大小为3，字体颜色为红色</font>
<font size="2" color="blue">字体大小为2，字体颜色为蓝色</font>
<font face="黑体" color="green">字体样式为黑体，字体颜色为绿色</font>

标题标签

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

align：规定标题对齐样式
- left：左对齐（默认值）
- right：右对齐
- center：居中

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

超链接

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

<a href="https://www.baidu.com/">百度</a>

href：规定链接指向的页面的URL
shape：规定链接的形状（HTML5中不支持）
target：规定如何打开链接文档
- _blank：新标签页打开链接文档

页面内跳转：

在很多页面中，可以点击页面的某个部位，就可以迅速回到页面的顶部或者底部，在绝大多数的长页面中，该功能都是十分常用的！

<p name="top"></p>
<!-- 
 ......
 -->	
<a href="#top">回到顶部</a>

图片链接：

点击图片跳转指定的页面！

title：设置鼠标悬停在图片时显示的文本

<a href=https://www.baidu.com/" target="_blank">
    <img src="1.jpg" alt="图片链接" title="点击跳转" height="600" width="400">
</a>

列表标签

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于<ul> 标签。每个列表项始于<li>。

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

最低0.47元/天解锁文章

Ayin的学习笔记

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb入门-HTML和CSS3

网页的组成部分页面一共由三个部分组成，分别是内容（结构）、表现、行为。内容（结构）是我们在页面中可以看到的数据，我们称之为内容，一般用HTML来实现。表现，指的是这些内容在页面上的表现形式，比如说：颜色、布局、大小等等，一般用CSS实现。行为，指的是页面元素中与输入设备交互的响应，一般使用JavaScript实现。HTMLHTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTM
复制链接

扫一扫