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. Docker 安装 PHP+Nginx

    安装Nginx docker pull nginx 安装PHP docker pull php:7.3.5-fpm 启动PHP-FPM docker run --name myphpfpm -v /d ...

  2. Visual Studio 安装时，共享组件、工具和SDK的路径无法更改解决方法

    Visual Studio 安装时,共享组件.工具和SDK的路径无法更改解决方法 解决方案: 找到电脑中Visual Studio 2019或其他版本的VS 的注册表,删除共享组件.工具和 SDK 的 ...

  3. uni-app学习笔记之----传参、通讯

    1.页面传参 父级页面传递参数到详情页: 详情页得到参数: 打印: 2.组件通信 (1)子组件---->父组件:$emit() (2)父组件---->子组件:props (3)兄弟组件: ...

  4. OnMicro BLE应用方案｜蓝牙语音遥控器-OM6621E

    随着物联网技术不断发展,家用电器往智能化方向持续迭代,使用红外遥控器这种传统的互动方式已经满足不了实际的使用需求,蓝牙语音遥控器作为人机交互新载体,逐渐取代传统红外遥控器成为家居设备的标配. 相比于传 ...

  5. Qt 按键添加图标

    1.开发环境:Qt5.12.2,QtCreate4.8.2 2.直接上代码 /* 按键上背景 */ QPixmap pixmap(":/Resourses/images/easyicon_n ...

  6. java创建对象时内存发生了什么

    Student s = new Student();\ 把Student.class文件加载到内存 在栈内存给s变量开辟一个空间 在堆内存为学生对象申请一个空间 给成员变量进行默认初始化 给成员变量显 ...

  7. Fedora 切换为阿里软件源

    1.备份原软件源配置 cp /etc/yum.repos.d/fedora.repo /etc/yum.repos.d/fedora.repo.bak cp /etc/yum.repos.d/fedo ...

  8. Java8 提供CompletableFuture来简化高并发异步处理编程

    (摘录自狂乱的贵公子)所谓异步调用其实就是实现一个可无需等待被调用函数的返回值而让操作继续运行的方法.在 Java 语言中,简单的讲就是另启一个线程来完成调用中的部分计算,使调用继续运行或返回,而不需 ...

  9. onActivityResult 解耦 不需要一层一层的写

    public abstract class AbsShareMessageTemplates implements IShareMessageTemplates { public final stat ...

  10. Nucmer+LINKVIEW实现序列水平的共线性分析

    https://www.cnblogs.com/johnsonzzz/p/15151634.html https://github.com/YangJianshun/LINKVIEW 可以绘制两个基因 ...