HTML&CSS任务一：零基础HTML编码

Lesson

Reference

Demo

Note

常见的HTTP状态码

  • 200 OK
    请求已成功，请求所希望的响应头或数据体将随此响应返回。

  • 301 Moved Permanently
    被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。
    新的永久性的URI应当在响应的Location域中返回。除非这是一个HEAD请求，否则响应的实体中应当包含指向新的URI的超链接及简短说明。
    如果这不是一个GET或者HEAD请求，因此浏览器禁止自动进行重定向，除非得到用户的确认，因为请求的条件可能因此发生变化。
    注意：对于某些使用HTTP/1.0协议的浏览器，当它们发送的POST请求得到了一个301响应的话，接下来的重定向请求将会变成GET方式。

  • 302 Found
    请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。

  • 304 Not Modified
    如果客户端发送了一个带条件的GET请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。

  • 307 Temporary Redirect
    请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。

  • 400 Bad Request
    由于包含语法错误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。

  • 401 Unauthorized
    当前请求需要用户验证。该响应必须包含一个适用于被请求资源的WWW-Authenticate信息头用以询问用户信息。客户端可以重复提交一个包含恰当的Authorization头信息的请求。如果当前请求已经包含了Authorization证书，那么401响应代表着服务器验证已经拒绝了那些证书。如果401响应包含了与前一个响应相同的身份验证询问，且浏览器已经至少尝试了一次验证，那么浏览器应当向用户展示响应中包含的实体信息，因为这个实体信息中可能包含了相关诊断信息。参见RFC 2617。

  • 403 Forbidden
    服务器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。如果这不是一个HEAD请求，而且服务器希望能够讲清楚为何请求不能被执行，那么就应该在实体内描述拒绝的原因。当然服务器也可以返回一个404响应，假如它不希望让客户端获得任何信息。

  • 404 Not Found
    请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。

  • 410 Gone
    被请求的资源在服务器上已经不再可用，而且没有任何已知的转发地址。这样的状况应当被认为是永久性的。如果可能，拥有链接编辑功能的客户端应当在获得用户许可后删除所有指向这个地址的引用。如果服务器不知道或者无法确定这个状况是否是永久的，那么就应该使用404状态码。除非额外说明，否则这个响应是可缓存的。

  • 500 Internal Server Error
    服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。

  • 501 Not Implemented
    服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法，并且无法支持其对任何资源的请求。

HTML锚点

  • 命名锚

    1
    <h2 id="article1">点此跳转</h2>

    一些文档中说用name取代id亦可，经测试在h2标签上无效。

  • 指向该锚的链接

    1
    <a href="#article1">article1</a>

一些小TIP

  • input可以{type}取password,email,date等，{placeholder}预置提示信息。(HTML5)
  • label的{for}取为input中的{id}时，点label可以自动将光标移至input中。
  • radio设置同样的name时才有同一组的效果。

用到的标签

用到的标签：
标题：h1~h6可用
列表标签：ul>li无序列表，ol>li有序列表（前面不需要输入123），自定义列表dl>dt,dd（会自带缩进）
段落：p标签表示一个段落
换行：
代表换行，与p标签的区别在于p会独占一行，br只会从标记开始另起一行
超链接：a标签表示超链接，href属性指向链接地址，target属性的_blank值可以在新窗口中打开页面
加粗：strong代表强调，b代表粗体，但是strong对seo优化好一点
图片：img代表图片，src属性指向图片地址
表格：table>tr>td创建表格，tr代表行，td代表列，colspan可以跨列，rowspan跨行，border=“1”可以显示1像素边框
侧栏：asidehtml5属性，代表侧栏，本身不带任何显示效果
文章：我使用的是articlehtml5属性，代表一个内容块，似乎不一定是用这个最好，待研究
表单：form代表表单，form标签有method属性和action属性
表单元素：input，有很多type，text代表文本，password代表密码，radio代表单选按钮，checkbox代表复选按钮，text或password时可以用value设置默认值或者用 placeholder属性设置点击隐藏的初始值
下拉框：select>option，一个项对应一个option，option设置value属性
多行文本框：textarea代表多行文本框，用cols设置一行多少个字，一个汉字占2个字，所以这个作业设置24，rows设置行数
特殊字符：使用©可以输出版权符号， 可以输出空格
块块：可以用div创建空的块块，显示效果与p一致，div没有语义

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Task01</title>
</head>
<body>
	<h1>网站一级标题</h1>
	<ul>
		<li><a href="#article1">article1</a></li>
		<li><a href="#article2">article2</a></li>
		<li><a href="#article3">article3</a></li>
		<li><a href="#article4">article4</a></li>
	</ul>

	<!-- 文章1 -->
	<h2 id="article1">article1文章一级标题</h2>
	<h3>article1文章二级标题</h2>
	<p><span>文章作者</span> <span>文章发表时间</span></p>
	<p>This is a short paragraph.</p>
	<p>This is a long long long long paragraph. This is a long long long long paragraph. <a href="http://baidu.com">a link. </a>This is a long long long long paragraph. <b>a bold word. </b>This is a long long long long paragraph. This is a long long long long paragraph. </p>
	<img src="pic.jpg" alt="none">
	<p>This is a short paragraph.</p>
	<p>This is a long long long long paragraph. This is a long long long long paragraph. <a href="http://baidu.com">a link. </a>This is a long long long long paragraph. <b>a bold word. </b>This is a long long long long paragraph. This is a long long long long paragraph. </p>

	<!-- 文章2 -->
	<h2 id="article2">article2文章一级标题</h2>
	<h3>article2文章二级标题</h2>
	<p><span>文章作者</span> <span>文章发表时间</span></p>
	<p>This is a short paragraph.</p>
	<p>This is a long long long long paragraph. This is a long long long long paragraph. <a href="http://baidu.com">a link. </a>This is a long long long long paragraph. <b>a bold word. </b>This is a long long long long paragraph. This is a long long long long paragraph. </p>
	<img src="pic.jpg" alt="none">
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
	</ul>
	<h3>article2文章二级标题</h2>
	<dl>
		<dt>dl: description list; </dt>
		<dt>dt: description title; </dt>
		<dt>dd: description description</dt>
		<dd><img src="pic.jpg" alt="none"></dd>
	</dl>
	<dl>
		<dt>dl: description list; </dt>
		<dt>dt: description title; </dt>
		<dt>dd: description description</dt>
		<dd><img src="pic.jpg" alt="none"></dd>
	</dl>

	<!-- 文章3 -->
	<h2 id="article3">article3文章一级标题</h2>
	<h3>article3文章二级标题</h2>
	<p><span>文章作者</span> <span>文章发表时间</span></p>
	<ol>
		<li>rank1</li>
		<li>rank2</li>
		<li>rank3</li>
	</ol>
	<p>A Table.</p>
	<table border = "1">
		<caption>Awesome caption</caption>
		 <colgroup>
		   <col style="background-color: #0f0">
		   <col style="background-color: orange" span="1">
		   <col style="background-color: red">
		 </colgroup>
		 <tr>
		   <th>theader</th>
		   <th>Lemon</th>
		   <th>Apple</th>
		   <th>tr=trow; </th>
		 </tr>
		 <tr>
		   <td>Green</td>
		   <td>Yellow</td>
		   <td>Red</td>
		   <td>th=theader; td=tdescrip</td>
		 </tr>
	</table>

	<!-- 文章4 -->
	<h2 id="article4">sidebar title</h2>
	<h3>sidebar文章二级标题</h2>
	<p><span>文章作者</span> <span>文章发表时间</span></p>
	<p>This is a short paragraph.</p>
	<p>This is a long long long long paragraph. This is a long long long long paragraph. <a href="http://baidu.com">a link. </a>This is a long long long long paragraph. <b>a bold word. </b>This is a long long long long paragraph. This is a long long long long paragraph. </p>
	<img src="pic.jpg" alt="none">
	<p>This is a short paragraph.</p>
	<p>This is a long long long long paragraph. This is a long long long long paragraph. <a href="http://baidu.com">a link. </a>This is a long long long long paragraph. <b>a bold word. </b>This is a long long long long paragraph. This is a long long long long paragraph. </p>
	<form action="post">
		<label for="email">请输入邮箱地址：<input id="email" type="email" placeholder = "xxxx@xxx.com"></label>
		<p>邮箱地址按要求填写</p>
		<label for="pwd">请输入密码：<input id="pwd" type="password" placeholder = "password"></label>
		<p>密码请输入6-16位数字</p>
		<label for="sex">性别：<input name="sex" type="radio" value="male">男<input name="sex" type="radio" value="female">女</label>
		<label for="city">城市：<select name="city" id="city">
			<option value="beijing">北京</option>
			<option value="guangzhou">广州</option>
			<option value="shanghai">上海</option>
		</select></label>
		<label for="favourite">爱好：<input name="favourite" type="checkbox" velue="bas">篮球<input name="favourite" type="checkbox" velue="fot">足球<input name="favourite" type="checkbox" velue="vol">排球</label>
		<p><label for="persondescription">个人描述：<textarea name="persondescription" id="persondescription" cols="30" rows="10"></textarea></label></p>
		<p><button>Submit</button></p>
	</form>
	<footer>
		版权所有凸(艹皿艹 )
	</footer>
</body>
</html>

20170227-ife-hello

从今天开始更新百度IFE学院2017的课程，希望能对自己有所帮助。

预计时间表：

  • 2.27-3.01 HTML/CSS “小薇学院” 1-9
  • 3.02-3.10 Javascript “斌斌学院” 1-6
  • 3.11-3.20 综合 “耀耀学院” 1-3/4-5/6-7

有余力下继续做：

  • 商业平台学院中，会包含移动端Native开发的学习教程，包括iOS及Android；
  • ECharts&WebVR主要是进行数据可视化、WebGL的实践练习；
  • 糯米学院中则包含MVVM、CSS3动画等特色课程；

html+css+js计算器

用数组模拟了堆栈。
写的过程中发现，像小数点的处理，连续运算的处理，还有一些细节的处理，比想象中的要麻烦不少。
另外因为键位的个数一直在增删，反正可能还会再修改，界面暂时定格在了这个蠢萌的样子……

进入计算器
HTML+CSS+JS Calculator

前端

inline-block之间空隙的两三事

inline-block空隙的缘由

此处引用一段知乎@贺师俊 的回答。

此乃历史问题。不难理解，空白字符压缩（white space collapse）是西文排版的必然结果。SGML、TeX都是如此。不过对于不使用空格作为词分界的语言，比如东亚语言来说，就造成了问题。所以其实这是行内（inline）的问题（inline-block也是将其本身作为inline，内部作为block）。

inline-block空隙的解决方法

方法一

全部排到一行

方法二

利用折行的注释标签达到全部排到一行的效果。

1
2
3
<button>按钮1</button><!--
--><button>按钮2</button><!--
--><button>按钮3</button>

方法三

目前我认为比较美观的方法如下：

1
2
3
<button>按钮1
<button>按钮2
<button>按钮3</button>

去掉每个inline元素的尾部标签，浏览器依然可以正常解析。
最后一个inline元素要加上尾部标签是为了兼容IE。

前端

关于margin穿透的两三事

遇到一个问题：

1
2
...
div.outter>div.inner

【问题】

在以上情况中，inner的margin-top会穿透inner，变成outter的margin-top。（margin-left则没有这个情况）

【解决】

outter加一个overflow:auto或hidden。

【引申的问题】

overflow肯定不是一个好的解决方法，在父子框架中需要有一定边距时，最好不要用margin来实现。
正所谓 “同级用margine，父子用padding” 。
换成padding-top来解决会怎么样呢？

【引申的解决】

用padding-top时，所有css样式就都可以写进outter中。
随之而来的问题是如果你的outter是定height的，虽然没有穿透的问题，但是content-box会被撑大。
解决一 ：自己手动把outter的height改成 height减去padding-top的值 ，完美解决。
解决二 ：利用怪异盒子， box-sizing: border-box; ，可以在不修改height成难懂数字的情况下解决，缺点是只支持ie8以上浏览器。

前端