科技资讯

Document

HTML基础（自学笔记）

HTML基础

html简介

发展历程

  • 网页制作（Web1.0时代）：静态页面，仅仅供用户浏览而无法与服务器进行数据交互的页面

  • 网页三剑客：FireWorks，Dreamweaver，Flash

  • 前端/后端开发（Web2.0时代）：提供了用户与服务器进行交互的功能

  • 前端：动态页面/用户页面，用户能看到的页面

  • 后端：负责处理数据存储、业务逻辑和与用户界面无关的功能，用户看不到但能使用

  • 前端三剑客：HTML，CSS，JS

    1. html：Hyper Text Markup Language超文本标记语言，用于控制网页的结构，类比盖房子
    2. css：Cascading Style Sheets层叠样式表，用于控制网页的外观，类比装修
    3. JS：JavaScript嵌入式脚本语言，用于控制网页的行为，类比通水通电
      （上述三个技术只是基础，深入还有jQuery、Vue.js、SEO等）

  • 后端三剑客：PHP，JSP，ASP.NET

    1. PHP：Hypertext Preprocessor是一种开源的服务器端脚本语言，被广泛用于 Web 开发，易于学习，开发迅速，与各种数据库交互能力强，广泛用于小型到大型网站的开发
    2. JSP：JavaServer Page是一种 Java Web 编程技术，它允许开发者将 Java 代码嵌入 HTML 页面中，具有面向对象的编程能力
    3. ASP.NET：由微软开发的Web应用程序框架，集成了 Visual Studio 开发环境，用于构建强大的、安全的 Web 应用程序

  • 学习路线：HTML-CSS-JS-jQuery-HTML5-CSS3-ES6-移动web-Vue.js

什么是html

  • 定义：是网页的标准语言，并不是编程语言，而是一门描述性的标记语言

  • 标签：一般都是成对出现，表示开头和结尾，又称为元素

  • 学习内容：学习各种标签来搭建网页的“骨架”，针对想显示的内容，具体地正确地使用标签

  • 浏览器：解释相关代码，呈现成视觉上的网页效果和提供用户与这些网页交互的方式

基本标签

html的基本结构

  1. !DOCTYPE html：文档声明，表明一个html页面

  2. html标签：告诉浏览器页面的起点和终点

  3. head标签：用于定义一些特殊的内容，例如页面标题、定时刷新频率、外部文件等

  4. body标签：内部用来编写代码

head内部标签

  1. titile标签：用于定义显示在浏览器栏目的标题，而不是文章标题
  2. meta标签：用于定义页面的特殊信息，如页面关键字、页面描述等，不是给用户看的，而是给搜索引擎蜘蛛看的
    • 搜索引擎蜘蛛/网络爬虫/网络机器人：搜索引擎用于自动浏览互联网上的网页、获取网页内容并建立索引的程序，它们通过遍历互联网上的页面，收集信息，以便搜索引擎能够快速、准确地响应用户的搜索查询
    • name属性：
      • keywords：关键词
      • description：描述
      • author：作者
      • copyright：版权信息
    • http-equiv属性：
      • 定义网页所使用的编码：一般来说使用utf-8,一定要加入防止乱码
        <meta http-equiv="Content-Type" content="text/html; charset = 编码"
        <meta charset="编码">
      • 定义网页自动刷新跳转：
        <meta http-equiv="refresh" content="时间;url=网址">


  1. style标签：用于定义元素的CSS样式，现在暂时不需要学习
  2. script标签：用于定义页面的JavaScript代码，现在暂时不需要学习
  3. link标签：用于引入外部样式文件，现在暂时不需要学习
  4. base标签：无意义，可以忽略

html注释

  • 内容不会显示在浏览器中，只提供给程序员供理解代码
  • 只有关键的代码才需要注释 养成良好习惯
    <!--注释的内容>

文本

文本简介

  • 静态页面组成元素：文字、图片、超链接、音频和视频

  • 动态：不是页面的视觉效果会动，而是用户能够与服务器进行交互

文本的基本标签

  1. 标题标签
    • 共有6个级别的标题标签：h1,h2,h3,h4,h5,h6，每个级别的内容字体不一样
    • h1标签只能有一个表示页面的大标题，而其他可以有多个
  2. 段落标签
    • 段落标签会自动换行，并且段落和段落之间有一定间距：<p>段落内容</p>
    • 换行标签，单独出现，可以随意对文字进行换行处理：<br/>

  3. 文本标签
    • 粗体标签：strong、b
    • 斜体标签：em、i、cite
    • 上标标签：sup
    • 下标标签：sub
    • 中划线标签：s
    • 下划线标签：u
    • 小字号标签：small
    • 大字号标签：big
  4. 水平线标签
    • hr/，意味horizon，单独出线，可以实现一条水平线的效果
  5. 划分标签
    • div，意味division，用来划分一个区域，使得代码具有逻辑性，这在后面进行区域控制时具有重要意义
  6. 特殊符号：都是以&开头，以英文的分号;结尾
    • 空格：&nbsp; （一个汉字是三个空格的宽度）
    • 双引号：&quot;
    • 左单引号：&lsquo; 或 &apos;
    • 右单引号：&rsquo; 或 &apos;
    • 乘号：&times;
    • 除号：&divide;
    • 大于号： &gt;
    • 小于号： &lt;
    • 与：&amp;
    • 或：&or;
    • 长破折号：&mdash;
    • 分节符：&sect;
    • 版权符：&copy;
    • 注册商标：&reg;
    • 商标：&trade;
    • 欧元：&euro;
    • 日元：&yen;
    • 英镑：&pound;
    • 度：&deg;
  7. 区分
    • 自闭合标签：单独出现
    • 一般标签：成对出现
    • 块标签/块元素：每个标签独占一行
    • 行标签/行元素：分别在行的两侧或单独在行的中间，不能单独一行

列表

有序列表

  1. ordered list 块标签：ol
  2. list 行标签：li
  3. 注意：ol和li需要配合使用，不能单独使用，且ol的子标签只能是li，且ol内部的文本只能在li之间添加
  4. type属性：改变列表项符号（默认是数字）
    <ol type = "属性值">
    • 1：阿拉伯数字
    • a：英文小写字母
    • A：英文大写字母
    • i：小写罗马数字
    • I：大写罗马数字


无序列表

  1. unordered list 块标签：ul
  2. list 行标签：li
  3. 注意：ul和li需要配合使用，不能单独使用，且ul的子标签只能是li，且ul内部的文本只能在li之间添加
  4. type属性：改变列表项符号（默认是实心圆）
    <ul type = "属性值">
    • disc：实心圆
    • circle：空心圆
    • square：实心正方形

自定义列表

  1. 定义列表definition list 块标签：dl
  2. 定义名词definition term 行标签：dt
  3. 定义描述definition description 行标签：dd


表格

基本结构

  1. 表格行 块标签：table
  2. 表格行 块标签：tr
  3. 表格单元格 行标签：td
  4. 表格标题 行标签：caption
  5. 表头单元格 行标签：th
  6. 注意：
    • 浏览器会以“粗体”和“居中”来显示th之间的内容
    • 有多少个tr，就有多少行；有多少个td，就有多少个表格元素
    • 需要用到CSS设置表格的边框、颜色和大小


语义化

  1. 表头标签 块标签：thead
  2. 表身标签 块标签：tbody
  3. 表脚标签 块标签：tfoot、
  4. 注意：实际上没有作用，只是为了代码的规格化

合并

  1. 合并行：rowspan 将纵向的N个单元格合并
    <td rowspan="数量"> 内容 </td>
  2. 合并列：colspan 将横向的N个单元格合并
    <td colspan="数量"> 内容 </td>

图片

属性

  1. src属性：指定这个图片所在路径
    <img src="图片路径" />
  2. alt属性：提供给搜索引擎看的图片描述；如果图片出错，页面就会显示alt的内容
    <img alt="图片描述" />
  3. title属性：提供给用户看的图片描述；当鼠标移动到图片时会显示title的内容
    <img title="图片描述" />

路径

  1. 绝对路径：图片在计算机的完整路径
  2. 相对路径：图片相对当前页面的位置
    • 如果图片与页面在同一层目录:<img src="picture.png" />
    • 如果图片所在的文件夹与页面在同一侧目录：<img src="image/picture.png" />
    • 如果图片所在的文件夹与页面所在的文件夹在同一侧目录：<img src="../image/picture.png" />

格式

  1. 位图/像素图：由像素点组成的图片
    • jpg格式：使用有损压缩，适用于照片、彩色图像和保存颜色丰富的图片
    • png格式：使用无损压缩，支持透明度，体积较小
    • gif格式：使用无损压缩，支持动画
  2. 矢量图/向量图：以一种数学描述的方式来记录内容的图片
  3. 差别：
    • 位图适合色彩丰富的图片，但矢量图不适合
    • 位图组成元素是像素点，矢量图的组成元素是向量
    • 位图受分辨率影响，放大或缩小会失真，但矢量图不会
    • 网页中的图片大都是位图

超链接

基本概念

  1. 定义：hyperlink超链接可以实现各个独立页面之间的跳转
  2. a标签：<a href="链接地址"> 文本或图片 </a>
  3. target属性：定义超链接打开窗口的方式
    • _self：在原来窗口打开（默认）
    • _blank：在新窗口打开链接（重要）
    • _parent：在父窗口打开链接
    • _top：在顶层窗口打开链接

锚点链接

  1. 定义：指向当前页面的某个部分
  2. 目标元素的id：<div id="名字"> 内容 </div>
  3. href属性：<a href="#名字"> 内容 </a>


表单

前言：html只需要把页面效果做出来，不考虑数据处理

form标签

  1. 块标签：创建一个表单，需要把表单标签放在form标签内部，与表格标签类似
  2. 属性：<form 属性=""> 内容 </form>
    • name属性：表单名称
    • method属性：指定表单数据使用哪种http提交方式，有“get”和“post”两种方式
    • action属性：指定表单数据提交到哪一个地址进行处理
    • target属性：指定窗口的打开方式
    • enctype属性：指定表单数据提交的编码方式

input标签

  1. 定义：行标签且自闭合标签，指定表单类型
  2. 属性：<input type="表单类型" />
    • text：单行文本框
    • password：密码文本框
    • radio：单选框
    • checkbox：多选框
    • button/submit/reset：按钮
    • file：文件上传

表单类型

  1. 单行文本框：<input type="text" 属性="" />
    • value：设置默认值
    • size：设置长度
    • maxlength：设置最多可以输入的字符数
  2. 密码文本框：<input type="password" 属性="" />
    • 属性与单行文本框一样，但是输入的字符用户不可见
  3. 单选框：<input type="radio" name="" value="" 属性="" />内容
    • name：设置单选按钮的组名（必选）
    • value：设置单选按钮的取值（必选）
    • checked：设置默认值（可选）
  4. 复选框：<input type="checkbox" name="" value="" 属性="" />内容
    • 属性与单选框一样，但是可以选择多项
  5. 按钮：
    • 普通按钮：<input type="button" value="" />用来配合JavaScript进行操作
    • 提交按钮：<input type="submit" value="" />用来给服务器提供数据
    • 重置按钮：<input type="reset" value="" />用来重置表单中已输入的数据
  6. 文件上传：<input type="file" />
    • 只能上传文件到该页面，还需要后端技术才能上传到后端
  7. 多行文本框：<texterea rows="" cols="" maxlength=""> 默认内容 </textarea>
    • 不是使用input，而是使用textarea行标签对
  8. 下拉列表
    • select 块标签：之间设置选项内容
      • multiple属性：设置可以选择的项数
      • size属性：设置显示的列表项数
    • option 行标签：默认显示第一个选项
      • selected属性：设置默认值
      • value属性：设置内容


框架

  1. 定义：在当前页面嵌入另一个网页
  2. 语法：<iframe src="链接地址" width="数值" height="数值"> </iframe>
  3. 属性：src必选，width和height可选