一、什么是HTML
HTML全称为“HyperText Markup language”，意思是超文本标记语言
超文本：具有特殊功能的文本
标记：markup 规范了超文本的组成形式
HTML是网页的设计语言，由HTML语言编写的文件，以 .html和.htm结尾的。是由浏览器运行的。
HTML的基本格式：
<html>
<head>
<title>......标题名称......</title>
</head>
<body>
......正文内容......
</body>
</html>二、HTML5知识点
2.1 文本标签
加粗<b></b> 倾斜<i></i>
下划线<u></u> 删除线<s></s>
上标<sup></sup> 下标<sub></sub>
换行<br />(单标签)
2.2 标题元素
作用：以标题的形式来显示文本
<h1 align=''center"></h1>语法：h1~h6 字体由大变小
表现方式：自带换行效果 自带加粗效果 可以调整水平位置
2.3 段落标签
<p></p> <p alige="center"></p> 段落居中
作用：在页面中表示一段独立的文本
语法：p
表现方式：自带换行效果 每个段落里的内容是不自带换行效果的
换行标签：<br />
2.4 分割线标签
作用：在页面上显示一条直线
语法：
<hr size="51" color="green" width="250" align="left"/>属性：尺寸 size
颜色 color
宽度 width
水平位置 align
通用属性：id 页面元素独一无二的标签
class 定义元素的选择器
style 定义标签的行内样式
title 鼠标移入元素（标签）上的时候显示内容
2.5 字体标签
作用：调整文本的表现形式
语法：
<font size="4" color="red" face=''行楷"></font>属性： 大小 size 取值范围1~7 超过数值的时候 按7号来显示
颜色 color
字体 face 在选择字体时可直接写中文
2.6 超链接标签
作用：用于网页之间的跳转
语法：<a href="跳转的网址、文件路径"> 在没有要跳转的网页时，可以在引号中填写#
href 跳转的地址
target 跳转的方式
URL：统一资源定位符
三种表现 绝对路径
解释：从文件所在的最高级目录下开始完整路径
①访问互联网上的资源
②访问本机的资源
相对路径
解释：文件所在的位置开始查找，资源文件所在位置经过的路径
①当前文件和资源在同目录下 直接可以用名称引用
②资源文件在当前目录的子目录中 先进入，在引用
③资源文件在当前文件的父目录中 先返回，在引用 ../返回上一级
根相对路径
解释：在服务器上面使用的，只有服务器才能用得到
表现 / 作为开始 如：/img/ben.jpg 在项目中先找到一个img的文件夹 在找到ben的图片
锚点：
作用：在网页中的任意位置添加记号 可由任意位置跳转到该记号
<a href="www.baidu.com" name="123">百度一下！</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#123">回到顶部<a>使用：1、定义锚点
a标签的一个属性 name
其他标签里面用id属性
2、在另一个地方跳转
<a href="#记号的名称"></a>2.7 跑马灯标签
作用：在页面上，添加一张图片
用法 ：<marquee></marquee>
<body>
<marquee scrollamount="10" behavior="alternate"><font></font>千与千寻</marquee>
<marquee scrollamount="15" >哈尔的移动城堡</marquee>
<marquee scrollamount="20">悬崖上的金鱼姬</marquee>
<marquee scrollamount="25">龙猫</marquee>
</body>属性：scrollamount 速度
behavior 样式
2.8 图片标签
作用：在页面上，添加一张图片
用法：<img src="提取图片的地址" width="宽度" height="高度" align="相对于左右文字的位置">
图片的格式：jpg png 无损压缩的图片支持透明度 GIF 动图
2.9 表格
1、表格的作用
按照一定的格式摆放数据
表格是由一些被称为单元格的矩形框组成
按照从左到右，从上到下的顺序排列到一起组成的
2、创建表格
①定义表格<table></table>
②创建行 tr
③创建单元格 td
3、表格属性
table属性：
border：边框
cellspadding：单元格的内边距（单元格边框与内容之间的距离）
cellspacing：单元格的外边距（单元格之间的距离）
width：宽度
height：高度
align：对齐方式（整个表格）
bgcolor：背景颜色（纯色填充）
bordercolor：边框颜色
background：背景颜色
tr属性：行
tr是没有宽高属性的
align：水平对齐方式（内容）
valign：垂直对齐方式
td属性：列
width：每个单元格的宽度
height：每个单元格的高度
aling：水平对齐方式（单个单元格的内容）
valing：垂直对齐方式
<table border="1" cellspacing="0" height="500" width="500" align="center"
bordercolor="darkorange" bgcolor="lavenderblush" background="img/timg.jpg">
<tr align="center">
<td width="250" height="250">千寻</td>
<td>龙猫</td>
<td bgcolor="bisque">波妞</td>
</tr>
<tr valign="bottom">
<td><font color="darkorange">千寻</font></td>
<td valign="top">龙猫</td>
<td>波妞</td>
</tr>
<tr>
<td align="center"><b><font size="5">千寻</font></b></td>
<td valign="bottom">龙猫</td>
<td>波妞</td>
</tr>不规则表格的创建
行合并 colspa
列合并 rowspan
<table border="1" cellspacing="0" align="center" width="500px" height="500" >
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="6" colspan="2" width="40%"></td>
<td rowspan="6" colspan="3"></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td rowspan="3" colspan="2"></td>
<td rowspan="3" colspan="3"></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table> 2.10 转义字符
由<>包裹的文本 会当做标签去解析
 ； 空格 ©；版权符号
&emsp；
<；左尖括号
>；右尖括号
2.11 行内元素和块级元素
1、块级标签
默认情况下，每一个块级元素都是独占一行的 即元素的前后都会换行 都有align属性
2、行内元素
不会换行可以和其他的标签或文本在一行内显示
注意事项：p标签不能嵌套块级元素 w3c的规范一个段落里不能放另外一个文章
这是我上课时的笔记，代码也是根据知识点写出来了，是在HBuilder里写的，能不太准确，仅供参考哦！
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
