用idea学习HTML

文章目录

W3C标准：
1.什么是HTML？
2.网页基本信息
3.网页基本标签
4.图像标签
5.链接标签
6.行内元素和块元素
7.列表
8.表格标签
9.视频和音频
10.页面结构
此后的name,为了统一，方便学习，都要加上
11.iframe内联框架
12.1.表单&单选框&多选框
- 12.2.下拉框&文本域&文件域
- 12.3.邮件验证&URL&数字&滑块&搜索框
13.表单的应用
14.表单的初级验证
总结

W3C标准：

结构化标准语言(XHTML、XML)

表现标准语言(CSS)

行为标准(DOM、ECMAScript)

1.什么是HTML？

HTML：Hyper Text Markup Language(超文本标记语言)，一种标识性的语言。

超文本包括：文字、图片、音频、视频、动画等；

2.网页基本信息

<!DOCTYPE html>         <!--DOCTYPE(文档类型):告诉浏览器要使用什么规范，默认HTML5-->
<html lang="en">        <!--所有网页代码都要写在这里面-->
<head>                   <!-- head标签代表网页头部--><meta charset="UTF-8"><!--meta标签：java描述性标签，用来描述网站的一些信息；eg:网页的关键字、描述等--><!--meta一般用来做SEO--><meta name="keyboards" content="html"><meta name="description" content="用来学习的html一个网页"><title>小红帽</title>        <!-- “小红帽”是打开网页时的网页标题-->
</head>
<body>                      <!-- body标签代表网页主体内容-->
Hello,html
</body>
</html>

图像显示：

3.网页基本标签

标题标签：<h·x></h·x>
段落标签:<p·></p·>
换行标签:<br/·>
水平线标签：<hr/·>
字体样式标签:粗：<strong·></strong·>斜：<em·></em·>

注释和特殊符号:<!----·>;&字母;
（‘·’是为了方便标签显示）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body><!--标题标签:<hx></hx>-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6><!--段落标签：<p></p>       p+[tab]快捷生成-->
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<!--    水平线标签:hr/('/'最好带上)        自闭和标签--><hr/><!--换行标签：br/('/'最好带上)      自闭和标签-->窗前明月光<br/>疑是地上霜<br/>举头望明月<br/>低头思故乡<br/><!--字体样式标签：粗体：<strong></strong>，斜体：<em></em>-->
粗体：<strong>这里是粗体</strong><br/>
斜体：<em>这里是斜体</em><!--特殊符号：&字母;-->
<br/>空格：空&nbsp;格
<br/>大于号：&gt;
<br/>小于号：&lt;
<br/>版权符号：&copy;版权所有cqr
<br/>
</body>
</html>

4.图像标签

常见的图像格式：

JPG
GIF
PNG
BMP：位图
······

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body>
<!--图像标签:<img
src=图片地址（相对地址（推荐），绝对地址）
../  代表上一级目录
alt=当src指向的路径不对时，网页内显示该图片（alt）的名字>
title：鼠标悬停在图片上时显示的文字
width:图片的宽度
height：图片的高度-->
<img src="../resource/image/虎太郎1.png" alt="大虎子" title="悬停文字"width="300" height="300">
</body>
</html>

图像显示成功：

图像显现失败：

5.链接标签

文本超链接
图像超链接
锚链接
功能性链接：邮箱链接等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body><!--用name做标记，通过"top"跳转到顶部--><a name="top">顶部</a><!--a标签
href:必填，表示要跳转到那个页面
target：表示窗口在哪里打开
_blank:在新标签中打开
_self:在自身网页中打开(默认）--><a href="myfirstHtml.html" target="_blank">点击我跳转到第一个页面</a><br/>    <!--文字超链接跳转到新页面-->
<a href="second.html" target="_self">点击我跳转到第二个页面</a><br/>
<br/><!--图片超链接跳转--><a href="myfirstHtml.html"><img src="../resource/image/虎太郎.png" alt="大虎子" title="悬停文字"width="300" height="300">
</a><br/>
<a href="myfirstHtml.html"><img src="../resource/image/虎太郎.png" alt="大虎子" >
</a><br/>
<a href="myfirstHtml.html"><img src="../resource/image/虎太郎.png" alt="大虎子" >
</a><br/>
<a href="myfirstHtml.html"><img src="../resource/image/虎太郎.png" alt="大虎子" >
</a><br/>
<a href="myfirstHtml.html"><img src="../resource/image/虎太郎.png" alt="大虎子" >
</a><br/><!--锚链接:#标记名称
1.一个锚标记：name=top
2.跳转标记：#--><a href="#top">回到顶部</a>     <!--同一页面内跳转-->
<a href="second.html#down">跳转到基本标签学习页面</a>  <!--不同页面跳转:跳到second页面的底部--><!--功能性链接
邮件链接：mailto;
QQ链接--><a href="mailto:197***14@qq.com">我的邮箱</a></body>
</html>

显示效果：

6.行内元素和块元素

块元素：无论内容多少，该元素独占一行块标签：p,h1-h6···

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6><p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>

显示效果：

行内元素：内容撑开宽度，左右都是行内元素的可以排一行,不会自动换行；行内标签：a,strong,em···

粗体：<strong>这里是粗体</strong>
斜体：<em>这里是斜体</em>

显示效果：

7.列表

什么是列表？

列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显现出来

列表的分类：

无序列表：(ul)

有序列表：(ol)

有序和无序的子标签都是：li

自定义列表：

列表名称(dt)+内容(dd)

<!--有序列表:ol(order list)
子标签：li--><ol><li>C/C++</li><li>Java</li><li>数据结构</li>
</ol>
<hr/>
<!--无序列表:ul-->
<ul><li>C/C++</li><li>Java</li><li>数据结构</li>
</ul><!--自定义列表:
dl：标签
dt:列表名字
dd:列表内容-->
<hr/>
<dl><dt>已学科目</dt><dd>C/C++</dd><dd>Java</dd><dd>数据结构</dd><dt>待学科目</dt><dd>Python</dd><dd>网络安全</dd>
</dl>
</body>

显示效果：

8.表格标签

表格作用：简单，通用，结构稳定

基本结构：单元格、行、列、跨行、跨列

<!--表格标签：table
行：tr   table rows
列：td table data
跨行：rowspan
跨列：colspan-->
<table border="1px">   <!--birder显示表格边缘--><tr>                <!--一行有三列-->
<!--   colspan="3"  :  跨3列--><td colspan="3">1-1</td></tr>
<!--    rowspan="2"  :跨2行--><tr><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td></tr>
</table>

显示效果：

9.视频和音频

video和audio

<body><!--视频：video
src:视频路径
controls:显示进度条
autoplay：打开网页时自动播放--><video src="../resource/video/视频video.mp4" controls ></video>
<!--音频：audio-->
<br/>
<audio src="../resource/audio/audio.mp3" controls></audio></body>

显示效果：

10.页面结构

元素名	描述
header	标题头部区域的内容
footer	标记脚部区域的内容
section	web网页中的一块独立的区域
article	独立的文章内容
aside	相关内容或应用（侧边栏）
nav	导航类辅助内容

<!--header-->
<header><h1>这里是网页的头部</h1>
</header>
<!--section-->
<section><h2>这里是网页的内容</h2>
</section>
<!--footer-->
<footer><h6>这里是jiojio位置</h6>
</footer>

显示效果：

此后的name,为了统一，方便学习，都要加上

11.iframe内联框架

一个网站里嵌套另外一个

<body>
<!--内联框架：iframe
src:内联的网页地址
name:框架标识名
width-height:宽-高
-->
<iframe src="列表学习.html" name="hello"  frameborder="0" width="400" height="300"></iframe>
<!--<iframe src="http://www.baidu.com" name="hello" frameborder="0"></iframe>-->
<a href="表格标签.html" target="hello" >点我去表格标签学习</a>
</body>

显示效果：

12.1.表单&单选框&多选框

表单form：eg:登录窗口···

form: action method(get post)
文本框 type="text"和value：文本框内默认值
密码框type=“password”
单选框：type=“radio” ；单选选项的name相同
多选框：type=“checkbox” ；选项的name相同
按钮：type=“button” 普通按钮

type=“image” 图片按钮

type=“submit” 提交按钮

type=“reset” 重置按钮

value：按钮上的文字

<body>
<h1>登录页</h1>
<!--form表单
action：表单提交的位置(网页等)
method：提交方式:get:不安全，可通过url显示出提交的信息（密码等）post:安全，可提交大文件-->
<form action="myfirstHtml.html" method="get" >
<!--    文本框：input type="text"
value:文本框内的默认初始值
maxlength:最长字符数
size:文本框的长度
--><p>用户名：<input type="text" name="username"  >  </p><p>密码：<input type="password" name="password" maxlength="5" ></p><p>性别：
<!--        单选框：type="radio"
实现单选功能时，选项要在同一个组内（既name值相同）
使用radio时，必须要有value和name--><input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl" name="sex"/>女</p>
<!--    多选框：type="checkbox"
多选选项同一name
value：名字
--><p>爱好：<input type="checkbox" value="chat" name="hobby">聊天<input type="checkbox" value="swim" name="hobby">游泳<input type="checkbox" value="game" name="hobby">游戏<input type="checkbox" value="code" name="hobby">编码</p><!-- 按钮：
type="button" 普通按钮
type="image"  图片按钮
type="submit" 提交按钮
type="reset"  重置按钮
value：按钮上的文字
--><p>按钮：<input type="button" value="按钮上的名字" name="btn1"><input type="image" src="../resource/image/虎太郎.png" >   <!--点击图片可直接跳转页面--></p><p><input type="submit" ><input type="reset" ></p>
</form>
</body>

get：
post:

12.2.下拉框&文本域&文件域

下拉框：select

下拉选项：option
文本域：textarea
文件域：type=“file”

<body>
<form action="myfirstHtml.html" method="get"><!--下拉框：select
下拉选项：option--><p>国家：<select name="country"><option value="China">中国</option><option value="America">美国</option><option value="French" selected>法国</option><option value="Japan">日本</option></select>
</p><!--    文本域：textarea--><p>文本域：<textarea name="context" cols="30" rows="10">文本的内容，随意填写</textarea></p><!--    文件域：type="file"--><p>文件选择:<input type="file" name="files"><input type="button" name="upload" value="上传"></p><p><input type="submit">
</p></form>
</body>

显示效果：

12.3.邮件验证&URL&数字&滑块&搜索框

邮件验证：type=“email”
URL：type=“url”
数字(价格)：type=“number”,step=x 数值一次变动的范围为x
滑块(eg：音量)：type=“range”
搜索框：type=“search”

<!--    邮件验证：type="email--><p>邮箱：<input type="email" name="email"></p><!--    URL：type="url"--><p>地址：<input type="url" name="URL"></p><!--    数字：type=number
min:最小值
max:最大值
step：数字一次变动的值--><p>数量：<input type="number" name="num" min="1" max="20" step="3"></p><!--   滑块：type="range" --><p>音量：<input type="range" name="audio" min="0" max="2" step="1"></p><!--    搜索框：type="search"--><p>搜索：<input type="search" name="sarch" ></p>

展示：

13.表单的应用

隐藏域：hidden 隐藏掉对应元素
只读：readonly 只能读
禁用：disabled 禁止使用，按钮变灰

<!--    邮件验证：type="email--><p>邮箱：<input type="email" name="email" value="197***8" readonly> <!--value值默认只能看--></p><!--    URL：type="url"--><p>地址：<input type="url" name="URL"  hidden></p><p><input type="submit" disabled>
</p>

效果：

14.表单的初级验证

作用：数据的安全，减压

常用方式：

placeholder：提示性信息，显示在输入框中
required：文本框值不能为空，非空判断
pattern 正则表达式(具体值可根据实际情况上网查找，不建议自己记忆)

<!--    邮件验证：type="email--><p>邮箱：<input type="email" name="email" placeholder="请输入正确邮箱" required></p><!--    URL：type="url"--><p>地址：<input type="url" name="URL" pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/"></p>

placeholder和required:
正则表达式：

总结