懒癌患者的学习记录之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

相关文章

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

Servlet中配置和使用过滤器的步骤记录

《Servlet中配置和使用过滤器的步骤记录》:本文主要介绍在Servlet中配置和使用过滤器的方法,包括创建过滤器类、配置过滤器以及在Web应用中使用过滤器等步骤,文中通过代码介绍的非常详细,需... 目录创建过滤器类配置过滤器使用过滤器总结在Servlet中配置和使用过滤器主要包括创建过滤器类、配置过滤

正则表达式高级应用与性能优化记录

《正则表达式高级应用与性能优化记录》本文介绍了正则表达式的高级应用和性能优化技巧,包括文本拆分、合并、XML/HTML解析、数据分析、以及性能优化方法,通过这些技巧,可以更高效地利用正则表达式进行复杂... 目录第6章:正则表达式的高级应用6.1 模式匹配与文本处理6.1.1 文本拆分6.1.2 文本合并6

python与QT联合的详细步骤记录

《python与QT联合的详细步骤记录》:本文主要介绍python与QT联合的详细步骤,文章还展示了如何在Python中调用QT的.ui文件来实现GUI界面,并介绍了多窗口的应用,文中通过代码介绍... 目录一、文章简介二、安装pyqt5三、GUI页面设计四、python的使用python文件创建pytho

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用