HTML5与CSS3权威指南笔记案例1

程序员文章站 2023-11-16 12:03:22

第1章第2章与`time`结合使用多个元素元素元素添加元素元素网页属性往后余生，唯独有你简书作者：达叔小生 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客： "https://www.jianshu.com/u/c785ece603d1" 结语 ......

HTML5与CSS3权威指南笔记案例1

第1章

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<meta charset = "utf-8">
<title> search </title>
<form>
<p>
 <label>search：<input name="search" autofocus></label>
</p>
</form>

HTML5与CSS3权威指南笔记案例1

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title> username </title>
</head>
<body>
<form>
<p>
 <label>username：<input name="search" type="text" id="search"></label>
</p>
<script type="text/javascript">
 document.getelementbyid(‘search’).focus()
</script>
</form>
</body>
</html>

第2章

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<meta charset="utf-8">
<title>html5</title>
<p>我是达叔
<br/>你好呀

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>contenteditable列表</title>
</head>
<h2>可编辑的列表项</h2>
<ul contenteditable="true">
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
</ul>

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>article元素</title>
</head>
<article>
 <h1>spinner</h1>
 <object>
 <param name="allowfullscreen" value="true">
<embed src="#" width="600" height="395"</embed>
</object>
</article>

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>section元素</title>
</head>
<section>
 <h1>达叔</h1>
 <p><b>dashucoding</b>，你好啊</p>
</section>

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>section下article元素</title>
</head>
<article>
 <h1>达叔</h1>
<p><b>dashucoding</b>，你好啊</p>
<section>
 <h2>达叔</h2>
 <p>达叔好啊</p>
</section>
</article>

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>包含article元素的section元素</title>
</head>
<section>
 <h1>达叔</h1>
 <article>
  <h2>dashucoding</h2>
  <p>哈哈哈哈哈哈哈</p>
 </article>
<section>

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>nav元素</title>
</head>
<body>
<h1>达叔小生</h1>
<nav>
 <ul>
  <li><a href="#">我的主页</a></li>
  <li><a href="#">我的技术博客</a></li>
 </ul>
</nav>
<article>
 <header>
  <h1>元素</h1>
  <nav>
   <ul>
    <li><a href="#html5">历史</a></li>
    <li><a href="#css3">我的设置</a></li>
   </ul>
  </nav>
 </header>
    <section id="html5">
        <h1>html5</h1>
        <p>html5的历史</p>
    </section>
    <section id="css3">
        <h1>css3</h1>
        <p>css3的历史</p>
    </section>
   <footer>
    <p><small>版权所有</small></p>
   </footer>
</article>

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>文章内的aside元素</title>
</head>
<body>
<header>
 <h1>h1</h1>
</header>
<article>
 <h1>达叔h1</h1>
 <p>哈哈哈哈</p>
 <aside>
  <h1>名词</h1>
  <dl>
   <dt>dashucoing的dt<dt>
   <dd>dd的表达</dd>
  </dl>
 </aside>
</article>
</body>

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>aside元素</title>
</head>
<aside>
 <nav>
  <h2>达叔</h2>
  <ul>
   <li><a href="#">dashucoding</a> a标签外</li>
   <li><a href="#">达叔小生</a> a标签外</li><br/>
       <a href="#">恭喜! 您成功开通了博客</a>
  </ul>
 </nav>
</aside>

putdate与time结合使用

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>putdate与time</title>
</head>
<article>
 <header>
  <h1>h1的苹果</h1>
  <p>dashu<time datetime="2010-2-22" putdate>2010-2-22</time></p>
 </header>
 <p>正文</p>
</article>

多个header元素

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>多个header元素</title>
</head>
<header>
 <h1>h1网页标题</h1>
</header>
<article>
 <header>
  <h1>header的h1文章中article的标题</h1>
 </header>
 <p>p标签正文</p>
</article>

header元素

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>header元素</title>
</head>
<article>
    <header>
        <h1>文章标题h1</h1>
        <p><time datetime="2018-03-20">2018年10月25日</time></p>
    </header>
    <p>文章正文</p>
</article>

hgroup元素

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>hgroup元素</title>
</head>
<article>
    <header>
        <hgroup>
            <h1>文章主标题h1</h1>
            <h2>文章子标题h2</h2>
        </hgroup>
        <p><time datetime="2017-05-20">2017-05-20</time></p>
    </header>
    <p>文章正文</p>
</article>

添加footer元素

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>添加footer元素</title>
</head>
<article>
    文章内容article
    <footer>
        文章的脚注footer
    </footer>
</article>

address元素

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
<meta charset="utf-8">
<title>address元素</title>
</head>
<address>  
    <a href=https://huangguangda.github.io/>个人博客</a> 
    <a href=http://www.cnblogs.com/dashucoding/>博客园</a> 
    <a href=https://juejin.im/user/5a16e1f3f265da43128096cb>掘金：</a>  
</address>

网页

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
  <title>网页</title>
  <meta charset="utf-8">
</head>
<body>
<!-- 网页标题 -->
<header>
    <h1>网页标题</h1>
    <!-- 网站导航链接 -->
    <nav>
        <ul>
            <li><a href="https://huangguangda.github.io/">首页</a></li>
            <li><a href="http://www.cnblogs.com/dashucoding/">博客</a></li>
        </ul>
    </nav>
</header>
<!-- 文章正文 -->
<article>
    <hgroup>
        <h1>文章主标题</h1>
        <h2>文章子标题</h2>
    </hgroup>
    <p>文章正文</p>
    <!--文章评论 -->
    <section class="comments">
        <article>
            <h1>评论标题</h1>
            <p>评论正文</p>
        </article>
    </section>
</article>
<!-- 版权信息 -->
<footer>
    <small>版权所有</small>
</footer>
</body>

form属性

HTML5与CSS3权威指南笔记案例1

<!doctype html>
<head>
  <title>form属性示例</title>
  <meta charset="utf-8">
</head>
<!-- form -->
<form id="testform">
<input type="text">
</form>
<!-- textarea可以 -->
<textarea form="testform"></textarea>

往后余生，唯独有你
简书作者：达叔小生
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客：

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

上一篇： Python中字符编码简介、方法及使用建议

下一篇： jquery如何给对象动态添加属性以及选择器、事件的绑定？（代码教程）

HTML5与CSS3权威指南笔记案例1

第1章

第2章

结语