HTML5基础(一)

新的网页结构

1、DOCTYPE声明
  HTML4中的DOCTYPE声明格式
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  HTML5中的DOCTYPE声明格式
    <!DOCTYPE html>

2、网页字符编码
在HTML5中的格式
    <meta charset=UTF-8" />

3、<header>元素:header元素表示页面中的一个内容区块或者整个页面的标题!

<header>用在页面的头部或者版块的头部</header>
<footer>用在页面的头部或者版块的底部</footer>

4、<nav>元素:nav元素表示页面中的导航链接部分。

<nav><a href="#">链接</a><a href="#">链接</a></nav>
<nav>
    <p><a href="#">binperson课堂</a></p>
    <p><a href="#">binperson课堂</a></p>
</nav>
<nav>
    <h2>精品课程</h2>
    <ul>
        <li><a href="#">javascript</a></li>
        <li><a href="#">html+css</a></li>
    </ul>
</nav>

<nav>
    <ul>
        <li>
            <a href="nav元素.html">首页</a>
        </li>
        <li>
            <a href="aside元素.html">aside</a>
        </li>
        <li>
            <a href="section元素.html">section</a>
        </li>
    </ul>
</nav>
<article>
    <header>
        <h2>
            NAV-1
        </h2>
        <nav>
            <li>
                <a href="section元素.html">section</a>
            </li>
            <li>
                <a href="新增的主体结构元素.html">新增的主体结构元素</a>
            </li>
        </nav>
    </header>
</article>
<article>
    <header>
        <h2>
            NAV-1
        </h2>
        <nav>
            <li>
                <a href="section元素.html">section</a>
            </li>
            <li>
                <a href="新增的主体结构元素.html">新增的主体结构元素</a>
            </li>
        </nav>
    </header>
</article>
<footer>
    <p>
        <a href="/">版权信息</a>
        <a href="/">站点帮助</a>
        <a href="/">联系我们</a>
    </p>
</footer>

5、<article>元素:article元素表示页面中的一块玉上下文不相关的的独立内容,比如一篇文章中的文章。

<article>主体</article>
<aside>和主体相关的附属信息</aside>

<article>
    <h1>产品</h1>
    <p>详细的产品列表</p>
    <section>
        <h2>产品A</h2>
        <P>产品A的介绍</P>
    </section>
    <section>
        <h2>产品B</h2>
        <p>产品B的介绍</p>
    </section>
</article>

<section>
    <h1>产品</h1>
    <p>产品的种类列表</p>
    <article>
        <h2>产品A</h2>
        <p>产品A的介绍</p>
    </article>
    <article>
        <h2>产品B</h2>
        <p>产品B的介绍p>
    </article>
</section>

6、<section>元素:section表示页面中的一块内容区块,比如章节的页眉、页脚等等。也可以和Hn(h1、h2..)等一起使用,标示出文档的结构!

<section>用来划分区域</section>

<section>
    <h1>这是一个Section元素</h1>
    <p>这里是一个内容区域</p>
    <section>
        <h2>A</h2>
        <P>A的内容</P>
    </section>
    <section>
        <h2>B</h2>
        <P>B的内容</P>
    </section>
</section>

7、<aside>元素:aside元素表示article元素的内容之外的,和内容相关的辅助信息!

<header>
    <h1>国庆节去成都看熊猫</h1>
</header>
<article>
    <h2>看熊猫去大熊猫基地</h2>
    <p>哪里有很多的熊猫</p>
    <aside>
        <h3>名词解释:</h3>
        <dl>
            <dt>熊猫基地</dt>
            <dd>大熊猫基地在四川卧龙</dd>
        </dl>
    </aside>
</article>

8、<footer>元素:footer表示页面或者是页面中的一块区域的页脚,比如存放文件的创建时间、作者、联系方式等等。

时间: 2024-10-19 20:10:57

HTML5基础(一)的相关文章

html5基础学习

html5基础: 1 声明:<!DOCTYPE html> 2 基本的结构: <html><head> <meta charset="utf-8" > <title>html基础.</title></head><body> php就业网:www.php91.net. </body></html> 3 标题: <h1>标题1</h1><h2

HTML5 基础语法

HTML5 基础语法 HTML 概述 超文本 Web 是一个超文本文件的集合,超文本文件是 Web 的基本组成单元,也被称为网页或 HTML 文档.Web 页等,通常是以 .html 或 .htm 为后缀的文件.Web 页之间通过超文本中的超级链接组织在一起. 什么是 HTML? HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言,由浏览器解释执行.使用带有尖括号的"标记"将网页中的内容逐一标识出来.HTML 的主要作用是用来设计网页,

HTML5基础知识学习笔记

1.Html5基础讲解 1.1HTML5基础标签: head:头标签,一般会将一些网页的基本配置和文件引用在head中设置: body:内容标签,里面是整个网页要展示内容部分: 1.2HTML5标题: h1-h6等,后面跟的数字越大,对应的标题的字体大小就越小: 1.3HTML5段落 p标签表示段落,在p标签中可以编写文字段落: 1.4HTML5连接 a标签表示连接,可以在里面设置点击之后跳转到其他url: 1.5HTML5图像 img标签表示图像标签,可以通过其设置图片展示: 1.6HTML5

二,细说 HTML5 之 HTML5 基础讲解 2

这是一个HTML5系列,主要是零基础的宝宝们快速认识与学习HTML5. HTML5 样式.链接和表格 1.HTML5 样式 标签 描述 <style> 定义样式定义 <link> 定义资源引用 <div> 定义文档中的节或区域(块级) <span> 定义文档中的行内的小块或区域 属性: 属性 描述 rel="stylesheet" 外部样式表 type="text/css" 引入文档的类型 margin 边距 三种样式

前端学习日记(2) —— HTML5 基础

复习下Web开发学习基础: 前端部分: HTML标签:Web页面的结构,包含了页面的主要内容部分, CSS:页面样式 JS:实现交互行为 后台部分: 前端提交请求到后台通过C#/PHP/JAVA/.net等等处理数据,实现与数据库数据交互 数据库: Sql sever等存放数据表,存放数据信息 HTML工具 关于文本编辑器的工具,不同人有不同见解,(当然应该很少有人用TXT文本文档编辑)主流的编辑器我都用过,Sublime Text.Atom.Eclipse.Notepad++.Dreamwar

一,细说 HTML5 之 HTML5 基础讲解

这是一个HTML5系列,主要是零基础的宝宝们快速认识与学习HTML5. 了解 HTML 1.什么是 HTML HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 注:标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页 2. HTML版本 版本 年份 HTML 1991 HTML + 1993 HTML 2.0

HTML5基础-新增标签+新增属性+布局案例

html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figcaption 定义figure元素的标题 footer 底部 dialog 对话框 使用习惯: header/section/footer > aside/article/figure/hgroup/nav > div embed可插入flash文件,但flash已经逐渐被淘汰,不建议使用 mete

HTML5基础(四)

新增和废除元素的认识 1.其他新增元素    1.新增的figure元素与figcaption元素 figure元素是一种元素的组合,带有可选标题.figure元素用来表示页面上一块独立的内容,如果将他从网页上删除不给我们的网页造成影响.  figcaption元素表示figure元素的标题,它属于figure元素,figcaption元素必须书写在figure元素内部,可以写在figure元素内的其他从属元素前面或后面.一个figure元素内最多只允许放置一个figcaption元素. <fi

html5基础学习(标签)

标签: <!--...-->注释 <!DOCTYPE>申明文档规范,在html5中是<!DOCTYPE HTML> <a>超链接,用法示例:<a href="https://www.baidu.com" target="_back">baidu</a> <a>的属性: <audio></audio>音频 <video></video>视

HTML5基础知识点

今天了解html,下面是我分享的有关html的基础知识点: ①什么是html? html是一种超文本标记语言(超文本标记标签) ②html标签是html中的最基本单位 也是最重要的部分,html标签分为单标签和双标签. 单标签</>   双标签<></> html中的一些常见标签 1,<br/>换行标签    2,<hr/>水平分割线标签   3,<p></p>段落标签     4,<pre></pre&