前端学习记录 Day1（Html） - 好文

<>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>一级标题</h1> <h2>一级标题</h2> <h3>一级标题</h3> <h4>
一级标题</h4> <h5>一级标题</h5> <h6>一级标题</h6>
段落标签
  <h1>段落标签</h1> <p>两只老虎两只老虎</p> <p>跑得快跑得快</p> <p>
一只没有耳朵一只没有尾巴</p> <p>真奇怪真奇怪</p> <p>两只老虎两只老虎</p> <p>跑得快跑得快</p> <p>一只没有耳朵
一只没有尾巴</p> <p>真奇怪真奇怪</p>
换行标签
  <h1>换行标签</h1> 两只老虎两只老虎<br/> 跑得快跑得快<br/> 一只没有耳朵
一只没有尾巴<br/> 真奇怪真奇怪<br/> 两只老虎两只老虎<br/> 跑得快跑得快<br/> 一只没有耳朵一只没有尾巴<br/> 真奇怪真奇怪<
br/>
水平线标签
  <h1>水平线标签</h1> <hr/> 两只老虎两只老虎<br/> 跑得快跑得快<br/>
一只没有耳朵一只没有尾巴<br/> 真奇怪真奇怪<br/> 两只老虎两只老虎<br/> 跑得快跑得快<br/> 一只没有耳朵一只没有尾巴<br/>
真奇怪真奇怪<br/>
字体标签
   <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
* …
图像标签 :
   <img src="../resources/images/tx.jpg" title=
"鼠标悬停说:a" alt="b" width="300px" height="300px">
<>链接标签

超链接
  <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:[email protected]">发送邮件</a>  <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
 <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/>
<>列表
  <h1>无序列表</h1> <ul> <li>java</li> <
li>C/C++</li> <li>Linux</li> <li>Python</li> </ul>   <h1>有序列表</h1> <ol> <li>java</li> <li>C/C++</li> <li>Linux</
li> <li>Python</li> </ol>   <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 border=1px> <tr>
 <td colspan="3">1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr>
 <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="
../resources/video/多线程01：概述.mp4" controls width="1280px" height="720px" autoplay
></video>   <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 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>
<>表单元素

什么叫表单 ?

登录 , 注册 …

<>常见表单元素

文本框密码框按钮单选框多选框文本域下拉框文件域

邮箱网址数字滑块搜索框
  <h1>注册</h1>
  <
form action="1.第一网页.html" method="get">  <p>用户名 : <
input type="text" name="username"> </p>  <p>密码
:<input type="password" name="password"> </p> <p>确认密码 : <input type="password"
name="password"> </p> <p>  <input type="file"> </p> <p>
   
性别<input type="radio" value="boy" name="group1">男 <input type="radio" value="
girl" name="group1">女 <input type="radio" value="!boygirl" name="group1">人妖 </p>
<p>  爱好  <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/>   <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按钮"> 
 </p> <p>  <textarea name="textarea" cols="20" rows="10"> 文本内容 </textarea> </p>
<hr/>  邮箱 : <input type="email" name="email"/> <br/>
 url : <input type="url" name="url"> <br/>  数字 : <
input type="number"> <br/>  滑块 : <input type="range" name="
range" value="30">  搜索框 : <input type="search" name="search">
   <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 "/>
<>总结

热门工具换一换