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. Selenium私房菜系列7 -- 深入了解Selenium RC工作原理(2)【II】

    继续前一篇的问题,为什么Selenium RC中的Selenium Server需要以这种代理服务器的形式存在?其实,这和浏览器的"同源策略"(The Same Origin Po ...

  2. （已解决）nginx+php 上传文件大小设置。

    1. 问题 上传文件过大报错,413 Request Entity Too Large. 2. 解决方法 修改配置文件,在以下两处: a. php.ini文件(php目录) 在File Uploads ...

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

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

  4. GO 语言中的 sync Map

    为什么需要 sync map go 语言之所以引入 sync.Map主要是因为GO 语言自带的 map 是线程不安全的.只能保证并发的读,但是不能保证并发的写. 看下面的例子: func main() ...

  5. debian安装mate桌面环境的方法(图)

    debian安装mate桌面环境的方法(图) 2018年11月11日   |   浏览: 5199   |  来源:www.yangshengliang.com   debian安装时是可以选择桌面环 ...

  6. scrcpy不使用adb远程控制android

    1.开启服务器 CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server 1.23 ...

  7. C# VS2019修改工程名

    1.修改解决方案的名称:选择解决方案的名称,右键重命名即可 2.修改项目名称,方法同上,不再赘述 3.修改项目的程序集名称和默认命名空间:选择项目,右键属性,弹出如下对话框 4.替换项目或解决方案中的 ...

  8. 12-K8S之调度器、预选策略和优选函数

    目录 调度器.预选策略和优选函数 1.nodeSelector nodeName调度: 2.节点亲和性调度(pod亲和于node节点) 3.pod亲和度调度(pod亲和于pod) 4.pod反亲和性度 ...

  9. 山寨e网通公告

    SHANZGONGG山寨e网通V1.0[换行]软件完全免费,官方绝不会索取任何费用,请勿被骗,后果自负.[换行]如果你有什么更好的建议或者需要哪里改进的地方,请联系作者QQ206044600反馈,前提 ...

  10. AWS RedShift实战应用SQL大全及经验分享[持续更新]

    文章目录 前言 - 关于RedShift 一.数据维护篇 1.1 表结构操作 1.2 数据添加与查询 1.3 数据修改与删除 1.4 事物操作 二.SQL结构篇 2.1 使用with封装代码 2.2 ...