Java web前端（HTML)

最新推荐文章于 2023-06-26 10:55:34 发布

贫僧洗发爱飘柔

最新推荐文章于 2023-06-26 10:55:34 发布

阅读量511

点赞数 2

分类专栏： java 前端 HTML 文章标签： java html web html5

本文链接：https://blog.csdn.net/qq_45637894/article/details/103595684

版权

java 同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

学习HtML之前我们先了解一下什么是前端？
1.前端的开发流程

在这里插入图片描述
2.B/S软件的结构
JavaEE项目
客户端：浏览器
服务端：WEB服务器

3.什么是W3C标准？

结构化标准（XHTML、HTML）
表现标准（CSS）
行为标准（Dom、ECMAScript标准==> JavaScript）

注意：很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范

1.什么是HTML(超文本标记语言）

html全称：Hyper Text Markup Language(超文本标记语言)

超级文本标记语言是标准通用标记语言（SGML）下的一个应用，也是一种规   范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件，通过在文本文件中添加标记符。
可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。 
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

2.HTML的结构分析

<!DOCTYPE html>
<html lang="en"><!--整个html的开始>
     <!--头部-->
    <head>
        <meta charset="UTF-8"> <!--meta是元信息，charset表示的是当前的页面类型>
        <!--网站关键字描述-->
        <meta name="keywords" content="爱学习">
        <!--网站的描述-->
        <meta name="description" content="学Java">
        <title>爱学习爱JAVA</title>   <!--title标题的标记>
    </head>
     <!--主体  Ctrl+/ -->
    <body>
        <!--GUI-->
        <h1>hello，world</h1>
        <!--音频、视频、....新的标签：侧边栏、顶部导航栏！-->
    </body>
</html>

注意：Java文件是需要先编译，再由java虚拟机跑起来。但Html 文件它不需要编译，直接由浏览器进行解析执行。

3.HTML的基本标签

单标签：<标签名>封装的数据</标签名>
双标签：<标签名> …封装的数据…</标签名>

注意：双标签必须关闭。
(1)标题标签：

<!--标题标签  h1 + tab键 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

(2)段落标签

<p>爱学习，学习使你快乐</p>

(3)换行标签

<br/>

(4)水平线标签

<hr/>

(5)字体样式标签

<strong>马云 （阿里巴巴集团创始人）</strong><!--粗体样式-->
<p>
    <em>马云，男，汉族</em> <br>   <!--斜体样式-->
    <em>现担任日本软银董事</em>  <br>
    <em>1988年毕业于杭州师范学院外语系</em>  <br>
    <em>....</em>  <br>
</p>

(6)特殊符号标签

<!--空格 &-->
<p>爱学习 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;爱Java</p>
<!--大于小于号-->
&gt;
&lt;
<!--版权符号-->
&copy; 版权所有：恒哥
<!--万能的公式  &  ;-->
&phone;

(7)图像标签

<!--
src： 资源图片 ： 图片的路径
alt： 图片加载失败，表示图片的问题，也即图片描述
title： 鼠标放在图片上的悬浮提示
width： 宽
height：高
-->
<img src="../statics/images/tx.jpg" alt="头像图片" title="爱Java" width="1000" height="1000">

注意：图片格式png 会有浏览器兼容问题，一般使用 .jpg .gif多一点。

4.超链接

跳转网站链接：表示从一个地方跳转到另外一个地方

<a href="https://www.baidu.com/" target="_self">百度</a>
href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开

图片类型超链接：

<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/bd.png">
</a>

点击发送邮件链接：

<a href="mailto:24736743@qq.com">联系我们</a>

锚链接用于页面间指定位置跳转：快速定位目录

(1)可以用于同一页面
锚点:标记跳转的位置

<!--标记A-->
<a name="markerA">A</a>

跳转到锚点

<a href="#markerA">A</a> <br>

(2)可以用于不同的页面

<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a>

5.块元素、行内元素

块元素：无论内容多少，都是独占一行的。

<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>

行内元素：只根据内容的长度来扩展。

<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>

6.列表

(1)无序列表
用于：导航，侧边栏新闻，在文章中，一般会使用它来排列。

<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>Java</li>
</ul>

(2)有序列表
用于：问答试卷、测试题…卷子，或者需要排序的，微博热搜，榜单。

<ol>
    <li>====</li>
    <li>====</li>
    <li>====</li>
    <li>====</li>
</ol>

(3)自定义列表
用于：网站的底部，用于标记项

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
</dl>

7.表格

(1)普通表格

<!--表格标签table
border="1px" 边框属性
-->
<table border="1px">
    <!--行和列-->
    <!--第一行 tr,列 td-->
    <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>
</table>

(2)跨列表格

<table border="1px">
    <tr>
        <!--实现跨列colspan 对应的值:就是要跨几列-->
        <td colspan="2">学生成绩</td>    
    </tr>
    <tr>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

(3)跨行表格

<table border="1px">
    <tr>
        <!--rowspan 所跨的行数-->
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

8.音频和视频

(1)音频audio

<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" autoplay controls>
</audio>

(2)视频video

<video src="../statics/video/china.mp4" controls autoplay></video>

src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay：自动播放
loop: 循环播放

9.表单

(1)表单结构：

action:提交的地址
method:提交的方式：

post：参数不可见、安全，大小没有限制（表单提交常用方式post）
get：携带参数，参数可以在url中看到，不安全，大小有限

<form action="test.html" method="post">
表单的元素
</form>

(2)表单元素

文本框

<p>
<!--文本框 type="text"
value ：文本框默认的初始值
size： 文本框的长度
maxlength： 文本框的最大输入长度
-->
    <input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>

密码框

<input type="password" name="pwd" size="20">
</p>

单选按钮

value：表单提交的值
name：名字相同，则自动分组，必须要分组
checked：默认选中
disabled：禁用

<p>
    <input type="radio" value="男" name="sex" checked>男
    <input type="radio" value="女" name="sex" disabled>女
</p>

注意事项：默认没有值，需要再input type=“radio” 后增加单选框的属性

多选按钮

<p>
    <input type="checkbox" name="hobby" value="code">敲代码
    <input type="checkbox" name="hobby" value="music" checked>听音乐
    <input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>

注意事项：默认没有值，需要再input type=“checkbox” 后增加多选框的属性
下拉列表框 select-option

select
name：组件名字必填
size: 显示的数量，默认为1

option：选项
value 必填
option标签中间写下拉框的值
selected：默认选中

<select name="科目">
   <option value="1"></option>
   <option value="2">数学</option>
   <option value="3" selected>英语</option>
   <option value="4">英语</option>
   <option value="5">英语</option>
</select>

按钮

<p>
    <!--提交-->
    <input type="submit" value="登录">
    <!--重置--使用-->
    <input type="reset" value="清空">
    <!--普通按钮：一般后来我们会和javascript结合使用，点击按钮xxx-->
    <input type="button" value="点我">
    <!--图片按钮
        type="image"
    -->
    <input type="image" src="../statics/images/bd.png">
</p>

文本域

<textarea name="textarea" cols="10" rows="10">
</textarea>

文件域

<form action="test.html" method="get" enctype="multipart/form-data">
    <input type="file" name="video">
</form>

邮箱验证

邮箱：<input type="email" name="email">

网址验证

 url：<input type="url" name="url">

滑块（可调节）默认0到100

<input type="range" name="range" min="0" max="1000" step="2">

数字

数字：<input type="number" min="0" max="100" step="10">

搜索框（带关闭按钮）

<input type="search" name="search">

(3)表单的应用

隐藏域

<input type="hidden" name="count" value="10">

只读和禁用

<input type="text" name="username" readonly>
<input type="password" name="pwd" disabled>

标注

<p>
    <!--通过 for="name" 来链接到 表单中的指定ID -->
    <label for="name">用户名： </label>
    <input type="text" name="username"  id="name">
</p>

内联框架

<iframe name="mainFrame"></iframe>
<a href="https://www.baidu.com/" target="mainFrame">点击显示</a>

初级表单验证
默认提示

<!--placeholder="必须是url格式" 默认提示，告诉用户应该这么做-->
用户名：
<input type="url" name="username" placeholder="必须是url格式">

必填

     <!--required必须要填写这个字段-->
    密码： <input type="password" name="pwd" required>

正则表达式

手机号码： <input type="password" name="tel" required pattern="^1[358]\d{9}">

10.网页结构规范

页面的头部
页面的主体
页面的尾部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--这些标签都是一些行业规范-->
<header>
    我是头部
</header>

<nav>导航栏</nav>

<aside>侧边栏</aside>

<article>文章主题</article>

<section> 独立区域 </section>

<footer>
    我是尾部
</footer>

</body>
</html>