一、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> <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>二蛋 Java</p>
<!--大于小于号-->
>
<
<!--版权符号-->
© 版权所有:狂神说
<!--万能的公式 & ;-->
☎
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.csdn.net/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>