前端学习:html基础学习一

1、HTML的语法(主要内容HTML语法格式、文档注释、代码格式)

HTML的特点

  1.可以设置文本的格式,比如标题、字号、文本颜色、段落等等

  2.可以创建列表(例如打开百度,我们可以看到这样的列表)

  3.可以插入图像和媒体(例如百度首页我们也可以看到图片)

  4.可以建立表格

  5.超链接,可以使用鼠标点击超链接来实现页面之间的跳转

HTML的标记和他的属性

HTML文档的保存格式

.html

.htm

.xhtml

标记和被标记的内容构建出HTML文档

格式

<标记>

内容

</标记>

例:打开开发工具Notepad++,写下代码:

<html>

<body>

Hello

</body>

</html>

保存,新建一个文件夹,命名为“课程源文件”,打开文件夹“课程源文件”,新建一个文件夹,命名为“第一节课”,然后保存,保存的类型选择,如图:

前端学习:html基础学习一

然后我们打开“课程源文件”,接着打开“第一节课”,里边有我们刚才新建的内容,将其拖到浏览器中,浏览器中就会显示我们刚才新建的内容,“Hello”。

需要注意,标记是成对出现

标记的属性

标记的属性,就是用来控制我们的内容(图像、文本等的)如何的显示,格式如下:

<标记 属性1=属性值 属性2=属性值 ... ... >内容</标记>

例如<body bgcolor="red">内容</body>

以上的属性是用来控制我们的网页的背景颜色,bgcolor    就是body的属性,他的值是red(红色)

<html>

<body bgcolor=”red”>

MAIZI

</body>

</html>

当我们刷新之后,整个网页背景就会变成红色:

前端学习:html基础学习一


语法不区分字母大小写

<HTML>、<Html>、<html>都是定义相同的标记,但是在编写网页的时候尽量使用小写


文档注释

注释一段内容时使用“<!--”开始,以"-->"结束,例如<!--我是这个网页的作者,我的名字叫做朱朝兵-->

注释的内容不会显示!!!!!!


字符实体

什么是字符实体?

比如我们想在网页上面显示一个“<”小于符号,但是“<”在HTML中是文档标记的开始语言,如果我们直接使用“<”会出差错,所以我们就会一些实体名称来代替!

常见的字符实体

显示结果----------描述----------实体名称----------实体编号

---------------------空格----------    ----------

<--------------------小于号---------- <---------- <

>--------------------大于号---------- >---------- >

&--------------------和号---------- &---------- &

"--------------------引号---------- " ---------- "

'--------------------撇号---------- ' (IE不支持)---------- '

¢--------------------分---------- ¢---------- ¢

£--------------------镑---------- £---------- £

¥--------------------日圆---------- ¥---------- ¥

€--------------------欧元---------- €---------- €

§--------------------小节---------- §---------- §

©--------------------版权----------©---------- ©

®--------------------注册商标---------- ®---------- ®

™--------------------商标---------- ™---------- ™

×--------------------乘号---------- ×---------- ×

÷--------------------除号---------- ÷---------- ÷

2、HTML的基本机构(主要内容标记<html><head><title><body>)

<html>内容</html>

解释:HTML文档的文档标记,也称为HTML开始标记

功能: 这对标记分别位于网页的最前端和最后端

<html>在最前端表示网页的开始

</html>在最后端表示网页的结束


<head>内容</head>

解释:HTML文件头标记,也称为HTML头信息开始标记

功能:用来包含文件的基本信息,比如网页的标题、关键字,在     <head></head>内可以放<title></title>、<meta></meta>、  <style></style>等等标记

注意:在<head></head>标记内的内容不会在浏览器中显示


<title>内容</title>

解释:HTML文件标题标记

功能:网页的“主题”,显示在浏览器的窗口的左上边

注意:网页的标题不能太长,要短小精悍,能具体反应页面的内   容,<title></title>标记中不能包含其他标记


<body>内容</body>

解释:HTML文档的主体标记

功能:<body>...</body>是网页的主体部分,在此标记之间可以包   含如<p></p>、<h1></h1>、<br>、<hr>等等标记,正是由   这些内容组成了我们所看见的网页

body标记的常见属性:

1.bgcolor

设置背景颜色

<body bgcolor="red"></body>

2.text

设置文本颜色

<body text="green"></body>

3.link

设置连接颜色

<body link="blue"></body>

4.vlink

已经访问了的链接颜色

<body vlink="yellow"></body>

5.alink

正在被点击的链接颜色

<body alink="red"></body>


<meta>内容</meta>

解释:页面的元信息(meta-information)

功能:提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

必须的属性:

content

值:some_text

定义与 http-equiv 或 name 属性相关的元信息

常见的属性:

1.常用的name属性:

1.author

2.keywords

3.description

6.others

把 content 属性关联到一个名称:比如描绘出网页的关键词:<meta name="keywords" content="html学习之html结构">

注意:meta标记必须放在head元素里面

上一篇:ZOJ3640之简单慨率DP


下一篇:别人的Linux私房菜(6)文件权限与目录配置