前端学习记录 Day1（Html）
程序员文章站
2022-05-28 14:36:40
...
文章目录
Day 1
2019年6月8日。
这是我学习前端的第一天。
这一天，我学到了以下的知识。
HTML简介
定义
HTML（Hyper Text Markup Language），标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
HTML的发展历史
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准 [2] （详见本处参考资料）
HTML的语言特点
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
- 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
- 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
- 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
-通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
HTML基本结构
Html注释
<!-- 注释 -->
Html的基本结构 :
<!--声明 : 告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--标签是成对出现-->
<!--头部标签-->
<head>
<meta charset="UTF-8">
<!--网页标题-->
<title>第一个网页</title>
</head>
<!--网页主体-->
<body>
Hello,World!
</body>
</html>
< title > 标签 : 网页的标题
< meta > 标签 : 关键字标签
<!--网页编码-->
<meta charset="UTF-8">
gb2312 ----> 包含全部的中文字符
utf-8 ---->包含了全世界所有地方的文字和符号
<!--搜索关键字-->
<meta name="keywords" content="a,b,c">
<!--网页的描述-->
<meta name="description" content="d">
完整的示例如下：
<!--声明：告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- 标签是成对出现的 -->
<!--头部标签-->
<head>
<!--关键字标签-->
<meta charset="UTF-8">
<!--网页的搜索关键字-->
<meta name="keywords" content="a,b,c">
<!--网页的描述-->
<meta name="description" content="d">
<!--网页标题-->
<title>第一个网页</title>
</head>
<!--网页主体-->
<body>
Hello,World!
</body>
</html>
网页的基本标签
标题标签
<!--标题标签-->
<!--H1最大 , H6最小-->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
段落标签
<!--段落标签-->
<!--p:表示段落标签-->
<h1>段落标签</h1>
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
换行标签
<!--换行标签-->
<!--br:单标签-->
<h1>换行标签</h1>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
水平线标签
<!--水平线标签-->
<!--hr表示水平线标签-->
<h1>水平线标签</h1>
<hr/>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
字体标签
<!--字体加粗 , 斜体-->
<!--strong : 粗体-->
<!--em : 斜体-->
<h1>字体字体样式</h1>
I love you
加粗后 : <strong>I love you</strong>
斜体 : <em>I love you</em>
特殊符号
<!--特殊符号-->
<h1>特殊符号</h1>
<p>大于号 : > </p>
<p>小于号 : < </p>
<p>空格 : 你 好 | 你 好</p>
<p>引号 : ""</p>
<p>版权符号 : © 版权所有</p>
<!--& + 符号字符 + 分号结束-->
图像标签
常见的图像格式 :
- jpg
- png
- bmp 位图
- gif
- …
图像标签 :
<!--图像标签-->
<!--
src = 图片的路径 (必填)
title = 鼠标悬停显示
alt = 图片的名字
w h->高
-->
<!--
相对路径
上一级路径表示方式 ../
绝对路径 ： 不推荐使用
-->
<img src="../resources/images/tx.jpg" title="鼠标悬停说:a" alt="b" width="300px" height="300px">
链接标签
超链接
<!--a:表示超链接-->
<!--
href : 表示连接的地址 : 必填
-->
<a href="https://www.baidu.com">点击跳转</a>
<!--图像链接-->
<a href="https://www.baidu.com"> <img src="../resources/images/tx.jpg"> </a>
锚链接
<!--锚链接-->
<!--
可以从一个地方跳到锚指定的地方
需要的东西: 标记 ..跳转
-->
<!--创建一个标记-->
<a name="mark">锚链接标记</a>
<!--跳转到标记-->
<a href="#mark">点击跳转</a>
功能性链接
<!--功能性链接 -->
<a href="mailto:aaa@qq.com">发送邮件</a>
<!--QQ点击联系
地址 : https://shang.qq.com/v3/widget.html
-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=24736743&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="发消息" title="发消息"/>
</a>
target
<!--target 目标跳转的网页打开方式
_blank : 打开新的网页
_self : 在本网页打开
-->
<p>
<a target="_blank" href="1.第一网页.html">打开第一个网页_在新网页中打开</a>
<a target="_self" href="1.第一网页.html">打开第一个网页_在自己网页中打开</a>
</p>
行内元素和块元素
独占一行的标签 : 块标签
- p
- h1~h6
只有自己那一部分 , 可以在行内定义多个的标签 : 行内标签
- a
- strong
- img
- em
开放标签—>闭合标签
<p> </p>
<p> </p>
<p> </p>
<p> </p>
自闭合标签
<br/>
列表
<!--无序列表-->
<!--
<ul> -> 无序列表
<li> -> 选项
-->
<h1>无序列表</h1>
<ul>
<li>java</li>
<li>C/C++</li>
<li>Linux</li>
<li>Python</li>
</ul>
<!--有序列表-->
<!--
<ol> -> 有序列表
<li> -> 选项
-->
<h1>有序列表</h1>
<ol>
<li>java</li>
<li>C/C++</li>
<li>Linux</li>
<li>Python</li>
</ol>
<!--自定义列表-->
<!--
<dl> -> 自定义列表
<dt> -> 列表标题
<dd> -> 列表选项
-->
<h1>自定义列表</h1>
<dl>
<dt>Java</dt>
<dd>OOP</dd>
<dd>Annotation</dd>
<dd>Reflection</dd>
<dt>Python</dt>
<dd>数据分析</dd
<dd>数据挖掘</dd>
<dd>...</dd>
</dl>
表格
为什么使用表格 ?
- 简单通用
- 结构稳定
表格结构
- 单元格
- 行
- 列
HTML表格的创建
<!--表格-->
<!--
table : 表格
tr : 行 table rows
td : 列
-->
<table border=1px>
<tr>
<!--colspan=跨列-->
<td colspan="3">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!--rowspan=跨行-->
<td rowspan="3">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
视频/音频
思考 : 如何在网页上播放视频和音频 ?
结论 : 应该有一个标签控制音频或者视频 .
video , audio
<!--播放视频-->
<!--前端要考虑问题 : 浏览器兼容性-->
<!--
video标签
src -> 视频路径 (必填)
controls -> 给视频增加控制播放的按钮
autoplay -> 自动播放视频
w-h -> 视频窗口大小
-->
<video src="../resources/video/多线程01：概述.mp4" controls width="1280px" height="720px" autoplay></video>
<!--音频标签-->
<!--
src -> 音频路径
controls -> 给音频增加控制播放的按钮
autoplay -> 自动播放视频
....
-->
<audio src="../resources/video/Human%20Legacy%20-%20Ivan%20Torrent.mp3" controls autoplay></audio>
网页结构分析
头部
导航
主体内容
底部
<header> 头部 </header>
<footer> 尾部 </footer>
<nav> 导航 </nav>
<article> 放文章 </article>
<code> 代码 </code>
<section>独立区域</section>
.......
内联框架
iframe 内联框架
<!--iframe内联框架-->
<!--
作用:在一个网页中嵌入另外一个网页
-->
<!--<iframe src="https://www.baidu.com" frameborder="0" width="960" height="540"></iframe>-->
<!--在网页中实现容器的效果,实现页面内容加载-->
<iframe name="markup" src="" frameborder="0"></iframe>
<a href="https://www.baidu.com" target="markup">test</a>
<a href="2.HTML的标签.html" target="markup">test</a>
<a href="3.图像标签.html" target="markup">test</a>
<a href="4.超链接.html" target="markup">test</a>
<iframe src="//player.bilibili.com/player.html?aid=54171171&cid=95552484&page=17"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true">
</iframe>
表单元素
什么叫表单 ?
登录 , 注册 …
常见表单元素
文本框 密码框 按钮 单选框 多选框 文本域 下拉框 文件域
邮箱 网址 数字 滑块 搜索框
<!--form为表单元素-->
<!--
action : 提交地址
method : 提交方式 : post/get
-->
<h1>注册</h1>
<!--
input属性:
type=类型
name: 名字 , 可以重复
id: 不能重复,保证全代码唯一
disabled: 禁用文本框
-->
<!--
post : 安全 效率低 能提交无限大的文件
get : 不安全 效率高 一次请求的文件量特别小 .
温馨提示 : 网页中一般使用post方式提交
-->
<form action="1.第一网页.html" method="get">
<!--文本框 : input type=text-->
<p>用户名 : <input type="text" name="username"> </p>
<!--密码框 : input type=password -->
<p>密码 : <input type="password" name="password"> </p>
<p>确认密码 : <input type="password" name="password"> </p>
<p>
<!--文件域-->
<input type="file">
</p>
<p>
<!--radio单选框-->
<!--name:绑定同一个组-->
<!--checked 默认选中-->
<!--
注意事项:
1. 若是要提交 , 则必须要有 name 和value属性
k=v&k=v&k=v&k=v&k=v&k=v
2. name就是key 提交的键 , vlaue就是提交的信息
-->
性别
<input type="radio" value="boy" name="group1">男
<input type="radio" value="girl" name="group1">女
<input type="radio" value="!boygirl" name="group1">人妖
</p>
<p>
<!--
注意事项:
1. 若是要提交 , 则必须要有 name 和value属性
k=v&k=v&k=v&k=v&k=v&k=v
2. name就是key 提交的键 , vlaue就是提交的信息
-->
爱好
<!-- checkbox多选框-->
<input type="checkbox" value="movie" name="hobby"/>看电影
<input type="checkbox" value="music" name="hobby"/>听歌
<input type="checkbox" value="road" name="hobby"/>压马路
<input type="checkbox" value="code" name="hobby"/>敲代码
</p>
<hr/>
<!--下拉框-->
<!--selected 选中-->
<select name="列表名称">
<option value="选择的值1">一</option>
<option value="选择的值2">二</option>
<option value="选择的值3" selected>三</option>
</select>
<select name="国家">
<option value="美国">美国</option>
<option value="中国" selected>中国</option>
<option value="印度">印度</option>
</select>
<select name="中国">
<option value="西安">西安</option>
<option value="重庆">重庆</option>
<option value="*" selected>*</option>
</select>
<p>
<!--按钮-->
<input type="button" value="我的第一个button按钮">
<!--图片按钮-->
<!--<input type="image" src="../resources/images/tx.jpg">-->
</p>
<p>
<!--
文本域
多行的文本框
-->
<textarea name="textarea" cols="20" rows="10">
文本内容
</textarea>
</p>
<hr/>
<!--邮箱表单简单验证-->
邮箱 : <input type="email" name="email"/> <br/>
<!--url简单验证-->
url : <input type="url" name="url"> <br/>
<!--数字的简单验证-->
数字 : <input type="number"> <br/>
<!--滑块,值得范围0~100-->
滑块 : <input type="range" name="range" value="30">
<!--搜索框-->
搜索框 : <input type="search" name="search">
<!--提交按钮 : input type=submit-->
<!--重填按钮 : type="reset"-->
<!--
提交会产生事件 , 会将表单的内容提交到action请求的地址 ,方法为method指定的方法
submit默认文字是提交 , 手动给按钮赋值使用 value
-->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
表单其他应用
隐藏域 , 只读 , 禁用
hidden : 隐藏域
readonly : 只读
disabled : 禁用
思考?为什么要表单验证
降低服务器压力
保证数据的安全性
表单验证需要哪些东西 ?
- 提示信息
placeholder-->默认提示信息
<p>用户名 : <input type="text" name="username" placeholder="请输出用户名"> </p>
- 非空判断 (必填项)
required-->必须填写此项
<p>密码 : <input type="password" name="password" required> </p>
- 正则表达式验证
pattern-->正则表达式
自定义验证 : <input type="text" pattern=" RE "/>
总结
上一篇： Java Map 深拷贝与浅拷贝
下一篇： [Java] 浅拷贝与深拷贝