Web前端笔记
第一部分：HTML学习
HTML快速创建，配合tab键使用
- table>tr>td*4 一个表格，一行四列
- table>(tr>td*5)*6 一个表格下面创建5列6行的表格
HTML概述
1. 什么是HTML
- HTML是用来描述网页的一种语言
- 超文本标记语言（HyperTextMarkupLanguage),是一种用于创建网页的标准标记语言
- HTML不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签（markup tag）
- HTML文档包含了HTML标签及文本内容
- HTML文档也叫web页面
2. HTML元素
- HTML元素
- HTML元素以开始标签起始
- HTML元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
2.1. HTML元素属性
- HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
- 属性总是以名称=值对的形式出现，比如：name=“value”。
- 属性总是在HTML元素的开始标签中规定。
- 注意：
- 属性值必须以双引号引起来
- 标签都用小写字母
- 双标签必须写闭合标签
2.2. HTML块元素
- HTML块元素
- 大多数HTML元素被定义为块级元素或内联元素。
- “块级元素”译为 block level element，“内联元素”译为 inline element。
- 块级元素在浏览器显示时，通常会以新行来开始（和结束）。
-比如：
,
,
- HTML内联元素
- 内联元素在显示时通常不会以新行开始。
- 例子：, , ,
元素的另一个常见的用途是文档布局- 元素是内联元素，可用作文本的容器。
- 元素也没有特定的含义。
- 当与 CSS 一同使用时，元素可用于为部分文本设置样式属性。
3. HTML标签
- HTML注释
- HTML标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML标签是由尖括号包围的关键词，比如 和
- HTML标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
3.1. 标题标签
- 标题标签
- 通过
、
、
、
、
、
,标签可以在网页上定义6种级别的标题。
- 6种级别的标题表示文档的6级目录层级关系，
定义最大的标题。
定义最小的标题。
- 比如说：
用作主标题，其后是
，再其次是
，以此类推。
- 搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的
- 浏览器会自动地在标题的前后添加空行。
- 默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后
3.2. HTML段落
- 段落标签
- 段落是通过 标签定义的
- 使用空的段落标记
- 用
或者
标签代替它！（但是不要用
标签去创建列表。
3.3. 块标签，含样式标签
- html块标签
1、 标签 块元素，表示一块内容，没有具体的语义。
- 本身不带样式，p标签自带样式，段落前后会自动空一行，div标签不会，只会自动换行
- div标签中可以大量嵌套
- p标签里面一般不嵌套p标签，但是可以嵌套别的标签，比如span标签
2、 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
- 当与 CSS 一同使用时，元素可用于为部分文本设置样式属性 - 含样式和语义的标签(实际使用少，面试会问到)
1、 标签 行内元素，表示语气中的强调词 自动斜体
2、 标签 行内元素，表示专业词汇 自动斜体
3、 标签 行内元素，表示文档中的关键字或者产品名 自动加粗
4、 标签 行内元素，表示非常重要的内容 自动加粗 - 语义化的标签（重点，最常用）
语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，
理解文档的结构，方便网站的收录。
比如：
h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，
a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
3.4. HTML链接
- HTML使用超级链接与网络上的另一个文档相连。
- 几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
href属性 定义跳转的地址
title属性 定义鼠标悬停时弹出的提示文字框
target属性 定义链接窗口打开的位置
target="_self" 缺省值，新页面替换原来的页面，在原来位置打开,默认不写
target="_blank" 新页面会在新开的一个浏览器窗口打开
地址不能确定，暂时不想写，可以使用#代替
3.5. 图像标签
- 是空标签，意思是说，它只包含属性，并且没有闭合标签。
- 标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
src属性 定义图片的引用地址
alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、
盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
- 要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。
- 源属性的值是图像的 URL 地址。
- 绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
- “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
- “ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
3.6. 列表标签
- HTML 支持有序、无序和定义列表
- 有序列表始于
- 标签。每个列表项始于
- 标签。
- Coffee
- Milk
- 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
- 无序列表始于
- 标签。每个列表项始于
- 。
- Coffee
- Milk
- 在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，
所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，
从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。 - 定义列表
定义列表通常用于术语的定义。
前端三大块
- 负责页面的结构
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>- 显示结果：
前端三大块
html
负责页面的结构
css
负责页面的表现
javascript
负责页面的行为
3.7. 表格标签
- 1、标签：声明一个表格，它的常用属性如下：
border属性 定义表格的边框，设置值是数值
width 表格宽度 单位都是默认像素
height 表格高度 单位都是默认像素
cellpadding属性 定义单元格内容与边框的距离，设置值是数值
cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right - 2、标签：定义表格中的一行,一对tr标签就是一行
- 3、和标签
定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
一对td标签就是一列
th表头自带样式，默认居中加粗
width 宽度 可以给比例20%
height 高度 可以给比例20%
bgcolor 单元格背景色
align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
valign 设置单元格中内容的垂直对齐方式: top | middle | bottom
colspan 设置单元格水平合并，设置值是数值
<tr >
<td colspan="5"></td>
</tr>
第一行合并，5列合并，然后删除剩余的4行，即删除剩余的td
rowspan 设置单元格垂直合并，设置值是数值
<tr >
<td colspan="5"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan="5"></td>
</tr>
第二行开始最后一列全部合并，第二行5列，最后一列合并了之后每行的的列
合并后后面每一行还会多出一列，多出的列td全部删除即可，相当于3456行都只有4列3.8. 页面布局
- 布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：
- 1、table布局：
通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，
隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，
目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。 - 2、HTML+CSS布局(DIV+CSS)：
主要通过CSS样式设置来布局文字或图片等元素，
需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，
它比传统布局要复杂，目前是主流的布局方式。 - table布局
table来做整体页面的布局，布局的技巧归纳为如下几点：
1、按照设计图的尺寸设置表格的宽高以及单元格的宽高。
2、将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。
3、针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。
4、单元格中的元素或者嵌套的表格用align和valign设置对齐方式
5、通过属性或者css样式设置单元格中元素的样式