HTML的基础框架（一）

心已赠人 2023-06-28 06:25 9阅读 0赞

**[HTML的基础框架（一）：][HTML]  
https://blog.csdn.net/Veer\_c/article/details/103882385  
[HTML的基础框架（二）：][HTML 1]  
https://blog.csdn.net/Veer\_c/article/details/103882684**

## HTML入门 ##

## HTML:超文本标记语言 ##

## 英语:Hyper Text Markup Language ##

**软件结构分类：**  
1.C-S结构（Client - Server 客户端-服务器端）  
典型应用：飞秋、QQ……  
特点：  
必须安装特定的客户端程序  
服务器软件升级，客户端的软件同步升级！

2.B-S结构（Broswer-Server 浏览器-服务器端）  
典型应用：163网站，华育官网，游戏官网……  
特点：  
不需要特定的客户（只需要浏览器软件）  
服务器软件升级，浏览器客户端不需要升级！  
结论： java就业班开发的软件，大部分都是基于BS结构的！  
网站：服务器端的软件都是基于bs结构的，这个软件俗称叫“网站”。网站是由网页组成。一个网页就是由html页面组成，html是一门网页制作的语言。

**html语言**  
html是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。  
html语言由标记组成。学习html语言，掌握一些常用的标记即可！  
**超级文本（写一个简单的超文本演示效果）**  
文字变色  
文字大小变化  
显示图片  
………  
这些超级文本通过标记实现效果的。

**基本标签：**  
1.–html开始标签

//– 文件头（用户在浏览器的主体是看不到的）
 </head> 
 <body> --文件体（用户在浏览器的主体看得到）
 </body>

2.–html结束标签  
head文件头  
作用：告诉浏览器如何解释该html页面

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
 
 <meta name="keywords" content="java培训,net培训,php培训" />
 
 <meta name="description" content="这是一家专门做IT职业培训的公司"/>

**文本标签(body里面的标签)**  
标题(h1~h6) align：设置位置  
水平线(hr) color：线的颜色  
换行(br)  
标签规定粗体文本(b)  
将文本以斜体显示(i)  
将文本以下划线显示(u)  
段落§(书写两段小说进行演示)  
段落缩进(blockquote)(主要用于解释或者强调)  
上下标(sup和sub)(一般用于公式)y=x2 H2O CaCo3  
原样输出(pre)(希望网页上的东西和代码里面写的样式完全一样的时候(写一首诗，写一段代码))  
**marquee:**  
behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动  
bgcolor:字幕背景颜色  
direction:设置字幕的滚动方向down right left up

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>文本标签</title>
 </head>
 
 <body>
 
 <h1 align="center">标题1</h1>
 <h2 align="center">标题2</h2>
 <h3 align="center">标题3</h3>
 <h4 align="center">标题4</h4>
 <h5 align="center">标题5</h5>
 <h6 align="center">标题6</h6>
 
 <hr color="#669999" />
 我是b标签 
 我是i标签 
 我是u标签 
 
 这是小说的第一个段这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落落
 
 
 
 这是小说的第二个段落这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段
 
 
 <blockquote>
 解释说明上述文解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字字
 </blockquote>
 <hr />
 y=x2 
 H2O 
 CaCO3 
 <hr />
 <pre>
 好雨知时节，当春乃发生。
 随风潜入夜，润物细无声。
 野径云俱黑，江船火独明。
 晓看红湿处，花重锦官城。
 </pre>
 <marquee behavior="slide" bgcolor="#FF0000" direction="down">刘备</marquee>
 <bgsound src="" loop="-1" />
 
 <ol type="A">
 <li>章子怡</li>
 <li>刘亦菲</li>
 <li>贾玲</li>
 </ol>
 <hr />
 <ul type="circle">
 <li>章子怡</li>
 <li>刘亦菲</li>
 <li>贾玲</li>
 </ul>
 <hr />
 <dl>
 <dt>财务总监</dt>
 <dd>财务专员1</dd>
 <dd>财务专员2</dd>
 <dd>财务专员3</dd>
 <dt>技术总监</dt>
 <dd>程序员1</dd>
 <dd>程序员2</dd>
 <dd>程序员3</dd>
 </dl>
 <hr />
 <select>
 <option>陕西</option>
 <option>四川</option>
 <option>广东</option>
 </select>
 <hr />
 我是sapn标签
 <div>我是div标签</div>
 </body>

**bgsound**:  
src:需要播放的音乐路径  
loop=-1(无限循环)  
autostart=”true”自动播放

**列表标签：**  
有序列表ol li（type属性更改序号类型，案例：投票喜欢的女明星）  
无序列表ul li（用于条目的罗列，type属性更改序号类型，案例：学生管理系统）  
项目列表标签(dl dt dd)（一般用于有层次结构的列表，一个公司员工的列表）  
下拉选项：  
行内标签(span) (html中用的非常少，css中用的非常多)  
块标签  
(html中用的非常少，css中用的非常多)

<body>
 
 <a name="top"></a>
 <a href="http://www.baidu.com" target="_blank">超链接</a> 
 <a href="thunder://www.movie.com/shujiaoba.avi">摔跤吧爸爸_迅雷专用通道</a>
 <a href="mailto:12345@qq.com">发送邮件</a>
 <a href="#content1">第一章节</a>
 
 
 <a name="content1"></a>
 小说第一个章节的内容小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的
 <a href="#top">回到顶部</a>
 </body>

**超链接标签：**

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 </head>
 <body>
 
 <a name="top"></a>
 <a href="http://www.baidu.com" target="_blank">超链接</a> 
 <a href="thunder://www.movie.com/shujiaoba.avi">摔跤吧爸爸_迅雷专用通道</a>
 <a href="mailto:12345@qq.com">发送邮件</a>
 <a href="#content1">第一章节</a>
 
 <a name="content1"></a>
 小说第一个章节的内容小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的
 <a href="#top">回到顶部</a>
 </body>

[HTML]: https://blog.csdn.net/Veer_c/article/details/103882385
[HTML 1]: https://blog.csdn.net/Veer_c/article/details/103882684