前端基础之html标签的最最基础总结

HTML—超文本语言

html作为一种超文本语言,最基础的概念便是各种标签,学习并理解这些标签,html的学习便算是跨过了第一道门槛。
HTML文件的大致结构
主要分为文档声明,头,体三部分,即< head>双标签包裹的内容与< body>双标签包裹的内容。
其中头部的作用主要是声明网页基本信息,包括网页标题,编码方式等
体部则是用于渲染网页,在视觉上最直观体现出网页效果的代码,也就是这一部分写的代码会被浏览器解析并渲染到页面上成为人们所看到的网页。
文档声明的作用是告诉浏览器这个文件的代码是用哪个html版本来编写的,浏览器才能渲染成功,一般写法为< !DOCTYPE html>,于文件最顶部声明即可。
构成网页骨架的各种标签

根据html文件头体部的作用可知,所有这些标签应该都是写在体部的,下面就来看看,这些构成网页的基石吧,ps:篇幅有限,一篇总结性博客写太多内容,一个是缺少方向性,太杂,第二个是自己和别人看起来都会不耐烦,所以这篇博客只是介绍一些常用标签的最基础用法

首先是 标题标签,从文字的大小降序依次为< h1>到< h6>这六个标签,标题标签都是双标签,写在标签内的文本内容就会被渲染成对应的标题样式
段落标签< p>< /p>,标签内写文本内容,虽然直接在< body>里写文本浏览器也会渲染到页面上,但是当你要对这些文本做一些样式的管控时,就需要借助段落标签。
文本标签< span>< /span>,作用与段落标签差不多,但是由于标签的特性不同存在本质区别,后续总结元素类型会讲道,这里先理解到它也是用于渲染文本的标签就行。
换行标签< br/>换行标签为一个单标签,在需要换行的标签后写上< br/>标签,渲染到网页上就能实现换行效果。
水平线标签< hr/>单标签,顾名思义,写了这个标签,网页上就会在标签对应的结构位置渲染出水平线。
加粗标签< b>双标签和< strong>双标签都能实现文本加粗效果,就是写在双标签里的内容在渲染出来时就有加粗样式。
倾斜标签< i>双标签和< em>双标签都能实现文本倾斜效果,内容渲染出来就有倾斜样式。
强制不换行< nobr>双标签,写在里面的内容不会换行
列表标签< ul>无序列表,< ol>有序列表,< dl>自定义列表
无序列表是每一列前面不会生成序号,而有序列表会生成序号
每一个列表双标签里的< li>双标签都代表一列,但自定义列表里面不是< li>双标签,而是< dt>和< dd>双标签,其中< dt>代表主题,< dd>就是描述这个主题的语句,其实看起来也是一列一列列表的效果。
图片标签< img/>图片标签为单标签,这个标签有几个属性比较重要,其中src属性就是图片的路径,alt属性是图片不能加载时的一个替代品,title是鼠标悬停在图片上会出现的文字
链接标签< a>a标签为双标签,实现跳转功能,有几个重要属性,其中href为要跳转到的网址,title也是鼠标悬停时出现的提示信息,target属性有两个值,一个为_blank,代表跳转后为一个新网页,_left为跳转的页面就显示在当前页面。
表格标签< table>双标签,关于表格扩展的内容会有点多,后面专门写一篇来介绍,这里就不赘述了,先了解这个标签里的< tr>代表行,每一个< tr>双标签里又有许多< td>双标签代表列即可。
表单标签< form>双标签代表表单标签,里面又包括了许多表单元素,所以扩展的内容也会很多,需单独开一篇来写,这里仅介绍一下常用表单元素。
< input />单标签,它有一个type属性,默认为text,也就是文本输入框,当type为password时代表是密码输入框,输入的信息会呈*隐藏起来,为submit时代表提交按钮,reset代表重置按钮,radio代表单选框,checkbox代表复选框,button代表普通按钮
< select>双标签是下拉框,其中每一个< option>双标签代表下拉框中的一列
< textarea>文本域,可以输入一堆文本信息,且这个文本域是可以拉动改变大小的,要是想让它大小固定,将属性resize的值改成none即可。
容器标签< div>双标签,我对于这个标签的理解就是它本身是没什么特殊作用,就是拿来作为容器,像一个个归纳盒一样,将网页的不同部分都由不同的div包裹起来,便于布局与调节管理。
到此,掌握这些标签,构造一个网页的基本骨架就不成问题了,如果想要实现更多功能,那肯定是远远不够的,所以继续学习吧。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值