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. shell_Day06

    sed命令 Linux文本处理三剑客 之 sed sed stream EDite 作为行编辑器,对文本进行编辑(以行为单位进行编辑) 注意:sed编辑文件,却不改变原文件: sed的工作原理: 指定 ...

  2. 2023-03-01 Error: Invalid hook call.Hooks can only be called inside of the body of a function component.

    问题描述:rn项目使用钩子useState,详细报错如下: Error: Invalid hook call. Hooks can only be called inside of the body ...

  3. acl规则问题

    在acl规则中网络地址与广播地址包含在规则范围内

  4. UART4模板

    #define UART4_Bps 9600 #define UART4_RecSize 20 uchar UART4_RecData[UART4_RecSize];uchar UART4_Loc; ...

  5. 《计算机是怎么跑起来的》第十章 XML(可扩展标记语言)

    资料来源 (1) <计算机是怎么跑起来的> 注1:XML是Extensible Markup Language(可扩展标记语言)的缩写; 1.XML是标记语言 (1) 通常把通过添加标签为 ...

  6. java script--一些冷知识

    java script--一些冷知识 目录 java script--一些冷知识 布兰登·艾奇,JavaScript 创始人 java script logo json logo json node. ...

  7. vue element 可编辑表格行内验证

    <template> <div class="page-layout rataMdel"> <el-button type="primary ...

  8. 220205_问题解决_python批量创建变量及赋值

    220205_问题解决_python批量创建变量及赋值 当想要创建大量 变量名 有规律的变量.并为其有规律的赋值时,可以使用exec() 函数. exec 执行储存在字符串或文件中的 Python 语 ...

  9. EasyExcel工具使用

    pom文件: <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel< ...

  10. SVN创建自己的版本库

    1.创建版本库 第一:新建文件夹 第二:将新建文件与SVN建立关联(创建版本库) 直接选择OK 点击确定后文件夹图标也换了 该下的信息就是用来协助我们存储数据的(不是数据) 2.获取SVN库中的数据并 ...