Web前端笔记
第一部分:HTML学习
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内联元素
- 内联元素在显示时通常不会以新行开始。
- 例子:, , ,
- 内联元素在显示时通常不会以新行开始。
-
元素是块级元素,它是可用于组合其他 HTML 元素的容器。 -元素没有特定的含义。除此之外,由于它属于块级元素,会自动换行。 - p标签自带样式,段落前后会自动空一行,div标签不会像p标签一样前后自动空一行 - 如果与CSS一同使用,元素可用于对大的内容块设置样式属性。 -元素的另一个常见的用途是文档布局
-
元素是内联元素,可用作文本的容器。
- 元素也没有特定的含义。
- 当与 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
-
在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,
所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,
从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。 -
定义列表
定义列表通常用于术语的定义。-
标签表示列表的整体。
标签定义术语的题目。
-
标签是术语的解释。 一个
-
中可以有多个题目和解释,代码如下:
- 负责页面的结构
- 显示结果:
前端三大块
html
负责页面的结构
css
负责页面的表现
javascript
负责页面的行为
前端三大块
-
html
<dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd>
-
标签是术语的解释。 一个
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样式设置单元格中元素的样式
4. HTML表单
-
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:
-
1、标签 定义整体的表单区域
- form标签的属性
action属性 定义表单数据提交地址
method属性 定义表单提交的方式,一般有“get”方式和“post”方式
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。
- form标签的属性
-
2、
-
3、标签 定义通用的表单元素
- type属性的值
type=“text” 定义单行文本输入框
type=“password” 定义密码输入框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮
type=“image” 定义图片作为提交按钮,用src属性定义图片地址
type=“hidden” 定义一个隐藏的表单域,用来存储值 - value属性 定义表单元素的值,按钮的名称,值对应的名称等
- name属性 定义表单元素的名称,此名称是提交数据时的键名
- type属性的值
-
4、标签 定义多行文本输入框
-
5、标签 定义下拉表单元素
-
6、标签与标签配合,定义下拉表单元素中的选项
5. 其它常用标签
- link
引入外部文件,比如引用css文件