SniperCoding的个人博客

记录成长点滴

0%

前端基础知识

发表于 分类于 评论数：
本文字数： 27k 阅读时长 ≈ 24 分钟

一. HTML

1. 名词解释

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

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)，超文本是指用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。标记语言是指由标签构成的语言。标记语言不是编程语言。
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标记标签 通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>

  • HTML 标签通常是成对出现的

  • 标签对中的第一个标签是开始标签，第二个标签是结束标签

  • 开始和结束标签也被称为开放标签 和 闭合标签

  • 标签的相互关系分为两种：

    • 嵌套关系

      1
      <head> <title> </title> </head>

    • 并列关系

      1
      2
      <head></head>
      <body></body>

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签 和 纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的网页</title>
</head>

<body>
    <h1>第一个标题</h1>
    <p>第一个段落。</p>
</body>

</html>

<!--
DOCTYPE 声明了文档的类型；
<html> 标签是 HTML 页面的根元素，该标签的结束标志为 </html>；
<head> 标签包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式；<title> 标签定义文档的标题；
<body> 标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为 </body>；
<h1> 标签作为一个标题使用，该标签的结束标志为 </h1>；
<p> 标签作为一个段落显示，该标签的结束标志为 </p>。
-->

2. 常用标签

（1）换行

1
2
3
4
5
6
7
<!--
单词缩写： break 打断 ,换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br/>这时如果还像在word中直接敲回车键换行就不起作用了。
建议使用<br/>，而不是<br>，单标签应该在标签中关闭，方法就是在开始标签中添加斜杠
-->
<br>
<br/>

（2）标题

1
2
3
4
5
6
7
8
9
10
11
12
<!--
HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>  h1 最大，h6 最小
align 属性是对齐属性
	left 左对齐 ( 默认 )
	center 居中
	right 右对齐
浏览器会自动地在标题的前后添加空行。
默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
-->
<h1 align = "center">标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

（3）段落

1
2
3
4
5
<!--
单词缩写： paragraph 段落 [ˈpærəgræf] 
浏览器会自动地在段落的前后添加空行。
-->
<p>这是一个段落标签</p>

（4）水平线

1
2
3
4
5
<!--
单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 
hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。
-->
<hr/>

（5）文本格式化

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签 描述 标签 描述
<b> 粗体 <sub> 下标
<i> 斜体 <sup> 上标
<strong> 粗体 <ins>/<u> 下划线
<em> 斜体 <del> 删除线
<small> 小号字 <big> 大号字

（6）超链接

1
2
3
4
5
6
7
<!--
语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接功能。 超文本引用（Hypertext Reference）的缩写。
target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
-->
<a href="https://www.baidu.com" target="_self">百度</a><!--打开链接时会不会重写打开一个网页，而是在本网页跳转-->
<a href="https://www.baidu.com" target="_blank">百度</a><!--打开链接时会重新打开一个网页-->

  • 外部链接（互联网上的 url 网址）：

    1
    <a href="https://www.baidu.com">百度</a>

  • 内部链接（内部之间的相互链接）

    1
    <a href="index.html">首页</a>

  • 空链接

    1
    <a href="#">空链接</a>

  • 下载链接（href中地址是一个文件或压缩包，点击会下载，图片点击后会在页面显示）

    1
    <a href="test.rar">点击下载</a>

  • 网页元素链接（href中地址是文本、图像、音视频等）

    1
    <a href="https://www.baidu.com"><img src="test.png">点击图片去往百度</a>

  • 锚点链接（点击链接后会快速定位到页面中某个位置）

    • 第一步：在链接文本中的 href 属性值为”#名字”的形式，比如 <a href=”#info”> 个人信息 </a>
    • 第二步：找到目标位置标签，添加一个id属性=刚才的名字，比如 <h3 id=”info”> 个人信息介绍 </h3>
    1
    2
    <a href="#info">个人信息</a>
    <h3 id="info">个人信息介绍</h3>

（7）图像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 
img 标签是图片标签 , 用来显示图片
	src 属性可以设置图片的路径（必须属性）
	width 属性设置图片的宽度
	height 属性设置图片的高度（宽度和高度若只设置一个，会等比例缩放）
	border 属性设置图片边框
	alt 属性设置当指定路径找不到图片时 , 用来代替显示的文本内容，会有一个裂开的图片
	title 鼠标放到图像上，提示的文本
在 web 中路径分为相对路径和绝对路径两种
相对路径 :
	. 表示当前文件所在的目录
	.. 表示当前文件所在的上一级目录
	文件名 表示当前文件所在目录的文件 , 相当于 ./ 文件名 ./ 可以省略
绝对路径 :
	正确格式是 : http://ip:port/ 工程名 / 资源路径
	错误格式是 : 盘符 :/ 目录 / 文件名
-->
<img src="test.jpg" width="200" height="200">

（8）列表

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
<!--
无序列表 ul （unorderd list）  li(list item)
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
	<ul>
 	 <li>列表项1</li>
 	 <li>列表项2</li>
	  <li>列表项3</li>
 	 ......
	</ul>
注意：
 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性，但一般不用使用，通过css更好（可以使用list-style-type:none;/list-styl:none样式去除无序列表前的黑点）

有序列表 ol （orderd list）
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
    <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ol>
-->
<!--有序列表 unorderd list-->
<ol>
    <li>第一列</li>
    <li>第二列</li>
    <li>第三列</li>
</ol>
<!--无序列表 orderd list-->
<ul>
    <li>第一列</li>
    <li>第二列</li>
    <li>第三列</li>
</ul>

<!--自定义列表 description list-->
<dl>
    <dt>名词</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
</dl>

（9）表格

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
<!--
创建表格的基本语法格式如下：
    <table>
      <tr>
        <td>单元格内的文字</td>
        ...
      </tr>
      ...
    </table>
table 标签是表格标签
	border 设置表格标签
	width 设置表格宽度
	height 设置表格高度
	align 设置表格相对于页面的对齐方式（left、center、right）
	cellspacing 设置单元格之间的间距（默认为2像素）,如果指定为0，则单元格的线会合为一条
	cellpadding 设置单元格与文字内容之间的间距
tr 是行标签，在 table中包含几对 tr，就有几行表格。
th 是表头标签（文字加粗且居中）
td 是单元格标签，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

合并单元格
跨行合并：rowspan 跨列合并：colspan
注意：将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
<td colspan="2">内容<td>：表示内容跨两列

-->
<table border="1px" cellspacing="1" align="center">
    <tr>
        <td>这是第一行第一列</td>
        <td>这是第一行第二列</td>
    </tr>

    <tr>
        <td>这是第二行第一列</td>
        <td>这是第二行第二列</td>
    </tr>
</table>

（10）表单

标签 描述
<form> 供用户输入的表单
<input> 输入域
<select> 下拉选项列表
<option> 下拉列表中的选项
<textarea> 文本域（一个多行的输入控件） 
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!--
HTML表单用于收集不同类型的用户输入，然后把这些信息发送给服务器.为了使得表单更加好看，可以配合着表格使用.
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
	① 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
	② 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
	③ 表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

form 标签就是表单
★输入标签<input>
	<input type="text"> 是文件输入框(type的默认值) 可以使用value设置默认显示内容，也可以使用placeholder属性设置默认显示内容，此时内容是灰颜色的（一般用于设置提示信息），自己输入内容后就消失了，而使用value设置的显示内容需要自己手动删除。
	<input type="password"> 是密码输入框（密码字段字符不会明文显示，而是以圆点替代），可以使用value设置默认显示内容
	<input type="radio"> 是单选框，要想实现单选，name属性必须都一样，加上属性checked="checked"表示默认选中，使用value属性可以使得请求参数中有值，比如gender=male，如果没有使用value，会显示gender=on
	<input type="checkbox">是复选框， 使用属性checked="checked"表示默认选中，使用value属性效果同radio，复选框要有相同的name值。
	<input type="reset"> 是重置按钮，可以使用value属性修改按钮上显示的文本
	<input type="submit"> 是提交按钮，可以使用value属性修改按钮上显示的文本
	<input type="image" src=""> 是图片提交按钮，可以使用src指定图片的路径，点击图片，表单也会被提交。
	<input type="button"> 是按钮，可与使用value属性修改按钮上显示的文本
	<input type="file"> 是文件上传域，用户可以上传文件,其属性accept定义了文件 input 应该接受的文件类型，这个字符串是一个以逗号为分隔的唯一文件类型说明符列表，比如accept="image/jpg,image/jpeg,image/png,image/PNG"，详细信息见https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file
	<input type="hidden"> 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
★下拉菜单<select>
使用select控件定义下拉菜单的基本语法格式如下
    <select>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
      ...
    </select>
注意：
	1、select</select中至少应包含一对option></option。
	2、在option 中定义selected =" selected "时，当前项即为默认选中项。

★文本域<textarea>
	如果需要输入大量的信息，就需要用到textarea标签。通过textarea控件可以创建多行文本输入框，格式如下：
    <textarea cols="每行中的字符数" rows="显示的行数">
      文本内容
    </textarea>  

★表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
    <form action="url地址" method="提交方式" name="表单名称">
      各种表单控件
    </form>
        action属性用于指定接收并处理表单数据的服务器程序的url地址。
        method用于设置表单数据的提交方式，其取值为GET(默认值)或 POST。
        name用于指定表单的名称，以区分同一个页面中的多个表单。
	表单提交的时候，数据没有发送给服务器的三种情况：
		1、表单项没有 name 属性值（也就是说，表单项（比如用户名、密码）中必须制定其name属性才能提交给服务器）
		2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
		3、表单项不在提交的 form 标签中
    GET 请求的特点是：
        1、浏览器地址栏中的地址是：action 属性[+?+请求参数] 请求参数的格式是：name=value&name=value
        2、不安全
        3、它有数据长度的限制
    POST 请求的特点是：
        1、浏览器地址栏中只有 action 属性值
        2、相对于 GET 请求更安全
        3、理论上没有数据长度的限制
-->
<form action="http://www.baidu.com" method="get" name="我的表单">
    用户姓名：<input type="text">  <br/>
    用户密码：<input type="password">  <br/>
    国籍：<select>
    <option>--请选择国籍</option>
    <option >--中国</option>
    <option>--美国</option>
    <option>--日本</option>
</select> <br>
    性别：<input type="radio" name=" gender">男
    <input type="radio" name=" gender">女 <br/>
    兴趣爱好<input type="checkbox">java
    <input type="checkbox">c++
    <input type="checkbox">python
    <input type="checkbox">其他 <br>
    自我介绍<br/><textarea rows="5" cols="30"></textarea> <br>
    <input type="file"> <br/>
    <input type="submit">
</form>

<!--
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
-->

<!--当点击用户名这三个字时，会自动将光标转到input输入框中-->
<form>
    <label for="username">用户名：</label> <input type="text" id="username"></input>
</form>

（11）div span 标签

1
2
3
4
5
6
7
<!--
div就是 ,可以把文档分割为独立的、不同的部分。其默认独占一行
div:（division 的缩写）每一个div占满一整行。块级标签。div占用的位置是一行
span：文本信息在一行展示，行内标签 内联标签。span占用的是内容有多宽就占用多宽的空间距离
-->
<div>div标签</div>
<span>span标签</span>

（12）iframe 框架

属性 值 描述
src URL 规定在 iframe 中显示的文档的 URL。
name frame_name 规定 iframe 的名称。
height pixels/% 规定 iframe 的高度。
width pixels/% 定义 iframe 的宽度。
align left/right/top/middle/bottom 不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder 10 规定是否显示框架周围的边框。不赞成使用，请使用 CSS 属性 border代替。
longdesc URL 规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
sandbox “”allow-formsallow-same-originallow-scriptsallow-top-navigation 启用一系列对