web developer bootcamp（一） 简介及HTML

发表于 | |

这是 Udemy 课程 web developer bootcamp 的学习记录，供以后参考。

网络知识

当我们访问一个网站时，发生了什么？

  1. 在地址栏输入一个域名按下回车之后，这一访问请求首先被提交给互联网服务提供商（Internet Service Provider 简称 ISP）——移动、联通等
  2. 域名系统（Domain Name System 简称 DNS）将域名转变成一个 IP 地址
  3. 通过 HTTP 协议访问请求被提交给上一步得到的IP地址
  4. 被请求的服务器找出我们要访问的内容，然后发送给我们网页的代码
  5. 我们的浏览器将网页代码转变成我们容易理解的内容，即我们看到的网页

这只是一个粗略的描述。在谷歌浏览器（Chrome）中，右键选择查看网页源代码即可看到网页的代码。

前端简介

前端（Front - End）与后端（Back - End）

  • 前端是我们访问网页时可以看到的部分，包括 HTML、CSS 和 JavaScript。
  • 后端是其他的所有部分。例如一个网站要决定你是不是已经登录，要决定发送给你什么信息等，这些都是在后端完成的。

打个比喻，你在一家餐馆吃饭，前端就是你餐桌上的东西，后端就是厨房里发生的事。

前端三件套

  • HTML（Hyper Text Markup Language）：决定网页的结构
    • 在这放一张图片
    • 在这放一张表格
  • CSS（Cascading Style Sheets）: 决定 HTML 的风格
    • 这一行文本是紫色
    • 这张图片有黄色的边框
  • JavaScript 给网页添加逻辑和交互功能
    • 做数学运算
    • 单击时改变颜色

HTML

历史

HTML被创造于 1989 或 1990 年，最初被用于论文或科技文件的交换和发表上。由于文章在网络上传输时，只能传输纯文本，HTML就使我们能使用粗体、斜体等各种各样的格式。

一般规则

<tagName> Some Content </tagName>
例如 <Strong>粗体</Srrong> 就会显示为 粗体，这就是一个元素

模板与基本标签

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<!-- Our metedate goes here  -->
	<title></title>
</head>
<body>
<!-- Our content goes here -->
</body>
</html>
  • 所有的HTML文件都会遵从这一模板。在 Sublime 文本编辑器中，创建一个扩展名为 .html 的新文件，输入 html 按 Tab 即可生成这一模板，输入元素标签如h1，按Tab即可生成<h1></h1>
  • <!DOCTYPE html> 表示使用的是 HTML5，即最新版本的HTML
  • <html></html> 是一个 HTML 文件的根元素，所有其他元素都必须在这个元素之中，<html> 元素之中的内容是一个 <head> 元素和一个 <body> 元素
  • <head> 元素包括 HTML 文件的标题以及脚本（JavaScript）和样式表（CSS）的定义
  • <body> 元素中包括 HTML 文件中的内容
  • 注释的格式 <!-- 这是一个注释 -->，并不需要手动输入，在 Sublime 中同时按 Ctrl 和 / ，光标所在行就会被注释掉
  • <title> 是标签页上的标题，<h1> 至 <h6> 是各种大小的正文标题
  • 块级元素（block level elements）与行级元素
    • 使用块级元素时会换行，如 <h1>
    • 使用行及元素不会换行，如 <Strong>
  • <strong>bold</strong> 与 <b>bold</b> 都是粗体，但我们使用前者，因为我们想把网页的内容与样式区分开。另外盲人朋友使用阅读设备阅读网络时：<strong>会重读，<B>不会

列表（List）

  • 有序列表
    1
    2
    3
    4
    5
    <ol>
      <li>Orange</li>
      <li>Red</li>
      <li>Green</li>
    </ol>

显示为

  1. Orange
  2. Red
  3. Green

  • 无序列表

    1
    2
    3
    4
    5
    <ul>
      <li>Orange</li>
      <li>Red</li>
      <li>Green</li>
    </ul>

    显示为

    • Orange
    • Red
    • Green

    ol 代表 ordered list，ul 代表 unordered list，li代表 list item

Div 和 Span

<div> 和 <span> 是一般的容器(generic container)，把元素划分组别以便加入样式，区别为 <div> 是块级容器，<span> 是行级容器，用 <div> 会导致换行。

属性（attribute）

属性是元素的其他信息，格式为 <tag name="value"></tag>,在标签中加入了 key-value pair
如链接格式为 <a href="url">Link Text</a>

  • <a href="http://www.google.com">Click me to google</a> 生成谷歌的链接
  • <a href="page2.html">go to page2</a>，如果 page2 和当前页面在同一目录下，这就是一个到 page2 的链接

Table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adam</td>
      <td>13</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>15</td>
    </tr>
  </tbody>
</table>


加入样式分栏之后显示会更加直观
tr 代表 table row ， th 代表 table head ， td 代表 table data 。 thead 和 tbody 只是为了让 head 和 body 的区分更加明显，可以不加。

Form 和 Input

虽然 form 和 table 的中文都是表格，但二者的关系不大。form 用来对用户的输入信息划分组别，然后统一进行操作。form 中有 input 、label 等标签，如果只有 form 在实际的网页中你什么都不会看到。下图中的几个输入框就组成了一个 form

form 的格式为

1
2
3
<form action="/my-form-submitting-page" method="post">
	<!-- All our inputs go in here -->
</form>

  • action 是目标 URL，输入的信息会被送到这个地址
  • method 是 HTTP 请求的类型

没有后端的代码，form 实际上什么都不会做。

1
2
3
4
5
<form>
	<input type="text" name="uesername" placeholder="name">
	<input type="password" name="userpassword" placeholder="password">
	<input type="submit">
</form>


填完信息提交之后地址栏变成了 file:///W:/web开发/练习用.html?uesername=Adam&userpassword=1111 ，由于我未指明 action ，信息还是被送到 HTML 文件所在的地址，问号后面的一串字符叫 query string，以后再介绍。

Label

1
2
3
4
5
6
7
8
9
10
<form>
	<label>
		Username:
		<input type="Email" name="Email" placeholder = "Email" required>
	</label>
	<label for="password">Password</label>
	<input id="password" type="password" name="password" placeholder = "password" required>
	<input type="submit">
</form>

label 是 input 前面的信息，这是两种给 input 添加 label 的方法。第一种把 input 放 label 里边，第二种给 input 一个 id ，然后指明 label 对应的 id ，两种方法效果一样。

表单验证（Form Validation）

Label 小节中的 input 中加入了 required，对于 text 类型的 input 来说这要求用户必须输入，对于 email 类型的 input 来说，必须输入且符合邮箱的格式。

下拉菜单（Dropdown）和单选按钮（Radio Button）

1
2
3
4
5
<select name="mood">
  <option value="happy">:)</option>
  <option value="neutral">:|</option>
  <option value="sad">:(</option>
</select>

这是一个下拉菜单，如果 value 值为空，标签中的内容（ :) 或 :| 或 :( ）被发送。

1
2
3
4
5
<label for="dogs">Dogs: </label>
<input id="dogs" type="radio" name="petChoice" value="DOGS">
<label for="cats">Cats: </label>
<input id="cats" type="radio" name="petChoice" value="CATS">

单选按钮的 name 值相同才组成单选按钮。Textarea 和 Chechbox 这两个标签一个是文本框，一个是选择框，没什么特别的，在此省略。

彩蛋