您的位置：首页 > Web前端 > HTML

HTML基础学习笔记

2016-04-02 00:00 525 查看

摘要: 之前一直有点不屑于学习html,主要是之前大致看了几天，感觉没啥东西，现在回过头再好好看了一遍，然后顺便做个记录

1、页面

1、文件结构

<html>......</html>

<head>......</head>

<body>.......</body>

<HTML>
<HEAD>
<title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
<h1>正文</h1>
</BODY>
</HTML>

2、语言字符集信息
<meta http-equiv="Content-Type" content="text/html;charset=#">

基本上所有的网站的网页都有，现在一般都是UTF-8,和GBK2312

3、背景色彩和文字色彩
<body bgcolor=# text=# link=# alink=# vlink=#>

bgcolor --- 背景色彩

text --- 非可链接文字的色彩

link --- 可链接文字的色彩

alink --- 正被点击的可链接文字的色彩

vlink --- 已经点击(访问)过的可链接文字的色彩

（颜色RGB16进制）

背景图象 <body background="image-URL">

4、页面空白(试了貌似不管用)

页面左边的空白 <body leftmargin=#>

页面上方的空白(天头) <body topmargin=#> #=margin amount

5、连接
<a href="#"></a> 有下划线的连接

< name="#"></a>无下划线不像链接

默认的是在原来的窗口打开

target="Window_Name" (打开一个新的窗口属性)

下面百度是在新窗口打开

<a href="  target="Window_Name">百度</a>

6、标尺线
<hr>

标尺线的高度：<hr size=#>

例如：<hr size=10>

标尺线的宽度：<hr width=#>

例如：<hr width=50><hr width=50%>

标尺线的位置：<hr align=#> #=left, right

例如：<hr width=50% align=left> <hr width=50% align=right>

标尺线的颜色：<hr color=#>

例如：<hr color=#000000 >

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Document</title>
</head>
<body  bgcolor=#ff0033 text=#00ff99 link=#000099 alink=#330099  vlink=##66cc33>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<a href="http://www.baidu.com">百度</a><br/>
<a name="http://www.baidu.com">百度1</a>
<hr>
<hr size=20>
<hr width=50>
<hr width=50%>
<hr width=50%>
<hr width=50%>
<hr noshade>
<hr color=#000000 >
</body>
</html>

2、字体

1、标题字体

字体由大到小

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

<hn></hn>这些标记显示黑体字，自动插入空行

2、字体大小
<font size=#>....</font>#=1,2,3,4,5,6,7

3、物理字体
加粗：<b>....</b>

斜体：<i>.....</i>

下划线：<u>....</u>

打字机文本：<tt>...</tt>

上标注：<sup></sup>

下标注：<sub></sub>

删除文本定义: <s></s> <strike></strike>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<b>加粗</b><hr>
<i>斜体</i><hr/>
<u>下划线</u><hr/>
<tt>打字机文本</tt><hr/>
<sup>上标注</sup><hr>
<sub>下标注</sub><hr>
<s>可定义删除文本</s><hr>
<strike>可定义删除文本</strike><hr>
</body>
</html>

4、逻辑字体

强调字体倾斜：<em></em>

强调字体加粗：<strong></strong>

用于表示计算机源代码或者其他机器可以阅读的文本内容:<code></code>

短语标签:<samp></samp>

键盘文本：<kbd></kdd>

变量的名称<var></var>

对特殊术语或短语的定义<dfn></dfn>

注释作用：<cite><cite>

小型文本：<small></small>

大字号:<big></big>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<b>加粗</b><hr>
<i>斜体</i><hr/>
<u>下划线</u><hr/>
<tt>打字机文本</tt><hr/>
<sup>上标注</sup><hr>
<sub>下标注</sub><hr>
<s>可定义删除文本</s><hr>
<strike>可定义删除文本</strike><hr>
<h1>逻辑字体</h1>
<em>强调字体倾斜</em><hr>
<strong>强调字体加粗</strong><hr>
<code>用于表示计算机源代码或者其他机器可以阅读的文本内容</code><hr>
<samp>短语标签</samp><hr>
<kdd>键盘文本</kdd><hr>
<var>变量的名称</var><hr>
<dfn>对特殊术语或短语的定义</dfn><hr>
<cite>注释作用</cite><hr>
<small>小型文本</small><hr>
<big>大字号</big>
</body>
</html>

物理风格直接指定字体的“样式”（如粗、斜、下划线）；

逻辑风格则是指定文本的“作用”（如示例文字、缩小文字）。

就像去餐馆吃饭，点菜的时候，A告诉炒菜的师傅“炒得多一点”，这是物理风格，直接指定样式；B告诉炒菜的师傅“炒得辣一点”，这是逻辑风格，指定作用。

5、字体颜色

<font color=#>.....</font>

6、客户端字体

<font face=""></font>

7、字符实体

&           &
<            <
>            >
"          "

3、文字布局

1、行的控制
空行:<p>

换行：<br>

不换行<nobr>

2、文字的对齐
<hn align=#>...</hn> ( <h1><h2>......)
<p align=#>...</p> #=left, center, right

3、文字的分区显示
<div align=#>...</div> #=left, center, right

4、列表
无序列表：<ul><li>.........</ul>

有序类表:<ol><li>..........</ol>

定义列表：<dl><dt>......<dd>.....</dl>

定制表中的标记：<li type=#> #=disk,circle,square

定制有序列表表中的序号:<li type=#> #=A,a,I,i,1

5、预格式化文本
<pre>.........</pre>

<listing>.....</listing>

<xmp>......</xmp>

6、块引用:
<blockquote>.......</blockquote>

7、闪烁
<blink>......</blink>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>中间</h1>
<div>大家愚人节快乐</div>
<div>大家愚人节快乐</div>
<div>大家愚人节快乐</div>
<blink>块引用</blink>
<div>
Her Song:
<blockquote>
When I was young, I listened to the radio
waiting for my favorite songs....
</blockquote>
</div>
<h1>定制列表元素</h1>
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
<h1>定制列表</h1
<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
<h1>有序列表</h1>
<ol>
<li>Today
<li>Tommorow
</ol>
<h1>无序列表</h1
<ul>
<li>Today
<li>Tommorow
</ul>
</body>
</html>

4、图像

1、插入图像基本语法：
<img src=# alt=#>src对应图片的地址,alt图片的提示内容

2、图像和文字的对齐
<img align=#>#=top,middle,bottom 分别为上、中、下

3、边框
<img border=# > #=value

5、表格

1、基本语法：

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
默认的不带边框，

带边框的表格：<table border>

2、跨多行，多列的表元
跨多列的表元 <th colspan=#>
跨多行的表元 <th rowspan=#>

3、表格尺寸设置

边框尺寸设置：<table border=#>

表格本身尺寸设置：<table border width=# height=#>
表元间隙设置:<table border cellspacing=#>

表元内部空白设置:<table border cellpadding=#>

4、表格内文字的对齐和布局
<tr align=#>
<th align=#> #=left, center, right
<td align=#>

5、表格在页面的对齐
<table align=#>#=left right center

6、表格标题
<caption align=#>....</caption>

7、表格色彩
<th bgcolor=#>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<table border>
<caption >标题</caption>
<tr>
<th bgcolor=ffaa00>HTML</th>
<th bgcolor=#3300cc>MySql</th>
<th rowspan=2 >Css</th>
</tr>
<tr bgcolor=#ffffff><td>A</td><td>B</td>
</tr>
</table>
</body>
</html>

8、表格中分隔线的显示
显示所有的分隔线：<table rules=all>

只显示组与组之间的分隔线：<table rules=groups>

只显示行与行之间的分隔线：<table rules=rows>

只显示列与列之间的分隔线 : <table rules=cols>

不显示任何分隔线:<table rules=none>

6、表单

1、基本语法
<from action="url" method="#">(提交方法一般都是POST或者GET)

（enctype=”multipart/form-data”提交文件）

.........

.........

<input type=submit value="提交">

</from>

一般的数据提交方式都是通过表单来完成的

下面试表单中提供给用户的输入形式

<input type=* ,name=**>

文字输入：*=text

密码输入：*=passwd

复选框：*=checkbox （默认选中 checked="checked'）

单选框：*=redio

图像坐标：*=image

<input type=image src=url>
隐藏表单元素：*=hidden

文件：type=file

列表选择框:<select ><option></option></select>

文本区域：<textarea name=""></textarea>

7、移动的文字

1、基本语法

<marquee>.....</marquee>

2、文字移动的属性设置

<marquee direction=#>.....</marquee> #=left,right（移动的方向，向右，向左）

3、方式：

<marquee behavior=#>.....</marquee>

#=scroll（一圈一圈绕着走）

#=slide（只走一次）

#=alternate (来回走)

4、循环

<marquee loop=#>.....</marquee> #=次数

5、速度

<marquee scrollamount=#>.....</marquee> #=速度

6、延时

<marquee scrolldelay=#>.....</marquee> #=时间

8、多媒体内容

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航