javaWeb-HTML

最新推荐文章于 2023-07-31 11:08:34 发布

白了少年头yy

最新推荐文章于 2023-07-31 11:08:34 发布

阅读量252

点赞数

分类专栏： java基础学习

本文链接：https://blog.csdn.net/weixin_45685359/article/details/103634894

版权

java基础学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、初始HTML

HTML：Hyper Text MarkUp Language（超文本标记语言），是一种用于创建网页的标准标记语言。
文本：文字、有格式的文本
超文本：文字，图片，音频，视频，动画，定位……
标记语言： < >

2、HTML的发展史

HTML 1993年
HTML2.0 1995年
HTML3.2 1996年
HTML4.0
HTML4.01（微小改进）
XHTML1.0 2000年
XHTML2.0 由于改动过大，学习成本高，所以没有大量使用！
HTML5（最高版） 2004,2007年正式纳入新成立的HTML工作团队！
2013 HTML5.1草案~

HTML5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图标、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

优势

所有知名浏览器厂商都支持！
微软、Google、苹果、Opera、Mozilla firefox，但是很多杂的浏览器并不支持HTML5。
市场的需求
市场需要一个统一的标准：（扩大）技术的本质：赚钱（发展）
Web兼容性问题。修改bug都需要大量的时间！
跨平台（浏览器）B/S
天然存在的，因为B/S开发、PC、移动站、等等所有的都是天然支持！

3、W3C标准

W3C：万维网联盟。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。万维网网址
网址：http://www.w3.org/
中国网址 :http://www.chinaw3c.org/

.com 国际的
.cn 中国的
.org 开源的

W3C标准包括

结构化标准（XHTML、HTML）
表现标准（CSS）
行为标准（Dom、ECMAScript标准==>JavaScript）
很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范

常见的前端开发工具

记事本
Notepad++
Sublime
VScode（前端专业）
WebStorm（前端专业）IDEA 两个是一家公司
HBuilder（专业）
……

4、HTML的基本结构

爱心建议：前端的学习就是不断的模仿别人的网站，这是最有效、最快的方式。

HTML的基本结构

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

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

</body>
</html>

在这里插入图片描述

!DOCTYPE==>文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTML
Title标签：网站的小标题名称
meta：描述信息，SEO：网站搜索

<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--自闭和标签-->
    <!--meta描述性标签，用来描述网站的一些信息-->
    <meta charset="UTF-8"><!--建议规范编码，统一使用UF-8（全世界）    gb2312：包含了所有的中文字符-->
   <!--网站关键字描述-->
    <meta name="keywords" content="java培训班，python培训班">
    <!--网站的描述-->
    <meta name="description" content="来西部开源学习java">
    
    
    
    <!--正常的标签都是成对出现的-->
    <!--title网页标题-->
    <title>Title</title>
</head>

<!--body标签代表网页主体-->
<body>

</body>
</html>

5、网站的基本标签

5.1标题标签

<body>
<!--标题标签快捷键  h1+tab键-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
</body>

5.2段落标签

<!--p  段落标签-->
<p>

    先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄， 引喻失义，以塞忠谏之路也。
</p>
<p>
    宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
</p>
<p>
    侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
</p>
<p>
    将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
</p>

5.3换行标签

<!--换行标签-->
换行标签<br/>

5.4水平线标签

<!--水平线标签-->
<hr/>

5.5字体样式标签

<!--字体样式标签-->
<strong>狂神说  西部开源优秀讲师</strong>
<p>
    <em>狂神说，帅哥一枚</em><br>
    <em>现西部开源优秀讲师</em>
</p>

5.6特殊符号标签

<!--特殊符号标签-->
<!--空格-->
<p>西部开源 java培训班</p>
<p>西部开源                 java培训班</p>
<p>西部开源&nbsp;&nbsp;&nbsp;java培训班</p>
<p>西部开源&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;java培训班</p>
<!--大于小于号-->
&gt
&lt
<br/>
<!--版权符号-->
&copy； 版权所有：狂神说
<!--特殊标签的万能公式  &  ;-->
&phone;
&half;

6、图像标签

常见的图片格式：.png/.jpg/.jpeg/.bmp/.gif……
png会出现浏览器兼容问题
一般使用.jpg 、 .gif多一点
图片：静态资源单独放

static\image
图片的存储路径：相对路径，绝对路径
相对路径： …/…/
绝对路径： https://150.109.117.44:443/usr/themes/banner2.jpg

<!--img标签  带有的参数 key=value-->
<!--
src:图片资源，图片的路径
alt：图片加载失败，表示图片的问题，也即图片描述
title：鼠标放在图片上的悬浮提示
width：宽
height：高
-->
<img src="../statics/image/朱亚文.jpg" alt="男神图片" title="朱亚文"  width="1000" height="1000">

7、超链接

基本使用

<!--
超链接：表示从一个地方跳转到另外一个地方   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/image/朱亚文.jpg" >
</a>

锚链接

用于页面间指定位置跳转：快速定位目录（如网页内容太多，下滑了很多再想往上找比较麻烦，就可以用到锚点，一键置顶。淘宝里面这个比较多）
可以在同一页面中跳转
可以在不用页面中跳转
锚点

<!--锚链接 标记-->
<a name="top">顶部</a>

跳转到锚点

<!--跳转到锚点-->
<a href="#top">回到顶部</a><br/>

功能性标签

<!--功能性标签-->
<!--邮件链接-->
<a href="mailto:284734561@qq.com">联系我</a>

qq推广原理就是如此

8、块元素、行内元素

块元素

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

行内元素

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

9、列表元素

列表：列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样显示出来，以便浏览者能更快更便捷地获得相应的信息。
列表的分类：有序列表、无序列表、自定义列表。

有序列表（ol-li）

<!--有序列表：问答试卷、微博热搜、榜单……-->
<ol>
    <li>热搜1</li>
    <li>热搜2</li>
    <li>热搜3</li>
    <li>热搜4</li>
</ol>

无序列表（ul-li）

<!--无序列表：导航、侧边栏新闻、-->
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>java</li>
    <li>python</li>
</ul>

自定义列表（dl-dt-dd）

<!--自定义列表：网站的底部，用于标记-->
<dl>
    <dt>科目</dt>
         <dd>语文</dd>
         <dd>数学</dd>
         <dd>英语</dd>
    <dt>成绩</dt>
         <dd>100</dd>
         <dd>100</dd>
         <dd>100</dd>
</dl>

10、表格

为什么使用表格？

结构简单
通用
基本结构：
表格：table
行：tr
列：td
跨行：rowspan
跨列：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>98</td>
    </tr>
</table>
<!--跨列-->
<table border="1px">
    <tr>
        <td colspan="2">java班学生成绩</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>95</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

11、媒体元素

音频-audio

视频-video

<!--媒体元素标签
src:音频、视频的路径
controls：提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay：自动播放
loop：循环播放
-->
<!--音频-->
<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" ></audio>

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

12、网页结构分析

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

<body>
<!--行业规范-->
<header>
    标题头部区域内容（用于页面或页面中的一块区域）
</header>
<nav>
    导航栏：导航类辅助内容
</nav>
<aside>
    侧边栏：相关内容或应用
</aside>
<article>
    文章主题：独立的文章内容
</article>
<section>
    Web页面中的一块独立区域
</section>
<footer>
    尾部:标记脚部区域的内容（用于整个页面或页面的一块区域）
</footer>
</body>

13、内联框架

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

13、表单

13.1基础表单

<body>
<!--提交请求：
携带的参数
key：控件的name。
get：携带参数，参数可以在url中看到，不安全，大小有效
post：参数不可见，安全，大小没有限制（常用方式post）
-->
<!--form 表单
action：提交地址，可以是网址，也可以是一个请求处理地址
method：提交的方式  get，post
-->
<form action="静夜思.html" method="get">
    <!--输入框
    input 标签
       name：必须写
       type：
           text：文本框
           password：密码框
           submit：提交按钮
           reset：重置
    -->
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

13.2表单元素

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

表单元素格式

type：指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认是text。
name：指定表单元素的名称。
value：元素的初始值。type为radio是必须指定一个值。
size：指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength：type为text或password时，输入的最大字符数
checked：type为radio或checkbox时，指定按钮是否被中。

文本框

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

</p>

密码框

<!--密码框 type=“password”
size：密码框的长度
-->
<p>
    <input type="password" name="pwd" size="1">
</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=“checked”
name：必填项，如果分组则名称一致
value：表单的提交值
checked：默认选中
disabled：禁用
注意事项：默认没有值，需要再input type="checkbox" 后增加多选框的属性
-->
<p>
    <input type="checkbox" name="hobby" value="code">敲代码
    <input type="checkbox" name="hobby" value="music" checked>听音乐
</p>

下拉列表框

<!--下拉列表框 select
name：组件名字  必填
size：显示的数量，默认为1
option：选项
value：必填
option标签中间写下拉框的值
selected：默认选中
-->
<select name="科目" id="">
    <option value="1">数学</option>
    <option value="2">语文</option>
    <option value="3">英语</option>
    <option value="4" selected>物理</option>
</select>

按钮

<!--按钮
button:普通按钮
image：图片按钮
submit：提交按钮
reset：重置按钮
value：按钮上的文字
-->

<input type="submit" value="登录">
<input type="reset" value="清空">
<input type="button" value="点击有惊喜">
<input type="image" src="../statics/image/朱亚文.jpg">

文本域

<!--文本域 textarea
cols：行
roes：列
-->
<textarea name="textarea" cols="30" rows="10"></textarea>
</body>
</html>

文件域

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

邮箱

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

网址

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

滑块

<!--按钮
step：步长
-->
<p>
    <input type="range" name="range" min="0" max="100" step="2">
</p>

搜索框

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

14、表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled
标注：

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

15、表单验证

默认提示
placeholder：默认提示，告诉用户应该怎么做
必填
required：必须要填写这个字段
正则表达式
pattern：正则表达式
为什么要进行表单验证？
为了减轻服务器的压力。表单的验证主要在javaScript以及我们后台判断。

白了少年头yy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javaWeb-HTML

HTML1、初始HTML1、初始HTMLHTML：Hyper Text MarkUp Language（超文本标记语言）文本：文字、有格式的文本超文本：文字，图片，音频，视频，动画，定位……标记语言： < >...
复制链接

扫一扫