浅谈HTML知识体系

    xiaoxiao2026-01-04  8

    谈到上网,大多数人会先想到internet、浏览器,但是面对五彩斑斓的网页却没有过多的深究,甚至很多人觉得淘宝和一些小电影网站做的差不多,其实本质上还真是差不多,因为不管网页如何变化,它始终脱离不了html。HTML全称hypertext markup language,即超文本标记语言,专门用来编写网页文件的,使用了标签来标记,通过浏览器里面的html内核进行解析,html语言准备的标签没有特殊功能,只是给程序员提供了一些定义好的有意义的标签,使用它们可以展现一个什么样的效果,关于颜色样式就与它无关了,下面我们来对标签进行一下分类介绍。

    1、文档标记,这部分标签用来对整个文档进行身体的划分

    最外层的父节点<html></html>,使用html标签括起来的内容会被看做是一个完整的html文件内容,然后html内核会在这里面进行解析。

    头部<head> </head>,头部中含有标题标签<title></title>,head标签里的内容一般不会在页面中展示内容,主要写一些网页的信息,如标题<title>,还有解析相关内容

    身体<body></body>,body和头部是并列的两部分,这两部分组合在一起就形成了一个完整的html结构,body中的内容主要用来展示页面内容

    2、排版标记,这部分标签经过特殊处理,会根据程序员的需求来展示不同的显示效果

    <!-- -->:注释标签,注释中的内容不会被解析

    <p></p>段落标签,使用p修饰的内容表示段落,会上下各空出一行,开头会空两格,表示这里面的内容是一段连续的内容

    <hr/>分割线标签,插入一条水平横线

    <pre></pre>预设格式,此标签中的内容会保持原有的格式进行显示

    <br/>换行标签,换到下一行开头处

    3、字体标签(这一部分内容已经不建议使用)

    <h1></h1>...<h6></h6>标题标签 从1到6逐渐变小

    <font></font>字标签

    4、转义字符

    &nbsp:空格,代表一位,半个汉字

    &lt、&gt:小于大于号

    &copy:版权符号©

    5、列表标签

    <ul><li></li><ul>:无序列表,li列表项

    <ol><li></li></ol>:有序列表,列表前会加上序列号,默认数字1开始,可以通过style和start对起始值或类型进行修改

    <dl><dt></dt><dd></dd></dl>:多层自定义清单,dt是列表标题,dd列表项

    6、图形标记

    <image/>:图片标签,src可以找到图片源,width和height图片显示宽高,以px为单位,还可以使用百分比,title鼠标放到图片上的显示标题,alert图片出错时显示的文字提示内容

    7、超链接标签

    <a></a>:超链接标签,在a标签中放入的内容点击后会变色,可以在a中加入src属性,当点击内容后会跳转到src里对应的页面,如果跳转到外部地址需要写上完整的网络地址,如果是本项目中的页面,可以配合../找到对应文件内容(../代表上级父目录)

    a标签还可以当做锚使用,<a name="_bjsxt"></a>   <a src="#_bjsxt">点击跳转到_bjsxt</a>,这里#代表当前html文件中

    8、表格标签

    <table><tr><th></th><td></td></tr></table>

    table:代表一个表格,table中的spacing等属性可以操作表格的大小以及单元格之间的间距

    tr(table row):表行,代表一行

    th(table head):表头,使用th的单元格其实就是在td的基础上对字体进行了加粗,然后居中

    td(table data):表格数据,表示一个表格的一个单元格

    9、框架标签

    <frameset><frame></frame></frameset>

    frameset:框架集合,使用frameset可以替换body,在里面可以写任意多个frame,frameset的cols、rows属性可以设置里面的frame的显示大小以及宽高比例

    10、表单标签

    <form></form>

    form:表单标签,主要用来得到用户信息并且把用户信息向服务器上传时使用method属性控制提交方式,get/post,action提交的数据上传到哪里,一般配合input来使用

    <input></input>:input标签,使用type可以改变input完成各种各样的需求

    type="text":普通文本输入框

    type="password":密码输入框,隐藏输入的密码

    type="button":普通按钮

    type="checkbox":多选框

    type=“radio”:配合相同name可以实现选择互斥的效果,即单选框

    type="file":选择上传文件

    type="submit":执行表单提交

    type=“reset”:重置表单内的所有内容为初识状态

    下拉选框:<select name=""> <option>下拉选框的条目</option></select>

    文本域:<textarea></textarea>

    11、其他标记

    1、<meta></meta>:元标签,浏览器解析时会根据这里面的内容要求对html文件进行解析

    2、<link></link>:定义当前html文件与其他文件的关系,比如引入css文件<link type="text/css" href="test.css"">

    转载请注明原文地址: https://ju.6miu.com/read-1305654.html
    最新回复(0)