HTML 速成

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级联样式表)的入门。

时间: 2024-11-23 17:47:22

HTML 速成的相关文章

从零开始的Python爬虫速成指南

http://python.jobbole.com/87284/ 从零开始的Python爬虫速成指南 2017/01/22 · 实践项目 · 1 评论 · 爬虫 分享到: 11 原文出处: 舞鹤 序 本文主要内容:以最短的时间写一个最简单的爬虫,可以抓取论坛的帖子标题和帖子内容. 本文受众:没写过爬虫的萌新. 入门 0.准备工作 需要准备的东西: Python.scrapy.一个IDE或者随便什么文本编辑工具. 1.技术部已经研究决定了,你来写爬虫. 随便建一个工作目录,然后用命令行建立一个工程

Java速成手册

记得当初从Pascal转C的时候看了matrix67大神写的C语言速成手册.虽然内容很基础(只包括应付NOIP的东西:基本语句.数据类型.运算符等等,不包括面向对象部分),但是很适合已经熟练掌握过一门编程语言的人快速入门新语言.感觉这种速成手册的意义就在于能使读者先快速上手一门陌生的编程语言,其他的东西完全可以在实践当中继续学习. 寒假要做一个小project,感觉用Java可能会更加简洁一些.不过目前还没找到一本类似的Java速成手册(市面上的大部分都是给码农用的大部头),于是打算自己自制一个

AFNetworking速成教程

AFNetworking速成教程 网络 — 你的程序离开了它就不能生存下去!苹果的Foundation framework中的NSURLConnection又非常难以理解, 不过这里有一个可以使用的替代品:AFNetworking. AFNetworking 非常受开发者欢迎 – 它赢得了我们读者的青睐:2012年最佳的iOS Library奖(2012 Best iOS Library Award.) 所以现在我就写这篇文章来向你介绍如何在程序中有效的使用它. AFNetworking 包括了

全面剖析Activiti-全集,高手速成原来这么简单

成都传智播客--全面剖析Activity全集: 课程介绍: Activiti是Tom Baeyens团队离开JBoss之后,加入Alfresco公司的全新产品.Activiti的前身是JBPM4,继承了jbpm4的所有优点,同时将其发扬光大.Activiti底层的API与Jbpm4的API相似程序也达60%以上,特别是service提供的接口,都是在Jbpm4上提供扩展,这样使得熟悉jbpm4的开发人员很容易上手.作为一个遵从 Apache 许可的工作流和业务流程管理开源平台,完全兼容了BPMN

Html Css Javascripe jQuery 速成经验 support by Mr song &lt;根据自己所掌握的会修改更新&gt; 第五周作业

我是学软件工程的一名本科学子,最近开始接触网页设计制作.由于时间限制我不得不在较短的时间内,掌握这一体系的主体核心部分. 其中老师(20年的编程经验)给予的速成教学让我受益匪浅.这里我再献丑再总结部分个人心得,希望对大家有所帮助. 第一点:Html Css Javascripe jQuery这4种语言是写在同一个文本里面,并不是要分成几个模块.他们都是共同为了网页视图的呈现和功能的实现: 第二点: 1.Html:网页编程的主干框架,承担着网页上的几乎所有数据的载入:    通过标签的形式,输入不

一个简单的html5页面在线速成工具!(当然本文主要说下他的成果的结构)

分享一个好玩的web app页面速成工具 当然主要是让大家看下他的原理 看着他的结构大家就该猜到这个了.这个是利用换页之后给当前div加了一个active,然后利用css控制效果 这个毫无疑问是采用最大宽度640的布局方式 类似的js框架我曾经分享过2个如fullPage.js,slip.js大家可以从我之前的博客中找到,里面我详细的写了使用方法http://www.cnblogs.com/LoveOrHate/category/677610.html 下面是demo地址:http://eqxi

Android高手速成--第一部分 个性化控件(View)

第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.ProgressBar.TextView.ScrollView.TimeView.TipView.FlipView.ColorPickView.GraphView.UI Style等等..其他 一.ListView android-pulltorefresh一个强大的拉动刷新开源项目,支持各种控件下拉刷新

Android高手速成--第四部分 开发工具及测试工具

第四部分 开发工具及测试工具 主要介绍和Android开发工具和测试工具相关的开源项目. 一.开发效率工具 Json2Java根据JSon数据自动生成对应的Java实体类,还支持Parcel.Gson Annotations对应代码自动生成.期待后续的提取父类以及多url构建整个工程的功能项目地址:https://github.com/jonfhancock/JsonToJava在线演示:http://jsontojava.appspot.com/ IntelliJ Plugin for And

Android高手速成--第三部分 优秀项目

主要介绍那些Android还不错的完整项目,目前包含的项目主要依据是项目有意思或项目分层规范比较好.Linux项目地址:https://github.com/torvalds/linuxAndroid项目地址:https://android.googlesource.com/ 或 https://github.com/android以上两个项目,不解释 (1) ZXing二维码扫描工具项目地址:https://github.com/zxing/zxing 或 https://code.googl

Android高手速成--第二部分 工具库

主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过依赖注入减少View.服务.资源简化初始化,事件绑定等重复繁琐工作 AndroidAnnotations(Code Diet)android快速开发框架项目地址:https://github.com/excilys/androidannotations文档介绍:https://github.com/excilys/a