懒癌患者的学习记录之HTML基础

2023-10-22 02:20

本文主要是介绍懒癌患者的学习记录之HTML基础,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

HTML超文本标记语言

基本结构

<!DOCTYPE html>
<!--告诉浏览器版本为html5-->
<html lang="en">
<!--代表HTML的根结点--><head><!--页签上显示的内容--><meta charset="UTF-8"><!--编码UTF-8表示中文--><meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>HTML</title><!--页签文字-->    <link rel="shortcut icon" href="seecen.ico"><!--在页签中显示图片--></head><body><!--内容,页面正文部分--></body>
</html>

命名规范

命名规范:
  1. 帕斯卡命名法 user name -> UserName
  2. 驼峰命名法 user name -> userName
  3. 匈牙利命名法 user name -> user_name

a标签

含义:超链接,点击后转跳到一个网页

注:必须要写href否则没效果

<a href="http://www.baidu.com">百度</a>

效果:百度

相关属性:
href 路径
target 目标
_blank 空白页
target="_blank"表示另外一个界面打开
target="_self"表示在当前界面打开
href="#d1"可以转跳到id为d1的元素所在的地方
href=“javascript:;” 可以取消链接的跳转,使其成为一个按钮使用


p标签

含义:段落标签独占一行
<p>标题</p><p>标题</p>

效果:

标题

标题


span标签

含义:容器,盒子, 不换行, 宽度默认和内容一致
<span>标签</span><span>标签</span>

效果:
标签标签


h标签

含义:标题标签,会加粗,独占一行
<h1>标签</h1>
<h2>标签</h2>
<h3>标签</h3>
<h4>标签</h4>
<h5>标签</h5>
<h6>标签</h6>

效果:

标签
标签
标签
标签
标签
标签

ul标签

含义:无序列表,容器,盒子,独占一行,必须和li一起配合使用 **相关属性:** type="square" 将前面的小圆点变成方形 type="circle" 将前面的小圆点变成空心圆 type="i" 将前面的小圆点变成罗马数字
<ul><li>1</li>	<li>2</li><li>3</li>
</ul>

效果:

  • 1
  • 2
  • 3

ol标签

含义:有序列表
<ol><li>1</li><li>1</li><li>1</li>
</ol>
<hr>

效果:

  1. 1
  2. 1
  3. 1

dl标签

<dl> <dd>dd</dd><!--缩进--><dt>dt</dt><!--顶格-->       </dl>

效果:
在这里插入图片描述

br标签

含义:单标签,换行符,代替回车键,独占一行
<span>标签</span> <br> <span>标签</span>

效果:
标签
标签


hr标签

含义:单标签,分隔线
<hr>

效果:


上面是效果

div标签

含义:块级标签,容器,盒子,独占一行, 宽度默认100%.
<div style="background:red; width:100px;height:100px;"></div>

效果:
在这里插入图片描述
注:其中style为div样式设置了宽100px,高100px,背景为红色,在默认效果下是看不见的,但是占了位置。

i标签

含义:斜体
<i>斜体</i>

效果:斜体


b标签

含义:加粗
<b>加粗</b>

效果:加粗


pre标签

含义:保留文本格式
<pre>         	《出师表》以恳切的言辞,针对当时的局势,	反复劝勉刘禅要继承先主刘备的遗志,开张圣听,赏罚严明,亲贤远佞        ,以完成“兴复汉室”的大业       ,表        现了                诸葛亮“北定中原”的        坚强意志和对蜀汉忠贞不二的品格。
三国时期,曹魏国力最强,孙吴次之,而蜀汉最为弱小。当刘备病卒于白帝城(今重庆奉节县东)时,他留给诸葛亮的是
</pre>

效果:
在这里插入图片描述


video,audio

含义:视频,音频

相关属性:
controls控制台
autoplay自动播放
muted 静音(视频中)


这篇关于懒癌患者的学习记录之HTML基础的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/258501

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

从基础到高级详解Python数值格式化输出的完全指南

《从基础到高级详解Python数值格式化输出的完全指南》在数据分析、金融计算和科学报告领域,数值格式化是提升可读性和专业性的关键技术,本文将深入解析Python中数值格式化输出的相关方法,感兴趣的小伙... 目录引言:数值格式化的核心价值一、基础格式化方法1.1 三种核心格式化方式对比1.2 基础格式化示例

redis-sentinel基础概念及部署流程

《redis-sentinel基础概念及部署流程》RedisSentinel是Redis的高可用解决方案,通过监控主从节点、自动故障转移、通知机制及配置提供,实现集群故障恢复与服务持续可用,核心组件包... 目录一. 引言二. 核心功能三. 核心组件四. 故障转移流程五. 服务部署六. sentinel部署

从基础到进阶详解Python条件判断的实用指南

《从基础到进阶详解Python条件判断的实用指南》本文将通过15个实战案例,带你大家掌握条件判断的核心技巧,并从基础语法到高级应用一网打尽,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录​引言:条件判断为何如此重要一、基础语法:三行代码构建决策系统二、多条件分支:elif的魔法三、

Python WebSockets 库从基础到实战使用举例

《PythonWebSockets库从基础到实战使用举例》WebSocket是一种全双工、持久化的网络通信协议,适用于需要低延迟的应用,如实时聊天、股票行情推送、在线协作、多人游戏等,本文给大家介... 目录1. 引言2. 为什么使用 WebSocket?3. 安装 WebSockets 库4. 使用 We

Unity新手入门学习殿堂级知识详细讲解(图文)

《Unity新手入门学习殿堂级知识详细讲解(图文)》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程

从基础到高阶详解Python多态实战应用指南

《从基础到高阶详解Python多态实战应用指南》这篇文章主要从基础到高阶为大家详细介绍Python中多态的相关应用与技巧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、多态的本质:python的“鸭子类型”哲学二、多态的三大实战场景场景1:数据处理管道——统一处理不同数据格式