萌新编程笔记之HTML入门

之前特别想学习编程，就在Udemy注册了课程“The Web Developer Bootcamp”，9.99美金可以买353节课，学40多个小时哦！从Front End Web Development到Back End，一共34个单元，让我们学个痛快😉

在了解HTML之前，先要了解一下互联网是如何工作的。它是建立在”HTTP Requests & Responses”系统之上的，大概的流程是：

用户输入URL发出request
DNS解析IP地址
服务器反应(分析重组)
用户看到页面加载

而浏览器的作用则是把代码换成了人能看懂的样子，用谷歌浏览器cmd+option+U可以看到页面源代码。

那么什么是Front End和Back End呢？简单的讲Front End是你可以看得到并交互的，包括HTML, CSS, JavaScript，Back End则是其他的所有。

HTML, CSS & JavaScript

HTML的全称是Hyper Text Markup Language，CSS的全称是Cascading Style Sheets。

HTML是结构，CSS是风格，JavaScript是逻辑和交互；
HTML是骨架，CSS是皮肤，JavaScript是大脑；
HTML是网站的名词，CSS是形容词，JavaScript是动词。

HTML: “这里放图，那里放表格…”

CSS: “给我紫色的字，给第一张图一个黄色的边儿…”

JavaScript: “用户点击这儿的时候，字变个色；把我ins的更新自动放到这个网站上…”

HTML基础

最最基础的HTML语句构成知识，包括Boilerplate基础结构和每个HTML元素的构成。

Boilerplate 基础结构

在Sublime中保存文件为.html后，再按一下tab，可自动生成HTML基础结构。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

HTML元素

MDN - HTML元素参考

HTML的元素由开始标签(opening tag)，结束标签(closing tag)和内容(content)构成。

元素又分为块级元素和行内元素，以下会分别展示两种元素。示例中的是段落元素，是块级元素。

1 2	<p>I am a fresh new developer.</p> <tagName>blah blah blah</tagName>

块级元素

块级元素的英文是Block level elements，每个tag内的元素独占一行，创建了一个“块儿”。块级元素只能出现在body元素内。常用块级元素包括：

六级标题：<h1>到<h6>，段落元素<p>，水平分割线<hr>
列表、表单和表格：有序列表<ol>，无序列表<ul>，交互表单<form>，表格<table>
页头页尾、文档分区：header, footer, <div>
完整列表可查阅MDN web docs - 块级元素

行内元素

行内元素的英文是In-line element，国内的叫法还有内联元素和内嵌元素。正如其名，一个行内元素只占据它对应标签的边框所包含的空间。加粗<strong>、强调<em>等都是行内元素。以下元素为行内元素，点击每个元素可跳转至MDN查看其用法及解释：

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

Div和Span的区别

二者都是纯容器，英文叫做“pure” container for flow content. 用来group things，对内容没实质影响：比如带背景色的box什么的。

<div> = 块级元素，定义文档中的分区或节(division/section)

<span> = 行内元素，定义范围/跨度，用来组合文档中的行内元素。

`<ol>`和`<ul>`的使用

下面是我自己随便写的一个有序列列表嵌套无序列表的网页，代码如下：

<ol>
	<li>Jason loves Maimi</li>
	<li>Jason thinks Maimi is the most adorable girl
		<ul>
			<li>But what makes Maimi so adorable?
				<ol>
					<li>She is beautiful</li>
					<li>She is considerate</li>
					<li>She is charming</li>
				</ol>
			</li>
		</ul>
	</li>
	<li>Maimi loves Jason too</li>
</ol>

显示效果则是：

有序列表嵌套无序列表效果图

元素嵌套规则

块级元素如<p>不会被嵌套
内联元素可以被嵌套，完美地展现在同一行

1	<p>I am a <strong>fresh new</strong> developer.</p>

空元素

空元素的英文是empty element，国外也有人写成void element，因为在这些元素中，结束标签是无效的，不必写出，就像下方示例中的<img>那样：

1	<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

常用的空元素还有：

area, base,
br, hr, img, input, link, param, source, track, wbr

HTML元素属性

1	<tag name="value"></tag>

属性的英文是Attribute，包含元素的额外信息，这些信息不会出现在实际的内容中。一个属性必须包含如下内容：

在元素和属性之间有个空格
属性后面紧跟着一个“=”符号
有一个属性值，由一对引号“”引起来

<h1 class="intro">我的编程学习笔记</h1>
<p id="intro">This is a paragraph of introduction.</p>
<a href="http:///www.zturnstudio.com" target="_blank">My portfolio</a>
<a href="page2.html">GO TO PAGE 2</a>

元素`<a>`

在上面的例子中，其中元素<a>代表anchor，它使被标签包裹的内容成为一个超链接，这个链接可以是站内网页、文件、同页面上的某锚点、电子邮箱，也可以是站外URL。<a>元素可以添加大量的属性，其中几个如下：

href: 全称为hypertext reference声明超链接的web地址。
title: 为超链接声明额外的信息，比如你将链接至那个页面。title="My Portfolio"当鼠标悬浮时，将出现一个小框框提示。
target: 指定将用于显示链接的浏览上下文。 target="_blank"将在新标签页中显示链接。如果你希望在目前标签页显示链接，只需忽略这个属性。

点击这里可以查看MDN HTML attribute reference.

HTML进阶

Table 表格

表格数据的几个重要元素和在Excel里的差不多，分别是<th> table header 表格标题，<tr> table row表格行，和<td> table data单元格。为了方便阅读，推荐用<thead>把表格标题行圈起来，用<tbody>圈起内容。至于定义表格边框和颜色，不要用HTML属性来写，推荐用CSS来写。以下是我写的一个关于口袋妖怪第一代御三家的表格：

<table>
	<thead>
		<tr>
			<th>姓名</th>
			<th>属性</th>
			<th>进化</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>妙蛙种子</td>
			<td>草/毒</td>
			<td><a href="http://pokemon.wikia.com/wiki/Ivysaur">妙蛙草</a></td>
		</tr>
		<tr>
			<td>小火龙</td>
			<td>火🔥</td>
			<td><a href="http://pokemon.wikia.com/wiki/Charmeleon">火恐龙</a></td>
		</tr>
		<tr>
			<td>杰尼龟</td>
			<td>水💧</td>
			<td><a href="http://pokemon.wikia.com/wiki/Wartortle">卡咪龟</a></td>
		</tr>
	</tbody>
</table>

Form 表单 - 获取用户输入的内容

<form>是个容器，它可以容纳checkboxes, buttons, drop-down menus, etc. 它的作用是把用户填写的内容发送给服务器。

action是数据发送目的地的URL，method是HTTP Request的类型（get/post）。Google搜索时候用的是“get” request，只搜索，并没改变数据库；而大多数网站注册用户时用的是“post” request，它把用户的数据加入了数据库。

<h1>Sign In</h1>
<form action="http://www.zturnstudio.com" method="post">
	<input name="username" type="text" placeholder="username">
	<input name="password" type="password" placeholder="password">
	<button>Login</button>
</form>
name="username"给数据命名，便于回收

placeholder的是输入框内的预设文字：用户未输入时的灰色文字。

type属性规定input元素的类型。<input>的类型也有很多种，点这里可以查看，常用的包括：

<input type="button, file, reset, submit">
<input type="checkbox, radio">
<input type="text, password">
<input type="hidden">

Labels 标签

<label>标签为input元素定义标签。<label>不会向用户呈现任何特殊的样式。不过，如果用户点击 label 元素内的文本，则会切换到控件本身。

<label>标签的for属性应该等于相关元素的id元素，以便将它们捆绑起来。同一个input可以对应多个label。

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male">
<br/>
<label for="female">Female</label>
<input type="radio" name="sex" id="female">
</form>

Form Validations

网站注册的时候，你一点提交按钮，一定看到过“您的XXX不能为空”，这是怎么做到的？很简单，就是在<input>元素中加一个单词：required.

1	<input id="username" type="text" placeholder="username" required>

那么“你的密码必须在5-10个字符之间”，是怎么做到的呢？靠的是用pattern来规定require的范围，如pattern=".{5,10}"表示5-10个字符。

1	<input id="password" type="password" pattern=".{5,10}" required title="密码必须在5-10个字符之间">

其他三种得到User Input的方法

这个版块将囊括单选题和多选题、下拉选择、以及区块多行输入。Happy coding! 😈

Radio 单选题

“你是猫咪铲屎官还是狗狗主人？”，很显然这是个二选一的问题，但是我们如何用HTML语言如何告诉浏览器用户只能选择一个答案？

<p>Do you prefer cats or dogs?
<form>
    <label for="dogs">Dogs:</label>
    <input name="petChoice" id="dogs" type="radio" value="DOGS">
    <label for="cats">Cats:</label>
    <input name="petChoice" id="cats" type="radio" value="CATS">
    <button>Go!</button>
</form>

这时候当用户点击“dogs”的时候，URL里就会显示petChoice=DOGS.

下拉菜单+select标签

当回答“什么是你最喜欢的颜色”这个问题时，用户需要在三个或者更多颜色中进行选择，这时候我们可以用个下拉菜单+select标签。

<p>What's your favorite color?</p>
<form>
    <select name="color">
    	<option>Red</option>
    	<option>Orange</option>
    	<option>Yellow</option>
	</select>
	<button>Go!</button>
</form>

Text Area标签：多行输入

当我们要用户输入一大段信息的时候，单行的text标签是不够用的，那么我们需要的就是textarea标签。你想要多大呢？可以用行和列来定义。

<form>
    <textarea name="advice" rows="10" cols="20"></textarea>
    <button>Submit!</button>
</form>

小结

至此，所有关于HTML的基本知识就学习完毕了！撒花！然而课程总共才过去了十分之一多一点……

路漫漫其修远兮，吾将上下而求索，继续愉快地探索CSS入门吧~

萌新编程笔记之HTML入门

萌新编程笔记之HTML入门

HTML, CSS & JavaScript

HTML基础

Boilerplate 基础结构

HTML元素

块级元素

行内元素

Div和Span的区别

<ol>和<ul>的使用

元素嵌套规则

空元素

HTML元素属性

元素<a>

HTML进阶

Table 表格

Form 表单 - 获取用户输入的内容

Labels 标签

Form Validations

其他三种得到User Input的方法

Radio 单选题

下拉菜单+select标签

Text Area标签：多行输入

小结

`<ol>`和`<ul>`的使用

元素`<a>`