HTML笔记

一、概念

  1. Hyper Text Markup Language 超文本标记语言 -- 最基础的网页开发语言
    • 超文本：是用超链接的方法，将个各种不同空间的文字信息组织在一起的网状文本
    • 标记语言：由标签构成的语言 <标签名> 如HTML，XML【标记语言不是编程语言，没有逻辑性。写上就会执行】

二、快速入门

  1. 语法：

    1. 文档后缀名：html / htm
    2. 标签分类
      1. 围堵标签：有开始标签与结束标签 如 把子标签堵在里面
      2. 自闭合标签：开始标签与结束标签在一起 如
        换行标签
    3. 标签可以嵌套格式：<aa><bb>
      • 注意！！需要正确嵌套，不能“你中有我，我中有你”
      </bb></aa>
    4. 在开始标签中可以定义属性，属性由键值对组成，值需要用引号（单双均可）括起来
    5. HTML的标签不区分大小写，但是建议小写

  2. 实例：

    • 代码

      <html>
    <head>
        <title>我是标题</title>
    </head>
    <body>
        <font color = 'red'>Hello HTML</font></br>
        <font color = 'green'>Hello HTML</font>
    </body>
</html>

    • 效果

      image-20200309181233907

三、标签

  1. 分类
    • 文件类标签
    • 文本类标签
    • 图片类标签
    • 列表类标签
    • 链接类标签
    • 表格类标签

  2. 文件标签：构成HTML最基本的标签

    • <html>：HTML文档的根标签
    • <head>：头标签。用于指定HTML文档的一些属性。引入外部的资源
    • <title>：标题标签。定义标题
    • <body>：体标签。
    • <!DOCTYPE>：HTML5中定义该文档是HTML文档

  3. 文本标签：与文本有关的标签

    • 注释：<!--注释内容-->

    • <h1> to <h6>：标题标签

      • h1~h6 字号逐渐递减

    • <p>：段落标签

    • <br> ：换行 写法 <br/> 或者<br> 都可以 自闭合标签

    • <hr>：展示一条水平线

      • 属性color：颜色
      • 属性weidth：宽度
      • 属性size：高度
      • 属性align：对齐方式【center居中 left左对齐 right右对齐】

    • <b>：字体加粗

    • <i>：字体斜体

    • <font>：字体标签【已淘汰】

      • 属性color：颜色
      • 属性size：字号
      • 属性face：字体 -- PC支持这种字体才会正确显示

    • <center>：文本居中标签【已淘汰】

    • 属性定义的方式

      • color：
        • 英文单词：red、green、blue
        • rgb(值1, 值2, 值3)：三原色【红绿蓝】占比情况 值范围为[0~255] 如rgb(0, 0, 255)
        • 值1值2值3：效果同上 值范围00~FF【十六进制】 如#FF00FF
      • width：
        • 数值形式：width='20'，数值单位默认为px【像素】
        • 数值%：相对于父元素的比例

    • 特殊符号表

      • image-20200309214143825
  4. 图片标签
    • <img>标签
      • 属性src：指定图片位置
        • ./image/img111.jpg相对路径。image目录是本文档同级目录，img111.jpg是image目录下的图片
        • ..//image/img112.jpg相对路径。image目录是本文档上一级目录同级目录，img112.jpg是image下的图片
  5. 列表标签

    • 有序列表

      • ol：

        <!--tye属性可以修改序号样式   start属性可以定义开始的序号  start="5" 从第五个开始-->
<ol type="a" start="5">
    <li>朝辞白帝彩云间</li>
    <li>千里江陵一日还</li>
    <li>两岸猿声啼不住</li>
    <li>轻舟已过万重山</li>
</ol>

      • li

    • 无序列表

      • ul

        <!--无序列表-->
<!--可以通过type属性定义无序列表项的标识符号 [disc / square / circle]-->
早发白帝城<br>
<ul type="square">
    <li>朝辞白帝彩云间</li>
    <li>千里江陵一日还</li>
    <li>两岸猿声啼不住</li>
    <li>轻舟已过万重山</li>
</ul>

      • li

      • image-20200310134413400

  6. 链接标签
    • <a>标签用来定义一个超链接
      • 属性href：定义超链接跳转的资源URL【href="https://www.baidu.com/"】
      • 属性target：指定打开资源的方式
        • _self：在本页面打开 【默认值】
        • _blank：打开一个新的页面，在新页面打开资源
  7. 块标签
    • div标签：每一个div占满一整行。 会换行 块级标签
    • span标签：文本信息在一行展示，行内标签 内联标签

  8. 语义化标签 -- h5中为了提高程序的可读性，提供了一些标签

    • <header>：h5中把HTML头标签内容放在<header>里面，表示这是头部内容，提高了程序的可读性【之前使用<div id = "hreader">定义】
    • <footer>：h5中把HTML文档末尾的内容放在<footer>里面，表示这是尾部内容【之前使用<div id = "footer">定义】

  9. 表格标签

    • <table>：定义表格
      • width属性：宽度
      • border属性：定义一个边框
      • cellpadding：定义内容与单元边沿之间的距离
      • cellspacing：定义单元格之间的距离，如果与上一条都指定为0 ，则单元格之间的线会合并为一条
      • bgcolor：指定整个表格背景颜色
      • align：指定表格在文档中的位置
    • <tr>：定义单元格行
      • align：一行表格的内容在单元格中的对齐方式
      • bgcolor：指定一行背景颜色
    • <td>：定义单元格 列
      • rowspan：合并行单元格，合并后此行占几行则属性值为几
      • colspan：合并列单元格，合并后此列占几格则属性值就为几
        • 如此例中第一行三个单元格，第二行两个单元格【第一行的哪个占了两行】，第三行两个单元格image-20200312152844232
      • align：一列表格的内容在单元格中的对齐方式
      • bgcolor：指定一列的那日荣黄背景颜色
    • <th>：定义表头单元格【自动加粗/居中对齐】
    • <caption>：定义表格的标题
    • <thead>：表示表格的头部分【增强可读性，在CSS中再控制】
    • <tbody>：表示表格的体部分
    • <tfoot>：表示表格的尾部分

  10. HTML表单标签

    • 表单：

      • 概念：用于采集用户输入的数据的。用于与服务器进行交互的

      • 标签：<form> -- 用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

        • 属性action：指定提交数据的URL【即提交到哪个页面】

        • 属性method：指定提交方式

          • 分类：一共分为7中。其中有两种比较常用

            • POST：

              • 请求参数不会在地址栏中显示，会封装在请求体中【HTTP协议】
              1. 请求参数的长度没有限制的
              2. 较为安全

            • GET：

              • 请求参数会在地址栏中显示，会封装在请求行中
              1. 请求参数的长度是有限制的
              2. 不太安全【参见第一条 =.= 】

        • 表单项中的数据要想被提交，必须指定其name属性

    • 表单项标签【输入的数据的形式】

      • 1.<input>：可以通过type属性值，改变元素展示的样式

        • 属性type：

          • text取值：文本输入框【默认】

            • placeholder：指定输入框的提示信息，当输入框内容发生变化，会自动清空提示信息

          • password取值：密码输入框

            • placeholder属性可以用灰色字体显示提示信息输入即消失
              【value属性效果相似，但输入不消失】
              适用于type = "text"/"password"

          • radio取值：单选框

          • checkbox取值： 复选框

          • 注意！！

            • 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
            1. 一般会让每一个单选框提供value属性，指定其被选中后提交的值【比如gender的value属性未指定，则提交时提交的是on，但不知道提交的是啥值】
            2. checked 属性可以指定默认值 书写方式为 checked="checked"或者直接写checked
            3. 复选框同上

          • file取值：可以选取本地的文件

          • hidden：取值：隐藏域。可以隐藏某些值，可以提交信息

          • button取值：type取值button时，是一个普通的按钮

          • image取值：type取值image时，是一个图片提交按钮，可以通过src属性设置图片路径

          • h5中new的取值

            • color取值：取色器，提交时可以提交这个颜色
            • date取值：时间取值，包含年月日
            • datetime-local取值：包含年月日时分
            • email取值：输入邮箱，会对输入的信息做一个简单的校验【必须包含@符号】
            • number取值：只能输入数

        • label标签：label标签的for属性一把会和 input 的id 属性对应 如果对应了

          则点击label区域，会让input输入框获取焦点【`<label for = "username"> 用户名</label> <input type = "text” id = “username”>` 】

      • 2.<select>标签：下拉列表

        • 子元素：option，指定列表项
        • 注意：为了使select标签可以提交，其name属性必须指定值有的浏览器不支持中文，可以在value属性值中写1 2 3...代表选择

      • 3.<textarea>标签：文本域，很多行文本

        • 属性cols：指定列数，每一行有多少字符
        • 属性rows：默认多少行
        • 同样要指定name属性