HTML5第二课时

最新推荐文章于 2024-09-23 08:53:54 发布
最新推荐文章于 2024-09-23 08:53:54 发布
阅读量412 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36872096/article/details/63675430
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>第二课时</title>
</head>
<body>
<a name="top"></a><!--通过a标签添加一个锚点。锚点设置在哪，点击下方链接位置就跳转到哪。-->
<blockquote cite="www.baidu.com">
    《梦幻西游之偷天换日》、《扭转星辰》
</blockquote><!--引用标签表明引用来源-->
<p>----喘寺佛</p>
<hr>
<pre style="font-size: 32px;font-weight: bolder">
    pre怎么写，
就怎么显示，
一般用于写代码。
称之为《预格式》</pre>
<hr/>
<h3>注册步骤：</h3>
<ol><!--有序列表，修饰符是数字1.2.3……有序列表可以嵌套-->
    <li>填写信息。</li>
        <ol>
            <li>姓名</li>
            <li>性别</li>
            <li>年龄</li>
        </ol>
    <li>收电子邮件。</li>
    <li>注册成功。</li>
</ol>
<hr>
<h3>新人上路指南</h3>
<ul><!--无序列表：
1.修饰符是默认的实心圆。
2.可以嵌套：ul里面的li中的ul，会是空心圆。-->
    <li>如何激活会员名？</li>
        <ul>
            <li>填写帐号</li>
            <li>填写密码</li>
            <li>填写邮箱</li>
        </ul>
    <li>如何注册鬼魅会员？</li>
    <li>注册时的密码设置有什么要求？</li>
    <li>鬼魅认证。</li>
</ul>
<hr/>
<dl><!--定义列表：
        1.子标签分两个，dt，dd
        2.dt：列表的标题，没有缩进。
        3.dd：列表的描述，有缩进。-->
    <dt>咖啡</dt>
    <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料</dd>
    <dd>可以提神，刺激神经</dd><!--dt和dd之间，有缩进-->
</dl>
<hr/>
<dl>
    <dt><img src="../../image/mh.jpg" width="100px" height="140px"/></dt>
    <dd style="font-size: 30px;color: red;font-weight: bolder">作者：喘寺佛</dd>
    <dd style="font-size: 30px;color: red;font-weight: bolder">首发网站：起点中文网</dd>
    <dd style="font-size: 30px;color: red;font-weight: bolder">签约级别：A级签约</dd>
</dl><!--dt为图片，dd有缩进-->
<hr/>
<figure><!--组合标签-->
    <img src="../../image/mh.jpg" width="100px" height="140px" alt=""/>
    <figcaption>
        作者：喘寺佛。首发网站：起点中文网。签约级别：A级签约。
    </figcaption><!--图片和文字都有缩进，缩进对其。-->
</figure>
<hr/>
<div><!--盒子，分区标签，页面布局，可以嵌套。-->
    <div style="height: 80px">
        <img src="../../image/logo.png" alt=""/>
        <img src="../../image/logo_kouhao.png" alt="" align="center"/>
        <img src="../../image/logo_Tel2.png" alt="" align="right"/>
    </div>
    <div style="height: 40px;background-color: brown"></div>
    <div style="height: 100px;background-color: red;"></div>
</div>
<hr/>
<!--以上都是块级元素-->
<!--行级元素，以下除了p，都是行级元素。-->
<p>商品价格，仅售 <span style="font-size: 50px;color: red">10</span>元</p>
<!--span：
    1.用于包裹文本中的某一个或某几个字段，以方便添加样式。
    2.本身没有任何的样式。-->
<hr/>
<img src="../../image/mh.jpg" alt="图片不存在"
     height="210px" width="160px" title="小说" align="right"/>
    <!--img：
        1.src：用来指定显示的图片路径。
        2.alt：当指定的图片不存在时，提示相关的错误信息。
        3.title：当鼠标悬浮在图片上的时候，会显示title中的内容。
        4.align：指定图片显示的位置。
        5.height：指定图片的高度。
        6.width：指定图片的宽度。-->
<hr/>
<p>
    <em>em的实现效果</em>---展示
    <!--em：
        1.显示效果为倾斜，并且有强调的意思，可以更方便的被浏览器搜索到。-->
    <br/>
    <!--i：
        1.显示效果为倾斜，没有强调的意思。-->
    <i>i的实现效果</i>---展示
</p>
<p>
    <strong>strong的实现效果</strong>
    <!--strong：1.显示效果为粗体，并且有强调的意思，可以更方便的被浏览器搜索到。-->
    <br/>
    <b>b的实现效果</b>
    <!--b：1.显示效果为粗体，没有强调的意思。-->
</p>
<p>
    q的实现效果-----<q>q的实现效果</q>
    <!--q：带引号，可以更方便的被浏览器搜索到。-->
</p>
<p>small的实现效果---<small>small的实现效果</small>
    <!--相比与相邻的字体要小。-->
    <br/>
    big的实现效果---<big>big的实现效果</big></p>
<hr/>
<!--a标签三种功能：
                1.页面跳转。
                2.锚点链接。
                3.功能链接。-->
<a href="http://book.qidian.com/info/1005401550">页面跳转1</a>
<a href="../1/first.html">页面跳转2</a>
<a href="#top">返回顶部（锚点链接）</a>
<!--返回顶部要在前面设置一个锚点，锚点在哪，页面跳转到哪。跳转到锚点名称为top的位置。-->
<a href="mailto://534589850@qq.com">发邮件</a>
<a href="tencent://message/?uin=534589850">发消息</a>
<!--功能性链接：mailto://534589850@qq.com  给指定的邮箱发邮件。
              tencent://message/?uin=534589850  给指定QQ发消息-->
</body>
</html>
甲戌天火
关注
专栏目录
HTML5第六课时，盒子弧度
甲戌天火的博客
04-19 751
html> html> head lang="en"> meta charset="UTF-8"> title>盒子弧度title> style> #divmao{ width: 300px; height: 200px; margin: 0 auto; back
第二课时
JinnyZhou的博客
06-19 544
由于MySQL密码忘记了，一上午时间边重新装mysql边听课，哦豁还是没有装好，我有罪，我道歉，还好接着下午和第二天上午没课，缓冲了一下。 唉~我愧疚。 ...
a标签的三种功能及其属性的运用
甲戌天火的博客
04-06 2285
html> html> head lang="en"> meta charset="UTF-8"> title>a标签title> head> body> 标签三种功能： 1.页面跳转。 2.锚点链接。 3.功能链接。--> a href="http://book.qidian.com/
html5第十二课时，汇总
甲戌天火的博客
07-25 297
html> charset="UTF-8"> type="text/javascript"> //第一个月 兔子对数：1 //第二个月 兔子对数：1 //第三个月 兔子对数：2 //第四个月 兔子对数：3 //第五个月 兔子对数：5 //第六个月 兔子对数：8
HTML5第十四课时汇总
甲戌天火的博客
07-25 303
html> lang="en"> charset="UTF-8"> getelement系列方法 name="jerei">张三 class="JEREH">李四 id="wangWu">王五 class="JEREH">孙六 name="jerei">田七 id="changeBtn">变！！ var btn
html5第九课时，声明变量
甲戌天火的博客
05-23 3212
html> html> head lang="en"> meta charset="UTF-8"> title>声明变量title> script> /*var width1=11,width2=12;//声明变量，并且赋值。 alert(width1); alert(width2); width1=666;
【HTML编程技术】第15课时-HTML 表格
最新发布
xzs51job的专栏
09-23 679
在 中，使用 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
【HTML编程技术】第7课时-HTML 属性
xzs51job的专栏
09-20 600
属性是 HTML 元素提供的附加信息。属性总是以 name="value" 的形式写在标签内，是属性的名称，是属性的值。
HTML5第一课时
甲戌天火的博客
03-12 264
html>文档类型声明: 1:告诉浏览器当前页面使用的语法标准 2：浏览器按照声明的标准去渲染你的页面--> html>文档的开始--> head lang="en">内的标签--> meta charset="UTF-8">搜索声明文档类型和编码，搜索关键字和描述--> meta name="description" content="这是我在杰瑞教育的第一个网页"/>
第四单元第三课时软件的编写.docx
12-15
在HTML模板中，使用了Jinja2语法来动态渲染数据，如显示传感器的历史记录。 通过这样的实例，我们可以学习到如何设计一个简单的Web应用程序，包括数据的获取、处理和展示，以及如何利用数据库存储和检索信息。这些...
HTML网页设计新手入门教程（共32课时）
07-22
HTML网页设计教程第一章（概论）1【】HTML网页设计教程第一章（概论）2【】HTML网页设计教程第一章（概论）3【】HTML网页设计教程第一章（概论）4【】HTML网页设计教程第一章（概论）5【】HTML 资源太大，传百度网盘...
html5第九课时，变量交换
甲戌天火的博客
05-23 308
html> html> head lang="en"> meta charset="UTF-8"> title>变量交换title> script> /* document.write('输出手中的纸牌：'); var a=10,b= 8,c; document.write('左手的纸牌:'+a+''); doc
jq和js用mousemove获取鼠标当前位置
甲戌天火的博客
07-26 8811
html> lang="en"> charset="UTF-8"> jq获取鼠标的位置 div{ width: 500px; height: 500px; background-color: #585858; margin: 0; pa
jquery简单练习题目五个
甲戌天火的博客
07-26 3352
html> lang="en"> charset="UTF-8"> jq获取鼠标的位置 div{ width: 500px; height: 500px; background-color: #585858; margin: 0; pa
html5第十课时，判断输入的年份是否是闰年
甲戌天火的博客
07-24 2203
html> lang="en"> charset="UTF-8"> 判断输入的年份是否是闰年 type="text/javascript"> var year=parseInt(prompt('请输入年份')); (year%4==0&&year%100!=0)||year%400==0?alert(year+'是闰年'):alert(year
HTML5第十课时，计算个人所得税
甲戌天火的博客
07-24 1766
html> lang="en"> charset="UTF-8"> 计算个人所得税 type="text/javascript"> var n=parseInt(prompt('请输入基本工资')); var m=n>1000?n-((n-1000)*0.05):n; alert(m);
html第九课时，水仙花数
甲戌天火的博客
05-23 1685
html> html> head lang="en"> meta charset="UTF-8"> title>水仙花数title> script type="text/javascript"> var zhi1=prompt('请输入一个数'); var length=zhi1.length;//得到位数可以计算幂数。 va
HTML5第六课时，margin外边距
甲戌天火的博客
04-19 1223
html> html> head lang="en"> meta charset="UTF-8"> title>margin外边距title> style> *{ padding: 0; margin: 0; } /*标签选择器*/ div{
HTML5第六课时，超链接，伪类选择器
甲戌天火的博客
04-19 1023
html> html> head lang="en"> meta charset="UTF-8"> title>超链接,伪类选择器title> style> /*伪类选择器，必须按照以下的顺序去写，l,v,h,a*/ a:link{/*1.默认的链接状态。未访问状态。*/ color: pink;
HTML5入门教程：24小时训练指南
第二部分（Styling Your Web Page）涵盖了CSS的基础，讲解了CSS是什么（Lesson4）以及如何测试CSS（Lesson5），帮助读者理解如何为网页添加样式。 第三部分（Working with HTML Basics）详细讲述了HTML的基本元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值