HTML

HTML学习记录

文章目录
  1. 1. title标签
  2. 2. body标签
  3. 3. 设置文本超链接
    1. 3.1. 文字超链接
    2. 3.2. 图片超链接
    3. 3.3. 设置超链接提示
    4. 3.4. 设置超链接跳转
  4. 4. HTML表格
  5. 5. HTML图像
    1. 5.1. 添加背景图像
    2. 5.2. 插入图片
    3. 5.3. 添加属性图片的对齐方式
  6. 6. HTML列表
    1. 6.1. 有序列表
    2. 6.2. 无序列表
    3. 6.3. 定义性列表
  7. 7. HTML块
  8. 8. HTML布局
  9. 9. HTML表单
    1. 9.1. 登录表单
    2. 9.2. 单选框
    3. 9.3. 复选框

鉴于要对PHP的Laravel框架进行相关学习，所以做一个简单的基础学习，记录一些基础的东西。
HTML的文本内容是写在html标签下的，每一个标签有它对应的意义，并且标签之间是成对的，下面进行相关说明。

title标签

title标签下声明的是当前网页的标题，举个栗子。

1
2
3
4
5
<html>
	<head>
		<title>A TEST</title>
	</head>
<html>

body标签

body标签下是对网页可见的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
	<head>
		<title>A TEST</title>
	</head>
	<body>
		<p>Hello World</p>
		<p1>How are you</p1>
	</body>
	<body>
		<p>Test World</p>
		<p1>Fine,Thanks</p1>
	</body>
	
<html>

这里顺带说明一些相关标签，比如p和p1，这些都是表示段落的意思,下面这些标签加在相关文字前可以起到对应的作用。

1
2
3
4
5
6
< b>	（bold）粗体
< big>	（big）大字体
< em>	（emphasized）强调字
< i>	（italic）斜体
< small>	（small）小字体
< strong>	(strong)加重语气

在body的标签后面加上bgcolor这个参数可以修改网页的背景颜色，比如。，继续举个栗子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
	<head>
		<title>A TEST</title>
	</head>
	<body bgcolor="grey">
		<b>Hello World</b></br>
		<big>How are you</big></br>
	</body>
	<body>
		<p>Test World</p>
		<p1>Fine,Thanks</p1>
	</body>
	
<html>

效果如图所示

设置文本超链接

文字超链接

1
2
3
4
5
6
<html>
	<body>
	<p>
		<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>
	</p>
</html>

target表示超链接打开的方式，_blank参数是在一个新的标签页中打开，_self或者不设置target标签就是在当前页面直接打开。

图片超链接

1
2
3
4
5
6
<html>
	<body>
	<p>
		<a href="https://www.baidu.com" target="_blank"><img src="2.jpg" /></a>
	</p>
</html>

图片和当前的html文件在同一个文件夹内。

设置超链接提示

在a标签下添加一个title信息，当鼠标放到对应的点击物上时会有提示信息,下面的栗子是以一张图片为例，连同html文件一起扔在桌面上。

1
2
3
4
5
6
<html>
	<body>
	<p>
		<a href="https://www.baidu.com" target="_blank" title="It will take you to baidu.com"><img src="2.jpg" /></a>
	</p>
</html>

设置超链接跳转

还是利用href标签，然后#加上需要超链接的名称，在对应的跳转位置使用name标签来处理。

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
30
31
32
33
34
35
36
<html>
	<head>
		<title>A TEST</title>
	<head>
	<body>
		<a href="#a">Test a</a></br>
		<a href="#b">Test b</a>
	</body>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	<body>
		<h1><a name="a"></a>Test a</h1>
		<p>lalalalala</p>
		<p>lalalalala</p>
	</body>
	<body>
		<h1><a name="b"></a>Test b</h1>
		<p>kakakakaka</p>
		<p>kakakakaka</p>
	</body>
</html>

HTML表格

涉及表格有几个关键标签需要进行相关说明，tabel,tr,td。
table是对一个总的表格进行声明，而tr用于一个表格的整行，td是对列进行分割，并且可以在td的标签里添加参数(colspan,rowspan)，继续举栗子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
	<title>A TEST</title>
<head>
<body>
	<p style="text-align:center">Table Test</p>
	<table align="center" border="1">
		<tr>
			<td>name</td>
			<td>number</td>
			<td>price</td>
		</tr>
		<tr>
			<td>apple</td>
			<td>1</td>
			<td>6</td>
		</tr>
	</table>
</body>
</html>


以及另外两个表格属性，colspan,rowspan，这个用来控制表格所占的列数，栗子如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
	<title>A TEST</title>
<head>
<body>
	<p style="text-align:center">Table Test</p>
	<table align="center" border="1">
		<tr>
			<td colspan="2">name</td>
			
		</tr>
		<tr>
			<td colspan="2">number</td>
			<td colspan="2">price</td>
		</tr>
		<tr>
			<td colspan="2">apple</td>
			<td colspan="2">1</td>
			<td colspan="2">6</td>
		</tr>
	</table>
</body>
</html>

HTML图像

添加背景图像

直接在标签后面设置就好。

1
<body backgroud="文件路径">

插入图片

使用img标签，上文讲超链接的时候有提到过。

1
<img src="文件路径"></img>.

这里同时补充说明自定义插入图片的大小。

1
<img src="2.jpg" width="30" height="30"></img>

使用width和height标签来直接控制插入图片的大小即可。

添加属性图片的对齐方式

well，那这个参数就是最关键的一个了，align参数，以下为针对字体的几种方式。

1
2
3
4
5
align="top"  字在图片上方
align="bottom" 字在图片下面
align="middle" 字在图片中间
align="left" 图片在字左边
align="right" 图片在字右边

1
2
3
4
5
6
7
8
<html>
<head>
	<title>A TEST</title>
<head>
<body background="1.jpg">
	<img src="2.jpg" align="middle">White House</img>
</body>
</html>

HTML列表

有序列表

有序列表始于ol标签，可以通过定义type来定义不同的方式来进行相关设置。

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
<html>
<head>
	<title>A TEST</title>
<head>
<body>
	<ol start="1">
     <li>lalalala</li>
     <li>kakakaka</li>
     <li>hohohoho </li>
    </ol> 

    <ol type="a">
     <li>lalalala</li>
     <li>kakakaka</li>
     <li>hohohoho </li>
    </ol>     

    <ol type="A">
     <li>lalalala</li>
     <li>kakakaka</li>
     <li>hohohoho </li>
    </ol>       
	
</body>
</html>

无序列表

区别于上述有序列表的地方在于，它的标签是ul而不是ol。

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
<html>
<head>
	<title>A TEST</title>
<head>
<body>
	<ul start="1">
     <li>lalalala</li>
     <li>kakakaka</li>
     <li>hohohoho </li>
    </ul> 

    <ul type="a">
     <li>lalalala</li>
     <li>kakakaka</li>
     <li>hohohoho </li>
    </ul>     

    <ul type="A">
     <li>lalalala</li>
     <li>kakakaka</li>
     <li>hohohoho </li>
    </ul>       
	
</body>
</html>

定义性列表

定义性列表由dl开始，由dt作为术语，dd作为解释说明，并且dd具有自动缩进功能。

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
	<title>A TEST</title>
<head>
<body>
	<dl>
		<dt>Apple</dt>
		<dd>苹果公司（Apple Inc. ）是美国的一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和罗·韦恩(Ron Wayne)等人于1976年4月1日创立.</dd>
	</dl>
</body>
</html>

HTML块

这里讲一个div标签，用来组合HTML页面上的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
	<title>A TEST</title>
<head>
<body bgcolor="grey">
	<div style="color:white">
	<dl>
		<dt>Apple</dt>
		<dd>苹果公司（Apple Inc. ）是美国的一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和罗·韦恩(Ron Wayne)等人于1976年4月1日创立.</dd>
	</dl>
	</div>
</body>
</html>

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
30
31
32
33
34
35
<html>
<head>
    <style>
        div#container{width:1000px}
        div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
        div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
        div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
        div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
    </style>
</head>
<body>
<div id="container">
    <div id="header">
        <h1>CHECK TEST</h1>
    </div>
    <div id="sidebar">
       <dl>
           <dt>list of check</dt>
            <dd>
                <ol type="A">
                    <li>section A</li>
                    <li>section B</li>
                    <li>section C</li>
                </ol>
            </dd>
       </dl>
    </div>
    <div id="mainbody">
        <h1>the sum of check</h1>
        <p>three sections</p>
    </div>
    <div id="footer">Hello World</div>
</div>
</body>
</html>

HTML表单

well，简单来说，表单就是用于网页中的数据提交,关键就是标签里的form，input,type。

登录表单

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
    <title>A TEST</title>
</head>
<body>
	<form>
	username:
	<input type="text" name="username"></br>
	password:
	<input type="password" name="password"></br>
	</form>
</body>
</html>

单选框

单选框的type也就是radio，除了name之外还增加了另外一个参数value。

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
    <title>A TEST</title>
</head>
<body>
	<form>
	<input type="radio" name="sex" value="Male">Male</br>
	<input type="radio" name="sex" value="Female">Female</br>
	</form>
</body>
</html>

复选框

复选框的type是checkbox，其余同上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
    <title>A TEST</title>
</head>
<body>
	<form>
	<p1>CTF Skills</p1></br>
	<input type="checkbox" name="ctf" value="Web">Web</br>
	<input type="checkbox" name="ctf" value="MISC">MISC</br>
	<input type="checkbox" name="ctf" value="Crypto">Crypto</br>
	<input type="checkbox" name="ctf" value="Re">Re</br>
	</form>
</body>
</html>