JavaWeb学习笔记01-HTML基础学习

一、初识HTML

HTML

Hyper Text Markup Language （超文本标记语言）

超文本：包括文字、图像、音频、视频、动画等
HTML发展史
HTML5的优势
- 世界知名浏览器厂商对HTML5的支持
  - 微软
  - Google
  - 苹果
  - Opera
  - Mozilla
- 市场的需求
- 跨平台
W3C标准
- World Wide Web Consortium （万维网联盟）
- 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
常见IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm
- ...
HTML基本结构

<body>、</body>等成对的标签，分别叫开放标签和闭合标签；单独呈现的标签（空元素），如<hr/>,称为自闭合标签;

1. 网页基本信息

主要的信息标签有：

注释格式：
DOCTYPE标签
<title>标签
<meta>标签

示例：

<!--DOCTYPE: 告诉浏览器文件使用的规范 -->
<!DOCTYPE html>
<!-- html标签 总标签-->
<html lang="en">

<!-- head标签代表网页的头部 -->
<head>
    <!-- meta描述性标签，用来描述网站的一些信息 -->
    <!-- meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="MikuAi.tech">
    <meta name="description" content="学习">
    <!-- title网页标题 -->
    <title>我的第一个网页</title>
</head>

<body>
    
</body>
</html>

2. 网页基本标签

基本的标签有：

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<!--段落标签-->
<p>2021年10月12日，W3C 可访问平台架构工作组（Accessible Platform Architectures Working Group）发布自然语言界面无障碍用户需求（Natural Language Interface Accessibility User Requirements）的首个公开工作草案（First Public Working Draft）。文档概述了自然语言界面的各种与无障碍相关的用户需求和使用场景。这些用户需求影响相关规范中的无障碍要求以及应用程序设计，包括语音和声音输入在内的自然语言界面。该文档探讨了幕后服务中需要开展哪些工作以支持无障碍可访问性和用户需求，并描述了相关要求。</p>
<p>欢迎2021年11月12日前反馈对该文档的意见与建议。更多内容，参见消息原文。</p>
<!--水平线标签-->
<hr>
<!--换行标签-->
2021年10月12日，<br/>
W3C 可访问平台架构工作组（Accessible Platform Architectures Working Group）发布自然语言界面无障碍用户需求（Natural Language Interface Accessibility User Requirements）的首个公开工作草案（First Public Working Draft）。文档概述了自然语言界面的各种与无障碍相关的用户需求和使用场景。这些用户需求影响相关规范中的无障碍要求以及应用程序设计，包括语音和声音输入在内的自然语言界面。该文档探讨了幕后服务中需要开展哪些工作以支持无障碍可访问性和用户需求，并描述了相关要求。<br/>
<!--字体样式标签：粗体 斜体-->
<h1>字体样式标签</h1>
粗体：<strong>Miku</strong><br/>
斜体：<em>Miku</em><br/>
<!--特殊符号-->
空                    格<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
<!--大于符号-->
&gt;
<!--小于符合-->
&lt;
<!--版权符号-->
&copy;版权所有
</body>
</html>

3. 图像、超链接、网页布局

3.1 图像标签

常见的图像格式
- JPG
- GIF
- PNG
- BMP
- ...

图像标签格式

<img src="path" alt="text" title="text" width="x" height="y"/>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签学习</title>
</head>
<body>
<!--img学习
src: 图片地址，有相对路径与绝对路径，推荐相对路径
alt: 图片加载失败时候显示的替代文字
title: 鼠标悬停时显示的文字
width: 图片高
width: 图片宽
-->

<img src="../resoures/初音.jpg" alt="初音" title="初音" width="300" height="300">
</body>
</html>

3.2 超链接标签及应用

超链接标签格式（a标签）
文本超链接
图像超链接
锚链接
功能性链接

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
<!-- a标签
href: 必填，表示要跳转到哪个页面
target: 表示窗口在哪里打开
    _blank 在新标签页打开
    _self 在当前页打开

-->
<!--锚链接的标记,使用name作为标记-->
<a name="top">顶部</a>


<!--文本超链接-->
<a href="1.我的第一个网页.html" target="_blank">点击跳转到网页1</a>
<a href="https:www.baidu.com" target="_self">点击跳转到百度</a>
<br/>
<!--图像超链接-->
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resoures/image/初音.jpg" alt="初音" title="初音" width="300" height="300">
    </a>
</p>

<!--锚链接
1. 需要一个锚标记
2. 跳转到标记
使用 # 实现页面间跳转
-->
<a href="#top">回到顶部</a>
<br/>
<!--锚链接的标记,使用name作为标记-->
<a name="down">底部</a>

<!--功能性链接
邮件链接： mailto:
QQ链接：QQ的扩广工具
-->
<a href="mailto:mikuai_tech@126.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="你好" title="你好"/></a>

</body>
</html>

3.3 网页布局-行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- 比如标签（p、h1-h6...）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- 比如标签（a、strong、em...）

4. 列表、表格、媒体元素

4.1 列表标签

什么是列表
列表的分类
- 无序列表
- 有序列表
- 自定义列表

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷、问答等
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>通信原理</li>
    <li>微积分</li>
</ol>

<hr>

<!--无序列表
应用范围：导航、侧边栏等
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>通信原理</li>
    <li>微积分</li>
</ul>

<hr>
<!--自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容

应用范围：网站底部等
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>通信原理</dd>
    <dd>微积分</dd>

    <dt>位置</dt>
    <dd>西安</dd>
    <dd>上海</dd>
    <dd>苏州</dd>
</dl>

</body>
</html>

4.2 表格标签

为什么使用表格
- 结构稳定
- 简单通用
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行： tr
列： td
-->
<table border="1px">
    <tr>
        <!--  colspan跨列，值设置跨几列  -->
        <td colspan="4">学生成绩</td>
    </tr>
    <tr>
        <!--  rowspan跨行，值设置跨几行  -->
        <td rowspan="2">学生a</td>
        <td>数学</td>
        <td>99</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>77</td>
    </tr>
    <tr>
        <!--  rowspan跨行，值设置跨几行  -->
        <td rowspan="2">学生b</td>
        <td>数字</td>
        <td>100</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>0</td>
    </tr>
</table>

4.3 视频和音频

视频元素标签：video
音频元素标签：audio

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频-->

<video src="" controls></video>
<audio src="" controls autoplay></audio>
</body>
</html>

4.4 页面结构分析

介绍

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

4.5 iframe内联框架

标签
作用：在一个网页内嵌套另一个页面

5. 表单及表单应用（重点）

5.1 表单语法

表单语法

表单元素格式

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个处理地址
method：post, get 提交方式
    get方式提交： 可以在url上看的提交信息，不安全，高效
    post方式提交： 较安全，可以传输大文件
-->

<form action="1.我的第一个网页.html" method="post">
    <!-- 文本输入框 -->
    <p>名字：<input type="text" name="username"></p>
    <!-- 密码框 -->
    <p>密码：<input type="password" name="password"></p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

</body>
</html>

5.2 文本框和单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<form action="1.我的第一个网页.html" method="post">
    <!-- 文本输入框
     value: 默认初始值
     maxlength：可输入的最大字符数
     size： 文本框的长度
     -->
    <p>名字：<input type="text" name="username" value="Miku" maxlength="8" size="10"></p>
    <!-- 密码框 -->
    <p>密码：<input type="password" name="password" maxlength="8" size="10"></p>
    <!-- 单选框标签
    value: 单选框的值
    name: 表示组，同一个组内只能选组内的一个
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

</body>
</html>

5.3 按钮和多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个处理地址
method：post, get 提交方式
    get方式提交： 可以在url上看的提交信息，不安全，高效
    post方式提交： 较安全，可以传输大文件
-->

<form action="1.我的第一个网页.html" method="get">
    <!-- 多选框
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!-- 按钮
    普通按钮 input type="button"
    图片按钮 input type="image" 也可以提交
    提交按钮 input type="submit"
    重置按钮 input type="reset"
    -->
    <p>
        <input type="button" value="点击变长" name="btn1">
    </p>

    <p>
        <input type="image" src="../resoures/image/按钮-赞.png" alt="点赞" width="30px" height="30px">
    </p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

</body>
</html>

5.4 列表框文本域和文件域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>

<form action="1.我的第一个网页.html" method="get">

    <!-- 下拉框，列表框 -->
    <p>国家：
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="US">美国</option>
            <option value="ETH" selected>瑞士</option>
        </select>
    </p>
    <!-- 文本域 -->
    <p>
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

    <!-- 文件域 -->
    <p>
        <input type="file" name="upload" value="上传文件">
    </p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

</body>
</html>

5.5 搜索框滑块和简单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<form action="1.我的第一个网页.html" method="get">
    <!-- 邮件表单验证  -->
    <p>邮箱：
        <input type="email" name="email">
    </p>

    <!-- URL表单验证  -->
    <p>URL：
        <input type="url" name="url">
    </p>

    <!-- 数字 -->
    <p>商品数量：
        <input type="number" name="number" max="100" min="0" step="1">
    </p>

    <!-- 滑块
    input type="range"
    -->
    <p>
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>

    <!-- 搜索框
    input type="search"
    -->
    <p>
        <input type="search" name="search">
    </p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
    
</form>

</body>
</html>

6. 表单的应用（重点）

隐藏域 hidden

<input type="password" name="password" value="123456" hidden >

只读 readonly

<input type="text" name="username" value="Miku" readonly>

禁用 disabled

<input type="radio" value="girl" name="sex" disabled/>女

7. 表单初级验证（重点）

为什么要进行表单验证？
- 减轻后台的处理压力
- 增强安全性

常用验证方式

placeholder 提示信息

<input type="text" name="username" placeholder="请输入用户名">

required 非空判断

<input type="text" name="username" placeholder="请输入用户名" required>

pattern 正则表达式

<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

posted @ 2021-10-22 16:14 南山竹阅读(40) 评论(0) 收藏举报

刷新页面返回顶部

南山竹

JavaWeb学习笔记01-HTML基础学习

一、初识HTML

1. 网页基本信息

2. 网页基本标签

3. 图像、超链接、网页布局

3.1 图像标签

3.2 超链接标签及应用

3.3 网页布局-行内元素和块元素

4. 列表、表格、媒体元素

4.1 列表标签

4.2 表格标签

4.3 视频和音频

4.4 页面结构分析

4.5 iframe内联框架

5. 表单及表单应用（重点）

5.1 表单语法

5.2 文本框和单选框

5.3 按钮和多选框

5.4 列表框文本域和文件域

5.5 搜索框滑块和简单验证

6. 表单的应用（重点）

7. 表单初级验证（重点）

公告