文章目录

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:24736743@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 : 禁用

思考?为什么要表单验证

降低服务器压力

保证数据的安全性

表单验证需要哪些东西 ?

  1. 提示信息
placeholder-->默认提示信息
<p>用户名 : <input type="text" name="username" placeholder="请输出用户名"> </p>
  1. 非空判断 (必填项)
required-->必须填写此项
<p>密码 : <input type="password" name="password" required> </p>
  1. 正则表达式验证
pattern-->正则表达式
自定义验证 : <input type="text" pattern=" RE "/>

总结

前端学习记录 Day1（Html）_标记语言