HTML 5 笔记

HTML5 笔记

HTML5 笔记
- HTML5

HTML5

1.基本标签

1.开始标签

定义了文档的开始点盒结束点

<html>
    
</html>

2.头部标签

定义了文档的头部，包括了元信息，样式表，导入外部文档，编码，等；

<html>
    <head>
    </head>
</html>

3.标题标签title

定义了文档的标题

<html>
    <head>
        <title></title>
    </head>
</html>

4.主题标签

定义了文档的主题，及文档的所有内容

<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

5.元信息标签

定义了页面有关的元信息，包括搜索引擎的关键字和描述

<html>
    <meta>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

6.<!DOCTYPE>标签

声明位于html文档的第一行

<!doctype>
<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

2.HTML文本样式

1.标题文字-"h1-h6"

设置标签的标题

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

h1-h6字体大小依次降低，h1是最大的标题，h6是最小的标题

2.文字对齐-"align"

是文字或标题文本对齐

align="left/center/right";

left：左对齐

center：居中对齐

right：右对齐

3.文字字体-"face"

设置文本的字体

<font face="宋体">Test</font>

4.段落换行-"/br"

设置段落进行换行

此处换行<br>
哈哈哈

5.字体颜色-"color"

设置字体的颜色

<font color="red">test</font>

6.文字的上下标-"sup/sub"

-1.上标

设置文字数学公式中的上标

X<sup>2</sup>

-2.下标

设置文字数学公式中的下标

X<sub>4</sub>

7.文字删除线"s/strike"

对问题添加删除线效果

<strike>文字</strike>
<s>文字</s>

8.文字不换行"nobr"

设置文本过长超过浏览器视窗也不进行换行

<nobr>Test</nobr>

9.字体加粗"b"

设置文本字体加粗

<b>加粗文本</b>

3.HTML图片样式

-图片标签"img"

-给网页添加图片

<img src="....">

-水平间距

<img src="...." hspace="水平间距">

-图片大小

<img width="500px" height="400px">

-提示文字

<img title="提示文字">

-文字替换照片

当图片无法正常加载时，将会用一段文本歹徒图片

<img alt="这是一张好图">

-定义图片热区

推荐使用Dreamweaver软件，在banner图上进行定义热区

4.表格布局网页

1.创建表格

使用表格是进行排版网页内容的最佳手段

<table></table>

table:表格标签

tr：行标签

th：加粗列标签

td：默认字体列标签

2.表格的基本构成

行和列：横向行，纵向列

单元格：行列交叉的部分

边距：内容与边框之间的距离

间间：单元格和单元格之间的距离

边框：整张表格的边缘叫边框

表格的三元素：行、列、单元格

表格的嵌套：在表格的单元格中插入另一个表格

3.表格的标题

设置表格的标题

<caption></caption>

<table>
    <caption></caption>
    <tr>
    	<th></th>
        <th></th>
    </tr>
    <tr>
    	<td></td>
        <td></td>
    </tr>
</table>

4.表格表头

使用th标签来代替加粗的单元格，一般位于第一行进行加粗文本；

<table>
    <tr>
        <th></th>
        <th></th>
    </tr>
</table>

5.边框

给表格设置外边框

<table border="3px">
    
</table>

6.边框颜色

给表格的外边框设置颜色

<table bordercolor="....">
    
</table>

7.单元格间距

设置单元格和单元格之间的距离

<table cellspacing="10px">
    
</table>

8.内间距

设置单元格和文本之间的距离

<table cellpadding="10px">
</table>

9.行内背景色及行高大小

-1.设置行的背景颜色

<tr bgcolor="..."></tr>

-2.设置行的背景色

<tr height="..."></tr>

10.行内文字对齐方式

设置行内文本的对齐方式

<tr align="..."></tr>

11.设置表格背景

-1.表格背景颜色

给表格整体添加背景颜色

<table bgcolor="...">
    
</table>

-2.表格背景插入图像

让图像当表格的背景

<table background="...">
    
</table>

12.设置单元格样式

-1.设置单元格大小

<td width="..px" height="..px"></td>

-2.设置单元格的背景颜色

<td bgcolor=".."></td>

-3.设置单元格的边框属性

<td bordercolor=".."></td>

13.合并单元格

使用colspan和rowspan属性进行设置单元格的合并

-1.横向合并

<td colspan="2"></td>

-2.纵向合并

<td rowspan="2"></td>

5.列表及超链接

1.无序列表

特征：提供一种不编号的列表方式

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

-无序列表类型

为无序列表的项目符号进行更改

<ul type="Dise/Circle/Square">
    <li></li>
    <li></li>
    <li></li>
</ul>

Dise:实心圆形

Circle:空心圆形

Square:实心正方形

2.有序列表

有序列表使用有编号来编排项目。

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

-有序列表类型

更改有序列表的序号，默认是数字。

<ol type="1/a/A">
    <li></li>
    <li></li>
    <li></li>
</ol>

-start有序列表起始值

使用数字，英文字母给start属性赋值，对应的罗马数字

<ol start="..">
    <li></li>
    <li></li>
    <li></li>
</ol>

3.menu菜单列表

设计单列的菜单列表

<meau>
    <li></li>
    <li></li>
</meau>

使用方法和ul一样。

4.color设置列表字体颜色

单独设置列表中的文字颜色

<li>
	<font color="..">Test</font>
</li>

5.列表的嵌套

所指多于一级层次效果的列表，可以存在二级列表，以此类推，以实现多级项目列表的形式

<ol>
    <li>1
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>2</li>
    <li>3</li>
</ol>

6.超链接和路径

1.绝对路径和相对路径

-1.绝对路径

是指从根目录进行查找，一直到文件所处要经过的所有目录，目录名用反斜杠（\）隔开

如：D:\win94\min64\test.exe

-2.相对路径

是指从当前目录下的位置进行往下一级查询

如：./win98/min32/index.exe

2.创建超链接

-1.超链接的标签属性

标签很简单，只有一就是""

<a	href=".." name=".." title=".." target=".." accesskey=".."
   ></a>

href:链接地址

name：链接命名

title：给文字设置提示文字

target：设置目标窗口如何

accesskey：设置链接热键

-2.外部链接

链接到外部网站。

<a href="https://.."></a>

6.HTML5常用元素

--HTML5新增元素

-1."header"

设置页面中的导航条，或页面标题

<header></header>

-2."fhgroup"

设置页面中的区块标题

<fhgroup></fhgroup>

-3."footer"

设置页面中的内容脚注

<footer></footer>

-4."nav"

设置导航链接部分

<nav>
	<a></a>
    <a></a>
    <a></a>
</nav>

-5."video"

用于定义添加视频文件

<video></video>

-6."audio"

用于定义添加音频文件

<audio></audio>

video and audio相关属性

controls：显示播放文件时的控制条

loop：是否循环播放

muted：是否禁音

autoplay：资源加载后自动播放

playbackrate：设置播放速度

设置音量：valume（0-10）

-7."section"

用于定义文档中的节，如章节页面。

<section></section>

7.HTML表单

1.处理动作action

用于提交的地址

<form action="...">
    
</form>

2.表单名称name

给表单命名，不是必须属性，

<form name="..">
    
</form>

3.传送方式method

以何种形式将表单传送个服务器。

-1.get

<form method="get">
    
</form>

-2.post

<form method="post">
    
</form>

4.目标显示方式target

<form target="_blank/_parent/_self/_top">
</form>

-1._blank

载入一个未命名的浏览器窗口

-2._parent

和源父级浏览器地址在同一个窗口打开

-3._self