JavaWeb-HTML

Neo丶

已于 2023-03-20 12:18:07 修改

阅读量981

点赞数

文章标签： html 学习前端

于 2022-12-31 17:17:52 首次发布

本文链接：https://blog.csdn.net/Ego_Ekko/article/details/128483744

版权

软件结构

B/S结构 Browser/Server 浏览器端和服务器端交互

C/S结构 Client/Server 客户端和服务器端交互

前端开发流程

根据需求设计网页画面→将设计做成静态网页→将静态网页修改为动态网页

网页结构主要分为：内容、表现、行为

内容：在页面中显示的数据，使用html技术实现；

表现：内容在页面上的展现形式，使用css技术实现；

行为：页面中元素与输入设备交互的响应，使用JavaScript技术实现。

技术介绍

HTML（Hyper Text Markup Language）超文本标记语言，HTML通过标签来标记要显示的网页中的各部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告知浏览器如何显示其中的内容。

创建HTML文件

1.创建一个web工程（静态的web工程）

2.在工程下创建html页面

注：HTML文件不需要编译，直接由浏览器解释执行

HTML的书写规范

<!DOCTYPE html><!-- 约束声明 -->
<html lang="en"><!-- html标签标识html的开始 lang="en"表示英文 lang="zh_CN"表示中文 -->
<!-- html标签中一般分为两部分，分别是head 和 body -->
<head><!-- 表示头部信息 一般包括三部分title标签，css样式，js代码 -->
    <meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->
    <title>标题</title><!-- 表示标题 -->
</head>
<body><!-- body标签是整个html页面显示的主体内容 -->
    new world
</body>
</html>

标签介绍

1.标签的格式：

<标签名>封装的数据</标签名>

2.标签名大小写不敏感；

3.标签拥有自己的属性；

1）分为基本属性：bgcolor="red" --bgcolor是背景颜色属性

2）事件属性：οnclick="alert('hello')" --onclick表示点击事件，alert()是js提供的警告框函数

4.标签又分为，单标签和双标签。

1）单标签格式：<标签名/> --<br/>换行 --<hr/>水平线

2）双标签格式：<标签名>封装数据</标签名>

标签语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签语法</title>
</head>
<body>
  <!-- ①标签不能交叉嵌套 -->
  正确：<div><span>new world</span></div>
  错误：<div><span>new world</div></span>
  <hr/>
  <!-- ②标签必须正确关闭 -->
  <!-- 有文本内容的标签 -->
  正确：<div>new world</div>
  错误：<div>new world
  <hr/>
  <!-- 没有文本内容的标签 -->
  正确：<br/>1
  错误：<br>2
  <hr/>
  <!-- ③属性必须有值，属性值必须加引号 -->
   正确：<font color="red">new world</font>
   错误：<font color>new world</font>
   错误：<font color=red>new world</font>
  <hr/>
  <!-- 注释不能嵌套 -->
  正确：<!-- 注释内容 -->
  错误：<!-- 注释内容<!-- 注释内容 --> -->

</body>
</html>

font字体标签（过时）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font标签</title>
</head>
<body>
  <!-- 在网页上显示字体标签，并修改字体为楷体，颜色为红色 -->
  <font color="red" face="楷体" size="7">字体标签</font>
</body>
</html>

特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊字符</title>
</head>
<body>
  <!-- 把<br>换行标签变成文本转换成字符显示在页面上 -->
  <!-- 常用特殊字符
   <    &lt;
   >    &gt;
   空格   &nbsp;
   -->
  标签&lt;br&gt;
</body>
</html>

标题标签

标题标签是h1 到 h6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
  <!-- 标题1至标题6
    align属性是对其格式：（已过时）
    left 左对齐
    center 居中对齐
    right 右对齐
  -->
  <h1 align="left">标题1</h1>
  <h2 align="center">标题2</h2>
  <h3 align="right">标题3</h3>
  <h4>标题4</h4>
  <h5>标题5</h5>
  <h6>标题6</h6>
</body>
</html>

超链接（★★★★★）

在网页中所有点击之后可以跳转的内容都是超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
  <!-- 超链接<a></a>
   href属性设置连接的地址
   target属性设置目标跳转的页面显示格式
        _self   在原来的页面进行跳转
        _blank  打开新的页面进行跳转-->
  <a href="https://www.baidu.com">baidu</a><br/>
  <a href="https://www.sina.com.cn" target="_self">sina</a><br/>
  <a href="https://www.qq.com" target="_blank">qq</a>
</body>
</html>

列表标签

分为无序列表、有序列表、定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
  <!-- ul标签表示无序列表 ol标签表示有序列表 li表示列表项 type显示列表项前面的符号 -->
  <!-- 使用无序列表展示奔驰、宝马、奥迪、玛莎拉蒂 -->
  <ul>
    <li>玛莎拉蒂</li>
    <li>奔驰</li>
    <li>宝马</li>
    <li>奥迪</li>
  </ul>
  <!-- 使用有序列表展示百达翡丽、劳力士、卡地亚、江诗丹顿 -->
    <ol>
        <li>百达翡丽</li>
        <li>劳力士</li>
        <li>卡地亚</li>
        <li>江诗丹顿</li>
    </ol>
</body>
</html>

img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签</title>
</head>
<body>
  <!-- 显示一张照片并修改宽高和边框属性 -->
  <!-- img标签是图片标签
   src属性可以设置图片的路径
   在web中分为相对路径和绝对路径
   相对路径：.表示当文件所在的目录
           ..表示当前文件所在的上一级目录
           文件名表示当前文件所在目录的文件，相当于./文件名    ./可以省略
   绝对路径：http://ip:port/工程名/资源路径
   width属性设置图片的宽度
   height属性设置图片的高度
   border属性设置图片边框的宽度（过时）
   alt属性图片显示异常后文字提示
   -->
  <img src="../imgs/1.jpg" width="384" height="216" border="1"/><br/>
  <img src="../imgs/2.jpg" width="192" height="108" border="1"/><br/>
  <img src="../imgs/3.jpg" width="384" height="216" border="1"/><br/>
  <img src="../imgs/4.jpg" width="192" height="108" border="1"/><br/>
  <img src="../imgs/5.png" width="230" height="153" border="1" alt="图片丢失"/>
</body>
</html>

表格标签（★★★★★）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
  <!-- table标签表示表格
  border属性设置表格边框 width属性设置表格宽度 height属性设置表格高度
  align属性设置表格相对页面的对齐方式 cellspacing属性设置表格的单元格间距
  th表示表头标签 tr表示行标签 td表示列标签
  align属性设置单元格文本对齐方式 colspan属性设置单元格可横跨的列数
  b标签表示加粗标签
  -->
  <!-- 代表头的表格，三行三列并且显示边框 -->
  <table align="center" border="1" width="300" height="300" cellspacing="0" >
    <tr>
      <th align="center" colspan="3">数字单元格表头</th>
    </tr>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
  </table>
  <!-- 修改表格宽度、高度、对齐方式、单元格间距 -->
</body>
</html>

表格可跨行跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格可跨行跨列</title>
</head>
<body>
  <!-- colspan属性设置单元格可跨越的列数 rowspan属性设置单元格可跨越的行数-->
  <!-- 五行五列列表中第一行第一列单元格跨两列，第二行第一列的单元格跨两行，第四行第四列单元格跨两行两列 -->
  <table border="1" align="center" cellspacing="0" border="1" width="500" height="500">
    <tr>
      <th colspan="5" align="center">单元格跨越行或列练习</th>
    </tr>
    <tr>
      <td colspan="2">1.1</td>
      <td>1.3</td>
      <td>1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td rowspan="2">2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td>4.2</td>
      <td>4.3</td>
      <td rowspan="2" colspan="2">4.4</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td>5.2</td>
      <td>5.3</td>
    </tr>
  </table>
</body>
</html>

iframe框架标签

iframe标签可以在一个html页面上打开一个小窗口来加载一个单独的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe标签</title>
</head>
<body>
 <!-- iframe标签可以在页面上开辟一个小区域显示单独的页面
    iframe标签和a标签组合使用的步骤：
    1.在iframe标签中使用name属性定义一个名称
    2.在a标签的target属性中设置iframe的name属性值
 -->
  单独的页面<br/>
 <iframe src="标题标签.html" width="500" height="500" name="_SmallWindow"></iframe>
  <br/>
  <br/>
    <ul>
       <li><a href="标签语法.html" target="_SmallWindow">标签语法</a></li>
        <li><a href="font标签.html" target="_SmallWindow">font标签</a></li>
        <li><a href="特殊字符.html" target="_SmallWindow">特殊字符</a></li>
    </ul>
</body>
</html>

表单标签（★★★★★）

表单是html页面用来收集用户信息的所有元素集合，并将信息发送给服务器。

表单显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签的显示</title>
</head>
<body>
  <!-- form标签表示表单
    input type="text"   单行文本输入框 value属性设置默认显示内容
    input type="password"   密码输入框（隐藏输入内容）
    input type="radio"  单选框    name属性可以对其进行分组  checked="checked"属性设置默认选项
    input type="checkbox"   复选框
    input type="reset" 重置按钮 value属性修改按钮上的文本
    input type="submit" 提交按钮
    input type="button" 按钮
    input type="file" 选择文件上传
    input type="hidden" 隐藏域     当需要向服务器发送信息，而这些信息不需要用户参与，就可以使用隐藏域，提交信息时同时发送给服务器

    select  下拉选框 option下拉选框的选项 selected属性设置默认选项
    textarea 表示多行文本输入框(其实标签和结束标签中间的内容是默认值)
    rows属性设置显示行数，超过行数有下拉选框  cols属性设置可以显示的字符长度
   -->
  <form>
    用户名：<input type="text" value="默认值"/><br/>
    密码：<input type="password" value="123456"/><br/>
    确认密码：<input type="password" value="123456"/><br/>
    性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/>
    兴趣爱好：<input type="checkbox"/>javaScript<input type="checkbox"/>java<input type="checkbox"/>C#<br/>
    国籍：<select>
        <option>--请选择国籍--</option>
        <option selected="selected">中国</option>
        <option>美国</option>
        <option>英国</option>
        <option>瑞典</option>
     </select><br/>
    自我评价：<textarea rows="10" cols="20">默认值</textarea><br/>
    <input type="reset" value="重置"/><br/>
    <input type="submit" value="提交"/><br/>
    <input type="button" value="按钮"/><br/>
    <input type="file"/>
    <input type="hidden"/>
  </form>
</body>
</html>

表单格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签的显示</title>
</head>
<body>
  <!-- 在from标签中插入table标签，然后将表单信息通过行列形式依次进行编辑，即可使表单信息工整对齐 -->
  <form>
      <h1 align="center">用户注册</h1>
      <table align="center">
          <tr>
              <td>用户名：</td>
              <td><input type="text" value="默认值"/></td>
          </tr>
          <tr>
              <td>密码：</td>
              <td><input type="password" value="123456"/></td>
          </tr>
          <tr>
              <td>确认密码：</td>
              <td><input type="password" value="123456"/></td>
          </tr>
          <tr>
              <td>性别：</td>
              <td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女</td>
          </tr>
          <tr>
              <td>兴趣爱好：</td>
              <td><input type="checkbox"/>javaScript<input type="checkbox"/>java<input type="checkbox"/>C#</td>
          </tr>
          <tr>
              <td>国籍：</td>
              <td><select>
                  <option>--请选择国籍--</option>
                  <option selected="selected">中国</option>
                  <option>美国</option>
                  <option>英国</option>
                  <option>瑞典</option>
              </select></td>
          </tr>
          <tr>
              <td>自我评价：</td>
              <td><textarea rows="10" cols="20">默认值</textarea></td>
          </tr>
          <tr>
              <td><input type="reset" value="重置"/></td>
              <td align="center"><input type="submit" value="提交"/></td>
          </tr>
      </table>
  </form>
</body>
</html>

表单提交细节

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单提交细节</title>
</head>
<body>
  <!-- form表单标签
    action属性设置提交的服务器地址
    method属性设置提交的方式post或者get(默认值)等
    https://localhost:8080/ 服务器地址
    ? 分隔符
    pero=password&sex=on  请求参数（表单的信息）
    1.表单提交时服务器没有发送数据的三种情况：
    ①表单项没有name属性；
    ②单选、复选（下拉选项中的option标签）都需要添加value属性，以便发送数据给服务器
    ③表单项不在提交的form标签中
    GET请求的特点：
    ①浏览器地址栏中的地址是：action属性+[?+请求参数]  请求参数格式：name=value&name=value
    ②不安全，密码会被查看到
    ③表单内容包含非ASCⅡ字符或者超过100个字符，浏览器将不会把表单信息或者超过的信息发送给服务器（长度限制）
    POST请求的特点：
    ①浏览器地址栏中只有action属性值
    ②相对于get请求比较安全
    ③理论上没有数据长度的限制
  -->
<form action="https://localhost:8080" method="post">
  <input type="hidden" name="pero" value="password">
  <h1 align="center">用户注册</h1>
  <table align="center">
    <tr>
      <td>用户名：</td>
      <td><input type="text" name="username" value="默认值"/></td>
    </tr>
    <tr>
      <td>密码：</td>
      <td><input type="password" value="123456"/></td>
    </tr>
    <tr>
      <td>确认密码：</td>
      <td><input type="password" value="123456"/></td>
    </tr>
    <tr>
      <td>性别：</td>
      <td><input type="radio" name="sex" checked="checked" value="boy"/>男
        <input type="radio" name="sex" value="girl"/>女</td>
    </tr>
    <tr>
      <td>兴趣爱好：</td>
      <td><input type="checkbox" name="hobby" value="javaScript"/>javaScript
        <input type="checkbox" name="hobby" value="java"/>java
        <input type="checkbox" name="hobby" value="C#"/>C#</td>
    </tr>
    <tr>
      <td>国籍：</td>
      <td><select name="country">
        <option value="none">--请选择国籍--</option>
        <option selected="selected" value="china">中国</option>
        <option value="America">美国</option>
        <option value="England">英国</option>
        <option value="Sweden">瑞典</option>
      </select></td>
    </tr>
    <tr>
      <td>自我评价：</td>
      <td><textarea name="desc" rows="10" cols="20">默认值</textarea></td>
    </tr>
    <tr>
      <td><input type="reset" value="重置"/></td>
      <td align="center"><input type="submit" value="提交"/></td>
    </tr>
  </table>
</form>
</body>
</html>

其他标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他标签</title>
</head>
<body>
  <!-- div标签
    默认独占1行
   -->
  <div>div标签1</div>
  <div>div标签1</div>
  <!-- span标签
    长度是封装数据的长度
  -->
  <span>span标签1</span>
  <span>span标签1</span>
  <!-- p标签
    默认会在段落的上方或者下方各空一行（如果已经有就不再空行）
  -->
  <p>段落标签1</p>
  <p>段落标签2</p>下一行
</body>
</html>

Neo丶

关注

0
点赞
踩
0

收藏

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

HTML（Hyper Text Markup Language）超文本标记语言，HTML通过标签来标记要显示的网页中的各部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告知浏览器如何显示其中的内容。封装的数据2.标签名大小写不敏感；3.标签拥有自己的属性；1）分为基本属性：bgcolor="red" --bgcolor是背景颜色属性。
复制链接

扫一扫