想了很久这个HTML学习该怎样开始,一直在想怎么写HTML概述,到现在也没有标准的一个说法。因为近期一
个多月学Web前端开发的时候,只是知道用HTML可以编写网页之类的东西,其他的一无所知,这几天空闲的时候一
直在找Web前端开发方面的知识,现在对HTML和CSS再加上JavaScript这三个有了一些初步的了解,没有之前那么
迷惑了,根本不知道从何开始学起。
由于老师一上来就开始讲深入的知识,前几节课都是迷迷糊糊的。这初期的学习必须要靠自己去补上,在网上找
了好久,该从什么方面开始了解,找了不少Web前端开发基础课程,HTML+CSS+JS视频教程等,但是没有找到合适
的,终于在51CTO学院上找到了适合我们初学者的Web前端HTML+CSS+JS初级入门视频课程。
HTML就是超文本标记语言的简写,是最基础的网页语言。超文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网也中的各个部分。超文本标记语言是为网页创建和其它可以在网页浏览器中看到的信息设计的一种标记语言。
HTML是通过标签来定义的语言,代码都是由标签所组成。多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定的书写规范。
格式:<标签名 属性名=“属性值”>数据内容</标签名>
<标签名 属性名=“属性值” />
HTML代码由<html>开始</html>结束,里面由头部分<head></head>和体部分<body></body>两部分组成。 头部分是给HTML页面增加一些辅助或者属性信息,它里面的内容先加载。体部分 真正存放页面数据的地方。
HTML代码不用区分大小写。但是为了方便以后的修改和阅读需要遵循一定的编写格式规范。
说了这么多,那么我们可以用一般的文本编辑器来实现HTML编写。比如Word,写字板,日记本等等,这里我们日记本最方便了。
1打开系统自带的日记本:
![](https://box.kancloud.cn/2016-04-28_572155862d2af.jpg)
2在日记本中输入下面HTML格式的东西:
~~~
<html>
<head>
</head>
<body>
</body>
</html>
~~~
3在头部分中输入:
~~~
<html>
<head>
<title>连宏伟的第一个网页</title>
</head>
<body>
</body>
</html>
~~~
4在体部分中输入:
~~~
<html>
<head>
<title>连宏伟的第一个网页</title>
</head>
<body>
<font>这是本网页的第一行内容</font>
<hr />
<b>这是本网页的第二行内容</b>
<br />
<h2>这是本网页的第三行内容</h2>
</body>
</html>
~~~
5最后保存在桌面上的文件名位default.html或default.htm。我的默认浏览器为2345浏览器,保存后会在桌面显示2345浏览器图标的网页文件。
![](https://box.kancloud.cn/2016-04-28_5721558644ce3.jpg)
![](https://box.kancloud.cn/2016-04-28_572155865b7be.jpg)
6双击打开default文件,所显示的网页为:
![](https://box.kancloud.cn/2016-04-28_5721558683edb.jpg)
7要是需要显示更丰富的文字内容,需要使用标签的属性:
~~~
<html>
<head>
<title>连宏伟的第一个网页</title>
</head>
<body>
<font color="red" size="8">这是本网页的第一行内容</font>
<hr />
<b>这是本网页的第二行内容</b>
<br />
<h2>这是本网页的第三行内容</h2>
</body>
</html>
~~~
![](https://box.kancloud.cn/2016-04-28_5721558699241.jpg)
在日记本本中编写的东西为:
![](https://box.kancloud.cn/2016-04-28_57215586ad755.jpg)
总体来说,HTML的操作思想:为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作,标签就相当于一个容器,对容器中的数据进行操作,就是在不断的改变容器的属性值。
- 前言
- HTML学习1:Dreamweaver8的安装
- HTML学习2:初识HTML
- HTML学习3:常用标签之文本标签
- HTML学习4:常用标签之列表标签
- HTML学习5:常用标签之图像标签
- HTML学习6:常用标签之超链接标签
- HTML学习7:常用标签之表格标签
- HTML学习8:常用标签之框架标签
- HTML学习9:常用标签之表单标签
- HTML学习10:表单格式化
- HTML学习11:HTTP 方法
- HTML学习12:其他常见标签之头标签
- HTML学习13:其他常见标签之体标签
- 轻松学习JavaScript一:为什么学习JavaScript
- 轻松学习JavaScript二:JavaScript语言的基本语法要求
- 轻松学习JavaScript三:JavaScript与HTML的结合
- 轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- 轻松学习JavaScript五:JavaScript的变量和数据类型
- 轻松学习JavaScript六:JavaScript的表达式与运算符
- 轻松学习JavaScript七:JavaScript的流程控制语句
- 轻松学习JavaScript八:JavaScript函数
- 轻松学习JavaScript九:JavaScript对象和数组
- 轻松学习JavaScript十:JavaScript的Date对象制作一个简易钟表
- 轻松学习JavaScript十一:JavaScript基本类型(包含类型转换)和引用类型
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(一)
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(二)
- 轻松学习JavaScript十三:JavaScript基于面向对象之继承(包含面向对象继承机制)
- 轻松学习JavaScript十四:JavaScript的RegExp对象(正则表达式)
- 轻松学习JavaScript十五:JavaScript之BOM简介
- 轻松学习JavaScript十六:JavaScript的BOM学习(一)
- 轻松学习JavaScript十七:JavaScript的BOM学习(二)
- 轻松学习JavaScript二十九:JavaScript中的this详解
- CSS基础学习一:CSS概述
- CSS基础学习二:如何创建 CSS
- CSS基础学习三:CSS语法
- CSS基础学习四:元素选择器
- CSS基础学习五:类选择器
- CSS基础学习六:id选择器
- CSS基础学习七:属性选择器
- CSS基础学习八:派生选择器
- CSS基础学习九:伪类
- CSS基础学习十:伪元素
- CSS基础学习十一:选择器的优先级
- CSS基础学习十二:CSS样式
- CSS基础学习十三:盒子模型
- CSS基础学习十四:盒子模型补充之display属性设置
- CSS基础学习十五:盒子模型补充之外边距合并
- CSS基础学习十六:CSS盒子模型补充之border-radius属性
- CSS基础学习十七:CSS布局之定位
- CSS基础学习十八:CSS布局之浮动
- CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效
- DIV+CSS实操一:经管系网页总体模块布局
- DIV+CSS实操二:经管系网页添加导航栏和友情链接栏
- DIV+CSS实操三:经管系网页内容模块添加标题栏和版权信息模块
- DIV+CSS实操四:经管系网页内容模块内容添加(一)
- DIV+CSS实操五:经管系网页内容模块内容添加(二)
- DIV+CSS实操六:经管系网页添加导航栏下拉菜单
- DIV+CSS实操七:中文系内容模块控制文本不换行和超出指定宽度后用省略号代替
- JS中实现字符串和数组的相互转化