HTML初体验之各种标签练习

HTML初体验之各种标签练习

首先是<!DOCTYPE>标签

放在网页顶部的doctype声明是让浏览器进入正确呈现模式的关键。浏览器自动切换到恰当的呈现模式,以便正确显示由doctype声明所指定的文档种类。doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。

!DOCTYPE html 是html5标准网页声明,全称为Document Type HyperText Mark-up Language,支持HTML5的浏览器都能识别这个声明,表示这是一个HTML5网页。

注意:每种标签都是成对出现的,有头必有尾

(头部)head、(主体)body为HTML的基本框架结构,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。

title为标题标签

center对其所包括的文本进行水平居中

h1~h6标签可以修饰页面的主标题(文字大小),其中h1的文字最大,h6的文字最小

p /p作为文字段落标签

&nbsp; 和&emsp为空格转义符,其中&emsp占一个字符宽度,一般不受字体影响

img 为图片标签,可以链接图片路径

当图片路径找不到时,需要使用alt属性进行设置来提示文字

一般图片、视频只用设置width(宽度),不用设置高度,以防画幅形变

<!DOCTYPE html>
<html>
    <head>
        <title>HTML基本标签学习</title>
    </head>
    <body>
        <!--这是一行html注释-->
        <!-- 快捷键是ctrl+/键 -->
        hello world
        <!-- 首先用center标签把所有内容包裹起来 -->

    <center>
        <!-- 数字越小,字体越大 -->
        <h1>【思政教学部】从娱乐圈乱象看历史虚无主义——记第二十三期鱼城热点研讨会</h1>
        <!-- 水平线标签  size属性可设置粗线,width可设置高度,建议使用百分比-->
        <hr size ="1px" width="80%" />
        <!-- 段落标签p -->
        <p>发布日期: 2021-10-19 浏览次数:5</p>
        <p>
            <!-- 空格转义符:&nbsp; -->
            <!-- 空格转义符:&emsp; 占一个字符宽度,一般不受字体影响 -->
            &emsp;&emsp;为帮助同学们树牢唯物史观,提高运用科学的历史观方法论分析问题和解决问题的能力,警惕和反对历史虚<br/>
            无主义,10月13日下午4点思政教学部政治理论教研室在我校鱼城书院,结合近段时间来娱乐圈频频发生的明星<br/>
            <!-- 使用<br/>进行换行 -->
            历史认识乱象,通过具体事例与理论相结合的方式,开展了鱼城热点研讨会第二十三期“从娱乐圈乱象看历史虚无主义”。
        </p>
        <!-- 插入图片,使用img标签 放在和html同一个文件夹里面-->
        <img src = "lisa.jpg" width = "400px" alt ="lisa太火啦"> 
        <!-- 需要指定src属性,src的值是图片所在位置 -->
        <!-- 当图片路径找不到时,需要使用alt属性进行设置来提示文字 -->
        <p>
            &emsp;&emsp;活动伊始,唐维惟老师对近段时间来娱乐圈出现的历史虚无主义事件进行了举例介绍,通过这些例证使同学们直观了解到历史<br/>
            虚无主义在日常和网络的泛滥,让同学们更加具体地认识到历史虚无主义给国家和青少年带来的深深伤害。
            唐老师针对明星历史认识乱象向同学们揭示了其背后的原因,她指出之所以会出现这样的情况主要在于部分明星自身对党和国家缺乏政治认同、
            <br/>对党带领全民族筚路蓝缕、披荆斩棘、取得辉煌成就的历史缺乏正确认识,从而在价值观上产生了偏差。唐老师勉励同学们<br/>
            作为当代青年不仅要认识到歪曲历史的险恶,更要勇于同这些歪曲历史的行为做斗争。
        <img src = "http://www.cqyti.com/__local/6/96/21/3015CDA62967793055E4247A70E_2D60D850_29707.jpg" width = "400px">    
        </p>

    </center>
    </body>
</html>
posted @ 2021-10-19 21:33  CHANGBUSI  阅读(154)  评论(0编辑  收藏  举报