前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

教你快速入门,了解html基本标签(html的标签该如何写)

标签是由:小于号+中间字符+大于号组成的代码(注:代码的所有字符都由英文字符组成)

作用是给用户展示特定内容或是告诉浏览器与搜索引擎关于网页的部分信息

									<!doctype html>

单标签<<!doctype html>只有开始标签

双标签<html></html>开始标签和结束标签成双出现

"/”:网页上如果某个标签的小于号后面有此符号的即为结束标签,没有此符号的则为双标签

<!----> 的专业术语称为注释标签

我们可以将一行代码的作用,含义,意图等信息写在这四个减号中间,让自己后期能够看懂之前写的什么

div标签的作用就在网页内容中间划分出若干个矩形区域,用以存放不一样的内容

网页中间有部分内容重要程度明显高于其他区域:比如网页标题,网页logo,新闻标题等,这些重要区域就使用h系列的标签来划分

h系列标签重要度按以下顺序:

h1>h2>h3>h4>h5>h6

ul( Unordered List )无序列表标签

网页中间还有一些内容相似、结构相仿、布局接近的区域,像这一类区域我们就使用无序列表来进行区域划分

ol( ordered lists )有序列表标签

网页中间还有一些内容相似、结构相仿、布局接近但是每个区域的内容是有先后关系的的区域,像这一类区域我们就使用有序列表来进行区域划分,这一类区域大多用在详细法律条文、政府公告、产品说明等内容上

dl( definition list )自定义列表标签

网页中间还有一些内容不完全一样、结构相仿、布局接近、每个区域的内容没有先后关系的的区域,像这一类区域我们就使用有自定义列表来进行区域划分,这一类区域大多用在专业名词条目的解释,或是网页底部信息分类等内容上

大段文字展示之p标签

标签的作用就是在网页内容中间划分出一个专门存放大段文字的区域

大段引用文字展示之blockquote标签

blockquote标签的作用就是:在网页内容中间划分展示大段引用自古典,古籍或是名人名言的区域

小行文字标注之span标签

span标签的作用就是在网页内容的大段文字中间标注一行或是数行文字,并给这些文字设置一些不一样的展示效果,比如:下划线,颜色

重要文字标注之strong标签

strong标签的作用就是在网页内容中的某段文字中间标注出特别重要的文字

注:

<em></em>标签的效果与strong类似,区别在于em标签包裹的文字重要性比strong标签低,但是em标签内的文字会产生倾斜效果

<i></i>标签的效果则是包裹一段文字,使被包裹的文字产生倾斜效果,但是被包裹文字的重要性不会有什么变化

跳转链接之a标签

href=“网页地址”: href是Hypertext Reference的缩写,意思是超文本引用,作用就是让我们可以点击网页的某些内容可以跳转到其他的网页上去

traget=“页面打开方式”: ‘_blank’新页面打开; _self 默认打开方式,当前页打开

网页图片展示之img标签

src=“图片地址”:src是sourse的缩写,表示我们需要显示的图片文件所在的位置

alt=“图片名称”:每个图片都是为了展示某些内容,alt里面的文字则是为了描述图片内容的

width=“图片文件的实际宽度”:用以标注图文文件的实际高度,此处高度数据不可修改,不可因为布局需要改成其他非实际尺寸

height=“图片文件的实际高度”:同下

img标签的文件地址代码详解

src: 路径写法,不能出现中文

相对路径: 从本地文件(该代码所在文件的当前位置)出发寻找到目标文件

./ (当前目录)

../(上级目录)

../../(上上级目录)类推

绝对路径:

从本地: D:/project/demo/pic.jpg

从网络: :https://www.baidu.com/img/blabla.jpg

网页图片展示之video标签

video标签的作用就是在网页上展示一个视频

文件,这个标签也是HTML5时代的一个代表性存在

src=“视频地址”:src是sourse的缩写,表示我们需要显示的视频文件所在的位置

controls=“controls”:这是视频文件的控制按钮区域

网页图片展示之audio标签

audio标签的作用就是在网页上展示一个音频文件,这个标签也是HTML5时代的一个代表性存在

src=“视频地址”:src是sourse的缩写,表示我们需要显示的视频文件所在的位置

controls=“controls”:这是音频文件的控制按钮区域

喜欢小编文章的可以点个赞关注小编哦,小编每天都会给大家更新文章。

我自己是一名从事了多年的web程序员,小编为大家准备了新出的web学习资料,免费分享给大家!

如果你也想学习web前端,那么帮忙转发一下然后再关注小编后私信“01”可以得到我整理的这些web资料了(私信方法:点击我头像进我主页有个上面有个私信按钮)

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言