网页设计学习笔记

alpha · 发表于 2017-1-5 10:19:35

随着物联网IOT的兴起，网页作为一种传统的网络交互方式也必将成为物联网上位机终端的一种重要形式。
同时，随着HTML5 手机应用的流行，学习H5相关的知识也是一种从事物联网行业的必然。
借此机会将学习笔记共享出来。从明天开始，我将不断更新。

发表于 2017-1-5 21:42:32

第一篇 webstorm的安装与测试
一、下载webstorm
我的webstorm是直接在百度上搜索的。版本号为11.0.3。这个软件的安装是比较简单的。麻烦在于如何激活。
首先声明一点，本次笔记中所使用的激活方法仅供学习参考使用。如果有经济条件还是支持正版软件。同时要注意本次激活所使用的是官方的漏洞，不保证会一直有效。
二、安装webstorm
首先下载解压好webstorm。点击【WebStorm-11.0.3.exe】运行安装程序。

安装是比较简单的，一路next狂奔，同时提醒大家。webstorm安装时应安装到默认目录最好不要更改路径，以免出现什么不正常的事情。
在安装完成后，就开始激活工作。

三、激活webstorm
在网上有很多的激活教程都是使用一个远程的激活证书。但是很不幸的是我测试了。。。激活不了。于是我又百度了一番。终于找到了一个很弱智但意外有效的方法。webstorm像很多的软件一样提供了三十天的试用期，本次激活方式就是使用这种方式。
第一步、更改系统时间到几十年后。比如今年是2017年，那么就把系统时间改到2047年。

把【自动设置时间】关闭，点击更改时间与日期；更改时间至2047年。

然后打开webstorm，在激活页面点击【Evaluate for free for 30 days】激活webstorm。
然后。。。就激活了。。。而且到期时间是2047年的2月4号。。。。也就是系统时间的三十天后。。。
我的激活结果忘了截图。。。来一张网上的。 QQ截图20470105212538.png

然后就可以把系统时间改回正常的时间了。。。
我们可以开始愉快的使用webstorm了。
四、测试webstorm
QQ截图20170105212847.png

接下来我们可以在桌面上新建一个文件夹用来存放我们的单个的html文件。然后通过【文件】菜单打开这个文件夹。
我们可以通过【视图】菜单下的【工具窗口】打开工程窗口。
QQ截图20170105213211.png

然后，右键点击工程窗口中的文件夹名称，选择新建一个html文件。并保存。
QQ截图20170105213250.png

然后将以下代码复制到文件中去。
[mw_shl_code=html,true]<!DOCTYPE html>
<html>
<head>
<meta charset=" ">
<title>ch10_03</title>
</head>

<script type="text/javascript">

</script>
</head>
<body>

请单击下面链接：<p>
<h1>
<A href="#">a+b</A>
</h1>

</body>
</html>[/mw_shl_code]

最后，点击右上角的图标，进入浏览器调试。
QQ截图20170105213740.png

点击a+b后浏览器弹出提示框。
QQ截图20170105213806.png

今天的笔记就到这里了。明天开始正式学习html的相关内容！

发表于 2017-1-7 19:01:29

HTML学习第二篇笔记—html基础标签的学习
写在开始
html是一种标记语言。它在网页设计中最开始被创造出来就只有一个目的，那就是告诉浏览器这段文本的语意。浏览器根据这个语意来对文本进行相应的处理。虽然，html的标签中有的可以改变文本的显示样式，但是这都不是html的主要功能，而是随着html的发展被加入的，与此同时html的规范也越来越混乱。html标准的制定者w3c机构在1999年制订了html4.1标准之后由于嫌弃html规范的混乱，然后就抛弃了html标准，开始了二儿子XHTML的开发。然而由于1999年的互联网已经初具规模了。大量的网站都是采用html来制作的。如果此时全部由html转向xhtml无疑这些互联网企业是不愿意的。这时候w3c就被互联网企业们抛弃了。然后这些企业们就联合起来接手了被w3c抛弃的html的抚养（开发）工作并于2004年提出了HTML5的草案。而与此同时w3c也早在2001年造出来二儿子XHTML。而当他们继续想升级二儿子到XHTML2.0的时候发现了不对劲，好像自己的二儿子没有像想象中由于俊朗的五官、标准的身材（规范性）而获得众人的青睐，反而被自己抛弃了的大儿子被后爹后妈们培养的更受欢迎。于是w3c又跑去和后爹后妈们争夺抚养权，最后双方达成协议，共同抚养，把大儿子培养成全能的HTML5。

好了，聊完html的成长八卦，就要开始我们的html5标签的学习。在这里分享一个好网站http://www.w3school.com.cn/ 这是w3c的一个官方网站。在这里你可以找到各种html有关以及网页设计语言相关的资料。比如各种参考手册以及教程。

一、html的固定格式
作为一种编程语言HTML是有固定格式的。就如同我们在写信的时候一样都有一个固定套路。在html中这个套路是固定的。以下就对这个套路进行讲解。
[mw_shl_code=html,true]<!DOCTYPE html>
<html lang="en"> 
<head>                
<meta charset="UTF-8">  
<title>Title</title>
</head>
<body>

</body>
</html>[/mw_shl_code]//html格式示例，如不显示，请使用电脑网页版查看。

接下来就要对以上的各种标签进行说明。
1、<!DOCTYPE html>
这个标签是对html文件声明其html规范版本。
在示例中的html代表的是其遵循html5规范。不同的规范有着不同的声明。
例如下面的代码代表的是html4.0.1的Strict（严格的）版本。
[mw_shl_code=html,true]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">[/mw_shl_code]
//此处有代码，如不显示请使用电脑网页版打开。
同时html4.0.1还有Transitional（标准的）版本，下面是其声明：
[mw_shl_code=html,true]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">[/mw_shl_code]
//此处有代码，如不显示请使用电脑网页版打开。
剩下的不同版本的声明就不再赘述，详见w3schoo.com.cn中关于<!DOCTYPE >标签的讲解。
2、<meta charset="UTF-8">
这是告诉浏览器该文档采用了什么编码。在示例中则是声明了该文档采用了utf-8的一种编码方式。编码方式还有GB2312（国标2312）、GBK（国标扩展码）、BIG5（繁体中文）。GB码是用于中国大陆制定用于中国及新加坡等简体中文的地区的，其中GBK编码丰富除了能够显示简体中文还可以显示big5中包含的繁体中文、希腊文、俄文以及我国的少数民族文字，体积相对utf-8小。UTF-8则是国际上制定的全球统一的编码，几乎涵盖了世界上大部分的语言，但是对我国的一些少数民族文字无法支持。Big5则是流行于港台地区的繁体中文编码，近几年香港的编码有向GB码转换的迹象。
3、<title>Title</title>
该标签是告诉浏览器这个网页的标题是什么。
4、<body> </body>
是该html文档的主体部分。所要编写的网页主要内容及时放在这两个标签中间的。

二、html标签的学习。
1、注释标签
在编程语言中为了提高程序的可阅读性，注释是必不可少的。因为每个人编写程序时都有自己的习惯，可能某一个变量我习惯命名为A而你习惯命名为C那么如果没有注释的话你就很难看懂我这个A代表什么意思。
格式：  

2、h系列标签
h系列标签含有六个，是从h1~h6。
语意：告诉浏览器标签中间的文字是一个标题。h1~h6代表六个不同的标题等级。有些类似word里的一级标题二级标题的意思。
格式：<h1>标题</h1>

3、p标签
p标签是用来标记一个文本为一个段落的。
[mw_shl_code=html,true]<p>This is some text in a very short paragraph</p>[/mw_shl_code]
比如上述的代码就是将This is some text in a very short paragraph这句话标记为一个段落。

4、a标签
a标签是标记文本为超链接的。比如下面代码是指向w3school的。
[mw_shl_code=html,true]<a href="http://www.w3school.com.cn">W3School</a>[/mw_shl_code]
格式：<a href="超链接地址">所需显示的文字</a>

HTML的标签有很多。在这里就不一一赘述，各个标签的使用方式在w3schoo.com.cn中都有详细的描述。
但是关于html标签有一个注意点。
前面我们说过，html的作用仅仅是用来标记文字的语意的。这是html的唯一的功能。但是由于发展过程中旧版本的html中有一些调整文字样式的标签的存在。这是与html的初衷是违背的。对于网页的样式我们有专门的css来表达。所以随着HTML5的制定在html标签中一些对文字样式进行调整的标签都不再推荐使用。虽然现在html5依旧支持这些标签，但是随着往后的发展这些标签肯定是要被废除的。所以我们以后在使用过程中要注意这个方面。

发表于 2017-1-11 18:55:13

第三篇 HTML之表单

1、什么是表单
表单的主要目的是让用户填写数据发送到服务器端，进行必要的处理力。比如最常见的表单就是注册页面，例如咱们电开社区的注册页面。这就是一个典型的表单。

不过，html只能控制前端的用户界面，也就是显示在浏览器上的内容，如果要进行数据的上传和处理必须搭配ASP或者php之类的服务器程序才能进行服务端的处理和数据访问。如果是搭建个人网页不一定要启用服务器程序，借助email也可以传送表单数据。
2、创建表单
表单一直是网页设计的重要组成部分，尤其是有交互的网页。表单分为四大类：文字组件、列表组件、选择组件、按钮组件。下面将介绍一些最基本的表单的制作。
下面我们借助一个简单的登录界面进行介绍。
[mw_shl_code=html,true]<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>ch03_04</title>
</head>
<body>

<form method="post" action="">
请输入账号密码<br />
账号：<input type="text" name="user_name" size="20"/>
<br />
密码：<input type="text" name="password" size="20"/>
<br />
<input type="submit" value="登录" name="B1"/>

</form>

</body>
</html>
[/mw_shl_code]
2.1接下来我们介绍一下各个标签的含义。
<form>是表单的开始标记，而</form>则是其结束标记，各种的表单组件必须放在两个标签之间才能有效运行。
form标签
格式：<form action="form_action.asp" method="get"></form>

method

method属性用于设置发送数据的方式，有post和get两种值。利用get方式发送数据时会直接在URL后加上数据，安全性比较差，并且有255个字符的限制，只适用于数据量少且安全等级低的数据。

action

表单在使用的时候通常会和ASP或者PHP等服务器程序配合使用。action属性是用来指出发送的目的地，例如action=“asp.asp”表示将数据发送到asp.asp网页上进行下一步处理。如果不使用数据库程序也可以将表单发送到电子邮箱中，其语法如下：
[mw_shl_code=html,true]<form method="post" action="mailto:abc@mail.com?subject=xxxx"></form>[/mw_shl_code]
mailto是设置发送的目的邮箱，？subject=xxxx则是设置邮件的主题。

enctype

enctype是表单发送的编码方式的设置，只有在method=“post”时才有效。共有三种模式。
enctype=“application/x-www-form-urlencoded”此模式为默认值，即不设置method时则采用此种编码模式。
enctype=“multipart/form-data”用于上传文件时。
enctype=“text/plain”表示将表单发送到电子信箱时enctype必须是指为此值，否则将会出现乱码。

target

该属性为指定提交到哪一个窗口。
_blank 打开新窗口
_self 当前窗口
_parent 上一层窗口（父窗口）
_top 最上层窗口
框架名称直接指定窗口或者是框架名称。
2.2输入组件
2.2.1文本框text
格式： [mw_shl_code=html,true]<input type="text" name="user_name" value="guest" size="20" maxlength="20"/>[/mw_shl_code]
属性：
type：将输入方式设置为text，产生一个单行文本框，其上限为255个字符。
name=“username”：设置文本框的名称，方便表单的处理程序辨识表单组件。
value=“guest”：这是设置文本框的默认值，如果省略此属性，则文本框初始显示为空白。
size=“10”：设置文本框的长度，数字越大文本框就越长。如果省略不写，则会默认设置为20.
maxlength=“10”：限制文本框的字数为了避免用户输入错误。例如手机号是11位则设置为11这样就可以避免用户输入一个大于11位的数字。
autofocus：自动获得焦点，即网页打开后光标自动移到此输入框中。
2.2.2多行文本框textarea
语法如下
[mw_shl_code=html,true]<textarea name="memo" id="idmum" cols="30" rows="10" wrap="virtual">文本框输入值</textarea>[/mw_shl_code]
常用属性如下：
name="memo"：文本框的名称，可自行设置，数字英文下划线，区分大小写。
cols="30"：设置文本框的宽度
rows="10"：设置文本框的行数
wrap=""：设置文本框内的文字在提交后是否换行。有soft和hard两种属性。hard属性表示超过cols的值后会自动换行，soft则表示不换行，省略此属性默认不换行。

2.2.3密码输入框password
密码框是特殊的输入组件，当用户输入密码时，会用*代替输入的文字。密码框的属性与文本框的类似。

2.2.4列表组件select

autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
disabled	disabled	规定禁用该下拉列表。
form	form_id	规定文本区域所属的一个或多个表单。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
required	required	规定文本区域是必填的。
size	number	规定下拉列表中可见选项的数目。

在H5中新增加了一些输入组件或者属性，但是由于目前好多浏览器都不支持，所以在这里就不再叙述，可以到w3school.com.cn中自行查看。
下面为一个教学问卷的代码：
[mw_shl_code=html,true]<!DOCTYPE html>
<html>
<head>
<meta charset="">
<title>ch03_08</title>
</head>
<body>

<h3>教学意见调查表</h3>
<form method="post" action="" enctype="text/plain">
<fieldset>
<legend>个人及课程资料</legend>
<ol>
<li>
科目名称：<input type="text" name="subject" autofocus />
</li>
<li>
请选择系所：
<select size="1" name="department">
<option>英文系</option>
<option>法律系</option>
<option>信息管理系</option>
<option>电子工程系</option>
<option>资讯工程系</option>
</select>
</li>
<li>
讲师：<input type="text" name="teacher" />
</li>
<li>
性别：
<input type="radio" name="sex" value="男生" checked />男生
<input type="radio" name="sex" value="女生" />女生
</li>
<li>
开课日期：<input type="date" name="startdate" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>意见调查</legend>
<ol>
<li>
这门课你的出席状况是
<input type="radio" name="assist" value="没有缺课" />没有缺课
<input type="radio" name="assist" value="缺课1-3次" />缺课1-3次
<input type="radio" name="assist" value="缺课4-6次" />缺课4-6次
<input type="radio" name="assist" value="缺课6次以上" />缺课6次以上
</li>
<li>
你对这门课的学习态度
<input type="radio" name="attitude" value="很认真" />很认真
<input type="radio" name="attitude" value="还算认真" />还算认真
<input type="radio" name="attitude" value="很不认真" />很不认真
</li>
<li>
修习这门课的原因(可复选)
<input type="checkbox" name="reason" value="必修" />必修
<input type="checkbox" name="reason" value="凑学分" />凑学分
<input type="checkbox" name="reason" value="个人兴趣" />个人兴趣
<input type="checkbox" name="reason" value="其他" />其他原因
</li>
<li>
请简述你对此门课程的期望或改进的建议： <br />
<textarea rows="3" name="hope" cols="50"></textarea>
</li>
</ol>
</fieldset>
<input type="submit" value="提交" />
<input type="reset" value="重写" />
</form>

</body>
</html>
[/mw_shl_code]
今天的笔记就到这里了。其实本来应该是昨天就发的，但是昨天手残点错了，没有保存。。。而且可悲的是我的网不知道啥时候掉了。。。
希望大家在写的时候注意保存。虽然有自动保存，但是还是时不时的自己点一下吧。

[寒假笔记] 网页设计学习笔记

评分

浏览过的版块