[Java Web]一篇文章由浅入深地带你入门HTML

最新推荐文章于 2022-07-14 11:05:06 发布

久忆凉

最新推荐文章于 2022-07-14 11:05:06 发布

阅读量530

点赞数

本文为博主原创文章，转载时务必注明其出处。

本文链接：https://blog.csdn.net/Honeycomb_1/article/details/106046518

版权

1.浅谈B/S结构与C/S结构

1.1 C/S结构

Client/Server，即客户端/服务器模式。在用户本地有一个客户端程序，在远程有一个服务器端程序.
在这里插入图片描述

优点：

1.C/S架构的界面和和操作可以很丰富
2.安全性能可以很容易保证
3.只有一层交互，响应速度较快

缺点：

1.适用面窄，通常用于局域网中。
2.用户群固定。。由于程序需要安装才可使用，因此不适合面向一些不可知的用户。
维护成本高，发生一次升级，则所有客户端的程序都需要改变。

1.2 B/S结构

Brower/Server，即浏览器/服务器模式。只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序。
在这里插入图片描述

优点：

1.客户端无需安装，有Web浏览器即可
2.直接放广域网上，通过一定的权限实现多客户访问的目的，交互性较强。
3.无需升级客户端，升级服务器即可

缺点：

1.对硬件要求高
2.应用过大，可能会影响用户的体验

B/S架构中的资源分类：
（1）静态资源：使用静态网页开发技术发布的资源，所有用户访问，得到的结果是一样的，如：文本，图片…(HTML,CSS,JavaScript)
（2）动态资源：使用动态网页及时发布的资源，所有用户访问，得到的结果可能不一样。如：jsp/servlet，php，asp…如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

2.HTML、XHTML和HTML5的区别

HTML： Hyper Text Markup Language 超文本标记语言.，是构成网页文档的主要语言
XHTML： EXtensible HyperText Mark-up Language扩展的超文本标记语言，称为更严格、更纯净的HTML。
相较于HTML，XHTML主要区别：
（1） XHTML标签必须闭合,而HTML不一定要闭合，如：

<p>段落</p>
<br>换行<br/>

（2）XHTML标签以及属性必须小写，而HTML中可大可小：

<body><div></div></body>

（3）XHTML标签属性必须用引号，而HTML中可以没有。

<input id="txt" type="text"/>

（4）XHTML标签id属性代替name属性：

<div id="wrapper"></div>

HTML5： 指的是下一代的HTML，也是HTML4.01的升级版。
（1）相对于XHTML，文档类型被简化为了
（2）标签不再区分大小写
（3）允许属性值不加引号
（4）允许部分属性的属性值省略

3.HTML入门

Hyper Text Markup Language 超文本标记语言，HTML被称为前端中的网页结构，CSS是网页的外观，JavaScript是网页的行为，而CSS和JavaScript用来修饰结构。HTML的精髓就在于标签的语义，在HTML中，大部分标签都有它自身的语义。如p：表示段落（paragraph）,h1：最高级标题（header1）。由于div可以代替p，但div和span是无语义的标签，在程序中，我们应该优先使用其他有语义的标签，为了提高程序的可读性。

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：不是编程语言，是由标签构成的语言。
编写HTML文件最基本模板如下：

注意：在HTML中，标签分为两种：
1.一般标签：有开始符号和结束符号，可以在内部插入其他标签或文字，如 body标签
2.自闭合标签：只有开始符号（自带结束标志）而没有结束符号，不可以在内部插入标签或文字，如meta标签

3.1 文本标签

head：
其中meta标签的自动刷新功能为：

<meta http-equiv="refresh" content = "6";url="http://baidu.com"/>
<!--注释：6秒后自动跳转到特定网址-->

body：网页的“身体”
也就是页面常见的组成元素如下：

3.2 图片标签

在HTML中，我们可以使用img标签来显示一张图片

<img src="图片路径" alt="图片无法显示时提示文字" title="图片提示文字" />

在HTML中，图片的路径分为两种：

注意：这里面的路径斜杆是向右倾斜的（/），平时我们所说的文件路径是向左倾斜的（\ ）

绝对路径：计算机文件夹上方所显示的一个路径，最详细路径，在图片的绝对路径下图片是显示不了的。
相对路径：

<img src="" alt="找不到路径" title="图片">

在这里插入图片描述
相对路径又分两种情况：

情况一：

<img src="../image/img1.jpg" alt="找不到路径" title="图片">

<!--
../:指的是上一级目录
-->

在这里插入图片描述

情况二：

<img src="../img1.jpg" alt="找不到路径" title="图片">
-->

在这里插入图片描述
运行结果：鼠标放在图片上就会显示“图片”文字：

图片格式
- 位图：也叫像素图，由像素点组成的图片，放大缩小图片都会使图片失真，适用于展示色彩丰富地图片
  最常见的位图图片格式有三种：jpg（jpeg）、png、gif，其区别为：
  （1）jpg格式：可以很好地处理大面积色调地图片，适合存储颜色丰富地复杂图片，如照片、高清图片。不支持保存透明背景
  （2）png格式：无损格式，可以无损压缩以保证页面打开速度。支持保存透明背景，不适合存储颜色丰富地图片
  （3）gif格式：图片效果最差，适合制作动画。
- 矢量图：又叫向量图，是以一种数学描述地方式开记录内容地图片格式。其常见格式有：ai、cdr、fh、swf。放大缩小图片都不会使图片失真，不适用展示色彩丰富地图片。

3.3 链接标签

在HTML中，可以用a标签来实现超链接。

<a href="链接地址">链接名称</a>

href表示我们想要跳到地那个页面的路径，可以是相对路径，也可以是绝对路径。
超链接可以分为两种：内部链接和外部链接

外部链接：文本超链接和图片超链接，指向的是外部网站的页面。

<a href="http://www.baidu.com">文本超链接</a>

<a href="http://www.baidu.com"><img src="../image/img1.jpg" alt="图片超链接"></a>

另外，a标签中的target属性代表链接打开模式，它的属性取值有四种：_self（默认原来窗口打开）、_blank（新窗口打开）、_parent（父窗口打开）、_top（顶层窗口打开）。

内部链接：指向我们自身的网站的页面
锚点链接：是内部链接的一种，链接地址指向当前页面的某个部分，比如我们CSDN博客那个生成目录点击我们想要跳到的部分

注意：如果当前点击的内容，不显示在当前我们看到的页面才会跳转。

在这里插入图片描述
下面代码省略了…：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
     <div>
         <a href="#article">推荐文章系列</a>
         <a href="#music">推荐音乐系列</a>
         <a href="#movie">推荐电影系列</a>
     </div>
     
     <div id="article">
         <h3>推荐文章系列</h3>
     </div>
   
     <div id="music">
         <h3>推荐音乐系列</h3>
     </div>
     
     <div id="movie">
         <h3>推荐电影系列</h3>
     </div>
</body>
</html>

3.4 列表标签

列表是网页中最常用的一种数据排列方式，分为三种：有序列表、无序列表和定义列表。在HTML5中已废除了菜单列表menu和目录列表dir。

有序（order）列表
默认数字序号的有序列表：

<ol>
          <li>李白</li>
          <li>苏烈</li>
          <li>貂蝉</li>
</ol>

在这里插入图片描述
指定序号类型的无序列表：

<ol type="i">
          <li>李白</li>
          <li>苏烈</li>
          <li>貂蝉</li>
</ol>

在这里插入图片描述

无序（unorder）列表
默认实心圆的无序列表：

<ul>
          <li>李白</li>
          <li>苏烈</li>
          <li>貂蝉</li>
</ul>

在这里插入图片描述
用特殊符号表示列表项符号的无序列表：

<ul type="disc">
          <li>李白</li>
          <li>苏烈</li>
          <li>貂蝉</li>
      </ul>
      <br/>
      <ul type="circle">
          <li>李白</li>
          <li>苏烈</li>
          <li>貂蝉</li>
      </ul>
      <br/>
      <ul type="square">
          <li>李白</li>
          <li>苏烈</li>
          <li>貂蝉</li>
      </ul>

在这里插入图片描述

定义列表（definition list）：在HTML中，定义列表由两部分组成：定义名词（definition term）和定义描述（definition description）。

<dl>
    <dt>HTML</dt>
    <dd>制作网页的标准语言，控制网页的结构</dd>
    <dt>CSS</dt>
    <dd>层叠式表，控制网页的样式</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言，控制网页的行为</dd>
</dl>

3.5 表格标签

在HTML中，一个表格一般由三各部分组成：table标签、tr（table row表行）标签、td（table data cell表单元格）标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page1</title>
</head>
<body>
   <table border="1" bgcolor="#7fffd4" width="50%"cellpadding="0" cellspacing="0">
   <!--
      border取值是是否添加边框
      align属性是对齐方式
   -->
       <caption>表格标题</caption>
       <tr>
           <th>姓名</th>
           <th>语文</th>
           <th>数学</th>
           <th>英语</th>
       </tr>
       <tr>
           <td>小明</td>
           <td>80</td>
           <td>90</td>
           <td>100</td>
       </tr>
       <tr>
           <td>小红</td>
           <td>80</td>
           <td>80</td>
           <td>100</td>
       </tr>
       <tr>
           <td>小方</td>
           <td>90</td>
           <td>90</td>
           <td>100</td>
       </tr>
   </table>
</body>
</html>

在这里插入图片描述

颜色的表示方法有三种，如黑色：black、#000000、rgb(0,0,0)
宽度与高度大小的表示单位：px（像素）、%（占属性的百分比，如width=50%，宽度的50%）、rem（与根元素相关）、em（与元素字号相关）、ex（与元素字体的x高度相关）
字体的表示单位：pt（点）、pc（派卡）、in（英寸）、mm（毫米）、（cm厘米）

合并行与合并列效果：
在这里插入图片描述

3.6 表单标签

在HTML中，表单标签有5种：form、input、textarea、select和option。

form标签

<!--form标签属性-->
<form name="表单命名"></form>
<form method="提交方法"></form>
<form action=""></form>
<form target="指定窗口打开方式"></form>
<form enctype=""></form>

其中，method属性（指定表单数据用哪种http提交方法）取值分两种：get（安全性低，比喻账号密码登录，这个方式会在地址中显示账号密码）和post（安全性高，地址中隐藏了账号密码）;action属性：指定表单数据提交到哪一个地址处理；enctype属性：指定表单数据提交的编码方式（上传文件用到）。

input标签

<input type=""/>

其中type属性分为：text（单行框）、password（密码文本框）、radio（单选框）、checkbox（多选框）、button或submit或reset（按钮）、file（文件上传）。
在HTML中，单行框长度的属性：value（默认值，可加可不加）、size（自定义框的长度）、maxlength（限制最大输入字符数）。
单选框： checked属性代表默认选了；name属性为组名（注意这个一定不能漏写，不管单选还是多选），否则会出错。

<form>
      性别：
      <input type="radio" name="gender" value="男" checked/>男
      <input type="radio" name="gender" value="女"/>女
  </form>

在这里插入图片描述
多选框：

<form>
      你喜欢的水果：<br>
      <input type="checkbox" name="fruit" value="苹果" checked/>🍎
      <input type="checkbox" name="fruit" value="香蕉"/>🍌
      <input type="checkbox" name="fruit" value="西瓜"/>🍉
      <input type="checkbox" name="fruit" value="草莓"/>🍓
  </form>

在这里插入图片描述
按钮： 普通按钮（配合JavaScript进行各种操作）、提交按钮（给服务器提交数据的）、重置按钮（清空表单输入内容）

<form>
      <input type="button" value="普通按钮"/>
      <input type="submit" value="提交按钮"/>
      <input type="reset" value="重置按钮"/>
  </form>

多行文本框：

<textarea rows="行数" cols="列数" values="取值">默认内容</textarea>

下拉列表： 由select和option两个标签配合使用

 <form>
      <select>
          <option>HTML</option>
          <option>CSS</option>
          <option>JavaScript</option>
          <option>jQuery</option>
          <option>Vue.js</option>
      </select>
  </form>

在这里插入图片描述
其中select标签有两个属性：mutiple（下拉列表可选择多项）和size（指定可显示数量）

<form>
      <select multiple>
          <option>HTML</option>
          <option>CSS</option>
          <option>JavaScript</option>
          <option>jQuery</option>
          <option>Vue.js</option>
      </select>
      <br/>
      <br/>
      <select size="5">
          <option>HTML</option>
          <option>CSS</option>
          <option>JavaScript</option>
          <option>jQuery</option>
          <option>Vue.js</option>
      </select>
  </form>