首页 > 代码库 > html基础汇总
html基础汇总
一：HTML
是Internet上用于设计网页的主要语言。网页包括动画，多媒体，形等各种复杂的元素，其基础架构都是HTML。
标记语法：
HTML用于描述功能的符号称为“标记”。
1.所有标记都要用尖括号（<>）括起来，这样，浏览器就可以知道，尖括号内的标记是HTML命令；
2.对于成对出现的标记，最好同时输入起始标记和结束标记；
3.采用标记嵌套的方式可以为同一个信息应用多个标记；
4.在代码中，不区分大小写；
5.任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别是 、<br>；
6.标记中不要有空格，否则浏览器无法识别；
HTML文件的整体结构：
文件头部内容：
一个完整的HTML文件包括头部文件和主体文件。头部标记：<head></head>,主体标记<body></body>。页面标题标记<tilte></title>位于头部标记<head></head>之间。
设置基底网址<base>:基底网址用于设定浏览器中文件的路径，<base>标记一般用于设计文件URL地址。一个HTML文件只能有一个<base>标记，同时该标记必须放于头部文件中。
基本语法：
<html>
<head>
<base href="http://www.mamicode.com/文件路径" target="目标窗口">
</head>
<body>
</body>
</html>
herf用于设置网页文件链接的地址，target用于设置页面显示的目标窗口。
设置基准文字<basefont>：
基准文字：指制作网页前，先进行网页文字的基本定义，包括字体；字号、颜色以及其他关于字体的定义，当网页中的文字没有另外定义样式时，就会自动套用网页定义的基准字体。
基本语法：
<html>
<head>
<basefont face="" size="" color="">
</head>
<body>
</body>
</html>
face属性用于设置字体的名称，可以是宋体、隶体、楷体等； size属性用于设置字号的大小；
color用于设置字体的颜色。
定义元信息<meta>:
<meta>标记主要功能是定义页面的一些信息。
<meta>标记通过一些属性来定义文件的信息，例如，文件的关键字、作者信息、网页过期时间等，HTML文件的头部文件可以有多个<meta>标记，<meta>标记不是成对的标记。
基本语法：<meta http-equiv="" name="" content="">
注意：http-equiv属性用于设置一个http的标题域，但确定值由content属性决定，name属性用于设置元信息出现的形式，content属性用于设置元信息出现的内容。
设置页面关键字——keywords:
网页中的关键字主要是为搜索引擎服务的，有时为了提高网站被搜索引擎搜到的机率，需要设置多个跟网站主体相关的关键字。 基本语法：
<meta name="keywords" content="value">
value用于说明为该网页定义的关键字，可以是多个关键字。
设置页面过期时间——espires
设置页面过期时间或者跳转，这就需要设置网页元信息的http-equiv属性和content属性来设置网页的过期时间。
基本语法：<meta http-equiv="expires" content="value">
expires用于设计页面过期时间，content属性设置具体过期时间。
主体内容<body>:
1.设置页面背景——bgcolor
基本语法：<body bgcolor="value">
2.设置页面边距——topmargin(到顶端)、leftmargin(到左边)、rightmargin(到右边)、bottomnargin(到底边)
3.设计正文颜色——text
利用text属性可以给页面中无链接的文字设置颜色
基本语法：<body text="">...</body>
文字与段落：
一.编辑内容
1.添加文字
基本语法：<body>所写文字</body>；
2.添加注释<!....-->或<comment>；
3.添加空格—— ；
4.添加删除线<strike>；
给需要添加删除线的文字使用成对的<strike></strike>标记，就可以添加删除线；
基本语法：<body><strike>在此输入要添加删除线的文字</strilke> </body>
5.插入特殊符号
二.文字效果
1.编辑网页文字样式<font>
主要是设置文字的字体、字号、颜色等属性，利用<font>与<basefont>标记都可以实现；
基本语法:<body><font face="" size="" color=""></font></body>
face设置字体，
2.设置文字标注<ruby>
在HTML文件中，有时需要对某个字、词或者某段进行说明，可以通过添加文字的标注标记来完成对网页中文字的说明；
基本语法：<ruby>需要被说明的文字<rt>文字的标注</rt></ruby>
三.文字修饰
1.简单修饰文字
基本语法:
<body>
普通文字的显示<br>
<b>加粗的文字</b><br>
<i>斜体文字</i><br>
<u>添加下划线的文字</u><br>
</body>
成对<b></b>表示加粗文字显示；<i></i>表示斜体文字显示；<u></u>表示给文字添加下划线；
2.确定文字上下标——<sup>/<sub>
基本语法：
<body>
<sup>上标内容</sup><br>
<sub>下标内容</sub><br>
</body>
3.设置地址文字<address>
在网页中添加地址文字，是为了更方便地突出显示联系方式，将联系人的地址信息突出显示。
基本语法：
<body>
<address>请在此添加地址信息</address>
</body>
4.设置等宽文字<tt>、<samp>、<code>、<kdb>
基本语法：
<body>
<tt>打字机风格显示</tt>
<code>等宽文字设置内容</code>
<samp>等宽文字设置内容</samp>
<kdb>键盘输入</kdb>
</body>
四.段落<p>
基本语法：
<body><p>...</p></body>
在HTML文件中，<p>标记是一个段落标记符号，利用<p>标记可以对网页的文字信息进行段落的定义，但不能进行段落格式的定义。
1.回车<br>
强制换行
2.换行与不换行<wbr>/<nobr>
在HTML中，成对的<nobr></nobr>标记表示不换行，但是在<nobr>标记中。插入成对的<wbr></wbr>标记后，<wbr></wbr>之间的内容会被强制换行。
3.预格式化<pre>
在HTML中，利用成对的<pre></pre>标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落。
4.居中显示文字<center>
利用<center></center>标记,对齐标记之间在内容将会在网页中居中显示。
5.设置段落缩进<blockqute>
对文档进行编排时，利用设置段落缩进，可以增加段落的层次效果。
基本语法：<body><blockqute>需要缩进的内容</blockqute></body>
利用一对<blockqute></blockqute>标记可以缩进5个字符。
6.忽略HTML标记——<xmp>
在HTML中，利用成对的<xmp></xmp>标记可以忽略HTML标记的作用，包括标记在内的所有内容都会直接显示在页面上。
基本语法：<body><xmp>...</xmp></body>
7.插入并设置水平线<hr>
属性：width 设置水平线宽度，可以是像素，也可以是百分比；size 设置水平线高度；noshade 设置水平线无阴影；color 设置水平线颜色;align 设置水平线居中对齐
基本语法：<body><hr width=""size=""noshade=""color=""align="" > </body>
建立和使用列表：
一.列表类型
列表：在网页中将项目有序或者无序罗列显示。
列表类型 标记符号
定义列表 dl
无序列表 ul
目录列表 dir
菜单列表 menu
有序列表 ol
1.插入定义列表<dl>
基本语法：
<dl>
<dt>名称</dt>
<dd>说明</dd>
<dd>说明</dd>
...
</dl>
<dt>标记定义了组成列表名称部分，同时此标记只在<dl>标记中使用；<dd>用于解释说明<dt>标记定义的项目名称，此标记也只能在
<dl>标记中使用；
2.插入无序列表<ul>
基本语法：
<ul>
<li>项目名称</li>...
<li>项目名称</li>...
<li>项目名称</li>...
...
</ul>
使用成对<ul></ul>标记可以插入无序列表，但<ul>标记之间必须使用成对<li></li>标记添加到列表项值。
2.插入目录列表<dir>
只需在使用目录的地方插入成对的目录列表标记<dir></dir>,就可以很简单地完成目录列表的插入，但<dir>标记之间必须使用成对<li> </li>标记添加列表项值。
基本语法：
<dir>
<li>项目名称</li>...
<li>项目名称</li>...
<li>项目名称</li>...
...
</dir>
4.插入菜单列表<menu>
在HTML文件中，只要在需要使用目录的地方插入成对的菜单列表标记<menu></menu>,就可以很简单地完成菜单列表的插入,但<menu>标记之间只需要单个<li>标记添加列表项值。
基本语法：
<menu>
<li>项目名称...</li>
<li>项目名称...</li>
<li>项目名称...</li>
...
</menu>
5.插入有序列表<ol>
利用成对的<ol></ol>标记可以插入有序列表，但<ol>标记之间必须使用成对<li></li>标记添加列表项值；当我们需要改变列表符号时，需要在<ol>中输入Type属性，进行属性的设置。Type属性 属性值 说明
1 数字1、2...
a 小写字母a、b...
A 大写字母A、B...
i 小写罗马数字i,ii,iii...
I 大写罗马数字
基本语法：
<ol Type="">
<li>项目名称</li>...
<li>项目名称</li>...
<li>项目名称</li>...
...
</ol>
二.嵌套列表
1.嵌套定义列表
在需要使用嵌套定义列表的地方，插入成对的<dl></dl>,在一对<dl></dl>标记之间使用多个<dt>和<dd>标记。
基本语法：
<dl>
<dt>名称</dt>
<dd>说明</dd>
<dd>说明</dd>
````
</dl>
多个<dt>与<dd>的交替使用，构成了定义列表的嵌套。
2.嵌套有序与无序列表
在无序列表<ul></ul>标记之间插入有序列表<ol>,就可以完成嵌套有序与无序列表的插入。
基本语法：
<ul>
<li>项目名称</li>
<ol>
<li>项目名称</li>
<li>项目名称</li>
<li>项目名称</li>
</ol>
<li>项目名称</li>
<ol>
<li>项目名称</li>
<li>项目名称</li>
</ol>
</ul>
html基础汇总