HTML

最新推荐文章于 2024-10-17 00:14:23 发布

Heroin Geng

最新推荐文章于 2024-10-17 00:14:23 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏： Java

本文链接：https://blog.youkuaiyun.com/Gengmeina/article/details/103616353

Java 专栏收录该内容

49 篇文章

订阅专栏

一、HTML基础

1.概述：

HTML：（超文本标记语言）Hyper Text MarkUp Language；
超文本：音频、视频、图片、动画、定位。。。
标记：<>：(英文单词或者字母)成为标记，一个HTML页面都是由各种标记组成；
HTML语言不是一个编程语言（有编译过程），而是一个标记语言（没有编译过程），HTML页面直接由浏览器解析执行：
浏览器（IDE）==加载并读取 HTML 代码 —> 解析每个标签–> 产生对应的效果
有一个渲染的时间：浪费成本！

2.目标：

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

3.第一个HTML案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静夜思</title>
</head>
<body>
<h1>静夜思</h1>
<em>朝代：唐代</em> &nbsp;&nbsp;&nbsp; <strong>李白</strong> <br/>
<hr/>
<p>
    床前明月光，<br/>
    疑是地上霜，<br/>
    举头望明月，<br/>
    低头思故乡。<br/>
</p>
</body>
</html>

效果图：
在这里插入图片描述
4.HTML的基本结构：

所有的标签都以<>开始，</>结尾；
正常网页的所有内容都需要放在标签中；
DOCTYPE文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTML
Title 标签，就是网站的小标题名称；
meta 描述信息，SEO：网站搜索搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <!--建议规范编码，统一使用UTF-8（全世界） gb2312：包含了所有的中文字符-->
    <meta charset="UTF-8">
    <!--网站的关键字描述-->
    <meta name="keywords" content="java:二蛋">
    <!--网站的描述-->
    <meta name="description" content="二蛋在学习Java">
    <title>示例</title>
</head>
<body>
Hello World！！！
</body>
</html>

5.网站的基本标签
5.1 标题标签

<!--标题标签 一般使用h1-h6-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

5.2 段落标签

<p>
    床前明月光，<br/>
    疑是地上霜，<br/>
    举头望明月，<br/>
    低头思故乡。<br/>
</p>

5.3 换行标签

<br/>

5.4 水平线标签

<hr/>

5.5 字体样本标签

<strong>加粗</strong>
<em>斜体</em>

5.6 特殊符号标签

<!--空格 &-->
<p>二蛋&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Java</p>

<!--大于小于号-->
&gt;
&lt;

<!--版权符号-->
&copy; 版权所有：狂神说

<!--万能的公式  &  ;-->
&phone;

5.7 图像标签
常见的图片格式：.png .jpg .jpeg .bmp .gif。。。
一般使用.jpg .gif多一点
图片：静态资源单独放（statics\images）
相对路径： …/…/
绝对路径：http://localhost:63342/HTML/Demo01/4.图像标签.html?_ijt=5140t1isdhijs1tkhdgka1u0m6

<!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/1.jpg" alt="桌面图片" title="二蛋的电脑桌面" width="500" height="500">
</body>
</html>

5.8 超链接
超链接：表示从一个地方跳转到另外一个地方；
基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--
href：要跳转的页面
target：目标打开的窗口，在自己这个当前页面打开还是在新的页面打开
    _self：本窗口；
    _blank：新窗口。
img：嵌套一个图片标签
-->
<a href="https://www.sogou.com" target="_self">
<img src="../statics/images/1.jpg">
</a>
</body>
</html>

锚链接：

用于在页面间指定位置跳转：快速定位目录；
可以在同一页页面中跳转；
也可以在不同页面中跳转；

锚点：跳转到锚点；

<a name="marketA">A</a>

同一个页面跳转：

<a href="#marketA">A</a> <br>
<a href="#marketB">B</a> <br>
<a href="#marketC">C</a> <br>
<a href="https://blog.youkuaiyun.com/Gengmeina">D</a> <br>

功能性超链接;
邮件链接：

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

5.9 块元素、行内元素
块元素：无论内容多少，都是独占一行（p，h1-h6）
行内元素：只根据内容的长度来扩展（a，em，strong。。。）

二列表、表格、媒体元素

1.列表
无序列表：（ul-li）

啦啦啦
哈哈哈
嘿嘿嘿

<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>政治</li>
</ul>

有序列表： (ol-li)

啦啦啦
哈哈哈
嘿嘿嘿

<ol>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>政治</li>
</ol>

自定义列表： (dl-dt-dd)

<dl>
    <dt>科目</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dd>政治</dd>

    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>香焦</dd>
    <dd>橘子</dd>
    <dd>西瓜</dd>
</dl>

2.表格
优点：结构简单、通用；
基本结构：表格（table）、行（tr）rowspan、列（td）colspan
表格：

<table border="1px">
    <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>

跨行：

<table border="1px">
    <tr>
        <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>98</td>
    </tr>

    <tr>
        <td>数学</td>
        <td>99</td>
    </tr>
</table>

跨列：

<table border="1px">
    <tr>
        <td colspan="2">学生成绩</td>
        <td>学生成绩</td>
    </tr>

    <tr>
        <td>语文</td>
        <td>100</td>
    </tr>

    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

3.音频、视频
音频：audio

<audio src="http://music.163.com/song?id=508209148&userid=137686061" autoplay controls>
</audio>

视频：video

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

4.网页结构分析

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

<header>我是头部</header>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<article>文章主题</article>
<section> 独立区域 </section>
<footer>我是尾部</footer>

5.内联框架
iframe

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

三、表单（重要）

1.基础表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础表单</title>
</head>
<body>
<!--
提交请求：
    携带的参数
    key: 控件的name。这个属性不要忘记

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

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

<!--form 表单
    action：提交地址
    method：提交的方式
-->
<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>

2.表单元素
所有表单元素都要写在form表单中，必须加上name属性，否则提交的时候取不到值！
2.1.文本框（text）
type=“text”
value：文本框默认的初始值
size：文本框默认的大小
maxlength：文本框的最大输入长度

<p>
    <input type="text" name="username" value="用户名：" size="20" maxlength="20">
</p>

2.2.密码框（password）
type=“password”
size：密码框默认的大小

<p>
    <input type="password" value="密码：" size="20" name="pwd">
</p>

2.3.单选按钮（radio）
value：表单提交的值
name：名字相同，则自动分组，必须要分组
checked：默认选中
disabled：禁用
注意事项：默认没有值，需要再input type=“radio” 后增加单选框的属性

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

2.4.复选框（checkbox）
name：必填项，如果是分组，则名称一致
value：表单提交的值
checked：默认选中
disabled：禁用
注意事项：默认没有值，需要再input type=“checkbox” 后增加多选框的属性

<p>
    <input type="checkbox" name="科目" value="语文">语文
    <input type="checkbox" name="科目" value="数学" checked>数学
    <input type="checkbox" name="科目" value="英语" disabled>英语
</p>

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

2.6.按钮

<p>
    <input type="submit" value="登录">
    <input type="reset" value="清空">
    <input type="button" value="点我">
    <input type="image" src="../statics/images/1.jpg">
</p>

2.7.文本域

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

2.8.文件域

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

2.9.邮箱（验证）

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

2.10.网址

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

2.11.数字（上下）
数字：商品数量，计数 type=“number”
最小值：min=“0”
最大值：max=“100”
步长：step=“10”

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

2.12.滑块（可调节）

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

2.13.搜索框（带关闭按钮）

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

3.表单的应用
1.隐藏域

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

2.只读和禁用

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

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

3.标注

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

4.初级表单验证

为什么要表单验证 ？
表单验证是为了减轻服务器的压力。
表单的验证，主要是JavaScript以及后台判断。

(1).默认提示

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

(2).必填

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

(3).正则表达式

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

HTML

一、HTML基础

二 列表、表格、媒体元素

三、表单（重要）

二列表、表格、媒体元素