HTML从入门到入土 - 基础

date: 2018-06-27 12:56:34
看了看好像我是快两年前看过一点点前端，真够久的，现在又在纠结该学什么玩，本来看安卓但是其他平台就不行了，然后想着那就web吧，之前我不喜欢web是因为ui太麻烦了，但是现在发现我可以直接用ui框架，可以不用自己写，然后php后端逻辑就好了。好好想想，其实吧，桌面程序和写网页差不多啊，为什么我就觉得网页的ui这么难呢。

Html5

超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。

工具

编写html其实完全可以不用比较大的编辑器，常用的编辑器比如sublime text、notepad++包括记事本都可以，我觉得由于他的不报错性，用这些小巧的文本编辑器完全没问题，只不过出了问题更麻烦，不怎么报错，你得自己找问题在哪。
当然，如果你想编写更方便，或者更深入，可以使用大公司产的软件，不仅有跟多辅助功能，还有这比如即写即看的功能，写出来的同时就能看到效果

• 万维网联盟的AMAYA
• 微软的FRONTPAGE
• Adobe公司的Dreamweaver

可以考虑考虑这些软件。

整体结构

一个网页可以有很多的html文件组成，文件扩展名为**.htm** 或者 .html，超文本标记语言当然需要标记了，标记一般是成对出现的。
html标签说明该文件使用超文本标记语言描述的，是文件的开头和结尾标记。
head标签是文件的头部信息的开始和结尾的标记，用来包含网页的标题，说明，摘要什么的，不作为内容显示出来，但是影响页面的展示效果，而且还影响搜索引擎的收录。主要常用的就是标题和meta元素，后面说到的css样式也要在这里包含，还有script脚本文件之类的。
body标签是文件内容的主体部分，这里里面的内容都会被显示在最终的页面上。

网页跳转、刷新小技巧

在meta标签中设置相应属性，如下所示,代表两秒后刷新页面，并刷新至sechtml.html页面，第二行代码表示仅五秒钟刷新一次页面。

<meta http-equiv="refresh" content="2;sechtml.html">
<meta http-equiv="refresh" content="5">

基本html标签

标题标签

标题标签有六种，分别为h1到h6，文字大小分别由大到小，可以设置属性align来说明标题的对齐方式，包括center、LEFT和RIGHT三种。

<h2 align="center">这是标题h2>

文本段落标前

p标签实现。
在html中的字符代码是由&开始，;结束，比如常用的空格在代码中需要这样实现

<p>段 落p>

水平线

格式如下

<hr align="center" width="100px" size="5px" color="red"/>

绘制一条水平线，对齐方式居中，size指定线的大小，即高度，width指定线的宽度。

预排版标签

pre标签
在预排版标签内的内容会按照其原本的格式输入到页面上，比如会保留原文的换行符，空格等内容。如果用p标签之类的则需要使用

<br>

换行

空格之类的，会比较麻烦。

文字标签

<h2 align="center">这是文字标签展示h2>
<font  color="red" size="5" face="隶书"><B>隶书加粗B>font>
<font  color="blue" size="5" face="楷书"><I>楷书斜体I>font>
<font  color="gray" size="5" face="黑体"><U>黑头下划线U>font>
<br>
<font  color="red" size="5" face="隶书">这是上标2<sup>4sup>这是下标x<sub>2sub>font>
<font  color="yellow">
这是要
<font  color="brown">
强调
font>
的两个字
font>

标签可以进行套用，优先生效最近的标签内容。（重点，考试要考）

<font>font>常用的属性如下
- <font>		字体样式
- <b>			加粗
- <i>			斜体
- <s>			删除线
- <u>			下划线
- <sup>			上标形式
- <sub>			下标形式	上面有例子
- <big>			比周围字大一号
- <small>		比周围字小一号
- <strong>		强壮字体

图像和链接标签

<img src="url" width="width" height="height" title="title" alt="alt"/>

这是图像标签的使用，其中src为图像的路径，width和heighthi图像属性，title指示的是鼠标停在图像上面时候显示的文字，alt指示图像无法加载的时候显示的文字。

<a href="url" name="name" target="method">网页a>

这是一个超链接的标签，点击网页就会跳转到指定链接的网页，href就是指定的网页地址，target为网页打开的方式，包括本窗口（_slef)、新窗口(_blank)、父窗口(_parent)和顶端(_top)，默认为本窗口打开。
如果超链接中的链接不是浏览器可识别的文件，则会启动下载功能。
#叫锚点链接，用#可以制作热点链接，即可以跳转至相应网页的指定锚点位置

（001.html）…<a name=”001”>…a>…
（002.html）…<a href=”001.html#001”>…a>…

如上述代码，在001.html中有一个热点名叫001，002.html中有一个超链接，使用了锚点，他的意思是点击这个超链接后，打开001.html页面并跳转至001热点处，可以用于导航等功能。
若href="#"，则为空连接，可以点但是没有效果。
可以在a标签中间插入img这样就是一个图片链接了。
图像热区，即点击图片相应区域才会有效果，shape区域包括circle、rect和poly（圆形、矩形和多边形）

<map name=”my”>
	<area shape=”circle” cords=”1,1,1” href=…/>
map>
<img src=… usemap=”#my”/>

还可以制作邮件链接

<a href=mailto:[email protected]>联系我a>

也可以链接javascript，后面会说到。

实体引用

有些字符不能直接显示出来，比如版权符号©需要使用®实现，和空格一样，除此之外还有比如双引号大于号小于号，箭头，商标版权TM等符号。

高级标签

大致说一说三类，列表、表格和表单，这也差不多是比较重要的内容，特别是表格，很灵活当然更加实用不过也更麻烦，不嫌累的话可以好好熟悉熟悉。

列表

列表包括有序列表和无序列表。

<ol type=”A” start=”3”>
	<li>1li>
	<li>2li>
	…
ol>

这是一个有序列表的栗子，type是标号类型，参数值有1、Aa和Ii（阿拉伯数字，大小写字母和大小写罗马字）。
无序列表也是上面的样子，只不过ol变成了ul，type也变成了circle、disc、square（圆，点，方块）和none等类型，后面也可以使用css样式取消无序列表前面的标号，也可以做成横向列表，如导航菜单等等。
还有一种比较特殊的列表，定义列表，大概格式相当于一个标题和一段话相对应。

<dl>
	<dt>标题dt>
	<dd>内容dd>
…
dl>

表格

<table border=”宽度”>
	<tr>
		<td>单元格内容td>
		<td>单元格内容td>
	//第二行
<tr>
	…
table>

表格非常灵活，属性也很多，最常用的是align对齐方式，width表格宽度，可以在表格中嵌套表格。
表格还可以自定义背景，table和td标签的background属性，也可以通过bgcolor属性设置背景颜色。
rowspan属性表示占据多少行，比如一个图片右边有三行文字，colspan同理。

...
<tr>
	<td rowspan="3"><img.../>td>
tr>
<tr>
	<td>第一行td>
tr>
<tr>
	<td>第二行td>
tr>
<tr>
	<td>第三行td>
tr>
...

如果想在表格中嵌套一个表格的话，valign这个属性也是很常用的，如下，如果没有的话，可能嵌套的东西会默认居中，而不是在最顶端，这肯定和需求是不一样的。

<table align="center" width="950">
		<tr>
			<td width="200" valign="top">
				<table>
				<tr>
...

上述是简单的表格设计，下面是一个完整的表格，包括thead、tbody和tfoot三部分，称为“行组”。
以下代码中，使用caption标签标示表格的名字，使用th标签表示这个单元格是一行的行头，即标题,默认加粗。

<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>完整表格title>
head>
<body>
	<table border="1">
		<caption>学生成绩单caption>
		<thead>
			<tr>
				<th>姓名th><th>性别th><th>成绩th>
			tr>
		thead>
		<tbody>
			<tr>
				<td>张三td><td>男td><td>460td>
			tr>
			<tr>
				<td>李四td><td>女td><td>590td>
			tr>
		tbody>
		<tfoot>
			<tr>
				<td>平均分td><td colspan="2">340td>
			tr>
		tfoot>
body>
html>

表单

这是个好东西啊，经常用啊，比如啊，登录界面就可以是个表单，注册界面，调查问卷，订单等等都可以使用表单实现。表单中包含了很多控件，使用input标签的type属性进行控制。
使用form标签实现表单的创建，是一个容器标签，主要属性为action，点击提交按钮后发送到web服务器上，由指定的程序处理，语法为action=”URL”，默认为本页面。method，告诉服务器数据的发送方式，post还是get，若为get则创建一个请求，包含页面url，一个问号和表单的值，浏览器将请求返回给url中指定的脚本进行处理，若为post，表单上的数据会作为一个数据块发送到脚本，而不是字符串形式。

<form method=”post” action=”result.html”>
	<p>名字：<input name=”name” type=”text”>p>
	<p>名字：<input name=”pwd” type=”password”>p>
	<p>
	选择：<select name="bmon">
		<option value="">[月份]option>
		<option value="1">一月option>
	select>
	p>

	<p>
			<input name="subbutton" type="submit" value="tijiao">
			<input name="resbutton" type="reset" value="chongzhi">
			<input type="button" name="putongbutton" value="普通按钮" onclick="alert(this.value)">
	p>
form>

input标签的属性
type可选有text,password,checkbox,radio,submit,reset,file,hidden, image和button，默认为text。
name为控件的名字，value表单元素的初始值，如radio必须有一个初始值。
size指定表单元素初始宽度，若为文本输入框则指定文本框长度为多少字节，其他类型则以像素为单位的长度。maxlength表示输入框中输入的最大字符数，默认无限大。checked属性指定按钮是否被选中，redio或者checkbox使用这个类型，单选框应该有相同的name以保证互斥，复选框的name是否一致需要根据环境判断，若为相同属性，如都为兴趣，需要name一致。

下拉选择菜单

代码如下

<form>
		<select name="fruit" size="3">
			<option value="book1">一option>
			<option value="book2">两option>
			<option value="book3">三option>
			<option value="book4">四option>
			<option value="book4">四option>
		select>
form>

表单高级应用

也就是把input标签的type属性值换一下即可，如输入电子邮件时type设为“email”，之后如果地址不合法浏览器则会提示。
还可为date、month、time、datetime、datetime-local以及year。
若为“number”则为数字输入框，可通过上下按钮进行加减。
range属性用于显示一个滚动控件，用法如下

<input type="range" name="ran" min="1" max="10"/>

若在form中input属性添加required属性，则表示该项必须填写，若点击提交该项为空，则会提示用户。

<input type="password" name="pwd" required="required">

若设置placeholder，相当于设置hint，如文本框的默认提示值

<input type="search" name="user_search" placeholder="Search here"/>

按钮分为普通按钮（button）、提交按钮（submit）和重置按钮（reset），普通按钮主要相应onclick事件。

这是最简单的实现图片按钮的功能

<input src=”地址” type=”image”/>

但是这样仍具备submit的功能。
多行文本框

<p>
	<textarea name="text" col="40" rows="8">
		自信
	textarea>
p>

文件域只需要将type改为file即可，选择文件，可以进行上传文件等操作。

---

好了到这里html的基础知识就说完了。接下来就是css的相关东西了，这个css啊，也不知道是我太心急了还是这个书真的不好，看的很混乱，半懂不懂的那种吧，还是不熟，单是总体感觉差不多了呢。
下面是一个比较综合的例子吧，说白了就是很多东西揉在了一起，主要看下每个标签的用法。
效果图如下

代码如下
相关图片我已经放到云里了，可以直接那这个图片地址用
保存txt文件，后缀改成.html即可用浏览器打开。

<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>练习title>
		<style type="text/css">
	style>
head>
<body>
	<h1 align="RIGHT"><strong>这是h1标题strong>h1>
	<hr align="center" width="500" size="3" color="#91289A"/>
	<h4 align="center">这是h4标题<a href="https://www.baidu.com/" target="_blank">点击此处跳转百度a>h4>
	<table width="800" align="center" border="2">
		<tr>
			<td colspan="2" align="center"><strong>假装<small>这里有一串缩小的small>这是<sub>这是下标sub>一个表格<sup>这是上标sup>的标题td>
		tr>
		<tr>
			<td width="400"><img src="http://my-web-image.oss-cn-beijing.aliyuncs.com/18-6-27/83137117.jpg" height="30%" width="100%" alt="图片未加载" title="这是示例图片"/>td>
			<td>
				<form action="h.html" method="post">
					<table align="center" width="100%">
						<tr>
							<td width="100" align="right">姓名：td>
							<td><input type="text" size="30" maxlength="50" name="UserName" id="UserName">td>
						tr>
						<tr>
							<td align="right">密码：td>
							<td><input type="text" name="Pwd" id="Pwd" size="30" maxlength="50" />td>
						tr>
						<tr>
							<td align="right">性别：td>
							<td>
								<input type="radio" name="Sex" id="SexMale" value="1" checked="checked"/>男
								<input type="radio" name="Sex" id="SexFemale" value="2"/>女
							td>
						tr>
						<tr>
							<td align="right">生日：td>
							<td>
								<select name="BirthYear" id="BirthYear">
									<option value="1998">1998option>
									<option value="1997">1997option>
									<option balue="1999">1999option>
								select>年
							td>
						tr>
						<tr>
							<td align="right" valign="top">自我介绍：td>
							<td><textarea name="textarea" col="40" rows="8">自信textarea>td>
						tr>
						<tr>
							<td align="right"> td>
							<td><img src="http://my-web-image.oss-cn-beijing.aliyuncs.com/18-6-27/40079023.jpg" width="132" height="55"/>看不清？<a href="#">换一张？a>td>
						tr>
						<tr>
							<td align="right">验证码td>
							<td>
								<input type="text" name="VeryCode" id="VeryCode" size="30" maxlength="5"/>
							td>
						tr>
						<tr>
							<td> td>
							<td>
								<p><input name="subbutton" type="submit" value="tijiao"/>
									<input name="resbutton" type="reset" value="chongzhi"/>
									<input type="button" name="putongbutton" value="普通按钮" onclick="alert(this.value)"/>
								p>
							td>
						tr>
					table>
				form>
			td>
		tr>
		<tr>
			<td colspan="2" align="center">
				在这里收尾吧
				<font  color="red" size="5" face="隶书"><B>隶书加粗B>font>
				<br>
				<font  color="blue" size="5" face="楷书"><I>楷书斜体I>font>
				<font  color="gray" size="5" face="黑体"><U>黑头下划线U>font>
			td>
		tr>
		<tr>
			<td colspan="2" align="right">
				<font  color="gray" size="5" face="黑体"><B><I><U><s>这是删除线s>U>I>B>font>
			td>
		tr>
		<tr>
			<td align="center">
				<ul type="square">
				<li>差点忘了列表了li>
				<li>啊哈哈li>
				ul>
			td>
			<td align="center">
				<ol type="A">
				<li>差点忘了列表了li>
				<li>啊哈哈li>
				ol>
			td>
		tr>
	table>
	
body>
html>