JAVAEE前奏-今天带大家认识HTML!高手勿进。

yumo6663个月前 (04-26)技术文章34

接上篇内容。上次介绍了整个课程,目的是告诉大家学习路线,不要偏了。今天开始慢慢告诉大家这些课程的重点。也就是需要学些什么有用的东西,那些没用的可以先不要去学习,等学到一定程度了,再慢慢去挖掘。首先开始是网页,因为他比较简单。网页就是HTML,HTML是超文本标记语言的简称。说白点,就是比普通文本更加牛逼啦!我们在网页上看到的花花绿绿的文字,图片都是超文本。所以,HTML就是来做网页的。建立一个网页非常简单,新建一个记事本文件,敲入以下代码,就可以完成一个网页。

<html>

<head>

<title>网页的标题</title>

</head>

<body>

你好,html世界。

</body>

</html>

然后把记事本的后缀名改成html就ok了。后缀名是什么如果还不知道的话,先去百度,下次再给大家科普。

就是这么简单,关于这些标记,记住就行了。

然后注意写的时候要有层次感。

还有一点非常重要,学习html一定要有容器的概念,什么是容器的概念,就是把<html></html>这一对标记看成一个容器,他里面有<head></head>和<body></body>两个兄弟容器,这些容器下面又可以写其他容器。

需要记住的标记有:

标题标记

<h1>

<h6>

有序列表

ol

子标记 li

<ol type="a">

<li>第一次</li>

<li>第二次</li>

<li>第三次</li>

</ol>

无序列表

ul

li

例如

<ul>

<li>苹果</li>

<ol type="a">

<li>一种水果</li>

<li>智能手机</li>

</ol>

<li>桔子</li>

<ol type="a">

<li>酸酸的水果</li>

<li>同时还有点甜</li>

</ol>

</ul>

自定义列表:<dt>是标题,<dd>是解释

<dl>

<dt>250</dt>

<dd>在地球上,人民夸某个人的时候喜欢使用你是250</dd>

<dt>隔壁老王</dt>

<dd>在地球上,夸某一位邻居长得帅,就叫隔壁老王</dd>

<dt>矮矬穷</dt>

<dd>长得好看又有钱</dd>

<dt>高富帅</dt>

<dd>长得丑还没钱</dd>

</dl>

超链接

<a href="路径">

图片

<img src="路径" alt="">

1 相对路径就是指相对于当前文件夹所在的路径.(建议使用相对路径)

..两点表示到相对路径的上一级目录.

每一个\代表一个目录

2 绝对路径就是指带了盘符的路径.可以直接根据地址在电脑硬盘中找到.

表格

<table>

<tr>行

<td>单元格

bgcolor 背景颜色

width 宽度

height 高度

border 边框宽度

align 水平对齐 left 左对齐 center 居中 right 居右

<table>

<tr>

<td colspan="2">10</td>

<td rowspan="2">12</td>

</tr>

<tr>

<td>20</td>

<td>21</td>

</tr>

</table>

这里需要花两天时间来练习和消化。

接下来就要开始学习表单知识了。

下次再给大家分享表单需要学习什么。

关注我的微信公众号machine_matrix , 获取更多知识.

相关文章

html实现原生table并设置表格边框的两种方式

在 HTML 中实现原生表格并设置表格边框的详尽教程 在 HTML 中,表格是展示结构化数据的重要工具。为了使表格更加清晰、美观,设置表格边框是常见的需求。本文将深入探讨 两种原生方式 来实现表格边框...

前端兼容性问题总结

1.如何在IE6及更早浏览器中定义小高度的容器? IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高。 解决:#test{overflow:hidden;height:1px;fon...

20分钟建立自己的Bootstrap站点

这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用boots...

css布局方案汇总(28个实例图文并茂)

简介布局在我们前端日常开发来说是非常重要的,一个好的布局能简化代码的同时还能提高网页的性能。常见的布局方法有浮动(float)布局、绝对定位(position)布局、表格布局(table)、弹性(fl...

掌握这些CSS知识点,Coding如飞

许多入门学前端的同学,或是准备面试的同学都会去死记硬背一些前端知识点,笔者也是这么经历过来的,但却不推荐这种囫囵吞枣、不求甚解的学习方式,因为这样会走很多弯路,属于“应试”学习,我们更应该的是从基础到...

CSS基本布局16例

单行单列单行两列1:采用float浮在左上角,固定宽度。单行两列2:固定在左上角,固定宽度,采用的是绝对(absolute)定位。单行两列3:固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应...