原 Blog 链接：HTML基础学习笔记

html

自学 html 基础笔记

Web 前端简单介绍

web 前端包含：

pc 端页面
移动端页面

web 前端首先要解决用户体验的问题

认识网页

网页的组成

网页主要由文字、图片和按钮等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及 Flash 等。

Web 标准

1：w3c 万维网联盟组织：用来制定 web 标准的机构（组织）

2：web 标准：制作网页要遵循的规范

3：web 标准规范的分类：结构标准；表现标准；行为标准

结构标准：html（用来制作网页的）
表现标准：css（对网页进行美化的）
行为标准：javascript（让网页动起来，具有生命力）

4：web 标准总结：

结构标准：相当于人的身体
表现标准：相当于人的衣服
行为标准：相当于人的动作

浏览器介绍

浏览器是网页运行的平台，常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari 和 Opera 等。

浏览器内核：也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内，容以及页面的格式信息。

IE	Google/Opera	FireFox	Safari
trident	blink	gecko	webkit

浏览器与服务器

1：浏览器向服务器发送请求（通过http协议）

2：http协议：超文本传输协议，也就是浏览器和服务器端的网页传输数据的约束和规范

3：https：加密处理

4：url协议:平时我们写的网址就是 url 地址

url协议：规定 url 地址的格式

协议规定格式： scheme://host.domain:port/path/filename

scheme: 定义因特网服务的类型。常见的就是http

host: 定义域主机（http 的默认主机是www）

domain: 定义因特网域名比如：w3school.com.cn

:port 定义端口号（网页默认端口 :80）

path: 网页所在服务器上的路径

filename: 文件名称

认识 html

概念

html (Hyper Text Markup Language ) 中文译为 超文本标记语言，主要是通过 html 标记对网页中的文本，图片，声音等内容进行描述。

HTML 之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的 超级链接，通过超链接可以实现网页的跳转。从而构成了丰富多彩的 Web 页面。

html 结构

基本结构如下：

各部分的含义：

用于告知浏览器其自身是一个 HTML 文档，标记标志着 HTML 文档的开始，标记标志着 HTML 文档的结束，在他们之间的是文档的头部和主体内容。

这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对 html 页面本身不会有影响。

主要用来封装其他位于文档头部的标记。一个 HTML 文档只能含有一对标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

</code> 标记用于定义HTML页面的标题，<code><title> 之间的内容将显示在浏即给网页取一个名字，必须位于标记之内。一个HTML文档只能含有一对标记，将显示在浏览器窗口的标题栏中。

标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标记内，标记中的信息才是最终展示给用户看的。

一个HTML文档只能含有一对标记，且标记必须在标记内，位于头部标记之后。

标签的分类

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

HTML 标签是由尖括号包围的关键词，比如；
HTML 标签通常是成对出现的，比如和；
标签对中的第一个标签是开始标签，第二个标签是结束标签；
开始和结束标签也被称为开放标签和闭合标签；

HTML标记—双标记

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

<标记名>

该语法中 <标记名> 表示该标记的作用开始，一般称为 开始标记（start tag），表示该标记的作用结束，一般称为 结束标记（end tag）。和开始标记相比，结束标记只是在前面加了一个关闭符 /。

HTML标记—单标记

单标记也称空标记，只有开始标签没有结束标签：

<标记名>

标签关系

嵌套关系：类似父亲和儿子之间的关系

并列关系：类似与兄弟之间的关系

html 标签介绍

单标签

文本注释标签

文本换行标签

你好
我来自中国

效果演示：

你好
我来自中国

横线标签

效果演示：

双标签

段落标签


    这是一行文字


    这也是一行文字

标题标签

注意：标题标签只能取到数字 1-6

这是一个标题1
这是一个标题2
这是一个标题3
这是一个标题4
这是一个标题5
这是一个标题6

文本标签

例如：


    优美的文字

文本格式化标签

文字加粗显示


    该减肥了！

文字斜体

这行字是斜的

文字下横线

文字下横线
文字下横线

文字删除线

删除线
删除线

图片标签

属性	描述
src	设置显示图片（图片名称或者图片路径）
title	用来设置鼠标放在图片上显示的文字
alt	当图片无法正常显示的时候，对图片的描述
width	用来设置图片宽度
height	用来设置图片的高度


![](www.baidu.com/imags/1.png)

相对路径

当图片和文件（html）在同一个文件夹中时，src 属性中直接写上图片名称即可。

![](1.jpg)

当图片在文件（html）的下一级目录中时，src 属性中写上图片所在的文件夹名 +“/” + 图片名称

![](1/1.jpg)

当图片在文件（html）的上一级目录中时，src 属性中写上 ../图片所在文件夹名 + “/” + 图片名称

![](../2/1.jpg)

绝对路径

凡是带有 磁盘路径 的都是绝对路径，或者带有 网站地址 的也是绝对路径。

![](D:\a\1.png)
![](www.baidu.com/imags/1.png)

超链接

在HTML中创建超链接非常简单，只需用标记环绕需要被链接的对象即可，其基本语法格式如下：

文本或图像

属性	描述
href	用于指定链接目标的 url 地址，当为标记应用 `href` 属性时，它就具有了超链接的功能。
target	用于指定链接页面的打开方式，其取值有 `_self` 和 `_blank` 两种，其中 `_self` 为默认值， `_blank` 为在新窗口中打开方式。

在标签中使用标签可以设置网页整体链接的打开状态。

实例：

百度
Kai's Blog

注意:

（1）暂时没有确定链接目标时，通常将标记的 href 属性值定义为“#”(即 href="#" )，表示该链接暂时为一个空链接。

（2）不仅可以创建文本超链接，在网页中各种网页元素，如 图像、表格、音频、视频 等都可以添加超链接。

锚链接

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

使用 “ 链接文本 ” 创建链接文本；
使用相应的 id 名标注跳转目标的位置。


你好


返回顶部

特殊字符

特殊字符	描述	字符的代码
	空格符
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方（上标2）	`²`
³	立方（上标3）	`³`

列表

无序列表（ul）


      列表项
    
    ......

例如：

大家喜欢吃什么水果

    苹果
    香蕉
    葡萄
    水蜜桃
    菠萝

属性：type

（默认值）实心圆点：disc

实心方块：square

空心圆圈：circle

实例：


    苹果
    香蕉


    苹果
    香蕉


    苹果
    香蕉

有序列表（ol）

属性：type

A（ABCD排序），a（abcd排序），i（小写的罗马数字），I（大写的罗马数字）

属性：start="3"，表示从第几个数开始

把大象放冰箱分几步？

    打开冰箱门
    把大象放进去
    关上冰箱门

自定义列表（dl）

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：


      小标题
      列表项

一般用于网页的底部，例如：



    售后服务
    收货地址
    在线支付
    联系客服

小补充

页面背景音乐

属性：

src：设置音乐路径
hidden：隐藏播放按钮，true 隐藏，false 显示

页面滚动效果

...

属性	描述
height	设置高度
width	设置宽度
bgcolor	设置背景颜色
behavior	设定滚动的方式： alternate：表示在两端之间来回滚动； scroll：表示由一端滚动到另一端，会重复； slide：表示由一端滚动到另一端，不会重复。
direction	设定滚动的时间： down：向下滚动； left：向左滚动； right：向右滚动； up：向上滚动。
loop	设置滚动次数，-1 表示一直滚下去

Meta标签和Link标签

Meta 标签

meta 的属性有两种：name 和 http-equiv。

name 属性

主要用于描述网页，对应于 content（网页内容）。

1、用来说明网页使用的字符集，即编码格式

2、用以说明生成工具（如Microsoft FrontPage 4.0）等；

3、向搜索引擎说明你的网页的关键词；

4、告诉搜索引擎你的站点的主要内容；

5、告诉搜索引擎你的站点的制作的作者；

6、有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是 The Robots META 标签。

robots 其中的属性说明如下：

设定为 all：文件将被检索，且页面上的链接可以被查询；

设定为 none：文件将不被检索，且页面上的链接不可以被查询；

设定为 index：文件将被检索；

设定为 follow：页面上的链接可以被查询；

设定为 noindex：文件将不被检索，但页面上的链接可以被查询；

设定为 nofollow`：文件将不被检索，页面上的链接可以被查询。

http-equiv 属性

网页重定向，表示的是 5 秒后网页自动跳转到指定网址。

Link 标签

给网页 titile 中放置小图标

引入外部样式表

表格（table）

表格基本结构

在 HTML 语言中，表格至少由

标签、标签和标签定义。

表格行用标签定义，由单元格构成。多个行结合在一起就构成一个表格，这反映在用于创建表格的HTML语法中。表格的每一行都用标签表示，并用相应的结束.

标签表示。td 是"表格数据(Table Data)”的英文缩写。标签内。
border 属性是最常用的属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。

基本语法：

标签这 3 对标签组成。

...

标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格，用

...

表格的每一行又有若干表格单元格，用 ... 标签定义一个列，嵌套于

姓名

年龄

职业

籍贯

属性介绍：

bord：设置表格边框的厚度
width：设置表格宽度
height：设置表格高度
cellspacing：设置单元格之间的距离
cellpadding：文字距离单元格边框的距离
bgcolor="red"：设置背景颜色
align="center" | left | right：给 tr 或者 td 设置让文字居中，给 table 设置让表格居中

属性名	含义	常用属性值
border	设置边框，默认为0，没有边框	单位为 px 像素值
cellspacing	设置单元格与单元格之间的距离	单位为 px 像素值，默认为 2px
cellpadding	设置文字与单元格之间的距离	默认 1px
width	设置表格的宽度	单位 px
height	设置表格的高度	单位 px
align	设置表格在网页中的对其方式	left 左 rigth 右 center 居中
bgcolor	设置背景颜色	white，red，green等

设置表格表头，用法和 td 一样

表头一般位于表格的第一行或第一列，其文本加粗居中。

姓名	年龄	职业	籍贯
小明	18	码农	江苏

表格属性设置示例：

姓名	年龄	职业	籍贯
小明	18	码农	江苏

设置表格标题：

caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

人员信息表
姓名	年龄	职业	籍贯
小明	18	码农	江苏

表格结构

    头
        身体
        脚

在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体如下所示：

：用于定义表格的头部，必须位于标记中，一般包含网页的logo和导航等头部信息。
：用于定义表格的主体，位于标记中标记之后，一般包含网页中除头部和底部之外的其他内容。
：用于定义表格的页脚，位于标记中标记之后，一般包含网页底部的企业信息等。

补充知识：单元格的合并

横向合并

实例展示：

姓名	年龄	籍贯
小明	18	码农	江苏

纵向合并

实例展示：

姓名	年龄	职业	籍贯
小明	18	码农	江苏
小白	21	北京

表单（form）

表单介绍

表单的作用：主要负责数据采集功能。

对于表单构成中的表单控件、提示信息和表单域，对他们的具体解释如下：

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

基本语法：

…

属性介绍：

Name ：定义表单的名称；
Action ：用来指定表单处理程序的位置（服务器端脚本处理程序）；
Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get。

get数据提交：① 通过地址栏的方式进行数据提交，将用户输入的信息显出来；② get提交安全性差。

post提交：① 数据通过后台进行提交，不会将用户信息显示出来；② 安全性比较好。

表单域

…

容纳表单空间和提示信息的一个区域。

表单控件

input 控件

语法：

在上面的语法中，标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，标记还可以定义很多其他的属性，其常用属性如下表所示。

属性	属性值	描述
type	text password radio checkbox button submit reset image hidden file	单行文本输入框密码输入框单选按钮复选框普通按钮提交按钮重置按钮图像形式的提交按钮隐藏域文件域
name	由用户自定义	控件的名称
value	由用户自定义	input 控件中的默认文本值
size	正整数	input 控件在页面中的显示宽度
readonly	readonly	该控件内容为只读（不能编辑修改）
disabled	disabled	第一次加载页面时禁用该控件（显示为灰色）

文本输入框


用户名：

属性:

maxlength：设置文本输入框最多能输多少字符
readonly="readonly"：设置文本输入框为只读（不能编辑）
disabled+"disabled"：控件属于非激活状态
name="username"：给输入框设置名称
value：设置默认显示的值

密码输入框


密码：

属性用法与文本输入框的用法一样。

单选按钮


性别：
男
女

注意：实现单选效果一定要给控件设置相同的名称

属性：

checked="checked"：设置默认选中项

多选控件

兴趣爱好：
抽烟
喝酒
烫头

属性：

checked="checked"：设置默认选中项

图片上传控件

头像：

表单提交按钮

普通按钮

注意：该按钮不能进行表单提交。通常和 js 代码配合使用。

重置按钮

清空所有表单数据，恢复到初始状态

图片按钮

select 控件

在 HTML 中，要想制作下拉菜单，就需要使用select控件。

下拉列表

出生地：
省：

属性：

selected="selected"：设置默认选中项
multiple="multiple"：可以实现多选效果

下拉列表分组显示

市(区)：

textarea 控件

如果需要输入大量的信息，就需要用到标记。通过 textarea 控件可以轻松地创建多行文本输入框，其基本语法格式如下：

    文本内容

属性：

cols：相当于宽度
rows：相当于高度

自我介绍：

组合表单

fieldset 用于表单分组。

语法：


    用户注册

举例：


    用户注册
        用户名：
        

        

        密码：

表单补充

判断网址

判断邮箱

日期控件

时间控件

带有 spinner 控件的数字字段

属性：

step：表示每次加减的值（即步长）

带有 slider 控件的数字字段

属性：

max：最大值
min：最小值
step：每次加减的值（即步长）

定义拾色器

标签语义化

标签语义化概念：

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

标签语义化意义：

1: 网页结构合理

2: 有利于 SEO :和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；

3: 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）;

4: 便于团队开发和维护.

标签语义化（注意事项）

1：尽可能少的使用无语义的标签 div 和 span ；

2：在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；

3：不要使用纯样式标签，如：b、font、u 等，改用 css 设置。

4：需要强调的文本，可以包含在 strong 或者 em 标签中。strong 默认样式是加粗（不要用b），em 是斜体（不用 i ）；

总结

我的 html 基础学习是跟着传智播客2016年的视频课程学习的，基础就这些内容，特别整理下来以加深记忆。内容或多或少会与网络上的内容有些许出入。总的来说 html 很简单，很容易上手。但这只是基础，html + css + javascript 才能做出真正漂亮的网页。

千里之行，始于足下，接下来的路，加油！

原 Blog 链接：HTML基础学习笔记