HTML5基础

http://www.jikexueyuan.com/path/html5/

一、HTML5开发前准备

 1，为什么要学HTML5  ：跨平台运行，硬件要求低，flash之外的选择

2，软硬件环境 

3，介绍HTML5

1）HTML：秒杀网页的一种语言,不是编程语言，而是一种标记语言。

2）HTML5新特性

用于绘画的canvas标签、用于媒介回放的video、audio元素。本地离线储存更好支持、新的特殊内容元素、新的表单控件、浏览器的支持等等

4，开发环境

notepad＋＋， text  sublime，IDEA

二、HTML简介

1、学好HTML5 要学好以下知识：

HTML XHTML Css  Css3 JavaScript JQuery HTML5

2、基础讲解

1）声明：<!DOCTYPE>

    HTML也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确地显示出HTML页面。这就是<!DOCTYPE>的用处

  HTML5:

     <!DOCTYPE html>

  HTML4.0.1:

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1 Transitional//EN"

    "http://www.w3.org/TR/html4/loose.dtd">

   XHMTL1.0:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

三、HTML5元素、属性和格式化

1、元素指的是从开始标签到结束标签的所有代码

2、属性以键/值对的形式出现

如：href="www.jikexueyuan.com"

3、常用标签属性

    <h1>:align对齐方式

    <body>:bgcolor 背景颜色

     <a>:target规定在何处打开链接

4、通用属性：

class:规定元素的类名

id： 规定元素唯一ID

style：规定元素的样式（放在head中）

title:规定元素的额外信息

5、格式化

<b> 定义粗体文字

<big> 定义大号字

<em> 定义着重文字

<i> 定义斜体字

<small>定义小号字

<strong>定义加重语气

<sub> 定义下标字

<sup>定义上标字

<ins> 定义插入字

<del>定义删除字

四、样式 链接 和表格

1、样式

1）标签：

  <style>：样式定义

  <link>:   资源引用

2）属性:

rel ="stylesheet:"外部样式表

type="text/css"：引入文档的类型

margin-left:边距

3）三种样式表插入方法：

   外部样式表：

             <link rel="stylesheet" type="text/css" href="mystyle.css">

   内部样式表:

             <style type = "text/css">

              body {background-color:red}

 　　　　p {margin-left:20px}

　　　　　</style>

  内联样式表:

　　　　<p style="color:red">

2,链接

   1)链接数据 :

      文本链接 图片链接

2） 属性:

href 属性:指向另一个文档的链接

name属性：创建文档内的链接

3) img标签属性:

alt:替换文本属性

width：宽 height:高

3、表格

<table>定义表格

<caption> 定义表格标题

<tr>定义表格的行

<th>定义表格的表头

<td>定义表格的单元

<thead>定义表格的页眉

<tbody>定义表格的主体

<tfoot>定义表格的页脚

<col>定义表格的列属性

五、列表、快和布局

1、列表

<ol>有序列表

<ul>无序列表

<li>列表项

<dl>列表

<dt>列表项

<dd>描述

1)无序列表 

使用标签：<ul><li>

属性:disc,circle,square

2)有序列表

使用标签:<ol>、<li>

属性:A、a、I、i、start

3）嵌套列表

使用标签:<ul><ol><li>

4)自定义列表

使用标签:<dl> <dt> <dd>

2、块

1)HTML块元素

块元素在显示时，通常会以新行开始

如：<h1>、<p>、<ul> 

2)HTML内联元素

内联元素通常不会以新行开始

如<b>、<a>、<img>

3)HTML<div>元素

<div>元素也被称为块元素,其主要时组合HTML元素的容器(配合css样式一起使用)

4)HTML<span>元素

<span>元素是内联元素,可作为文本容器

3、布局

1)使用<div>元素布局

2)使用<table>元素布局

六、HTML 表单

1、表单

表单用于获取不同类型的用户输入

2、常用表单标签

<form>表单

<input> 输入域

<textarea>文本域

<label> 控制标签

<fieldset>定义域

<legend>域的标题

<select>选择列表

<optgroup>选项组

<option> 下拉列表中的选项

<button>按钮

3、常用表单

1)复选框  <input type="checkbox">

2)单选按钮  <input type="radio" name="sex">

3)下拉列表  

<select>
<option>www.baidu.com</option>
<option>www.google.com</option>
</select>

4)文本域   <textarea cols="30" rows="30">请输入信息</textarea>

5）创建按钮

<input type="button" value="提交"> 

七、HTML5框架、背景和实体

1、框架标签（frame）：（过时）

框架对页面的设计有着很大的作用

2、框架集标签<frameset>: （过时，不添加在body中）

框架集标签定义如何将窗口分割为框架

每一个frameset定义一系列行或列

rows/cols 的值规定了每行或每列占据屏幕的面积

3，常用标签：

noresize:固定框架大小

cols:列

rows:行

4、内联框架

iframe 

5,背景

1）背景标签 :background

2)颜色：bgcolor

6、实体

1)HTML中预留字符串必须被替换称字符实体

eg: <（&lt） 、>(&gt)、 &

七 XHTML

　　1，什么是XHTML

　　　　可扩展超文本标记语言

　　　　几乎与HTML4.0.1是相同的

　　　　是更严格更纯净的HTML版本

　　　　是以XML应用的方式定义的HTML

　　　　得到所有主流浏览器的支持

　　2、为什么使用XHTML

　　　　为了代码的完整性和良好性

　　3、三种类型

　　　　STRICT

　　　　TRANSITION

　　　　FRAMESET

posted @   尘恍若梦  阅读(240)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
点击右上角即可分享
微信分享提示
AI IDE Trae