学习笔记-HTML

1.前言

学习Web安全就必须对Web前后端有一定了解，所以我先来学习HTML，以下是我的HTML学习笔记，不如专业的Web前端从业者学习得透彻，记录了一些基础的知识点。

2.初识HTML

先介绍一下HTML的定义（百度百科）：

HTML称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

简单的说，HTML就是我们使用浏览器看到的页面，包括当前你正在浏览的博客。按下F12即可利用开发者工具查看网页源代码，平时多看别人的网页源代码也会对自己写代码的水平有帮助的。

说到这里，我再谈谈自己目前对浏览器工作过程的粗略理解：

当你打开浏览器输入一个网址后，浏览器首先会对服务器发出请求，在实施三次握手协议后连接成功，服务器会接受你的请求，在自身搜索你所要查找的文件，然后将该文件打包发出，当浏览器接收到文件后对html文件进行渲染，最后断开连接。

当然也就是在这个过程中会出现很多漏洞可以利用，比如利用TCP三次握手协议，每次握手时服务器会对该请求分配缓冲资源，若不断的对服务器进行请求会使服务器的通信缓冲耗尽陷入瘫痪，也就是TCP SYN洪水攻击；在浏览器发出请求后抓包伪装服务器进行会话劫持等。当然这些都是后话了，学习更高层次的东西前还是要打好基础，才能走的更远。

3.HTML学习

了解了HTML的概念及浏览器的工作原理后就可以开始学习了。（以下内容均使用缩进表达包含关系）

1.基本标签:

    <h1>~<h6>一到六级标题
    <p>段落标签。html段内连续空格或换行，只显示一个空格。连续空格：&nbsp;
    <br>段内换行
    <hr>水平线/分割线
    <span>段内分组。组合行内元素，以便通过CSS样式来格式化
    <!--这是一个注释。--> 用于解释说明的注释

    <b>定义粗体文本
    <em>定义着重文字
    <i>定义斜体字
    <small>定义小号字
    <strong>定义加重语气
    <sub>定义下标字
    <sup>定义上标字
    <ins>定义插入字
    <del>定义删除字

3.引文，引用，及标签定义：

    <abbr>定义缩写
    <address>定义地址
    <bdo>定义文字方向
    <blockquote>定义长的引用
    <q>定义短的引用语
    <cite>定义引用、引证
    <dfn>定义一个定义项目

4.表达计算机语言：

    <pre>标签保留换行和空格，适合表达计算机语言
    <code>定义计算机代码
    <kbd>定义键盘码
    <samp>定义计算机代码样本
    <var>定义变量

5.超链接：

    <a href="网址" >文字或图片</a>
    <a href="news.html">新闻</a>链接到本站点的其他网页，同一文件夹内
    <a href="http://www.baidu.com">百度</a>链接到其他站点,站点前需加上协议
    <a href="#">版块2</a>虚拟超链接
      做成段落<p>形式或使用<br />，如果多个超链接不分段落，则在一行上显示
      若在链接内加入target="_blank",则链接将在新标签页打开

6.图像格式：

    JPG:有损压缩，色彩丰富图片
    GIF:简单动画，背景透明
    PNG:无损压缩，透明，交错，动画，由GIF发展而来
       透明：给图片指定一种颜色，使其不被显示而成为透明
       交错：显示图片过程中由概貌到全貌，由模糊到清晰
    <img src="文件名.后缀" alt="图片无法显示时的替换文字" width="宽度" 
     height="高度" />
       src中应有文件的路径（绝对路径/相对路径）
       绝对路径：从盘符开始，以根目录为基准，从上到下
       相对路径：以该文档（网页所在文件夹）所在位置为基准，省略了网页文
                 件夹以上的路径，但向下文件夹仍需表示
               表示向下一级/，表示向上一级../

7.区域，列表，表格(依次嵌套)：

区域 div:<div id="container" align="center">区域内元素居中对齐,id
         表示唯一名称
无序列表 ul li:无序列表ul:<ul> 列表项li:<li>
有序列表 ol li:有序列表ol:<ol> 有序列表会对列表项进行标号
表格 table tr td th:表格<table>可用border="1"属性设置边框 行<tr> 
      单元格<td> 表头单元格（加粗）<th>
      <div id="container" align="center">
      <table border="1">
          <tr>
               <th></th>
          </tr>

           <tr>
              <td>
                  <ol>
                       <li></li>
                   </ol>
               </td>
            </tr>
       </table>
       </div>

8.表单域：

表单:
     <form action="数据处理网页">表单元素</form>
     <input type="text|password" name="" />name属性可在后端读取元
     素是哪个表单里的数据
     type属性规定了input的作用
     value属性定义了按钮对应的文本
账户、密码输入框：
     type属性text为文本输入框,password为密码输入框
        <form>
        账户：<input type="text"     name="userName" />
        <br />
        密码: <input type="password" name="userPsd" />
        </form>
提交、重置框：
     type属性submit为提交，reset为重置
     <form>
     姓名：
     <input type="text"   value=""    name="myName">
     <input type="submit" value="提交" name="submit">
     <input type="reset"  value="重置">
     </form>
单选、复选框：
     type属性radio为单选框，checkbox为复选框，ckecked属性为checked时为默
     认选中状态
     <form>
     性别：
     男 <input type="radio" value="boy" name="gender"checked="checked"/>
     女   <input type="radio" value="girl" name="gender" />
     <br />
     爱好：
     <input type="checkbox" value="1" name="music" checked="checked" />
     音乐
     <input type="checkbox" value="1" name="sport" />体育
     <input type="checkbox" value="1" name="reading" />阅读
     </form>
下拉列表框：
     当option元素的selected属性为selected时，该选项为默认选项
     <form>
     爱好：
     <select>
     <option selected="selected">吃饭</option>
     <option>睡觉</option>
     <option>打豆豆</option>
     </select>
     </form>
文本域：
      rows为行数，cols为列数，<textarea>内部为提示信息
      <form>
      个人简介：<br />
      <textarea rows="10" cols="50">
      最多不超过500字...
      </textarea>
      <br />
      <input type="submit"  value="提交">
      <input type="reset"  value="清空">
      </form>

9.Web语义化：

概述：让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内
            容
<em>强调，而<i>仅为斜体，无语义
<strong>重点强调，而<b>仅为粗体，无语义
自定义列表dl、列表项dt、描述dd：
一个<dt>为一个term，描述<dd>会自动缩进
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>

10.HTML5新特性:

新结构元素：
    HTML采用div+css划分区域
    HTML5中出现了<header>页首<nav>导航<content>内容(可继续嵌套)
    <aside>旁栏<footer>页脚可直接用于区域划分
音频audio：
    支持.mp3 .wav .ogg合适音频文件
    <audio src="peppa.mp3" controls="controls">
    浏览器不支持HTML5:audio       //在无法播放音频时显示
    </audio>
视频video:
    支持.mp4 .webm .ogg格式视频文件
        <video id="myvideo" width="420">
            <source src="course.mp4" type="video/mp4" />
            浏览器不支持HTML5:video
        </video>
        <button onclick="playPause">播放/暂停</button>

        <sctipt>
            var v=document.getElementById("myvedio");
            function playPause()
            {
                if (v.paused)
                    v.play();
                else
                    v.pasue();
            }
        </script>
Canvas绘图:
    1.定义画布：
            <canvas id="myCanvas" width="860" height="480">
                浏览器不支持画布
            </canvas>
    2.设置画布样式:
            #myCanvas {
                border:1px solid black;
            }
    3.JS准备绘图上下文环境:
    4.JS绘图:

<canvas id="myCanvas" width="860" height="480">
浏览器不支持画布
</canvas>
</body>
<script>
function draw(event){
var canvas = document.getElementById("myCanvas");
var pen = canvas.getContext("2d");
pen.moveTo(50,50);
pen.lineTo(300,300);
pen.lineWidth = 5;
pen.strokeStyle = "red";
pen.stroke();
}
window.onload = draw;
</script>

以上就是基本的HTML知识啦，在学习完之后我还试着自己在本地做了个网页，但是因为还没学CSS和JS，样式极其难看，不过看着自己学的知识能用到也是很开心的，同时还巩固的自己的知识点和编程能力，建议大家可以多动手，进步会更快的。