快速了解HTML简单上手

HTML基本学习

互联网原理

• 互联网原理：上网即请求数据，在浏览器输入一个网址，浏览器会通过http协议向服务器发送请求，服务器响应后，将文件传输到浏览器端，过程中有实际的物理文件的传输。
• 数据：文字，图片，视频，音频等。

服务器简单了解

• 服务器本身也是一台计算机，功能比普通的计算机强大。主要用于存储网页和数据。
• 数据的上传和更改是在本地计算机上完成，通过一些管理软件远程控制服务器。FTP
• 服务器要求24小时在线。

浏览器

• 网页请求和接受的客户端。
• HTTP请求的发起，接收，都是由浏览器完成
• 全球五大浏览器：谷歌（chrome），IE，火狐（Firefo），苹果（Safa），欧朋
• 临时存储文件夹：每个浏览器都有临时存储文件夹，内部包含从服务器请求的文件。
• 后期开发时，兼容低版本的用户，需要做兼容的书写。

HTTP协议

• http:hypertext transfer protocol 超文本传输协议
• HTTP包含请求和响应两部分
  1、请求：requests 浏览器根据网址向对应的服务器发送请求。
  2、响应：response 服务器根据请求响应文件，将页面传输给客户端，在浏览器中进行网页的渲染。
• 访问时，会同时发出多个http请求，包含网页的图片，视频，音频等文件。

HTML基础

纯文本

• 只包含文字就是纯文本文件。案例：记事本文件。
• 纯文本文件：只包含文字内容，不保存任何样式。一个汉字时两个字节
• txt：只保存文字内容，不保存文字的样式。txt文件样式设置之后只是一个本机显示状态，不会保存在文件里，其他计算机查看时，就是默认显示状态。
• word：不仅保存内容，还保存样式。
• 所学习的HTML，CSS，JS都是纯文本文件。
• 纯文本文件都能够用纯文本软件编辑。sublime：高效率程序书写工具，Webstrom：高效项目编程工具。

HTML基本概念

• HTML：hypertext Marku language，超文本标记语言。用来描述网页的一中语言。
• 作用：制作网页，负责描述文档的语义的语言。HTML用文本去给普通文本添加语义，用到的这些文本就是超文本。超文本在浏览器里是不会显示，但是在编辑器里面就是一些普通的文本。超文本是用来添加语义的。

sublime快捷键

• HTML：xt–点击table/ctrl+e 生成HTML结构
• 标签名–tab 自动生成标签
• H$*数字 生成h1到h数字的标签
• ctrl+滑轮滚动 放大缩小文字
• 按住滚轮拖动 选中多行，一起进行编辑
• ctrl+shift+D 复制光标所在行
• ctrl+shift+k/ctrl+x 删除光标所在行
• ctrl+shift+上箭头 将光标所在行上移一行
• ctrl+shift+下箭头 将光标所在行下移一行
• 代码书写时，所有标签及符号都是在英文状态下的。

HTML结构

DTD：doctype definition.文档类型定义。定义我们这个HTML文件使用的是哪一个版本的规范。
HTML规范是我们要书写HTML要遵循的规范，规定了我们使用的标签，语法。
HTML、css、js规范的维护和制定的组织w3c
HTML4.0版本，将结构和样式进行了分离。

HTML标签

• HTML是一个双标签
• 双标签：有开始标签和结束标签。必须成对出现。

head标签

• head标签也是一个双标签，里面是对我们的网页精选的一个配置。
• meta标签：单标签。定义了当前的文件所使用的字符集。
  1、utf-8：国际同样字库，涵盖了所有人类的语言文字。一个汉字三个字节。
  2、gb2312/gbk：中国字库，国标，涵盖了汉字和一些常用的外文。符号。一个汉字2个字节。
  • 使用情况：
    1、如果是制作外文网站，使用utf-8
    2、如果网站中有大量中文，且要求加载速度，使用gbk
    3、注意：meta标签声明的字库必须和软件默认保存字库相同，否则出现乱码。
• title标签：双标签，内部书写网页的标题
• 搜索引擎优化：seo，提升搜索排名。title里的文字会作为关键字首先被搜索引擎抓取。

HTML语法

• HTML对换行和空格不敏感。对标签的嵌套敏感。
  为了保证代码的可读性，需要对我们的标签进行合理的缩进。
• 空白折叠现象
  在普通文本内部：如果有空格，缩进，换行，将这些空白区域折叠成一个空格显示在浏览器中。
  &nbsp；特殊字符，表示一个空格
• html标签
  标签：也叫标记
  1.标签必须写在尖括号里面
  2.双便签必须成对出现，缺少就会影响后面的内容。
  3.结束标签必须写关闭符号 / 。
• 标签的分类：
  1、容器级：内部还可以放置任意类型的标签，甚至是容器级。div，h
  2、文本级：只能放文字，图片，表单元素，废弃文字修饰标签等。不能放容器级标签。p
• 标签属性
  1、每一个标签都有自己特定的属性。属性书写在标签起始标签的内部，与标签名用空格隔开，属性与属性之间也需要用空格隔开。
  2、属性都有属性值，属性名k（key），属性值v（value），键值对写法。
  3、标签属性值可以有一个或者多个，多个属性值之间用空格隔开

h系列标签 容器级

• h系列标签分为六个标题，级别依次降低，重要程度依次降低。
• 约定俗成，一般一个页面里面h1标签的权重是最高的，最便于搜素引擎搜索的。一个页面只写一个h1标签。一般将h1给logo
• 所有的h系列标签虽然是容器级，它们之间并没有嵌套关系

p标签

• paragraph，段落的意思。文本级标签。给我们文本添加一个段落的语义。
• 注意：一个p标签只能作用与一个段落。多个段落要用多个标签分别标记。

img标签

• image，图片的缩写，表示定义一个图像，相当于一个特的文本，可插入的类型：jpg，png，gif。
• img标签的属性：
  1、src 表示图片的路径。必须的写的属性
  • 路径就是我们查找相关文件位置的方法
    • 查找方式有：相对路径、绝对路径。
      • 相对路径：查找文件时，从html文件本身出发，找文件的位置。不能跨盘
        1 、 同级查找：直接书写文件名字（包括扩展名）
        2.、 子级查找：进入文件查找过程。书写对应的文件夹名字，后面用/表示进入文件夹，后面直接书写指定的文件名。
        3、上级查找：文件放在html上级的文件夹里，需要先退出当前级别，返回到上一级文件夹，方法就是用退回，退出几级就书写几级。
    • 绝对路径：
      1、从盘符出发寻找文件目标，以http://开头的路径也是绝对路径。
      2、常用：相对路径和网址形式的绝对路径。
  • width 表示图片的宽度
  • height 表示图片的高度
  • border 边框属性，它的值可以设置边框的厚度
  • title 设置鼠标放在图片时的提示文本
  • alt 设置图像没有找到的时候替换文本

a标签

anchor，锚的意思。超级链接，可以跳转到相应的网页。

• a标签的属性
  1、href hypertext reference超文本引用，值为跳转连接的地址
  2、target 表示是否在新标签页打开连接，默认是在原窗口打开。属性值“_blank” 表示在新窗口打开；
  3、title 设置鼠标悬停文本；
  
• 页面内锚点跳转：
  • 添加锚点的方法：
    1、给对应位置的标签添加一个id属性，属性值就是id名。
    跳转锚点：将href的属性值书写为#id名。
    2、在需要添加锚点的位置，加入一个a标签，不用书写href属性，添加一个name，命名与id一样
    跳转锚点：将href的属性值书写为#name名。

列表

• 将一些内容或者样式类似相近，相关的内容一起书写
• 有三种列表：无序列表、有序列表、定义列表
  • 无序列表
    1、作用：给我们添加一个无序的列表语义。
    2、无序列表是一组标签。ul 和 li 必须成对出现。
    ul：unorder的缩写：
    li：list item，列表项。
    ul 和 li 之间是嵌套的关系。ul 里可以嵌套一个或多个li 标签
    无序列表并不会帮我们添加小圆点等样式。
    无序列表里的项并没有先后顺序。
  • 有序列表
    与无序列表类似
    有序列表的作用：给我们添加有序列表的语义，搭建列表结构。
    也是一组标签，ol 和 li 。
    ol：order list，有序l列表
    ol 和 li 必须同时出现，之间是嵌套关系ol > li
    ol 只能嵌套 li 标签，li 标签不能脱离ol单独出现。
    li 是一个容器及标签，里面可以存放任意其他标签，甚至是ol ， ul。
    ol 默认有一个数字前缀，内置的一些预设样式，并不是ol 的功能，只能同CSS样式调整
  • 定义列表
    有三个标签参与的，dl，dt，dd。dl>dt=dd。
    有自己定义的主题，定义的解释。
    定义列表的作用：给我们添加一个定义列表的结构，里面有定义主题，对主题的解释。
    标签解释：de
    dl ：definition list。定义列表
    dt ：definition title。定义标题
    dd ：definition description 定义说明、解释。解释的是前面最近的dt。
    这一组便签需要同时出现，之间有一个嵌套关系。
    每一个dt 后面可以跟一个或多个dd。
    列表的使用：根据实际情况，根据结构语义来进行选择。

div和span

div+css布局
div和span的认始
通常称为“盒子”
div是大的范围，span是小的跨度。
div：divsion。范围、区域、分割。并没有什么特殊的语义。通常用来布局。
div里经常放置一些具有某些特殊功能、相似类型的标签。这就是布局过程
div是一个典型的容器级标签，可以放置任何的标签。

• span:小区域、小跨度。常用于小范围调整布局
• span是一个文本级标签，不能盛放容器级标签。
• 一般认为p>span>a。

表格

• 表格基础。table、tr、td。
• 表格的标签是嵌套关系。依次嵌套。
  1、table：表格
  2、tr table rows：行
  3、td table dock。单元格里。
• th：添加表头的语义。书写在tr中。
  1、合并单元格，单元格标签：td、th。
• 有两个属性用来合并单元格。
  1、rowspan：合并行单元格
  2、colspan：合并列单元格
  3、属性值：是一些数字，表示合并几个单元格。
  4、将所有的tr写完，对每一个tr内部的td单独书写。
• 表格分区
  1、标题：caption
  2、表头：thead
  3、主体：tbody

表单

表单就是网页上可以提供用户输入和选择的一些控件。

• form
  我们所有的表单元素需要写在form标签内部。不是一个结构性标签，而是一个功能性的标签。
  功能：规定我们提交的数据发送到哪里，发送的方法是哪种.
  method：方法，提交数据的方法，属性值get，post。
  action：提交的位置。
• 文本框
  允许用户输入文本
  input：输入
  有一个属性：type，根据属性值的不同，input标签代表的是不同的表单元素。
  表单元素：类似一些特殊文本。
  
• 密码框
  type属性值：password
  
  效果：
  
• 按钮
  按钮有三种：普通、提交、重置。
  普通type：button
  提交type：submit
  重置type：reset
  
  效果：
  
• 单选框
  type：radio。同一组单选按钮只能选择一个。
  如果不设置name属性，不知道哪些单选框是一组。不能做到单选的效果。
  给同一组的单选框，都添加一个name属性，属性值必须一致。
  
  效果：
  
• 多选框
  type：checkbox.可以在同一组内进行多选。
  
  效果：
  
• 文本域
  标签：tetxarea。可以输入多行文本。
  两个属性值，规定显示多少行多少列的文字。
  rows：属性值是数字，数字表示有多少行。
  cols：属性值是数字，表示每一行有多少个字节。
  
  效果：
  
• 下拉菜单
  是一组标签，必须同时出现，有嵌套关系。
  select：选择
  option：选项
  select > option
  
  效果：
  
  实际工作中：一些下拉菜单都是用无序列表书写的。
  表单作业：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单作业</title>
</head>
<body>
<form action="">
    <P>
        <span>*手机号码</span>
        <input type="text">
        <span>@163.com</span>
    </P>
    <P>
        <span>*图片验证码</span>
        <input type="text">
        <img src="20180611113702789.jpg" width="100" height="50">
    </P>
    <p>
        <input type="button" value="免费获取验证码">
    </p>
    <P>
        <span>*短信验证码</span>
        <input type="text">
    </P>
    <P>
        <span>*密码</span>
        <input type="password">
    </P>
    <P>
        <span>*确认密码</span>
        <input type="password">
    </P>
    <!--多选框 checked属性如果加上则默认勾选多选框。label标签将多选框与文字绑定，id属性要与label标签中的for属性相同。-->
    <p>
        <input type="checkbox" checked="checked" id="server">
        <label for="server">同意"服务条款"</label>
    </p>
    <!--立即注册按钮-->
    <p>
        <input type="submit" value="立即注册">
    </p>
</form>
</body>
</html>

效果：

表格作业：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格作业</title>
</head>
<body>
    <table border="1">
        <caption>耕地保有量表格</caption>
        <thead>
            <tr>
                <th rowspan="3">地区</th>
                <th rowspan="2" colspan="2">2005年耕地面积</th>
                <th colspan="4">耕地保有量</th>
                <th colspan="2" rowspan="2">基本农田保护面积</th>
            </tr>
            <tr>
                <th colspan="2">2010年</th>
                <th colspan="2">2020年</th>
            </tr>
            <tr>
                <th>万公顷</th>
                <th>万亩</th>
                <th>万公顷</th>
                <th>万亩</th>
                <th>万公顷</th>
                <th>万亩</th>
                <th>万公顷</th>
                <th>万亩</th>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td>北京</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
            </tr>
        <tr>
                <td>北京</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

效果：

页面布局作业：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格作业</title>
    <style>
        .tieba{
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="tieba">
        <h2>贴吧分类</h2>
        <ul>
            <li>
                <dl>
                    <dt>娱乐明星</dt>
                    <dd>
                        <a href="#">港台东南明显</a>
                        <a href="#">内地明显</a>
                        <a href="#">韩国明显</a>
                        <a href="#">日本明显</a>
                        <a href="#">时尚人物</a>
                    </dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>爱综艺</dt>
                    <dd>
                        <a href="#">内地综艺</a>
                        <a href="#">台湾综艺</a>
                        <a href="#">韩国综艺</a>
                        <a href="#">日本综艺</a>
                        <a href="#">时尚</a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
</body>
</html>

效果：

• html杂项
  注释：里面的内容是给程序员看的。在浏览器上不会渲染
  作用：清晰注释，有一部分代码不想显示，希望保留。
  
  快捷键：ctrl + /
  字符实体：
  我们的一些特殊符号，并不能直接在文本内容里书写。
  html提高了一套书写特殊符号的替代符号，就是字符实体，也叫转义字符。
  < 小于号 ：&lt less than
  >大于号 ：&gt greater than
  无换行空格：&nbsp non breaking space
  版权@：&copy copyright

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符实体</title>
</head>
<body>
    <!--小于号、大于号字符实体-->
    <p>这里是添加了一个&lt;p&gt;标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签</p>
    <p>这里是添加了一个&lt;p&gt;标签&copy;</p>
</body>
</html>

效果：

• 废弃标签
  b ：加粗，bold
  u ：下划线，underline
  i ：倾斜，italic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>废弃标签</title>
</head>
<body>
    <font color="red">文字</font>
    <b>这是一个b标签</b>
    <u>这是一个标签</u>
    <i>这是一个i标签</i>
    <del>这是一个del标签</del>
    <strong>这是一个strong标签</strong>
    <em>这是一个em标签</em>
</body>
</html>

效果: