html零基础者入。

记得学计算机网络的时候好像有学过一些HTML，但没运用起来都忘光了。近来想学学如何写网页。就从html（HyperText Markup Language超文本标记语言）入手了。以下就记录一些基本的语法以及操作。深入学习估计还要继续研究css，html5之类。开始吧。动起手来，个把小时就掌握了。

我的默认浏览器是chrome，用的是win7，理论上是有文本编辑器，有浏览器就可以开始网页的基本编写了。新建一个记事本，显示后缀名，win7的修改后缀名是在：

资源管理器--(左上角)组织--文件夹和所搜选项--查看--然后把隐藏已知文件类型扩展名前面的勾打掉就行，如果想隐藏就打勾。

新建一个txt文本文件，so easy吧，test.txt，直接重命名为test.htm或者test.html，然后确定确实要更改选项。就成了HTML文件了，直接点击打开的话就是在浏览器中打开，我们要编辑的话，需要右键，选择打开方式，我用的是notepad++（可以去下载个，免费的），或者右键找到用记事本打开也行，不过建议不用记事本，因为缩进之类的会很麻烦。从长远的看，去下载个notepad++ 吧，编辑起来也方便。就试试效果的话记事本也行。

现在就可以试试基本语句了。

html语言的基本格式是’单书名号‘（我瞎起的名）也就是“<~>”  和<~/>，所以我们可想而知了，所有的html语句应该要包含在<html>  ~  </html>中间，简单的在刚刚新建的test.html中写入语句  <html> 这是我的网页 </html>就会显示了。去试试吧。

因为我们不是单纯的显示而已，所以要在框架中操作，以下是基本的框架，head中是写一些网页相关信息例如<title>~</title>放在head中可以显示最上角的网页标题，body则是网页的内容

<html>

　　<head> ~ </head>

　　<body> ~ </body>

</html>

1. 知道基本框架了，就一条一条的语句来熟悉吧，我们可以再body的~中添加如下的语句试试效果。

<b>将中间文字显示成粗体</b>　　英文bold所以是b

<i>斜体</i>　　英文italic所以用i

<b><i>又粗又斜</i></b>

<p>普通段落，显示后换行</p> 　　英文paragraph

<br/>  末尾加这个就是换行，所以显示一行文字后加它的效果和换行一样　　英文好像是break就去br换行

<hr/> 显示一条水平直线　　英文horizontal line

<!-- 这个是注释语句 -->

<small> 显示小字体 </small>

<h1> </h1>  h1标题，类推直至有h6标题，字体一次减小

2. 以上都学好了，基本的文本显示应该就会了。下面学学列表。表格分为有序表和无序表即ordered list(ol) 和 unordered list(ul)

<ol>

<li>这是第一项</li>

<li>这是第二项</li>

</ol>

去试试显示效果吧，同理，ul的吧ol改为ul就好。so easy吧。一定要动起来。

3. 到这里是不是迫不及待想知道怎么五彩缤纷，那我们就学学怎么设置颜色吧。颜色就是字体颜色和背景颜色对吧。

例如我们要将一段话显示为红色，那么就用

<p style="color:#ff0000"> 这段话是红色 </p>

记住格式了，是用style等号然后引号color 后面的十六进制的数字是可以通过查表得到的，普通的颜色可以用red或者blue之类的单词代替，想要自己喜欢的颜色，可以搜索一下RGB颜色表就有了。背景的话就用

<p style="background_color:#ff0000"> 这段话的背景颜色是红色 </p>

4. 既然学会背景颜色了，我们是不是也可以插入自己的图片当做背景呢。是的。

<img src="xx.jpg/jpeg/png/gif" alt="加载图片时显示我">　　就这样插入图片了哦，图片加载默认全部平铺，如果想改变位置和平铺方式还需借助css(我可能之后还会写下)。暂且了解这个功能吧。

5. 网页的链接无处不在啊，方便了许多体验，现在我们学学如何设置链接

<a href="http://www.baidu.com"> 点这里是百度的链接 </a>　　英文好像是anchor，简称a

href是超链接的意思hyper reference吧

除用网址外，我们通常需要链接到自己写的其他网页，那么只要加上相对路径就好了，和当前html同个目下下的话直接“XX.html”就可以了，如果上一级就用“../XX.html”类推下一级也会吧。

我要链接到当前网页的某段话怎么做呢，这个时候就要设置id号了，例如先在<p>中设置id然后链接如下：

<p id = "pid1"> 链接过来 </p>

<a href = "#pid1"> 点这里链接到上面那段话 </a>　　注意那个#号不要忘记了，之前的颜色值之前也要加#还记不记得。

哈哈，不得了了，现在连链接都学会了，还有什么学不会呢，对吧。

6. 再来学学表格吧，之前学的列表还记得吗，不记得了往回看吧。

<table>

　　<tr>

　　　　<td>第一行第一列数据</td>

　　　　<td>第一行第二列数据</td>

　　</tr>

　　...

　　<tr>

　　　　<td>第n行第一列数据</td>

　　　　<td>第n行第二列数据</td>

　　</tr>

</table>

一目了然了吧，tr就是table row，表示表格的一行，td就是table data，表示那一行中要显示的数据。要显示颜色就按照之前的方法加就可以了，例如我要td中的颜色为红色那么

<td style="color:#ff0000"> td中显示红色字体</td>，一次类推，背景颜色也会设置了吧，能不能不看之前的就能设置背景颜色呢亲。试试吧。

基本的表格会了，我们来一些表格的高级属性吧，用处挺大的。

<table border="1">　　边框厚度，试试其他值看看效果去

<table width = "50%">　　表格占屏幕的比例，很有用哦

align是对表格，某行，或者某单元进行左，右，中对齐。left，right，center

<td align="center"> 这个数据项就要居中喽 </td>

对于某单元来说是不是还有元素的上下中对齐方式呢，是的用valign.这个valign只能用于单元中，不像align还能修饰某行<tr align=" ">或者整个表格<table align=" ">

<td valign="top"> 这个单元靠上</td>

学会对齐方式了，我们再来一个终极绝招，合并单元格，这个屌吧！

colspan 跨列，就是指多个列合并一个，column span

<table border = "1">

　　<tr>

　　　　<td colspan="2"> 这个横跨两列</td>

　　</tr>

　　<tr>

　　　　<td>不跨</td>

　　　　<td>不跨</td>

　　</tr>

</table>

出现这个效果

同理你知道rowspan怎么用了吧。

到这里，恭喜你，已经入门了。基本的操作你都学会了。赶紧设计一个简单的自己的网页吧。

如果想学的更深入一些，设计的更好一些，有兴趣的话再去学学css（cascading style sheets级联样式表）的入门。

HTML 速成的更多相关文章

  1. 《LoadRunner12七天速成宝典》来了

    看到自己的新书又要发行了,算算从09年第一本书开始,不知不觉已经是第四本书了(帮朋友合写的书不算),每次写完之后都会说太累了,不想再写了,但是却又次次反悔,吞下食言的苦果.如果非要说第四本书的感受,那 ...

  2. Java正则速成秘籍（一）之招式篇

    导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...

  3. Java正则速成秘籍（二）之心法篇

    导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...

  4. Java正则速成秘籍（三）之见招拆招篇

    导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...

  5. 【小白的CFD之旅】08 CFD速成之道

    学了那么一个星期的流体力学,又看了一周的计算流体力学,小白对于如何应用CFD解决工程流体问题,依然是一无所知.眼看一个月的时间已经过半,小白有点着急起来.于是在一个阳光明媚的早晨,小白又找到了黄师姐. ...

  6. 一个简单的html5页面在线速成工具！（当然本文主要说下他的成果的结构）

    分享一个好玩的web app页面速成工具 当然主要是让大家看下他的原理 看着他的结构大家就该猜到这个了.这个是利用换页之后给当前div加了一个active,然后利用css控制效果 这个毫无疑问是采用最 ...

  7. 高手速成android开源项目【导航篇】

    Android开发又将带来新一轮热潮,很多开发者都投入到这个浪潮中去了,创造了许许多多相当优秀的应用.其中也有许许多多的开发者提供了应用开源项目,贡献出他们的智慧和创造力.学习开源代码是掌握技术的一个 ...

  8. 【翻译】CEDEC2015 速成Albedo Chart 制作

        关于pbr材质和贴图的制作,最近llegorithmic提供了几篇不错的guide  https://www.allegorithmic.com/pbr-guide   不过像如何从通过现实场 ...

  9. 30天，O2O速成攻略【8.30南京站】

    活动概况 时间:2015年8月30日13:30-16:30 地点:啡咖啡·孵化器(南京市玄武大道699-22号江苏软件园22栋) 主办:APICloud.Udesk.人为峰 网址:www.apiclo ...

  10. 30天，O2O速成攻略【8.29杭州站】

    活动概况 时间:2015年8月29日13:30-16:30 地点:123茶楼(杭州上城区青年路27号2楼) 主办:APICloud.UPYUN.一起火 网址:www.apicloud.com 费用:免 ...

随机推荐

  1. 谈到一些传统的企业网站SEO问题领域

    在网络营销中的时间越长,有时候,企业网站还是有一些传统做法不解.也许,这是它的思想的局限.比如,我最近来到了一个新的工作环境中发现,虽然公司是专业从事传统渠道已经很不错了,但对于网络营销渠道还有改进的 ...

  2. 你如何破解后安装PS cs6

    至于破解程序猿支持,资源共享是只有更好的,我相信有很多孩子还在用cs5看版本号.假设你想尝试新的版本号PS.但很长一段时间不能找到字的串行数.现在,你如何支付你的序列号和使用永久裂纹PS cs6. 好 ...

  3. git merge简介（转）

    git merge的基本用法为把一个分支或或某个commit的修改合并现在的分支上.我们可以运行git merge -h和git merge --help查看其命令,后者会直接转到一个网页(git的帮 ...

  4. java_maven_linux_windows下项目运行jar

    我才用的是eclipse自带的export功能,暂时没把maven的打包插件研究清楚 导出jar包后,需要用解压缩打开,把配置文件copy到压缩包的内的顶级目录 保存 写 bat 脚本 @author ...

  5. HDU 2612 -Find a way (注重细节BFS)

    主题链接:Find a Way 题目不难,前几天做,当时准备写双向BFS的,后来处理细节上出了点问题,赶上点事搁置了.今天晚上重写的,没用双向,用了两次BFS搜索,和双向BFS 道理差点儿相同.仅仅是 ...

  6. CSharp设计模式读书笔记（20）：观察者模式(学习难度：★★★☆☆，使用频率：★★★★★)

    观察者模式(Observer Pattern):定义对象之间的一种一对多依赖关系,使得每当一个对象状态发生改变时,其相关依赖对象皆得到通知并被自动更新.观察者模式的别名包括发布-订阅(Publish/ ...

  7. 【百度地图API】你看过房产地图吗？你知道房产标注是如何建立的吗？

    原文:[百度地图API]你看过房产地图吗?你知道房产标注是如何建立的吗? 你是不是看过很多房产网站?例如安居客,新浪乐居. 你是不是也想做一个能写文字的标注? 你知道怎么去实现麼? 其实,上图这样的标 ...

  8. Hibeernate中的两种分页方式

    1. return getHibernateTemplate().executeFind(new HibernateCallback() { public Object doInHibernate(S ...

  9. AngularJS应用开发思维之3：依赖注入

    找不到的API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. $http 比如,在jQuery中,我们知道它的AP ...

  10. Linux经常使用命令(一) - ls

    ls命令是linux下最经常使用的命令.ls命令就是list的缩写, 缺省下ls用来打印出当前文件夹的清单, 假设ls指定其它文件夹, 那么就会显示指定文件夹里的文件及文件夹清单. 通过ls 命令不仅 ...