前端学习之HTML


阅读数: 次   

第一章 HTML 简介

0x01.什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (Markup Language)

标记语言是一套标记标签 (Markup Tag)

HTML 使用标记标签来描述网页

超级文本标记语言不是很复杂，但功能强大，支持不同数据格式的文件镶入。

主要特点如下：

  1. 简易性：超级文本标记语言 版本升级采用 超集方式，从而更加灵活方便。
  2. 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
  3. 平台无关性：虽然 个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是 万维网（ WWW）盛行的另一个原因。
  4. 通用性：HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

0x02.HTML 标签

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

0x03.<!DOCTYPE>声明帮助浏览器正确地显示网页

1
2
3
4
5
6
7
8
<!-- HTML5声明 -->
<!DOCTYPE html>

<!-- HTML 4.01 -->
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””                      http://www.w3.org/TR/html4/loose.dtd”>

<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

第二章 HTML 基础知识

0x01.网页常用编码

ANSI、UTF-8、GB2312、GBK、GB18030、UNICODE

0x02.HTML分为可视化标签和非可视化标签

可视化标签：可以通过CSS设置样式 如： <html> <body> <a> <p> <img> 等.

非可视化标签:不可以通过CSS设置样式 如： <head> <meta> <link> <style> 等.

1
<br> <hr> <meta> <img> <base>等这些为单标签,<html> <body> <p> <ul> <ol>等这些为双标签。

0x03.HTML有块级元素和行内元素

块级元素有：<p> <h> <li> 等；

行内元素有：<span> <b> 等.

0x04.base元素

1
2
3
4
5
6
7
8
9
<base>标签为页面上的所有链接规定默认地址或默认目标（target）：

<head>

<base href=”https://yancyqi2002.github.io” />

<base target=”_blank” />

</head>

0x05.meta元素

1
2
3
4
5
<meta charset=”utf-8/gh2312,声明编码”/>

<meta name=”Keywords” content=”关键词”/>

<meta name=”Description” content=”定义页面描述”/>

第三章 示例

01.博客

示例:

02.新闻列表

示例1:

示例2: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<ul type="disc">
		<li>海底捞上市了! </li>
		<1i>我又吃上市了一个? ! </li>
		<li>再去吃一顿庆祝一下。</li>
	</ul>
	<ul type= "circle">
		<li>海底捞上市了! </li>
		<li>我又吃上市了一个? ! </li>
		<li>再去吃一顿庆祝一下。</li>
	</ul>
	<ul type= "square">
		<li>海底捞上市了! </li>
		<li>我又吃上市了一个? ! </li>
		<li>再去吃一顿庆祝一下。</li>
	</ul>
</body>
</html>
03.图片的使用

示例1:

示例2:

04.简单表格制作

示例: 

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h3>前端技术阶段划分标准</h3>
		<table border="1px" cellspacing="0">
			<col width="200px" />
			<col width="200px" />
			<col width="200px" />
			<col width="200px" />
			<col width="200px" />
			<tr align="center">
				<td></td>
				<td>初级</td>
				<td>中级</td>
				<td>高级</td>
				<td>专家</td>
			</tr>
			<tr align="center">
				<td>标准</td>
				<td>被产品怼的说不出话</td>
				<td>跟产品互怼不相上下</td>
				<td>怼的产品没话说</td>
				<td>直接将其怼辞职</td>
			</tr>
			<tr align="center">
				<td>用户A</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td>用户B</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td>用户C</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>
05.个人简历制作

示例: 

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			td{ 
				font-size: 14px; 
				BORDER-RIGHT: #096 1px solid; /* 显示右边框为1px，如果不想显示就为0px */ 
				border-top:1px #096  solid; /* 显示上边框为1px，如果不想显示就为0px */ 
				BORDER-LEFT: #096 1px solid;/* 显示左边框为1px，如果不想显示就为0px */ 
				BORDER-BOTTOM: #096 1px solid;/* 显下右边框为1px，如果不想显示就为0px */ 
			}
		</style>
	</head>
	<body>
		<table  border="0" cellspacing="0" cellpadding="0">
			<tbody>
			<colgroup span="6" width="100px"></colgroup>
			<colgroup span="1" width="200px"></colgroup>
			<tr align="center" height="40px">
				<td colspan="7">个人简历</td>
			</tr>
			<tr align="center" height="40px">
				<td>姓名</td>
				<td></td>
				<td>性别</td>
				<td></td>
				<td>年龄</td>
				<td></td>
				<td rowspan="4">照片</td>
			</tr>
			<tr align="center" height="40px">
				<td>学历</td>
				<td></td>
				<td>籍贯</td>
				<td colspan="3"></td>
			</tr>
			<tr align="center" height="40px">
				<td>电话</td>
				<td></td>
				<td>政治面貌</td>
				<td colspan="3"></td>
			</tr>
			<tr align="center" height="40px">
				<td>毕业院校</td>
				<td colspan="5"></td>
			</tr>
			<tr align="center" height="40px">
				<td>求职意向</td>
				<td colspan="6"></td>
			</tr>
			</tbody>
		</table>
	</body>
</html>
06.表单

示例: 

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
37
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form action="#">
			<table width="600px" border="1px" cellspacing="0">
				<tbody>
					<tr height="40px">
						<td rowspan="4" align="center">总体信息</td>
						<td colspan="2"></td>
					</tr>
					<tr height="40px">
						<td align="right">用户名：</td>
						<td>
							<input type="text">
						</td>
					</tr>
					<tr height="40px">
						<td align="right">密码：</td>
						<td>
							<input type="password">
						</td>
					</tr>
					<tr height="40px">
						<td colspan="2" align="center">
							<input type="submit" value="提交">
							<input type="reset" value="重置">
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
</html>

##参考B站视频BV1r64y1T7J8 UP @千锋教育

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码
载入天数...载入时分秒...
本站总访问量次 |

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家