HTML从入门到入土

文章目录

Html5
工具
整体结构
- 网页跳转、刷新小技巧
基本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>段&nbsp;落</p>

水平线

格式如下

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

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

预排版标签

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

<br>

换行

&nbsp;

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

文字标签

<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>4</sup>这是下标x<sub>2</sub></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:568406972@qq.com>联系我</a>

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

实体引用

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

高级标签

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

列表

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

<ol type=”A” start=”3”><li>1</li><li>2</li>…
</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标签表示这个单元格是一行的行头，即标题,默认加粗。

<!DOCTYPE html>
<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>460</td></tr><tr><td>李四</td><td>女</td><td>590</td></tr></tbody><tfoot><tr><td>平均分</td><td colspan="2">340</td></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即可用浏览器打开。

<!DOCTYPE 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">1998</option><option value="1997">1997</option><option balue="1999">1999</option></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">&nbsp;</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>&nbsp;</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>