java学习笔记11-HTML

最新推荐文章于 2024-04-19 05:37:24 发布

原创最新推荐文章于 2024-04-19 05:37:24 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML的基础知识，包括其基本结构、常见标签的使用，如标题、段落、图像、超链接等，以及表格、列表、媒体元素的创建方法。此外，还深入探讨了表单的设计与应用，涵盖各种输入类型、表单验证和布局技巧。

一、HTML基础

目标：

html结构能做出那些页面
网页排版
图像标签：图文并发
超链接

1.1、什么是HTML
HTML ： Hyper Text MarkUp Language （超文本标记语言）

文本：文字、有格式的文本

超文本：文字，图片，音频，视频，动画、定位…….

标记语言： <>

1.2、HTML的基本结构

学习方式

前端、练习、不断的模仿别人的网站！
养成规范（代码的规范）
前端的学习，就是模仿，这是最快的方式！
菜鸟教程、W3cSchool

HTML的基本结构

所有的HTML 标签都以 <> 开始 </> 结尾
正常网页的所有内容都需要放在 < body> 标签中；

<!DOCTYPE html>
<html lang="en">
<head>
    <!--自闭合标签-->
    <meta charset="UTF-8">
    <!--正常的标签都是需要成对出现的-->
    <title>Title</title>
</head>
<body>

</body>
</html>

1.3、网站的基本标签（重点）
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、特殊符号标签

在这里插入代码片

1.4、图像标签
常见的图片格式： .png .jpg .jpeg .bmp .gif。。。。。

png 会有浏览器兼容问题

一般使用 .jpg .gif多一点

图片：静态资源单独放

相对路径，绝对路径

相对路径   ../../
绝对路径   https://150.109.117.44:443/usr/themes/PureLoveForTypecho/images/banner2.jpg

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>

<!--标签中带有参数的  key=value -->

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

</body>
</html>

1.5、超链接

<!--
超链接：表示从一个地方跳转到另外一个地方  hao123导航

href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开

和图片嵌套使用
-->

<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->

<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/bd.png">
</a>

锚链接

用于页面间指定位置跳转：快速定位目录
可以在同一页页面中跳转
也可以在不同页面中跳转：（需要掌握）
锚点

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

跳转到锚点

<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a> <br>
<a href="2.基本结构.html#haha">E</a> <br>

功能性标签
1.6、块元素、行内元素
块元素

无论内容多少，都是独占一行的（p，h1~h6）

行内元素

只根据内容的长度来扩展。（a，strong，em….）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

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

</body>
</html>

二、列表、表格、媒体元素
无序列表（ul-li）
有序列表 (ol-li)
自定义列表 (dl-dt-dd)
示例

<!--title-->
<!--无序  ul-li
导航
侧边栏新闻
在文章中，一般会使用它来排列
-->
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>Java</li>
</ul>

<hr>

<!--有序 ol-li
问答试卷、测试题....卷子，或者需要排序的。微博热搜，榜单
-->
<ol>
    <li>====</li>
    <li>====</li>
    <li>====</li>
    <li>====</li>
</ol>

<hr>

<!--自定义列表
网站的底部，用于标记项
-->
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>梨子</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>梨子</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
</dl>

2.2、表格
基本结构：

表格 table
行 tr rowspan
列 td colspan
`

表格

1-1	1-2	1-3
2-1	2-2	2-3

` 跨行

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

跨列

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

2.3、音频、视频
音频 audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--音频播放-->
<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" autoplay controls>

</audio>

</body>
</html>

视频 video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频</title>
</head>
<body>

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

-->

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

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


</body>
</html>

2.4、网页结构分析

页面的头部
页面的主体
页面的尾部
html5 标签，没有任何作用，只是让代码结构更好看

<!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>

2.5、内联框架
iframe

<!--iframe 内联框架
src： 地址
-->
<!--<iframe src="https://www.baidu.com/" width="1000px" height="600px"></iframe>-->

<iframe name="mainFrame"></iframe>

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

<!--Ajax-->

三、表单（重要）
1、基础表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
提交请求：
携带的参数
key: 控件的name。这个属性不要忘记

get：携带参数，参数可以在url中看到，不安全，大小有限
    https://www.baidu.com/?username=kuangshen&password=123456

post：参数不可见、安全，大小没有限制  （表单提交常用方式post）

-->

<!--form 表单
action： 提交地址
method：提交的方式
-->

<form action="test.html" method="post">

    <!--输入框
    input 标签
        name： 必须写上
        type：
            text ： 文本框
            password： 密码框
            submit： 提交按钮
            reset： 重置
    -->
    <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>

2、表单元素
所有表单元素都要写在form表单中，必须加上name属性，否则提交的时候取不到值！

文本框（最重要的）

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

密码框

<!--密码框 type="password"
size="20" 密码框的长度
-->
<p>
    <input type="password" name="pwd" size="20">
</p>

单选按钮

 <!--单选框type="radio"
value： 表单提交的值
name： 名字相同，则自动分组，必须要分组
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="radio" 后增加单选框的属性
-->
<p>
    <input type="radio" value="男" name="sex" checked>男
    <input type="radio" value="女" name="sex">女
</p>

复选框

<!--多选框 type="checkbox"
name： 必填项，如果是分组，则名称一致
value： 表单提交的值
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="checkbox" 后增加多选框的属性
-->
<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>

下拉列表框 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>

按钮

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

文本域

<!--文本域  cols  rows-->
<textarea name="textarea" cols="10" rows="10">
</textarea>

文件域

<!--
表单，需要支持提交复杂文件  enctype="multipart/form-data"
未来：文件上传会用到
-->
<form action="test.html" method="get" enctype="multipart/form-data">
    <input type="file" name="video">
</form>

邮箱（验证）

<!--邮箱-->
    <p>
        邮箱：<input type="email" name="email">
    </p>

网址（基本验证）

<!--url网址-->
    <p>
        url：<input type="url" name="url">
    </p>

数字（上下）

<!--数字：商品数量，计数  type="number"
    最小值  min="0" 
    最大值  max="100" 
    步长    step="10"
    -->
    <p>
        数字：<input type="number" min="0" max="100" step="10">
    </p>

滑块（可调节）

<!--滑块
默认值0~100
-->
<p>
    <input type="range" name="range" min="0" max="1000" step="2">
</p>

搜索框（带关闭按钮）

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

3、表单的应用

隐藏域

<!--隐藏域-->
    <p>
        <input type="hidden" name="count" value="10">
    </p>

只读和禁用

<p>
    用户名： <input type="text" name="username" readonly>
</p>

<p>
    密码： <input type="password" name="pwd" disabled>
</p>

标注

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

初级表单验证
默认提示

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

必填

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

正则表达式

<p>
    <!--pattern:正则表达式-->
    手机号码： <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>