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>

HTML初体验之各种标签练习的更多相关文章

  1. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  2. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  3. MarkDown初体验

    初体验 写在前面 一周前第一次听说了MarkDown这个编辑器,通过它知道了LaTex,正好满足了我多年对网上博客里的公式简陋的表达的需求.起初,只是用到了LaTex公式这一个功能 , 对于主要文字的 ...

  4. Knockout.js初体验

    前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...

  5. python窗体——pyqt初体验

    连续两周留作业要写ftp的作业,从第一周就想实现一个窗体版本的,但是时间实在太短,qt零基础选手表示压力很大,幸好又延长了一周时间,所以也就有了今天这篇文章...只是为了介绍一些速成的方法,还有初学者 ...

  6. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  7. Oracle SQL篇（一）null值之初体验

           从我第一次正式的写sql语句到现在,已经超过10年的时间了.我写报表,做统计分析和财务对账,我一点点的接触oracle数据库,并尝试深入了解.这条路,一走就是10年,从充满热情,到开始厌 ...

  8. iOS7 初体验

    iOS7 初体验 近日来由于iOS7的发布,引来业界的各种吐槽. 为了体验一把,我已经把iPhone5刷成了iOS7,也下载Xcode5-DP并进行了测试.我想说的是iOS7与Xcode5-DP中新增 ...

  9. FileTable初体验

    FileTable初体验 阅读导航 启用FILESTREAM设置 更改FILESTRAM设置 启用数据库非事务性访问级别 FileTable 在我接触FileTable之前,存储文件都是存储文件的链接 ...

  10. Scrapy 初体验

    开发笔记 Scrapy 初体验 scrapy startproject project_name 创建工程 scrapy genspider -t basic spider_name website. ...

随机推荐

  1. 12组-Beta冲刺-3/5

    一.基本情况 队名:字节不跳动 组长博客:https://www.cnblogs.com/147258369k/p/15599024.html Github链接:https://github.com/ ...

  2. 51电子-STC89C51开发板：安装驱动

    全部内容请点击目录列表查看: 51电子-STC89C51开发板:<目录> ---------------------------  正文开始  ---------------------- ...

  3. Raize

    Raize.v5和Raize.v6 本人在windows10下装有delphi7和delphi2010,安装好Raize.v6后,两个版本delphi的控件页都找不到Raize控件,即使想编译相应的D ...

  4. 虚拟机中debian11修改控制台(console)分辨率|linux控制台分辨率|linux console resolution

    实体机一般安装好驱动分辨率就没啥问题,而且个人pc也没有只用控制台的需求.但是虚拟机中不安装桌面的时候,默认的控制台分辨率常不能满足需求. 这个需求貌似也比较少,而且几乎搜到的文章大部分都是旧的,不能 ...

  5. MyLiveCam使用条款与免责协议

    MyLiveCam(以下简称"我们")在此特别提醒您务必认真阅读.充分理解本<使用条款与免责协议>(以下简称"本协议")中各条款并选择是否接受本协议 ...

  6. py常用模块

    02 collection模块 # 具名元组# 想表示坐标点x为1 y为2的坐标from collections import namedtuple# point = namedtuple('坐标', ...

  7. system verilog与C语言的接口(包含使用方法以及实例)

    资料来源 (1) sv绿皮书; (2) vcs user guide; (3) https://www.cnblogs.com/studyforever/p/5169243.html (4) syst ...

  8. qt creator 在ubuntu22.04下显示不正常处理

    打开:sudo vim /etc/gdm3/custom.conf 找到:#WaylandEnable=false 去掉注释,问题解决

  9. Django-django-celery的配置

    1.安装django-celery   pip install django-celery 2.添加配置 demos/demos/settings.py(我的项目名为demos,这里只是示范,切勿搞混 ...

  10. python学习：窗口程序

    https://www.cnblogs.com/zyg123/p/10385456.html # 导入tkinter模块 import tkinter # 创建画布需要的库 from matplotl ...