了解HTML
- 是一种描述网页的一种语言
- 是一种超文本标记语言
- 不是编程语言,是一种标记语言
HTML5所包含的知识
HTML XHTML CSS CSS3 JavaScript jquery HTML5
HTML5的新特性
- 用于绘画的canvas标签 比较重要
- 用于媒介播放的video和audio 比较重要
- 对本地离线存储的更好的支持
- 新的特殊内容元素 比如:article,footer,header,nac,section
- 新的表单控件 比如:calendar,date,time,email,url,search
- 浏览器的支持 比较流行
HTML的基础知识
- 声明 表明html的版本 就是第一行的东西 doctype html5的声明
- 所有的代码包含在这里面
- 头部的东西 这里控制的是编码的格式
UTF-8是通用的编码格式 默认的是这个这个设置的是标题</li> <li><body> 身体里的东西 网页的内容都是在这里面</li> </ol> <h3>HTML的标签</h3> <ol> <li>HTML 标题 h1 --> h6 6种不同的标题 主要是文字的大小的区别</li> <li>HTML的段落 通过 p 来进行定义 通过p标签定义的段落是另起一行 定义的是新的一段文字</li> <li>HTML的超链接 a 来进行定义<br> <code><a href="http://www.baidu.com">百度</a></code> </li> <li>HTML的图片 img 来进行定义<br> <code><img src="图片的地址"></code> </li> </ol> <h3>HTML的元素 指的是从开始标签到结束标签的所有的代码</h3> <ol> <li><br / 空标签 换行的意思 开始新的一行</li> <li>空元素在开始标签中进行关闭</li> <li>大多数的HTML元素中可拥有元素</li> <li>大多数的HTML元素都是可以嵌套的</li> </ol> <h3>HTML的属性</h3> <ol> <li>标签可以拥有属性为元素提供更多的信息</li> <li>属性以键值对的形式出现<br> 比如 <code>href ="www.baidu.com"</code> </li> <li>常见标签属性<br> h1 :align 对齐的方式 left center right 默认的是居右<br> <code><h1 align="right">标题h1</h1></code><br> body :bgcolor 背景颜色<br> <code>background是设置背景图片的 bgcolor是设置的背景的颜色</code><br> a :target 固定在何处打开连接<br> <code>_self 默认的,不再开辟新的页面</code><br> <code>_blank 开辟新的页面,旧的页面仍然存在</code> <br> <code>_parent _top 这两个属性在框架的时候用到</code> </li> <li>通用属性<br> class :规定元素的类名<br> id :规定元素的唯一ID<br> <code>class 和 ID 主要的方便以后引用</code><br> style:规定元素的样式<br> title:规定元素的额外信息</li> </ol> <h3>HTML的格式化</h3> <ol> <li> <div class="image-package"> <div class="image-container" style="max-width: 320px; max-height: 334px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/43f750bbff66454b82cdd958f037bfef.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/43f750bbff66454b82cdd958f037bfef.png" width="320" height="334" alt="H5基础 1_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> html的格式化 </div> </div></li> <li> </li> </ol> <div class="image-package"> <div class="image-container" style="max-width: 273px; max-height: 214px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/3511814629d14757b47eb07579036535.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/3511814629d14757b47eb07579036535.png" width="273" height="214" alt="H5基础 1_第2张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Paste_Image.png </div> </div> <pre><code> 欢迎来到H5的学习<br/> <b>欢迎来到H5的学习</b><br/> <big>欢迎来到H5的学习</big><br/> <em>欢迎来到H5的学习</em><br/> <i>欢迎来到H5的学习</i><br/> <small>欢迎来到H5的学习</small><br/> <strong>欢迎来到H5的学习</strong><br/> 欢迎来到H5的学习<sub>欢迎来到H5的学习</sub><br/> 欢迎来到H5的学习<sup>欢迎来到H5的学习</sup><br/> <ins>欢迎来到H5的学习</ins><br/> <del>欢迎来到H5的学习</del><br/> </code></pre> <h3>HTML的样式</h3> <ol> <li>标签:<br> <style>:样式的定义<br> <link>:资源的引用 比如引用一些css的样式</li> <li>属性:<br> rel="stylesheet":外部样式表<br> type="text/css":引入文档的类型<br> margin-left:边距<br> 3.有三种插入方法:<br> <code>外部样式表: <link rel="stylesheet" type="text/css" href="mystyle.css"></code><br> <code>内联样式表: <p style = "color:red"></code> <br> 内部样式表:<br> <style type="text/css"><br> body {background-color:red}<br> p {margin-left:20px}<br> <style/></li> </ol> <h3>HTML的链接</h3> <ol> <li>链接数据:文本链接 图片链接</li> <li>属性:<br> <code>href属性:指向另一个文档的链接</code><br> <code>name属性:创建文档内的链接</code> </li> <li>img标签属性:<br> alt:替换文本属性 当图片不显示的时候显示这个<br> width:宽<br> height:高</li> <li><pre><code> ``` <a href="http://www.baidu.com" target="_blank">baidu</a> <a href="http://www.baidu.com" target="_blank"> <img src="html.png" height="20px" width="20px" alt="这是一个图片"></a> <a name="nihao">跳转到这里来了</a> <a href="#nihao">进行跳转的文档内的内容</a>``` </code></pre></li> </ol> <h3>HTML的表格</h3> <ol> <li> </li> </ol> <div class="image-package"> <div class="image-container" style="max-width: 402px; max-height: 304px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/00694cb0561f43e58754454077753702.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/00694cb0561f43e58754454077753702.png" width="402" height="304" alt="H5基础 1_第3张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 表格标签 </div> </div> <ol start="2"> <li><pre><code> <table border="1px" cellpadding="10" cellspacing="10" bgcolor="aqua"> <caption>我是标题</caption> <tr> <th>单元</th> <th>单元</th> <th>单元</th> </tr> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> </table> </code></pre></li> </ol> <p>3.一些属性:<br> cellpadding指的是单元格内容与边框的距离<br> cellspacing指的是单元格直接的距离<br> align:排列单元格内容的对齐方式</p> <h3>HTML的列表</h3> <ol> <li> </li> </ol> <div class="image-package"> <div class="image-container" style="max-width: 374px; max-height: 276px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/e84c0c29d14042c79ce9ec7e0a81a7b9.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/e84c0c29d14042c79ce9ec7e0a81a7b9.png" width="374" height="276" alt="H5基础 1_第4张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> html中的列表 </div> </div> <ol start="2"> <li>无序列表 使用标签 ol li</li> </ol> <blockquote> <p>属性:disc默认前标,这个是实体的圆的效果 cirle 空心圆的效果 square 方块的实体,也可以使用自定义的方式,使用CSS进行更改<br> <code><ul type= "disc"></code></p> </blockquote> <ol start="3"> <li>有序列表 使用标签 ol li</li> </ol> <blockquote> <p>属性:A 字母排序,大写的A开头 a 字母排序,小写的a开头 l大写的罗马数字排序 i 小写的罗马数字排序 start 默认的是数字,在这里规定数字的开始的第一位<br> <code><ol type="A"></code></p> </blockquote> <ol start="4"> <li>嵌套列表 使用标签 ul ol li</li> <li>自定义列表 使用标签 dl dt dd这个是描述</li> </ol> <h3>HTML 块</h3> <ol> <li>块元素</li> </ol> <blockquote> <p>块元素在显示的时候,通常会以新行开始 比如h1 p ul</p> </blockquote> <ol start="2"> <li>内联元素</li> </ol> <blockquote> <p>内联元素通常不会以新行开始 比如 b a img</p> </blockquote> <ol start="3"> <li>div 元素</li> </ol> <blockquote> <p>div元素也被称为块元素,其主要是组合HTML元素的容器 主要是使用CSS进行更改属性更改</p> </blockquote> <ol start="4"> <li>span元素</li> </ol> <blockquote> <p>span元素是内联元素,可以作为文本的容器<br> span元素与div元素的区别是span指定是文本的容器,div没有进行指定</p> </blockquote> <h3>HTML的布局</h3> <ol> <li>div元素布局<br> <head><br> <meta charset="UTF-8"><br> <title>Title
头部
内容主体
底部
- table元素布局
Title
这是头部
左菜单
- ios
- android
- html5
右菜单
底部