前端基础学习

Web前端三大核心技术

HTML：结构
CSS：样式
JavaScript：做与用户的交互行为

一、HTML

超文本标记语言

1.注释

<!-- 这里是注释的内容 -->

• Ctrl + /
• Shift + Alt + a

2.标题与段落

标题
• h标签，做的是网页内容中的标题
• 是双标签，分为六个等级，< h1>< /h1> … < h6></ h6>
• 在一个网页中h1标题最重要，并且一个.html文件中只能出现一次h1标签
• h5、h6标签在网页中不经常使用
段落
• p标签，也是双标签，< p>< /p>
• 每一个段落就是一个p标签，不要把所有段落都写在一个p标签里

3.文本修饰标签 

强调：< strong>< /strong>、< em>< /em>
• strong标签会对文本进行加粗，strong的强调性更强
• em标签会对文本进行斜体，强调性稍弱
< sub>< /sub>、< sup>< /sup>：下标文本、上标文本
< del>< /del>、< ins>< /ins>：删除文本、插入文本，一般情况下，删除和插入配合使用

4.图片标签与图片属性 

< img>，是一个单标签，向网页中嵌入一幅图像，具有以下属性：

src：必需的属性，是引入图片的地址
alt：必需的属性，当图片出现问题的时候，可以显示一段友好的文字代替图片，可以优化用户体验；图片没问题时不会显示该文字
title：可选属性，title其实是所有html标签都具有的一个属性，它表示一个提示信息，当我们把鼠标放到标签上时，该提示信息就会显示出来
width和height：可选属性，控制图片的大小，单位是像素。建议设置该属性，这样可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。

5.引入文件的地址路径

相对路径
以引用文件之网页所在位置为参考基础，而建立出的目录路径。
. 表示当前路径，通常情况下可省略
. . 表示父目录（上一级路径）
图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如< img src=”logo.gif” />。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如< img src=”img/img01/logo.gif” />。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“ . . / ”，如果是上两级，则需要使用 “ . . / . . / ”，以此类推，如< img src=”../logo.gif” />。
绝对路径
指从盘符开始的路径，一般很少使用。

6.跳转链接 

链接标签：< a>< /a>，具有以下属性：
• href：链接的地址
• target：可以改变链接打开的方式
默认情况下，在当前页面打开_self，在新窗口打开则设为_blank
< base> 标签：规定页面中所有链接的基准URL。
< base>必须写在< head>< /head>当中
• URL：统一资源定位符，又叫网页地址，是互联网上标准的资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

7.跳转锚点

也是用 < a>< /a> 标签实现，有两种实现方式：

1.#+ id属性（id必须是唯一的）

<a href="#surprise">
	<p>点击有惊喜<p>
</a>

<p id="surprise">
	<p>惊喜来啦<p>
</P>


2.#+ name属性（name属性是加给a标签的）

<a href="#surprise">
	<p>点击有惊喜<p>
</a>

<a name="surprise">
	<p>惊喜来啦</P>
</a>

#代表网页中的一个位置，其右边的字符，就是该位置的标识符。
在设置一个锚点链接的地方href属性的属性值最前面要加#；锚点href的属性值不加#。 

二者区别： 

1. name可以重复，但id不行，但都应该尽量保持其唯一性
2. id可以直接插在< h>、< p>里，name则是在< h>上再开一个a元素，在< a>标签里实现
3. id存在定位偏移，name定位较准确。

8.列表标签 

无序列表（< ul>< /ul>、< li>< /li>）
无序列表是一个没有特定顺序的列表项的集合，也称为项目列表。在无序列表中，各个列表之间属于并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。
使用无序列表标签ul的type属性（一般使用CSS的list-style来代替），用户可以指定出现在列表项前的项目符号的样式，主要有：disc（实心圆点-默认值）、circle（空心圆点）、square（实心方块）、none（无项目符号）。
< ul>、< li>：列表的最外层容器、列表项，ul和li必须是组合出现的，它们之间是不能有其他标签的。
列表之间可以互相嵌套，形成多层级的列表。

有序列表（< ol>< /ol>、< li>< /li>）
< ol>、< li>：列表最外层容器、列表项，同样 ol 和 li 必须是组合出现，且二者之间不能有其他内容。
有序列表使用的非常少，经常使用的是无序列表。

自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。列表项需要添加标题和对标题进行描述时使用定义列表。
< dl>< /dl>：定义列表（list）
< dt>< /dt>：定义专业术语或名词（title）
< dd>< /dd>：对名词进行解释和描述（description） 

9.表格 

表格标签
< table>< /table>：表格的最外层容器
< caption>< /caption>：定义表格标题，caption 标签必须紧随 table 标签之后。每个表格只能定义一个标题。通常这个标题会被居中于表格之上
< tr>< /tr>：定义表格中的行，tr元素包含一个或多个th或td元素
< th>< /th>：定义表头单元格，th 元素内部的文本通常会呈现为居中的粗体文本
< td>< /td>：定义表格单元格，td 元素内的文本通常是左对齐的普通文本

表格的语义化标签：

< thead>< /thead>、< tbody>< /tbody>、< tfoot>< /tfoot>
在一个table中，< tbody>可以出现多次，但< thead>和< tfoot>都只能出现一次

表格属性 

属性	含义
border	表格边框
cellpadding	单元格内的空间
cellspacing	单元格之间的空间
rowspan	跨行合并
colspan	跨列合并
align	左右对齐方式，left、center、right
valign	上下对齐方式，top、middle、buttom
合并单元格步骤：

注意

• 明确合并哪几个单元格
• 通过左上原则，确定保留谁删除谁：
  上下合并–>只保留最上的,删除其他
  左右合并–>只保留最左的，删除其他
• 给保留的单元格设置跨行合并(rowspan)或跨列合并(colspan)

 

10.表单 

 表单标签

1. < form>< /form>：表单的最外层容器，表单用于向服务器传输数据
2. < input>：单标签，该标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框。默认选中:checked
radio	单选框。如果要实现单选效果，需要设置相同的name属性。默认选中：checked
file	上传文件
submit	提交按钮
reset	重置按钮

表格需要严格按照嵌套规范，表单不需要，< form > < /form >之间可以嵌套其他标签。

• < textarea>< /textarea>：多行文本框

• < select>< /select>、< option>< /option>：option定义下拉列表中的一个条目

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

11.div 与 span 

 < div>< /div>（块）
< div>标签用来划分一个区域，相当于一块区域容器，< div>中也可以嵌套多层< div>，用来将网页分隔成独立的、不同的部分，实现网页的规划和布局。
< span>< /span>（内联）
用来对文字进行修饰，div和span都是默认没有任何样式的，需要配合CSS。