html学习笔记（一）

来源：互联网发布：云计算试点城市编辑：程序博客网时间：2024/05/20 09:06

最近开始学习网站制作。首先开始学习最基础的html语言。
一 html基本语法
1，标记语法
html用于描述功能的符号称为标记。在html中标记的大小写作用相同。
标记分为单标记和双标记
单标记语法：<标记名称>
双标记语法：双标记是由“始标记”和“尾标记”两部分构成的，必须成对使用。始标记告诉浏览器从此处开始执行该标记所表示的功能。尾标记告诉浏览器在这里结束该功能，始标记前加一个正斜杠（/）即成为尾标记。<标记>内容</标记>
2，属性语法
大多数的单标记和双标记的始标记都可以包含一些属性，其语法是：<标记名字属性1 属性2 属性3>
3，编写html文件的注意事项
(1)所有标记都要用尖括号（<>）括起来
(2)对于成对出现的双标记，最好同时输入起始标记或结束标记
(3)采用标记嵌套的方式可以为同一个信息应用多个标记
(4)在代码中不区分大小写
(5)任何空格或回车在代码中都是无效的，插入空格或回车有专有的标记
(6)标记中不要有空格，否则浏览器无法识别
(7)标记中的属性可以用双引号（""）引起来，也可以不引起来
二文件头部内容
1，设置页面标题
HTML文件标题在浏览器的标题栏中显示。每个HTML文件都有一个标题用来说明文档的属性。
基本语法：
<html><head> <title>请在此处输入文件标题名</title></head><body></body></html>
2，设置基地网址<base>
基地网址用于设定浏览器中文件路径，<base>标记一般用于设计文件的URL地址，一个HTML文件只能有一个<base>标记同时该标记必须放在头文件中。
3，设置基准文字<basefont>
基准文字：指制作网页前，先进行网页文字的基本定义，包括字体，字号，颜色以及其他关于字体的定义，当网页中的文字没有另外定义样式时，就会自动套用网页定义的基准文字。
基本语法：
<html><head> <basefont face=“” size="" color=""></head><body></body></html>
face属性用于设置文字的名称，可以是宋体，楷体等，输入时直接在属性位置输入即可（包括汉字）
size属性是用于设置字号的大小
color属性用于设置字体的颜色
3，定义元信息<meta>
在用浏览器浏览网页的源代码时，不难发现网页的头部文件中用meta标记，该标记主要功能是定义页面的一些信息，但这些信息不再网页中显示，只在源文件中显示，在HTML中，<meta>标记通过其自身的一些属性来定义网页重的信息，例如：文件的关键字，作者信息，网页的过期时间等等，HTML文件中可以有多个<meta>标记，<meta>标记不是成对的标记。
基本语法：<meta http-equiv="" name="" content="">
(1)设置页面关键字keywords
网页中的关键字主要是为搜索引擎服务的，有时为了提高网页在搜索引擎中北搜索到得几率需要设置多个跟网站主体相关的多个关键字。
基本语法：<meta name="keywords" content="value">
例子：
<html><head> <title>设置文件关键字</title> <meta name="keywords" content="图书 计算机 经管"></head><body>...</body></html>
(2)
设置页面过期时间expires
在HTML文件中，往往需要设计页面过期时间或者跳转，这时就需要网页元信息的http-equiv属性和content属性来设置网页的过期时间
基本语法：<meta http-equiv="expires" content="value">
例子：
<html><head> <title>设置页面过期时间</title> <meta http-equiv="expires" content="FRI,1 JUN 2007 00 00 00 GMT"></head><body></body></html>
三主体内容<body>
1，设置页面背景bgcolor
用bgcolor属性来设置网页的页面背景颜色
基本语法：<body bgcolor="">
实例代码：
<html><head> <title>设置页面背景颜色</title></head><body bgcolor="blue"></body></html>
2，设置页面边距 topmargin,leftmargin,rightmargin,bottommargin
基本语法：<body topmargin="value" leftmargin="value" rightmargin="value" bottommargin="value">
3，设置页面正文颜色 text
在HTML文件中，设置页面背景颜色以后，网页中可能有部分文字的颜色需要改变才能显示，利用text属性可以给页面中无连接的文字设置颜色。
基本语法：<body text=""></body>
实例代码：
<html><head> <title>设置正文颜色</title></head><body bgcolor="blue" text="white">神马都是浮云 </body></html>
四文字与段落
1，添加文字
在HTML中添加文字只需要在需要输入的地方输入就可以完成
基本语法：
<body>
请在此处添加文字！
</body>
2，添加注释<!-->或<comment>
<html><head> <!--请在此处添加注释语句> <title>添加注释语句</title></head><body> <!--请在此处添加注释语句> 神马都是浮云 <comment> 此处也可以添加注释 </comment></body></html>
3，添加空格 
在HTML中如果想要添加空格用 来表示空格
4，添加删除线
基本语法：
<body>
<strike>
添加删除线的文字
</strike>
</body>
5，编辑网页文字样式
利用成对的标记就可以将网页中的文字根据需要，对其进行样式的编辑
基本语法：
<body>


</body>
实例代码：
<html><head> <tilte>编辑网页文字样式</title></head><body> 没有使用效果的文字 使用效果后的文字 </body></html>
6，确定文字上下标/
基本语法：
<body>
上标内容
下标内容
</body>
实例代码：
<html><head> <title>确定文字上下标</title></head><body> 解下面方程： x2-3x+2=0 解：x1=1 x2=1 </body></html>
7，设置地址文字

 在网页中添加地址文字是为了更方便的突出显示出联系方式，将联系人的地址信息突出显示出来。

 基本语法：

 <body>
 <address>请在此处添加地址信息<address>
 </body>

 8，设置等宽文字 <tt> <samp> <kdb>

 基本语法：

 <body>
 <tt>打字机风格显示</tt>
 <code>等宽文字设置内容</code>
 <samp>等宽文字设置内容</samp>
 <kdb>键盘输入</kdb>
 </body>

 实例代码：

 <html>
 <head>
 <title>设置等宽文字</title>
 </head>
 <body>
 <tt>this is a book</tt> 
 <code>this is a book</code> 
 <samp>this is a book</samp> 
 <kdb>this is a book</kdb> 
 </body>
 </html>

 9，段落

 在HTML文件中，标记十一个段落标记符号，利用标记可以对网页中的文字信息进行段落的定义，但不能进行段落格式的定义

 基本语法：

 <body>

 

 

 </body>

 实例代码：

 <html>
 <head>
 <title>段落</title>
 </head>
 <body>
 
 登鹳雀楼
 白日依山尽，
 黄河入海流。
 欲穷千里目，
 更上一层楼。
 
 </body>
 </html>

 10，回车 

 基本语法：

 <body>

 神马都是浮云 

 </body>

 11，换行与不换行/

 在HTML中，除了可以用 进行换行以外，还可以通过与结合使用进行是否换行控制

 基本语法：

 <body>

 文字内容继续输入要显示的内容

 </body>

 在HTML中，成对的与表示不换行，但是在标记中，插入成对的与标记后，与标记之间的内容会被强制换行

 实例代码

 <html>
 <head>
 <title>换行与不换行</title>
 </head>
 <body>
 神马都是浮云好吧
 </body>
 </html>

 12，预格式化<pre>

 基本语法：

 <body>

 <pre>

 </pre>

 </body>

 在<pre>与</pre>之间的文字会在网页中显示时会保留源代码中的格式

 实例代码：

 <html>
 <head>
 <title>预格式化</title>
 </head>
 <body>
 <pre>
 好吧
 haoba
 好吧
 haoba
 </pre>
 </body>
 </html>
13，居中文字显示<center>
在对网页文字进行布局时，经常需要将网页中的文字进行居中对齐，甚至在插入图片或者其他对象时，都会用到对齐标记<center>
基本语法：
<body>
 <center>需要对齐的内容</center>
</body>
实例代码：
<html><head><title>居中显示文字</title></head><body><center>需要对齐的内容</center>没有添加居中显示标记的文字！</body></html>
14，设置段落缩进<blockquote>
对文档进行编排时，利用设置段落缩进，可以增加段落的层次效果。
基本语法：
<body>
 <blockquote>
 需要缩进的内容
 </blockquote>
</body>
实例代码：
<html><head><title>设置段落缩进</title></head><body><blockquote>需要缩进的内容</blockquote><blockquote><blockquote>需要缩进的内容</blockquote></blockquote></body></html>利用一对<blockquote></blockquote>可以缩进五个字符