Cata1yst's blog

祇今尚有清流月，曾照高王万马过

0%

HTML学习笔记

发表于 更新于 分类于
小小的入门一下html

HTML简介

HTML是一种超文本标记语言，是用来描述网页而非编程的（平常f12看到的就是网页的HTML文档）。

HTML语法的核心是标签和元素。标签类似于括号，通常以 <>、</>的形式成对出现，也有特殊的单独出现。元素是被一对标签包围的内容，将被显示在网页中，通常会是字符。元素还具有许多”属性”,比如字体大小、背景颜色等。

HTML可以直接由文本文档写成然后在浏览器打开预览，一般用.html作为后缀名。

HTML语法

HTML没有严格的缩进，可以根据自己喜好调整文档格式。

在写标题标签之前，先了解一下HTML的基本格式

1
2
3
4
5
<html>
<body>
        
</body>
</htm>

最外面的 <html>标识是用来告诉计算机这是HTML文档的，里面一层<body>标签内部才是主体。而<html>和<body>之间可以添加其他要素来扩展功能，这个之后再说。（这些东西不加偶尔也能跑，但是为了严谨还是建议都写上，不过本文为了节省空间就不写了）

标题（h）

标题标签用<h1>~<h6>表示，里面的数字是字体大小。

1
<h1>Tittle</h1>

注释

类似编程语言，html也有注释来帮助我们解读代码

1
2
3
4
5
<!--注释-->
<!--
注释1
注释2
-->

段落（p）

1
<p>段落</p>

每一个新的段落标签都会换行，但是标签内部的元素中出现的换行会被解释成空格。另外，多个空格会在最终被解释成一个。

1
2
3
4
5
6
7
8
<p>
    123
    456
</p>

<p>123 456</p>
<p>   123  456</p>
<!--三者输出都是123 456-->

空白行

有时候会需要换行（空白行）操作。

1
2
3
4
<br />
<!--注意这里是单个标签-->
<p></p>
<!--尽量不要用第二个-->

style

style是段落中应用较多的一个属性，它是一系列标签的替代。

1
<p style="color:red;font-size:20px;text-align:left">段落</p>
键 值 说明
background-color red/#ffffff 背景颜色
color 同上 字体颜色
font-family ？自己去查表 字体
fomt-size 数字 字体大小
text-align left/right/center 对齐方式

文本格式

标签 效果 说明
<b></b> 粗体
<big></big> 加大
<small></small> 缩小
<em></em> 强调
<strong></strong> 加强语气
<i></i> 斜体
<cite></cite> 著作字体（类似斜体）
<sub></sub> 下标
<sup></sup> 上标
<ins></ins> 下划线
<del></del> 删除线
<pre></pre> 保留格式 不会删除多余空格和回车
<abbr title=””></abbr> 缩写 鼠标停留在时会显示title里的内容
<bdo dir=””></bdo> 文字方向（dir=”rtf”/“ftr”) rtf是从右到左书写
<q></q> 行内引用
<blockquote></blockquote> 行间引用

链接（a）

1
<a herf="uri">xxx</a>

target

可以通过增加 target属性来决定链接打开的位置

参数 效果
_blank 新的页面
_parent 上级页面
_self 本页面
_top 跳出框架
name 在对应name属性的框架中打开

锚

通过name属性还可以设置锚

1
<a name="tag">xxx</a>

之后在该文档的任何位置我们都可以直接回到设置锚的地方

1
<a herf="#tag">xxx</a>

也可以在其他文档内引用

1
2
<a herf="url#tag">xxx</a>
<!--url是锚所在文档的地址-->

在body标签中添加属性可以增加链接的视觉效果

1
2
3
4
5
6
<body link="red" alink="blue" vlink="black">xxx</body>
<!--
link 默认颜色
alink 点击时颜色
vlink 访问过后的颜色
-->

图像（img）

1
<img src="url" />

可以看出图像标签是单标签。

img的一些属性。

属性名 作用 参数形式
src 图片源链接 url
width 宽度 像素值
height 高度 同上
alt 图片链接无效时的说明 文本
align 对齐方式 right/left/bottom/middle/top

背景图片

我们可以设置整个网页的背景

1
2
3
<body background="url">

</body>

图片链接

在链接内部添加图片标签可以让作为图片链接

1
2
3
<a herf="url1">
    <img src="url2">
</a>

地图（map、area）

地图是图像的延申。除了img，地图还用到了map和area标签。

map和img必须绑定。

usemap

img标签中有一个属性usemap，该属性描述了图片所代表的地图，对应map标签中name或id属性。

1
2
3
4
<img src="url" usemap="#map" />
<map name="map" id="map" >
	
</map>

map和area

map标签的name或者id根据不同的浏览器选择使用即可，但必须对应img的usemap属性。

area标签的作用是定义地图中可点击区域,当鼠标点击这些区域时会打开新的页面

1
2
3
<map name="" id="">
    <area shape="" coords="" herf="url"> 
</map>

shape和coords

shape属性和coords属性也是绑定使用的。

shape coords 说明
circle x,y,r （圆心和半径） 圆形区域
rect x1,y1,x2,y2 （左上和右下顶点） 矩形区域
poly x1,y1,x2,y2,x3,y3,… （各个顶点） 自定义多边形区域

area的其他属性可以参照链接标签。

表格（ol、ul）

首先定义表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table border="1" bgcolor="yellow">
    <caption>xxx</caption>
    <tr>
    	<td align="right" bgcolor="red">e1</td>
        <td>e23</td>
    </tr>
    <tr>
    	<td align="right" bgcolor="green">e12</td>
    </tr>
    
</table>
<!--border是表格的边框宽度，默认是0（即没有边框）-->
<!--caption是表格的标题-->
<!--tr代表一行；td代表行中的一个元素-->
<!--如果想要自定义背景，可以将bgcolor属性改成background属性-->

th

表头也可以看作是表格里的一行，不过有专门的th标签方便浏览器识别（加粗居中显示）。

1
2
3
4
5
<table>
    <tr>
        <th>xxx</th>
    </tr>
</table>

空白元素

空白元素不建议使用 <td></td>表示，应该采用 &nbsp。

1
<td>&nbsp</td>

rowspan（colspan）

有时候需要用到跨行(列)元素

1
2
3
4
<!--跨行-->
<td rowspan="2"></td>
<!--跨列-->
<td colspan="3"></td>

cellspacing以及cellpadding

还可以定义间距

1
2
3
4
5
6
7
8
<table cellspacing="" cellpadding="">
    
</table>
<!--
这两个属性可以这样理解，把<td></td>看成是一个1*1的单位
cellspacing规定了单位表格的边框和整个表格边框的间距
cellpadding规定了单位表格内文本和单位表格边框的间距
-->

frame以及rules

这两个属性可以改变table外观。

1
2
3
<table frame="" rules="">
    
</table>
frame= 效果
void 不显示
box 类似默认格式
above 在顶部显示一条线
below 在底部显示一条线
hsides 上下
vsides 左右
lhs 左侧
rhs 右侧
rule=
all 在所有行列之间显示分割线
cols 只在列间显示分割线
rows 只在行间显示分割线
none 不显示

列表（list）

有序和无序列表（ol、ul）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--无序列表
type定义元素前面的记号：
disc 实心圆点
circle 空心圆点
square 方块
-->
<ul type="">
    <li>1</li>
    <li>2</li>
</ul>

<!--有序列表
type表示序号类型，默认是数字
A 大写字母
a 小写字母
I 大写罗马数字
i 小写罗马数字
start表示开始序号，用数字表示
-->
<ol type="" start="">
    <li>1</li>
    <li>2</li>
</ol>

定义列表（dl）

1
2
3
4
5
6
7
8
9
10
<dl>
    <dt>
    	<dd></dd>
    </dt>
</dl>
<!--
dl表示定义列表开始
dt是定义列表的一个元素
dd是元素的定义
-->

块（div、span）

块就是一个块。块类似一个容器，可以根据需要添加属性改变块中内容，一般会和class联用。

块主要有div和span两种标签，二者在作用上的区别就是 div标签的内容是另起一行而span是内联在行内的。然后就没了，等我以后学到了再补充。

事实上，之前提到的几乎所有标签都可以认作是块，只不过那些块因为有了特定的用途而从大类中分离出来了。比如显示文本的那些标签，除了 <p>是div块，其余的都是span块。

类（class）

类类似于C++里的class或者struct，是一些属性的集合，然后我们在之后的块中添加参数class，就可以将类中属性表达在块中。有一些块不能引用class，比如base, head, html, meta, param, script, style 以及 title。

class需要定义在标签style内，而style标签又在head标签内。

class定义方法

根据class作用的块不同，我们有以下两种定义方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--不限制作用域-->
<style>
	.a {
        color:red;
	} 
</style>
<div class="a">
    a
</div>

<!--限制作用域
span块中的类，span可以换成其他标签-->
<style>
    span.b{
       color: blue; 
    }
</style>
<span class="b">b</span>

总而言之，默认的class作用域是所有可以引用类的标签，这样的类不需要在前面加上表示标签的限制符；如果需要定义专门作用于某些标签的class，则需要在前面加上标签名，这类class只能在对应的标签内起作用。

同时调用多个类

如果你需要同时调用多个类

1
2
3
<div class="a b c">
    abc
</div>

类的调用顺序

然后，class有一些很扭曲的运算规则。

当一个块同时调用两个类时，如果二者有属性重复，则该属性的值采用后定义的那个类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
    <head>
        <style>
            .a{
                color:red;
            }
            .b{
                color:green;
            }
        </style>
    </head>
    <body>
        <div class="a b">
            a b
        </div>
        <div class="b a">
            b a
        </div>
    </body>
</html>
<!--输出都是绿色-->

从而延申出一些异端（

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--当块同时引用ab两个类时起作用-->
.a.b{
	color: blue;
}

<!--当块同引用a或b时起作用（只含其一）-->
.a,.b{
	color:orange;
}

<!--引用类a的块 的 所有 引用类b的 子块 都会调用下面这个类-->
.a .b{
	color:yellow;
}

<!--引用类a的块 的 所有 第一代 引用类b的 子块 都会调用下面这个类-->
.a .b{
	color:pink;
}

<!--引用类a的块 的 所有 引用类b的 同级块 都会调用下面这个类-->
.a~.b{
	color: brown;
}

<!--引用类a的块 的 第一个 引用类b的 同级块 都会调用下面这个类-->
.a+.b{
	color= purple;
}

如果嫌麻烦的话，一句话可以解决所有问题

1
2
3
4
<!--！important可以无视上述规则，强制引用该类-->
.a{
   color:red !important;
}

ID

id这个东西和class很像。

1
2
3
4
5
6
7
8
9
10
11
<style>
    #MyId{
		color:red;
		background:yellow;
		}
</style>
<body>
	<p id="MyId">
    	hahahaha
	</p>
</body>

不同的是，一个html文档中每个id只能出现一次。这不是说我们调用同一个id多次就会报错（事实上不会），但是为了日后方便我们用js访问持有该id的元素，我们不能将一个id赋给多个元素。id就好像身份证一样，重复了就会给后面编程造成不便。换句话说，id更像是从class中独立出来承担某种任务的。

id和class应用场景也有区别。class类似一种模板，哪里需要往哪里套，id就是身份证明，我们可以在文档的任何地方通过一些id查询函数（比如之前说到的锚）来定位。

最后，id命名规则要求必须有一个字符，而且不含有空格回车制表等功能性字符。

头（head）

html文件的头就像C++的头文件或是python的第三方库，合理运用html头标签的属性可以节省很多时间。head标签主要是有title、base、link、meta、style、script这几个，下面逐一介绍。

title

1
<title>xxx</title>

title标签是纯文本标签，它的作用是给文档一个标题，这个标题和浏览器显示的标题以及收藏网页的默认名字相关。

base

1
<base herf="a/b/c/" target="" />

base标签定义了一个相对路径，此后文档中所有链接都以base为基础向下搜索。这样当我们使用同一文件夹下的一些文件时可以减少代码数量。

主要是和外部资源建立联系。

1
<link rel="stylesheet" type="text/css" href="mystyle.css" />

通过上面这个标签，我们不需要额外定义文字样式，浏览器会直接套用mystylt.css中的样式。

meta

meta为页面提供一些补充

1
2
3
4
<!--字符集-->
<meta charset="UTF-8">
<meta name="" context="">
<meta http-equiv="" context="">

name属性及其对应context

name context 说明
description 文本 描述
keywords 文本 关键词
author 文本 作者

http-equiv及其对应context

http-equiv context 说明
refresh 20;url 刷新时间以及刷新后页面
context-type text/html;charset=UTF-8 规定文档字符集
Context-Language zh-cn 规定文档语言

style

1
2
3
4
5
<style type="text/css">
    body:{ backgroung-color:red;}
    h1:{color:blue;}
    p:{color:green;}
</style>

style标签用于设定一些通用的属性，类似于全局变量声明。

style标签的type属性尽可能要写，而且该属性值只能是text/css。

script

1
2
3
<script type="text/javascript">
document.write("Hello World!")
</script>

这个标签定义了js语句，可以是直接写的，也可以用链接导入。

类似的还有一个 noscript标签，该标签的作用是当浏览器不支持js语句时会展示标签内容。

1
<noscript>不支持JavaScript</noscript>

布局

布局其实就是把按照需求分配页面，比如最上面分配给标题，侧边是导航栏等等。这些布局有专门的标签表示。

1
2
3
4
5
6
7
8
9
10
11
12
<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;	 
}
</style>
<body>
    <header></header>
</body>
<!--这些元素还有另一种定义方法，即用id定义-->

除了header以外，还有表示到导航栏的nav、表示文本的artical和section、表示页脚殴打footer等，它们的CSS属性就不一一列出了。

框架（frame）

frameset

框架的作用是在一个网页中显示多个页面。

在使用框架之前，我们需要定义一下每个区域的大小，这就要用到frameset标签。

1
2
3
<frameset>
    <frame src="">
</frameset>

下面介绍frameset常用属性

属性名 作用 参数形式
rows 按行分割 x%,x%… / 20,30,…,*
cols 按列分割 同上
noersize 能否拖动框架 noresize（唯一值，不能拖动）

现在我们已经分好了框架，接下来就要对每一个框架进行补充，这时用到的才是frame标签。

frame标签最常用的是src属性，即从外部引入一个html文档作为框架内容，这里就不写实例了。

frame标签是只有开始标签，没有结束标签。

另外需要注意body和framese不能同时出现，因为此时页面已经被frame引入的文档占据，body内部语句没办法显示了。

noframes

有些浏览器不支持这种操作或者其他出了什么问题，而我们又不希望页面无效，这时候就可以用noframes标签定义如果frameset不起作用的情况。

noframes相当于一个备份html文档，所以里面的语句都可以按照正常的来。

1
2
3
4
5
<noframes>
    <body>
        xxxxx
    </body>
</noframes>

导航框架

导航框架是一种非常常用的网页结构。在这种结构中，网页被分为导航栏和主页面，当我们点击导航栏中的一个链接时，其内容会被显示在主页面中。

导航框架非常好写。

首先为需要显示链接的框架命名，在此处是第二个。

1
2
3
4
<frameset cols="150,*">
    <frame src="1.html"/>
    <frame src="2.html" name="here" />
</frameset>

我们需要做的，是利用链接的target属性，将它指向name为here的框架即可。

1.html

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <a herf="url1" target="here">link 1</a>
        <a herf="url2" target="here">link 2</a>
    </body>
</html>

这里2.html是框架的初始样式。

利用导航框架我们可以为网页增添许多便利。

内联框架 iframe

内联框架相当于网页中的网页。

1
<iframe src="" width="" height="" name=""></iframe>

其他操作和frame都很相似，就不赘述了。

表单

前面说的基本上都是网页样式的设计，还不能很好地服务于实践。我们希望网页有交互的功能，这就产生了表单这一结构。

表单语句

表单是被<form></form>所包围的内容，它最重要的元素就是input

1
2
3
<form>
    <input type="" name="">
</form>

接下来我们逐一介绍

form

form常见属性如下

属性 值 说明
action 文件名 网页将数据上传的目标文件
target 响应页面
method get/post 数据提交方式（默认是get）
autocomplete on/off 是否根据上次输入自动填写
Novalidate 无取值 检验数据
accept-charset 可接收字符集
name 表单名字

有时候在一个form中某些元素需要规定单独的上传文件、提交方式等，这就需要在input中额外添加一个属性，这个属性的作用是覆盖form中对应的属性。

比如在某个input元素中添加formaction属性，可以指定该input的输入所上传到的文件而不是form中定义的文件。

类似的属性有formaction、formmethod、formentype、formnovalidate、formtarget等，它们的作用就是覆盖form中对应的属性。

input

顾名思义，这个元素就是获取用户输入信息的。

1
2
3
<form>
    <input type="" name="">
</form>

input的type属性根据需要有很多中，下面只归纳比较常用的一些。

type= 效果 说明 关联属性
text 文本 默认值；默认长度为20
passward 文本 输入值用*显示
button 按钮 用于联动js accesskey、onclick等
submit 提交按钮 提交数据
radio 单选 name相同的radio是同一个变量的选项
checkbox 多选 同上
file 接受文件 accept（接受文件类型用，分割）等
image 图片作提交按钮 src、alt、width、height等
reset 重置
search 搜索
color 调色盘
url 链接
range 选取范围 滚动条形式
date 日期 还有很多类似的计时元素 value=”xxxx-xx-xx”

然后还有一些属性

属性 参数实例 效果
disabled（无取值） 无 禁止使用该标签，通常用于button
min/max 20 读取数字的最值
minlength/maxlength 12 读取字符串长度的最值
required 12 必须填写，通常用于password
step 12 输入的步长，一般和min、max连用，any表示不设置步长
size 12 读取字符串宽度
pattern [a-zA-Z]{5} 正则过滤
value abcde 默认值
checked （无取值） 无 选项的默认值
readonly （无取值） 无 只读字段
placeholder abcde 提示性文字，在输入框中以灰体显示
list datalist元素的id 配合datalist使用，预选值的下拉列表
multiple 无 仅当type为file时可用；上传多个文件

datalist

1
2
3
4
5
<input list="list1">
<datalist id="list1">
    <option label="option1" value="a" />
    <option label="option2" value="b" />
</datalist>

datalist使得input的输入框中有一个下拉列表，我们可以直接从下拉列表中选取也可以自己输入其他值。

option中的value属性是点击选项后填入的值；label是自定义的补充说明，不对最终输入产生影响。

select

select是下拉列表，其选项由option标签定义

1
2
3
4
<select>
    <option value="" selected></option>
    <option value=""></option>
</select>

与input的radio元素不同，select通过”selected“标记来选择默认值。

textarea

有点类似input的text属性

1
<textarea name="" cols="" rows=""></textarea>

button

功能大致和input的button相似。

约定说明

和其他计算机语言相似，html也有很多约定格式，尽可能按照约定格式书写文档会给他人阅读理解带来很多方便。

  1. 请始终在文档前面加上类型声明 

    1
    <!DOCTYPE html>

  2. 不推荐省略最前面的<html>、<head>、<body>等标签。

  3. 请增加有意义的title。

  4. 最好在head中提前定义好语言、字符集。

  5. 元素和属性名称始终保持小写（虽然可以大小写混用，但是千万不要开始和结束标签一个大写一个小写）

  6. 关于关闭标签，html5允许所有标签都没有结束标签。但是对于有结束标签的，尽可能写上；没有结束标签的，可以根据喜好考虑要不要加上”/“。

    1
    2
    3
    <p></p>
    <input />
    <!--加上/在XHTML中是必须的，所以为了普适，还是写上为好-->

  7. 属性值要加引号，即使它表示一个数字或其他，否则浏览器会无法识别。多个属性之间请用空格加以区分。

  8. 对于图像元素，请始终加上alt属性。

  9. 等号两边可以加空格，但多数时候阅读不方便。

  10. 避免出现超长代码行。

  11. 可以在文档中增加空行来构成代码块。但不要使用过多不必要的空行或缩进

  12. 缩进请尽可能使用两个空格而不是tab（我前面都是tab，糟糕）。

  13. 多写注释。

  14. 跨行注释请把注释符合单独写（就跟我前面写的一样）。

  15. 文件名请小写。

  16. 后缀应当是.html。

  17. 上面的许多建议性约束其实应该是强制性的，因为我们需要兼容HTML和XHTML等多个版本，所以请尽可能遵守它们。

碎碎念~~

只记录了html最最最最基础的语法，我真是太菜了。

然后才发现博客可以直接用html写…

本文内容是W3School自学笔记，很多地方可能会有错误。

由于现在html5比较常用，估计以后还会在这里补充一些html5的知识。

最后放一个W3School的参考链接W3School。