HTML的基础框架（一）-蒲公英云

HTML的基础框架（一）：
https://blog.csdn.net/Veer\_c/article/details/103882385
HTML的基础框架（二）：
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页面

<!-- html注释  -->
<!-- 作用：告诉浏览器如何解释该html页面 -->
<!-- 标题 ：在窗口的标题栏看到-->
<!-- 告诉浏览器使用什么码表解释html文件 --> 
<!-- 
    html标签分类：
        有标签体标签：有开始，有结束标签、 <title></title>
        没有标签体标签 ： 也叫空标签 <meat  />
-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!-- 关键词：keywords
    搜索引擎： 百度    输入  java培训
    网页的排名  推广 SEO
              SEO优化
            关键词是网页排名的一个因素。
100% 权重  50%  33.3.%  （3-5个合适）
    -->
<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>我是b标签</b><br />
<i>我是i标签</i><br />
<u>我是u标签</u><br />
<p>
这是小说的第一个段这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落落
</p>
<p>
这是小说的第二个段落这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段
</p>
<blockquote>
解释说明上述文解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字字
</blockquote>
<hr />
y=x<sup>2</sup><br />
H<sub>2</sub>O<br />
CaCO<sub>3</sub><br />
<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 />
<span>我是sapn标签</span>
<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></a>
两个属性：href:设置这个超链接需要连接到的资源
        target:设置打开资源的方式
超链接 ：默认的协议为file://
协议：
    file:// 本地文件协议
    http:// 网络上我们一般请求都使用的是http://，这个协议是基于请求和相应的
    thunder:// 迅雷下载协议
    mailto:  发送邮件的协议
协议的执行流程：
thunder://www.movie.com/shujiaoba.avi：会将这个超链接分为两个部分，
一个是资源地址，一个协议名称，因为我们在安装每一个软件的时候，每一个软件都会在
我们的注册表中注册相应的协议，找你的注册表中有哪些软件注册了该协议，那个软件注册了
，就会打开那个软件
http://协议的执行流程：
     看图
超链接的两个作用：
1：链接到你想要连接的资源
2：打锚点<a name="锚点名称"></a>,你想去哪里就给哪里打锚点
   如何去到锚点处：<a href="#锚点名称">去到锚点处</a>    
-->
<a name="top"></a>
<a href="http://www.baidu.com" target="_blank">超链接</a><br />
<a href="thunder://www.movie.com/shujiaoba.avi">摔跤吧爸爸_迅雷专用通道</a>
<a href="mailto:12345@qq.com">发送邮件</a>
<a href="#content1">第一章节</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<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></a>
两个属性：href:设置这个超链接需要连接到的资源
        target:设置打开资源的方式
超链接 ：默认的协议为file://
协议：
    file:// 本地文件协议
    http:// 网络上我们一般请求都使用的是http://，这个协议是基于请求和相应的
    thunder:// 迅雷下载协议
    mailto:  发送邮件的协议
协议的执行流程：
thunder://www.movie.com/shujiaoba.avi：会将这个超链接分为两个部分，
一个是资源地址，一个协议名称，因为我们在安装每一个软件的时候，每一个软件都会在
我们的注册表中注册相应的协议，找你的注册表中有哪些软件注册了该协议，那个软件注册了
，就会打开那个软件
http://协议的执行流程：
     看图
超链接的两个作用：
1：链接到你想要连接的资源
2：打锚点<a name="锚点名称"></a>,你想去哪里就给哪里打锚点
   如何去到锚点处：<a href="#锚点名称">去到锚点处</a>    
-->
<a name="top"></a>
<a href="http://www.baidu.com" target="_blank">超链接</a><br />
<a href="thunder://www.movie.com/shujiaoba.avi">摔跤吧爸爸_迅雷专用通道</a>
<a href="mailto:12345@qq.com">发送邮件</a>
<a href="#content1">第一章节</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="content1"></a>
小说第一个章节的内容小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的
<a href="#top">回到顶部</a>
</body>