前端学习记录(一) 常见html标签(待补充)
目录
前言
才华需配得上野心,对吧
本文创作于2021/7/17晚,同时也是本人开始进行前端学习的第一天,希望通过写专栏博客的方式,将自己学习到的知识点持续记录下来,这样也可以当做一个巩固的过程,不过作为一个还没入坑的新人来说,写的肯定是漏洞百出,如果能得到大家的纠正,不胜感激;
接下来让我们开始吧
html标签
html标签由一对<>符号所扩起来,大部分标签为成对出现的,也有单个出现的标签,成对出现的标签以</>为结尾
<head>作为配置属性
<title></title>所括内容为文档标题(网页标题)
<title>Demo1</title>
<body></body>所括内容为网页中显示内容,本文讨论的是这部分的标签
在<body>中,有两种注释方式(其实还是一种):
方式一:<!--注释内容-->
方式二(快捷键):command+?键(macOS系统)
行标签与块标签
html标签中,按照标签占据页面的方式(单独成行或在同一行内)与是否完整接受外边距设置,可以分为行标签,块标签与行内块标签
块标签
每个块标签在页面中单独占一行,也就是说总是在一行新行上开始显示,完整接受宽度width与高度height设置,外边距margin具有完整上下左右设置,本次学习到常见的块标签有以下几种:
<h1>,<div>,<ul>,<ol>,<p>
<h1></h1>标签:作为网页的标题标签,大小从h1到h6依次递减,如:
<h1>你好</h1>
<h2>世界</h2>
<h3>hello</h3>
<h4>world</h4>
效果为:
<div></div>容器标签:一对容器标签内可以放入多个标签进行整体控制,经常与CSS一起使用,来进行网页的布局操作,如:
<div class="parents">
<div class="div1">html</div>
</div>
<div>与CSS的联合操作将会在CSS:选择器中进行说明。
<ul></ul>无序列表标签:其中的元素以实心圆点作为开头,如:
<ul>
<li>1</li>
<li>2</li>
</ul>
效果为:
<ol></ol>有序列表标签
<p></p>段落标签
行标签
每个标签元素排列在同一行中显示,当元素超过浏览器宽度时才进行换行,大小宽高完全根据内容撑开,不接受width和height设置,外边距margin只有左右,没有上下。本次学习到常见的行标签有以下几种:
<a>,<i>,<b>,<span>,
<a></a>超链接标签:
<a href="将要跳转的地址" target="_blank">网页超链接处显示字样</a>
href:连接地址,空连接可以用"#"代替;
target :打开方式;_self在当前页面中打开,_blank在新的空白窗口打开,如:
<a href="https://www.baidu.com/" target="_blank">百度</a>
在网页上显示为:,点击将会在新的空白窗口打开百度网页
<i>斜体标签
<b>加粗标签
<span>:对行内的文字进行一些样式以及其他的操作(待补充)
行内块标签
结合了行标签与块标签两者的特点,即多个行内块标签既可以在同一行中显示,又可以设置宽高与页边距(?)。本次学习到常见的行标签有以下几种:
<img>,<input>,<button>
<img>图片插入标签:
<img src="图片源文件(地址)"alt="图片未加载成功的提示文字">
<input>输入框标签:
<button>按钮标签:
 <button>按钮</button>
显示为:
上一篇: 归并求逆序对【模板】
下一篇: 知识补充