HTML基础篇二

一、链接

1、url
url为统一资源定位器，目录是WEB站点中存储文件的文件夹名称；
资源就是网页中要用到的文件，都要资源。

2、三种表现方式：
1、绝对路径：是从文件所在的*目录下开始的完整路径
分类：
1.访问互联网上的资源
协议名称+主机名（IP地址/域名）+目录的路径和文件名
2.访问本机的资源
真正存在的物理路径：盘符一直到资源文件经过的路径
2、相对路径：从文件所在的位置开始查找 资源文件所在的位置经过的路径
分类：
1.当前文件与资源文件在同目录下
直接通过名称进行引用
2.资源文件在当前文件的字目录中
先进入这个文件夹再引用
3.资源文件在当前文件的父目录中
先返回再引用
…/ 返回上一级
3、根相对路径（服务器上使用）服务器上才能够用的到
表现形式 /作为开始
3、a标签：
<a>内容</a>
属性：
href: 链接的url
traget: 指定打开新网页的形式
_self：在原网页中跳转
_blank:在新网页中跳转
超链接的第二种用法
锚点
在网页的任意位置处做个记号，可有任意位置的a标签跳转到该记号上
使用方式：
第一步 定义锚点 （做记号）
1.用a标签做记号
2.用其他的标签做记号
给其他的标签加上一个 id
第二步链接到锚点
href属性 用#开头后面写记号的名字 例：#top

二、图像

1.在web中所支持的图像格式有哪几种？
1.jpeg .jpg 压缩 有损
2.png 无损压缩 支持透明色
3.gif 动图
2 .图片元素<img/>
属性：
src：指定要显示的图片的url
alt：当图片无法显示的时候用文字去解释它
width:宽度
height：高度
注意： 如果只改变 width或者height中一个属性的化 那么另一个属性会跟着等比缩放
title：当鼠标指向时提示的文字

例：

效果：

三、表格

1、表格的作用是按照一定的格式摆放数据；表格是由一些被称为单元格的矩形框组成，按照从左到右，从上到下的顺序。
2、表格的创建
创建一个表格
1、定义表格
2.创建行 tr
3.创建单元格 td
表格的属性：
table中
1.boder 边框
2.cellpadding 单元格的内边距（单元格边框与内容之间的距离）
3.cellspacing 单元格的外边距（单元格和单元格之间的距离）
4.width 宽度
5.height 高度
6.align 调整水平位置
7.bgcolor 背景颜色
tr中
1.align 调整内容水平对齐方式
2.valign 调整内容垂直对齐方式
3.bgcolor 背景颜色
td中
1.width 宽度
2.height 高度
3.align 水平对齐
4.valign 垂直对齐
5.colspan 横向合并单元格 后面写的数值包含自己 并且我们合并掉的单元格要删除
6.rowspan 纵向合并单元格 后面写的数值包含自己 并且我们合并掉的单元格要删除
表格的标题 <caption></caption>
默认在表格上方居中位置，每个表格最多只能有一个标题（约定俗成）但是可以写多个标题。

例：

效果：

3.复杂表格的用法
行分组,html中允许将表格内容划分为三个部分
1.表头行部分
<thead></thead>
2.表主体部分
<tbody></tbody>
3.表尾行分组
<tfoot></tfoot>

注意： 每个行分组中，都允许包含一对或者多对 tr标签

例：

效果：

四、列表

1.作用
默认显示方式为 从上到下显示
2.列表的组成
列表类型 列表项
列表类型： ul（无序列表） ol（有序列表） dl（自定义列表）
3.列表的使用
1.无序列表
<ul>
<li></li>
</ul>

列：

<ul>
    <li>你好</li>
    <li>你好</li>
    <li>你好</li>
   </ul>

效果：

• 你好
• 你好
• 你好

2.有序列表
<ol>
<li><li>
</ol>

列：

<ol>
    <li>你好</li>
    <li>你好</li>
    <li>你好</li>
 </ol>

效果：

1. 你好
2. 你好
3. 你好

3.自定义列表
<dl>
<dt><dt>
<dd><dd>
</dl>

<dl>
    <dt>定义列表中要解释的名词或术语</dt>
    <dd>定义列表中对名词或者术语的解释</dd>
 </dl>

效果：

定义列表中要解释的名词或术语

定义列表中对名词或者术语的解释

head中的补充内容
<meta name=“keywords” content=“关键1 ，关键2.。。关键n”/>
定义网页的关键字 关键字可以写n个 最好的个个数是8个
每个关键词最好是不一样并且有关联
ps： 如果没有关联的化 百度认为这个网页作弊，会被*，用户就会搜索不到
最严重的时候可能会永久的入不了百度
<meta name=" description" content=“定义网页的描述信息”/>
定义网页的描述信息
以上两点主要是针对搜索引擎，描述不在网页中显示，一般是在120个之内。

五、结构标签（语义化标签）

<header></header>
作用：定义文档的页眉
用于取代<div id=“header”>
<nav></nav>
用于表示页面中的导航部分
<section></section>
用于表示页面中的主体部分
<<ooter></footer>
用于表示页面中底部部分
<<rticle></article>
独立于文档的其他部分内容
<aside></aside>
表现于网页中边栏信息

六、表单

1.表单的作用
用于显示、收集用户的信息，并且将信息传给服务器
2.表单的组成’
表单元素-负责将用户数据提交给服务器
表单控件-负责接收用户的数据（与用户进行数据交互）
3. 表单元素-负责将用户数据提交给服务器
1.用法
表单属性
action
定义表单被提交的时候的动作，主要就是服务器上处理数据应用程序的URL找谁处理
method
get
向服务器端提交数据时使用
特点：显示提交 用户数据可以显示在地址栏
提交数据长度有限制-2kB 每个浏览器时不一样
谷歌 8kB ie 2kb
post
隐式提交 所有提交数据的时候都是看不见的 相对于说安全性较高
没有数据大小限制的
表单数据进行编码的方式
默认： application/x-www-form-urlencoded
mulipart/form-data 上传文件时使用的
text/plain 早期的一个编码方式 非常少见了

表单的控件 <input />
type:
创建各种类型的输入字段，如文本框（text） 密码框（password） 单选按钮（radio） 多选按钮（checkbox） 提交按钮（submit） 重置按钮（reset）。。。
value：
值 要提交给服务器的
name：
控件的名称 服务端使用的 没有名字的话是无法提交的
disabled="disabled
禁用控件