欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端学习记录(一) 常见html标签(待补充)

程序员文章站 2022-03-03 07:50:30
...

目录

前言

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>

效果为:

前端学习记录(一) 常见html标签(待补充)

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

 效果为:

前端学习记录(一) 常见html标签(待补充)

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

在网页上显示为:前端学习记录(一) 常见html标签(待补充),点击将会在新的空白窗口打开百度网页 

<i>斜体标签

<b>加粗标签

<span>:对行内的文字进行一些样式以及其他的操作(待补充)

行内块标签

结合了行标签与块标签两者的特点,即多个行内块标签既可以在同一行中显示,又可以设置宽高与页边距(?)。本次学习到常见的行标签有以下几种:

<img>,<input>,<button>

<img>图片插入标签:

<img src="图片源文件(地址)"alt="图片未加载成功的提示文字">

<input>输入框标签:

<button>按钮标签:

    <button>按钮</button>

显示为:前端学习记录(一) 常见html标签(待补充) 

相关标签: 前端 html html5