前端学习记录 Day1（Html）

╰半夏微凉° 2022-01-21 10:11 267阅读 0赞

### 文章目录 ###

*  Day 1
 *   *  HTML简介
     *  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:24736743@qq.com">发送邮件</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 : 禁用

### 思考?为什么要表单验证 ###

降低服务器压力

保证数据的安全性

### 表单验证需要哪些东西 ? ###

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 "/>

## 总结 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]: /images/20220121/7d01e007caea4935ab71b65f7b7eb2f0.png