HTML
一、概念：
是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
超文本:
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言:
由标签构成的语言。<标签名称> 如 html，xml
标记语言不是编程语言
学习方式
- 前端、练习、不断的模仿别人的网站！
- 养成规范（代码的规范）
- 前端的学习，就是模仿，这是最快的方式！
- 菜鸟教程、W3cSchool
二、语法：
- html文档后缀名 .html 或者 .htm
- 标签分为
- 围堵标签：有开始标签和结束标签。如
- 自闭和标签：开始标签和结束标签在一起。如
- 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：
正确： - 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
- html的标签不区分大小写，但是建议使用小写。
代码：
<head>
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
标签学习：
2.1、文件标签：
构成html最基本的标签
html:html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签。
body：体标签
<!DOCTYPE html>：html5中定义该文档是html文档
2.2、文本标签：
和文本有关的标签
注释：
<h1> to <h6>：标题标签
h1~h6:字体大小逐渐递减
<p>：段落标签
<br>：换行标签
<hr>：展示一条水平线
属性：
color：颜色
width：宽度
size：高度
align：对其方式
- center：居中
- left：左对齐
- right：右对齐
<b>：字体加粗
<i>：字体斜体
<font>:字体标签
<center>:文本居中
属性：
- color：颜色
- size：大小
- face：字体
属性定义：
- color：
- 英文单词：red,green,blue
- rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
- #值1值2值3：值的范围：00~FF之间。如： #FF00FF
- width：
- 数值：width=‘20’ ,数值的单位，默认是 px(像素)
- 数值%：占比相对于父元素的比例
2.3、图片标签：
-
img：展示图片
属性：src ：指定图片的位置
代码：
相对路径：以.开头的路径
./ ：代表当前目录 ./image/1.jpg
…/ : 代表上一级目录
2.4、列表标签：
<!--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.5、链接标签：
-
a:定义一个超链接
- 属性：
- href：指定访问资源的URL(统一资源定位符)
- target：指定打开资源的方式
- _self:默认值，在当前页面打开
- _blank：在空白页面打开
- 属性：
-
代码：
-
：页眉
2.2、表格
为什么要使用表格？
- 结构简单
- 通用
基本结构：
- 表格 table
- 行 tr rowspan
- 列 td colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格标签table
border="1px" 边框属性
-->
<table border="1px">
<!--行和列-->
<!--第一行 tr,列 td-->
<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>
</table>
</body>
</html>
跨行
<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-->
三、表单（重要）
注册
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hs6DS8Jf-1576758194340)(D:/qq/504879189/FileRecv/HTML/HTML.assets/1576393496583.png)]
登录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZKTmkUy6-1576758194341)(D:/qq/504879189/FileRecv/HTML/HTML.assets/1576393436060.png)]
搜索框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y6T2YTgZ-1576758194342)(D:/qq/504879189/FileRecv/HTML/HTML.assets/1576393503302.png)]
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> -
按钮
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cUBpQRMG-1576758194343)(D:/qq/504879189/FileRecv/HTML/HTML.assets/1576396544263.png)]
<!--按钮 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> -
邮箱（验证）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-labcbyzF-1576758194344)(D:/qq/504879189/FileRecv/HTML/HTML.assets/1576397895632.png)]
<!--邮箱--> <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> -
只读和禁用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RTGjGwKC-1576758194345)(D:/qq/504879189/FileRecv/HTML/1576400730567.png)]
<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> -
初级表单验证（重点）
为什么要表单验证 ？
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnNMV0P1-1576758194346)(D:/qq/504879189/FileRecv/HTML/HTML.assets/1576401174446.png)]
-
默认提示
<!--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>表单的验证，主要在 JavaScript 以及 我们后台判断
-
四、总结
以后看到网站的时候，不要只看到表面~
css
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
