# Go学习笔记 # Go语言基础 ## HTML 基础 * 超文本标记语言(Hypertext Markup Language, Html) 是一种用于创建网页的标记语言 * 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一个标签可能会有不同的解析.(既兼容性) * 网页文件的后缀(扩展名): html 或 htm ### Web本质 #### C/S 架构 * C/S 架构 -> 软件开发 * 优势: 可定制化高,用户体验好. * 劣势: 开发成本高,适配不同的平台,有新功能需要客户端升级. #### B/S 架构 * B/S 架构 -> Web开发 * 优势: 开发成本低. * 劣势: 复杂功能没办法很好的实现. ### HTML 文档结构 #### html基础结构 ```html 网页标题

用户具体看到的内容

``` * `` 声明为 html5 文档,必须在HTML 文档的第一行,位于``标签之前. * `` 是文档的开始标记和结束标记,是HTML页面的根元素, 在它们之间是文档的 头部`` 和 主体`` . * `` 定义了HTML文档的开头部分. 它们之间的内容不会在浏览器窗口中显示.包含了文档的元素`meta` 数据. * `` 定义了网页标题,在浏览器的标题栏中显示. * `` 之间的文本是具体的WEB内容,在网页的主体中显示. * `` 定义了网页的编码,在中文网页中不定义有可能会出现乱码. #### HTML标签格式 * HTML标签是由 尖括号<> 包裹的关键字,如 ``, `
` 等. * HTML标签通常都是 成对的出现, 比如 `
` 第一个标签开始,第二个为标签结束,结束的标签语会带 斜杠`/` . * 有一部分标签是单独的, 比如 `
` , `
` , `` 等. * 标签里可以附带 若干个属性参数, 也可以不带属性. #### HTML标签语法 * 成对标签: <标签名 A属性="A属性值1;A属性值2" B属性="B属性值1;B属性值2;B属性值3"...>标签内容 * 单标签: <标签名 属性1="属性值1" 属性2="属性值2".../> #### HTML重要属性 * `id`: 定义标签的唯一ID, HTML标签文档数中唯一 * `class`: HTML元素定义一个或多个类名 (classname) CSS样式类名 * `style`: 规定元素的行内样式(CSS样式) #### HTML常用标签 |标签|意义| |-|-| |` `|定义网页标题| |``|定义内部样式表| |` `|定义JS代码或引入外部JS文件| |``|引入外部样式表文件| |``|定义网页原信息| #### body内常用标签 |标签|意义| |-|-| |` `| 加粗字体 | |` `| 斜体 | |` `| 下划线 | |` `| 删除线 | |`

`| 段落标签 | |`

`| 标题1 | |`

`| 标题2 | |`

`| 标题3 | |`

`| 标题4 | |`
`| 标题5 | |`
`| 标题6 | |`
`| 换行 | |`
`| 水平线 | |``| 注释 | #### 特殊字符 |标签|意义| |-|-| |` `| 空格 | |`>`| > | |`<`| < | |`&`| & | |`¥`| ¥ | |`©`| 版权 | |`®`| 注册 | #### div标签 与 span标签 * `
` 标签用来定义一个`块级元素`,并无实际的意义.主要通过CSS样式为其赋予不同的表现. * `` 标签用来定义`内联元素`,并无实际意义.主要通过CSS样式为其赋予不同的表现. * 块级元素 与 内联元素 的区别: * 所谓`块级元素`, 是以另起一行开始渲染的元素, `内联元素`则不需要另起一行.如果单独在网页中插入这两个元素,不会对页面产生任何的影响. * 在标签嵌套中,通常`块元素`可以包含`内联元素`或某些`块级元素` , 但是`内联元素`不能包含`块级元素`,它只能包含其它`内联元素`. * `

`标签 不能包含 `块级元素`, `

` 标签内 也不能包含 `

` 标签. #### img标签 * `图片未加载成功时的提示` #### a标签 * 超链接标签 * 所谓的`超链接`是指从一个网页指向一个目标的连接关系, 这个目标可以是另一个网页, 也可以是相同网页上的不同位置, 还可以是一个图片, 一个电子邮件地址, 一个文件, 甚至是一个应用程序. * `显示的内容` * `href` 的几种属性: * 绝对URL - 指向另一个站点(href=) * 相对URL - 指向当前站点内的路径 (href="index.html") * 锚URL - 指向页面中的锚(href="#top") * target 属性: * `_blank` 表示在浏览器打开新的标签显示网页. * `_self` 表示在浏览器当前的标签中显示网页. #### 列表 ```html

  • 无序列表1
  • 无序列表2
  • 无序列表3
  • 无序列表4
  • 无序列表5
``` ```html
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  4. 有序列表4
  5. 有序列表5
``` ```html
标题列表1
标题列表1内容
标题列表2
标题列表2内容1
标题列表2内容2
标题列表2内容3
``` #### 表格 * 表格是一个二维数据空间, 一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文件、列表、团案、表单、数字符号、预置文本和其它的表格等内容. * 表格最重要的目的是显示表格类数据.表格类数据是指最适合组织为表格格式(既按行和列组织)的数据. ```html
属性 意义
border 表格边框
cellpadding 内边框
cellspacing 外边框
width 像素百分比
rowspan 单元格横跨多少行
colspan 单元格横跨多少列(合并单元格)
``` |属性|意义| |-|-| |`border`|表格边框| |`cellpadding`|内边框| |`cellspacing`|外边框| |`width`|像素百分比| |`rowspan`|单元格横跨多少行| |`colspan`|单元格横跨多少列(合并单元格)| #### form标签 * 表单 用于向服务器传输数据,从而实现用户与WEB服务器的交互. * 表单 能够包含input系列标签, 比如 文本字段、复选框、提交按钮 等. * 表单 可以包含 textarea、select、fieldset 和 label 标签. * 想要在HTML里面通过点击 `form` 表单的 `sumbit` 按钮提交数据: * 所有获取用户输入的标签必须放在 `form` 标签内. * 所有获取用户输入的标签必须要有 `name` 属性. * 必须要有 `sumbit` 按钮并且 `form` 表单要有 `action` 属性. * 表单属性: |属性|描述| |-|-| |`accept-charset`|规定在被提交表单中使用的字符集(默认: 页面字符集)| |`action`|规定向何处提交表单的地址(URL)提交页面.| |`autocomplete`|规定浏览器应该自动完成表单(默认开启)| |`enctype`|规定被提交数据的编码(默认: url-encoded)| |`method`|规定在提交表单时所用的HTTP方法(默认: GET)| |`name`|规定识别表单的方法(对于 DOM 使用: document.forms.name)| |`novalidate`|规定浏览器不验证表单| |`target`|规定 action 属性中地址的目标(默认: self)| * 表单元素 * 基本概念: * HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容. * 表单一般用来收集用户的输入信息 * 表单工作原理: * 访问者在浏览有表单的网页时,可填写必须的信息,然后按某个按钮提交.这些信息通过 Internet 传送到服务器上. * 服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误.当数据完整无误后,服务器反馈一个输入完成的信息. * method: GET与POST方法的场景 * GET: 获取页面 , 搜索引擎检索. * POST: 提交`form`表单时, 有敏感数据时. #### input标签 * `` 元素会根据不同的 type 属性, 变化多种形态. |type属性|表现形式|对应代码| |-|-|-| |`text`|单行输入文本|``| |`password`|密码输入框|``| |`date`|日志输入框|``| |`checkbox`|复选框|``| |`radio`|单选框|``| |`submit`|提交按钮|``| |`reset`|重置按钮|``| |`button`|普通按钮|``| |`hidden`|隐藏输入框|``| |`file`|文本选择框|``| * 属性说明: * `name`: 表单提交时的 `键` ,注意跟`id`区分. * `value`: 表单提交时对应的值(type="button" "reset" "submit" 时为按钮上显示的文本内容) * `checked`: `radio` 和 `checkbox` 默认被选中的项 * `readonly`: `text` 和 `password` 设置只读 * `disabled`: 所有 `input` 均适用. #### select标签 * 属性说明: ` ``` #### label标签 * 定义 `