JavaWeb学习（二）

JavaWeb学习（二）：Web前端开发 —— HTML

目录

本文为个人学习记录，内容学习自 黑马程序员

概念

  • HTML（HyperText Markup Language）：超文本标记语言
    • 超文本：除了文字信息，还可以定义图片、音频、视频等内容
    • 标记语言：由标签构成的语言
  • HTML 的特点：
    • HTML 标签不区分大小写（写成 HTml 和 html 是一样的）
    • HTML 标签中的属性可以用单引号也可以用双引号包围
    • HTML 的语法比较松散（不严格）

标签

文本类

  • 子标题标签：<h1> - <h6>

    • h1 为一级标题，最大
    • h6 为六级标题，最小
    <body>
    <h1>这是一级标题</h1>
    <h6>这是六级标题</h6>
</body>

  • 段落标签：<p>

    <body>
    <p>段落一</p>
    <p>段落二</p>
</body>

  • 文本加粗标签：<b> / <strong>

多媒体类

  • 图片标签：<img>

    • src：指定图像的 url（绝对路径 或 相对路径）

    • width：图像的宽度（像素 或 相对于父元素的百分比）

    • height：图像的高度（像素 或 相对于父元素的百分比）

    <body>
    <!--
    img 标签：
        src：图片资源路径
        width：宽度
        height：高度
    
    路径书写方式：
        绝对路径：
        1.绝对磁盘路径：<img src="C:\Users\Legion\Desktop\图1.jpg">
        2.绝对网络路径：<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
        相对路径：
        ./ 表示当前目录（html文件所在文件夹），可以省略；../ 表示上一级目录，不可省略
        示例：<img src="./图1.jpg">

    宽度/高度：
        单位：px 表示图片宽度/高度为多少个像素，% 表示图片宽度/高度相对于父元素的百分比
        注意：如果只设置了宽度，那么高度会根据等比缩放自动获取，反之亦然
    -->
    <img src="./图1.jpg" width="300px" height="300px">
</body>

  • 视频标签：<video>

    • src：规定视频的 url
    • controls：显示播放控件
    • width：播放器的宽度
    • height：播放器的高度
    <!-- 在html中，如果属性名和属性值相同，则可以简写 -->
<!-- 例如 controls="controls" 可以简写成 controls -->
<body>
    <video src="1.mp4" controls="controls" width="950px"></video>
</body>

  • 音频标签：<audio>

    • src：规定音频的 url
    • controls：显示播放控件
    <body>
    <audio src="1.mp3" controls="controls"></audio>
</body>

  • 超链接标签：<a>

    • href：指定资源访问的 url
    • target：指定在何处打开链接资源，_self 为默认值，在当前页面打开，_blank 在新的标签页打开
    <body>
    <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a>
</body>

表格 与 表单

  • 表格标签

    一个完整的表格由三种标签组成：<table>，<tr>，<td>

    标签 描述 说明
    <table> 定义表格整体，可以包裹多个 <tr> 常见属性：border，width 和 cellspacing
    <tr> 表格的行，可以包裹多个 <td>
    <td> 表格单元格，可以包裹内容 如果是表头单元格，可以替换为 <th>，此时自带加粗和居中
    • border：指定表格边框的宽度，若没有写默认是 0，即没有边框线
    • width：指定表格的宽度，若没有写则宽度由内容决定
    • cellspacing：指定单元格之间的空间大小
    <body>
    <table border="1px" width="600px" cellspacing="0">
        <tr>
            <th>序号</th>
            <th>品牌</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="1.jpg" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="2.jpg" width="100px"> </td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>
</body>

  • 表单标签

    • 作用：在网页中主要负责数据采集功能，如注册、登录等数据采集

    • 标签：<form>

    • 属性：

      • action：规定当提交表单时向何处发送表单数据，指定的是 URL 地址，默认提交到当前页面
      • method：规定用于发送表单数据的方式，存在 get 和 post 两种提交方式，默认为 get 方法
        • get：在 URL 后面拼接表单数据，例如在原本 URL 后拼接了 ?username=tom&age=18，由于 URL 有长度限制，因此这种提交方法不能提交大量数据
        • post：在消息体（请求体）中传递，可以通过浏览器的开发者工具查看，提交的数据无大小限制

    • 表单项标签

      • <input>：表单项，通过 type 属性控制输入形式

        图2-2

      • <select>：定义下拉列表，配合 <option> 可以定义列表项

        图2-3

      • <textarea>：文本域

        图2-4

      • 注意：表单项必须要有 name 属性才可以提交

    • 示例：

      <body>
    <form action="" method="get">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">
        <input type="submit" value="提交">
    </form>
</body>

功能类

  • 水平分割线标签：<hr>

    <body>
    <hr>
</body>

  • 换行标签：<br>

    <body>
    <br>
</body>

布局类

  • div 标签和 span 标签是无语义标签，广泛应用于页面布局
  • div 标签：<div>
    • 一行只显示一个
    • 宽度默认是父元素的宽度（body 的宽度就是浏览器宽度），高度默认由内容撑开
    • 可以设置宽高
  • span 标签：<span>
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高

应用

  • HTML 中的注释：<!-- *** -->

  • 在 VSCode 中使用 ! + Enter 可以快速得到一段 HTML 的模板代码（需要注意是英文的 !）

    <!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 编码格式为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置标题，不需要使用引号 -->
    <title>Document</title>
</head>
<body>

</body>
</html>

  • 在 HTML 中不会将代码中的换行视为页面的换行；无论代码中有多少个空格，页面中都只会显示一个空格；如果需要使用空格，可以使用空格占位符：&nbsp;

  • 盒子模型：页面中的所有元素（标签）都可以看成一个盒子，由盒子将页面中的元素包含在一个矩形区域内，盒子模型由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）组成

    图2-1
posted @   victoria6013  阅读(3)  评论(0)  编辑  收藏  举报
相关博文：
·  JavaWeb学习（三）
·  JavaWeb学习（一）
·  JavaWeb前端
·  JavaWeb开发-HTML基础
·  Javaweb学习笔记第十弹
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示