浅谈HTML知识体系

来源：互联网发布：高中软件贴吧编辑：程序博客网时间：2024/05/22 21:08

谈到上网，大多数人会先想到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：代表一个表格，table中的spacing等属性可以操作表格的大小以及单元格之间的间距

tr(table row)：表行，代表一行

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

td(table data)：表格数据，表示一个表格的一个单元格

9、框架标签

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

10、表单标签

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

0 0