1. 首页
  2. 文章中心
  3. 前端

HTML的简介、文档结构及基本标记

54 阅读 0 评论
我是靠谱客的博主 缓慢乌冬面，最近开发中收集的这篇文章主要介绍HTML的简介、文档结构及基本标记，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

HTML的简介

  1. HTML是英文 HyperText Markup Language 的缩写，它的意思是"超文本标记语言"，用它编写出文档的文件的扩展名是“.html”或“.htm”（微软的操作系统），他是可供浏览器解释浏览的文件格式。你可以使用记事本，写字板或者是专业的IDE如：Dreamweaver等等编辑工具来编写HTML文件。
  2. HTML标记两端有两个符号“<”和“>”,这两个符号称为角括号。html标签通常是成对出现的，比如“”和“”，前一个是开始标记，后面的是结束标记，在开始和结束标记之间的的文本是元素内容。html标记是与大小写无关的，“”和“”所表示的意思的一样的。标记可以拥有自己的属性。属性他能够为页面上的HTML元素提供附加信息。
  3. 语言特点：
    超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（www）盛行的原因之一，其主要特点如下：
    1、 简易性：超级文本标记语言版本升级采用超级方式，从而更加灵活方便。
    2 、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
    3 、平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。
  4. 发展历史：
    标记语言
    超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
    HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
    HTML 3.2——1996年1月14日，W3C推荐标准
    HTML 4.0——1997年12月18日，W3C推荐标准
    HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
    HTML 5的第一份正式草案已于2008年1月22日公布，仍继续完善

HTML的文档结构

html的文档结构主要是有3部分组成的：
    1.<html></html>
    <html>标记用于html文件的最前面，用来表示html文件的开始。而</html>的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。
    2.<head>和</head>
    <head>和</head>构成html文件的头部部分，在此标记对之间可以使用<title> </title>和<script> </script>等等标记对，这些标记都是描述html文档相关信息的标记对，<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
    3.<body>和</body>
    <body>和</body>是html文档的主体部分，在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。
  • 案例演示：
<html>
        <head>
            <title>html的结构</title>
        </head>
        <body>
            <h1>我们现在开始学习HTML!!</h1>
        </body>
</html>

HTML的基本标记

META标记
  • META标记是html语言的head部分的一个辅助性的标记的，他位于head和title标记之间，他提供给用户不可见的信息。meta标记的用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie;可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字，还可以设置页面的自动刷新以及等级等等。
  • 设定文件字符集
1.Content-Type和Content-Language(设置文件字符集)
   说明：
        设定页面使用的字符集，用以说明主页制作所使用的文字以及语言，浏览器会根据此来调用相应的字符集显示page的内容。
   用法：
      <meta http-equiv="Content-type" Content="text/html,Charset=gb2312"> 
      <meta http-equiv="Content-Language"  Content="zh-CN">
   注意：
       该meta标记定义了html页面所使用的字符编码集是gb2312，就是国际汉字码。如果将其中“charset="gb2312"”替换成“BIG5”,则页面所使用的字符集就是繁体中文的编码（台湾）。

2、
  <meta name=“Author” content=“作者">
  <meta name=“Keywords” content=“关键字">
  <meta name=“Description” content=“描述”>
TITLE标记
  • 在头部的中，有另一组标签。打在这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。
  • 示例：
<title>这是我的html页面</title>
文字上的分割标记
  • 或许你会发现这样一个问题：我们已经在记事本里排版排的很漂亮，为何通过浏览器查看是就变了样子，那是因为浏览器不像word,他不认识Enter键或者空格键，所以当你按多少次空格，浏览器都会当作没看见一样。
  • 常用的分隔标记：
            强制断行标记“<br>”
            强制分段标记“<p>”
            空格“&nbsp”
  • 案例演示
例子1：<br>的使用
<html>
   <head>
      <title>文字上的分隔标记1</title>
   </head>
   <body> 
         为救李浪离家远。<br>    //换行，谁料皇榜中状元   会在下一行写出
         谁料皇榜中状元。
   </body>
</html>

例子2：<p>的使用
<html>
   <head>
      <title>文字上的分隔标记2</title>
   </head>
   <body>
      为救李浪离家远。<p>      //强制分段，谁料皇榜中状元   会在下一段写出
      谁料皇榜中状元。</p>
   </body>
</html>

例子3：空格的使用
<html>
   <head>
      <title></title>
   </head>
   <body>
      为救李浪离家远。&nbsp&nbsp&nbsp谁料皇榜中状元。   //两句话之间会有3个空格
   </body>
</html>
排版的标记
1.文字的置左，置右，置中
      在分段标记“<p>”在加上一些简单的属性设定，就可以让其的文字置左，置右，置中。
2.置中标记
 使用方法：
     <center>内容</center>
3.保持原始数
使用方法：<pre>内容<pre>据格式标记
  • 案例演示：
文字的置左，置右，置中
例子：
  <html>
     <head>
      <title>排版不标记</title>
    </head>
    <body>
    <p  align="left">为救李浪离家远。</p>     //置左
    <p  align="center">谁料皇榜中状元。</p>   //置中
    <p  align="right">女驸马</p>   			 //置右
   </body>
  </html>
  

说明：align是分段标记的属性之一，这个属性将来会常常在不同标记中出现，他的功能就是专门在设定“水平对齐的位置”，其常见的属性值有三个“align="left"”置左，“align=""center”置中，“align="right"”置右。

置中标记
例子：
   <html>
    <head>
    <title>置中标记</title>
    </head>
    <body>
     <center>为救李浪离家远</center>
    </body>
   </html>

说明:
    这是一个经常用到的标记，除了文字外，还有图片，表格等等一些其他的标记，任何可以显示在网页中的东西他都可以置之中。

保持原始数
 例子：
     <html>
     <head>
       <title>保持原始数据格式标记</title>
     </head>
      <body>
     <Pre>  
      为救李浪离家远
                 谁料皇榜中状元
     </pre>
      </body>
     </html>

  说明：
     利用“<pre>”标记可以将排版和格式后的内容原封不动的呈现出来。
字体标记
1.标题标记
使用方法：<h1>内容</h1>
2.设置字体标记
使用方法：<font  size=“2”  color=“red”  face=“黑体”>内容</font>
3.字体变化标记
使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
 <b></b>  加粗        <i></i>  斜体      <u></u>  底线
<kbd>用粗体等宽字体显示文字</kbd>
<var>用较小的固定宽度显示字体</var>
  • 案例演示：
标题标记
例子：
    <html>
     <head>
        <title>标题标记</title>
     </head>
      <body>
        <h1>标题1</h1>  <br>
        <h2>标题2</h2>  <br>
        <h3>标题3</h3>  <br>
        <h4>标题4</h4>  <br>
        <h5>标题5</h5>  <br>
        <h6>标题6</h6>  <br>
     </body>
    </html>

说明：标题的大小一共有6中，也就是从<h1>到<h6>,<h1>最大，<h6>最小。使用该标记时字体会变成粗体，并自称一行。


设置字体标记
例子：
 <html>
    <head>
     <title>文字字体设定</title>
    </head>
     <body>
     <font  size="4"  face="黑体"  color="red">为救李浪离家远</font>
     </body>
   </html>
字体变化标记
字体变化标记
     <b></b>  加粗
     <i></i>  斜体
     <u></u>  底线
     <sup></sup> 上标
     <sub></sub>  下标
     <blink><blink>  闪烁（IE浏览器没有效果）
     <em></em>  强调
     <strong></strong>  加强
分割线标记
分隔线标记
    使用:上一部分<hr>下一部分
   例子：
<html>
    <head>
     <title>背景颜色</title>
    </head>
     <body>
         abcdefg。<br>
     	<hr  color="red"  width="240"  size="2" noshade>  //红色分割线
       higklmn。
     </body>
   </html>
图片（img）标记
使用：<img  src="boy.jpg"  alt="haha" align="left" border="0"  height="56px" width="32px">
  • 案例演示：
<html>
    <head>
     <title>图片</title>
    </head>
     <body>
       <img  src="boy.jpg"  alt="haha" align="left" border="0“   height="56px"        width="32px">   //src需要图片的路径
     </body>
   </html>
序列标记
1.无序列表< ul>
2.有序列表 <ol>
3.自定义列表 <dl>
  • 案例演示：
1.无序列表
       例子：
 <html>
    <head>
     <title>无序列表</title>
    </head>
      <ul>
      <li>姓名：jock
      <li>生日：1989/4/9
      <li>星座：天蝎座
      </ul>
     </body>
   </html>
  
  说明：其中<ul>就是无序列表，没增加一列内容，就需要加一个<li>;
    可以为 <ul>添加属性type="disk"(实心点)，type="square"(小正方形)type="circle"(空心点)


2.有序列表
        例子：
<html>
    <head>
     <title>有序列表</title>
    </head>
      <ol>
      <li>姓名：jock
      <li>生日：1989/4/9
      <li>星座：天蝎座
      </ol>
     </body>
   </html>

说明：其中<ol>就是无序列表，没增加一列内容，就需要加一个<li>;
    可以为 <ol>添加属性type="1"(数字)，type="A"(大写字母)，type="a"(小写字母)，type="I"(大写罗马)，type="i"(小写罗马)；
   
例子： 可以指定序列的开始数目。
<html>
    <head>
     <title>有序列表</title>
    </head>
      <ol start="8">
      <li>姓名：jock
      <li>生日：1989/4/9
      <li>星座：天蝎座
      </ol>
     </body>
   </html>

3.自定义列表
    例子：
    <html>
    <head>
     <title>有序列表</title>
    </head>
      <dt>咖啡</dt>
       <dd>黑色热饮</dd>
       <dt>牛奶</dt>
        <dd>白色冷饮</dd>
     </body>
   </html>
特殊字符
html中有很多特殊的字符是需要特殊的处理。
转义字符
     &lt：<        &gt：>         &amp：&           &qout：“   &nbsp：空格
超链接
  • 1.连接到其他的文档
    2.网页的内部链接
    3.网页的外部链接
    4.图片的锚点链接
  • 案例演示
1.连接到其他的文档
例子：
<html>
 <head>
   <title>超链接1</title>
  </head>
<body>
   <a href=“特殊字符.html“ target=”_blank”>连接其他文件</a> target=“_self” 在自身窗口打开
 </body>_
</html>

这里需要注意的就是文件的路径，这里我用的是相对路径

绝对路径：是指从根目录到文件的完整路径。
相对路径：是指相对于当前文件的文件位置。

2.网页的内部链接
  例子：
<html>
 <head>
   <title>超链接2</title>
 </head>
  <body>
    <a  href="#c7">查看章节7</a>
    <h2>章节1</h2>
         <p>该章节是关于。。。。。。。。。。</p>
    <h2>章节2</h2>
         <p>该章节是关于。。。。。。。。。。</p>
    <h2>章节3</h2>
         <p>该章节是关于。。。。。。。。。。</p>
     
    <h2>章节4</h2>
         <p>该章节是关于。。。。。。。。。。</p>
    <h2>章节5</h2>
         <p>该章节是关于。。。。。。。。。。</p>
    <h2>章节6</h2>
         <p>该章节是关于。。。。。。。。。。</p>
     <a name="c7">
    <h2>章节7</h2>
         <p>该章节是关于。。。。。。。。。。</p>
      </a>
    <h2>章节8</h2>
         <p>该章节是关于。。。。。。。。。。</p>
  </body>
</html>

3.网页的外部链接
  例子：
<html>
 <head>
   <title>链接的外部文件</title>
 </head>
 <body>
   <a  href="http://www.baidu.com">链接的百度</a>
  </body>
</html>


4，通过CSS去掉 超链接的下划线
<style>

a:link{
	
	color:red;
	text-decoration:none;
}
a:visited{
color:yellow;
	text-decoration:none;

}
a:hover{
color:green;
	text-decoration:none;
}
a:active{
color:#33ff33;
	text-decoration:none;

}

五：图片的锚点链接
//给图片设置热点链接
<img src=“img/mainbg.jpg” width=“500px” height=“500px” align=“absmiddle” usemap=“#Map” />注意使用 usemap
<map name="Map" id="Map">
			
           <area shape=“rect” coords=“47,67,187,140” href=“http://www.baidu.com”/> 几个数字 代表矩形的 xy 坐标 以及矩形的长宽
			
           <area shape=“circle” coords=“300,400,300” href=“http://www.baidu.com” target=“_blank”/> 几个数字代表 圆形的xy坐标 以及圆点半径
</map>
表格
表格的结构
      1.<table>
        <table>...</table>是用来在html页面上创建表格的。
	  2.<th>代表列名一般放在第一行
      3.<tr>代表格的一行。
      4.<td>用来定义表格的一列。
      在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。
表格的设置
表格的合并
		<td rowspan="5">商品图片</td>    //纵向合并5个表格，包括自己
		<td colspan="2">加入购物车</td>  //横向合并2个表格，包括自己
  • 案例演示：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="" align="center" height="500px" width="500px">
			<tr>
				<td rowspan="5">商品图片</td>
				<td>商品名称</td>
			</tr>
			<tr>
	
				<td>商品价格</td>
			</tr>
			<tr>
			
				<td>商品描述</td>
			</tr>
			<tr>
			
				<td>商品规格</td>
			</tr>
			<tr>
			
				<td>购买数量</td>
			</tr>
			<tr>
				<td colspan="2">
					<button type="button">加入购物车</button>
				</td>
			</tr>
		</table>
	</body>
</html>
input标签
<input />标签的 type分为：
text -文本框
button -按钮
submit-提交
reset-重置
password -密码
checkbox-多选
radio-单选
file -上传文件
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）


写法：
文本输入框
<input type = “text” value=“”/>
邮箱输入框
<input type="email" name="user_email" />
数字输入框
<input type="number" name="points" min="1" max="10" />
数字范围输入框（进度条）
<input type="range" name="points" min="1" max="10" />
颜色选择框
<input  type="color" name="colortext"/><br>

注意：只有部分浏览器支持所有type类型
要想点击文字选中按钮要配合 label 标签
<input type="radio" id="sex" name="aa"/><label for="sex">男</label>
<input type=“radio” id=“wm” name=“aa”/><label for=“wm”>女</label>
Select标签
<select>
        <option   value="qxz"  selected/>请选择
        <option   value=“A”/>苹果
        <option   value=“B”/>香蕉
        <option   value=“C”/>橘子
        <option   value=“D”/>西瓜
</select>

TEXTAREA便签
<TEXTAREA  ROWS="5" COLS="30"  ></TEXTAREA >
表单
1.表单的用途
     表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了。
2.表单构成
     <form></form>
     <form></form>标记是用来创建一个表单，在标记之间一切都属于表单里的内容。
     <from>标记具有action，metnod,target属性。 action属性是处理处理程序的程序名称。method属性是用来定义处理程序的从表单中获取信息的方法，通常有两种分别是GET和POST两种。
      target属性用来制定目标窗口的。
3.表单的工作原理：
      1.访问者填写表单，并提交给web服务器处理；
      2.在web服务器上的后台处理程序对提交后的数据进行处理；
      3.后台处理程序处理完成后，会重新生成一个新的html页面发给客户端。
4.表单中的各种组件
（1）.文本框
   例子：
<html>
  <head>
     <title>表单中的文本框</title>
  </head>
  <body>
   <form>
      姓名：<input  name="username"  type="text"  size="20" maxlength="5"  value="请输入"/>
   </form>
  </body>
</html>

name="username"    文本框的名称
type="text"        该属性是确定文本框的形态
size="20"          文本框的宽度
maxlength="5"      可输入的最大长度
value="请输入"     预设值


（2）.密码框
 例子：
<html>
  <head>
     <title>表单中的密码框</title>
  </head>
  <body>
   <form>
      密码：<input  name="username"  type="password"  size="20" maxlength="5"  value="123"/>
   </form>
  </body>
</html>

name="username"    密码框的名称
type="text"        该属性是确定密码框的形态
size="20"          密码框的宽度
maxlength="5"      可输入的最大长度
value="请输入"     预设值


（3）.单选按钮
  例子：
<html>
  <head>
     <title>表单中的单选按钮</title>
  </head>
  <body>
   <form>
   男<input  name="sex"  type="radio" value="boy"/>
   女<input  name="sex"  type="radio" value="girl"  checked/>
   </form>
  </body>
</html>

name="sex"  单选按钮的名称
value="boy"  单选按钮的值
type="radio"  该属性是确定单选按钮的形态
checked    设置选中

（4）.复选框
例子：
<html>
  <head>
     <title>表单中的复选框</title>
  </head>
  <body>
   <form>
    爱好：
     <input  name="storp"  type="checkbox" value="movie"  checked/>电影
     <input  name="storp"  type="checkbox" value="book" /> 看书
   </form>
  </body>
</html>

name="storp"  复选框的名称
type="checkbox"  该属性是确定复选框的形态
value="movie"     复选框的值
checked      设置选中

（5）.下拉列表
例子：
<html>
  <head>
     <title>表单中的下拉列表</title>
  </head>
  <body>
   <form>
      请选择你最喜欢的种族：
       <select  name="mx"   multiple  size="1">
        <option value="qxz"  selected/>请选择
        <option   value="sz"/>兽族
        <option   value="rz"/>人族
        <option   value="wlz"/>亡灵族
        <option   value="jlz"/>精灵族
      </select>
   </form>
  </body>
</html>

name="mx"  复选框的名称
multiple   设置多选
size="1"    列显示几个选项
value="qxz"  复选框的值
selected  设置选中

（6）.文本域
例子：
<HTML>
 <HEAD>
  <TITLE> 文本域 </TITLE>
 </HEAD>
 <BODY>
  <form>
   意见：
    <TEXTAREA NAME="yijian" ROWS="3" COLS="20"  wrap="off"></TEXTAREA>
   </form>
 </BODY>
</HTML>

NAME="yijian"  名称
ROWS="3"  行数
COLS="20"  列数
wrap="off"   该属性有三种取值off(输入文字不自动换行)
                             virtual(输入文字自动换行，在用户没有自动按下回车，向后台发送时，视为没有换行)
                             physical(输入文字自动换行，向后台发送时，视为有换行)

（7）.文件域
例子：
<HTML>
 <HEAD>
  <TITLE> 文件域 </TITLE>
 </HEAD>
 <BODY>
  <form>
   <input name="file"  type="file">
   </form>
 </BODY>
</HTML>

（8）.图片域
例子：
<HTML>
 <HEAD>
  <TITLE> 图片域 </TITLE>
 </HEAD>
 <BODY>
  <form>
   <input name="pt"  type="image" src="F:图片刀刀刀刀狗1.jpg"  width="300"  height="400" border="1">
   </form>
 </BODY>
</HTML>

（9）.普通按钮
例子：
<HTML>
 <HEAD>
  <TITLE> 按钮 </TITLE>
 </HEAD>
 <BODY>
  <form>
   <input name="anniu"  type="button" value="send">
   </form>
 </BODY>
</HTML>

（10）.提交按钮
例子：
<HTML>
 <HEAD>
  <TITLE> 提交按钮 </TITLE>
 </HEAD>
 <BODY>
  <form>
<INPUT  name="anniu" TYPE="submit"  value="提交">
  </form>
 </BODY>
</HTML>

（11）.重置按钮
<HTML>
 <HEAD>
  <TITLE> 重置按钮</TITLE>
 </HEAD>
 <BODY>
  <form>
<INPUT name="anniu" TYPE="reset" value="重置"  >
   </form>
 </BODY>
</HTML>

（12）.隐藏域
例子：
<HTML>
 <HEAD>
  <TITLE> 隐藏域 </TITLE>
 </HEAD>
 <BODY>
  <form>
<INPUT TYPE="hidden" NAME="H1" value="love">
  </form>
 </BODY>
</HTML>
框架
混合框架
<html>
 <head>
 <title>框架页示例</title>
 </head>
<frameset rows="50%,50%">
	<frame src="http://www.baidu.com">
	<frameset cols="25%,75%">
		<frame src="http://www.sina.com.cn">
		<frame src="http://www.baidu.com">
	</frameset>
</frameset>
</html>
多媒体标记音频
1、HTML4多媒体
         <embed src="文件源" width="宽度"    autostart="true"  loop="true">
         src        设置文件源
         width    设置宽度
         autostart   设置是否自动播放，如果是true就是自动播放，是flase不自动播放
         loop     设置是否循环播放true就是循环播放，false就是不自动播放
2、HTML5多媒体
<audio src="G:Media霍比特人3：五军之战.mp4" controls="controls"></audio>
3、添加背景音乐
<bgsound src="明月几时有.mp3" loop=5>
多媒体标记视频
视频标签
<video src="G:Media霍比特人3：五军之战.mp4" width="320" height="240" controls="controls">
</video>
control 属性供添加播放、暂停和音量控件。
Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。

最后

以上就是缓慢乌冬面为你收集整理的HTML的简介、文档结构及基本标记的全部内容，希望文章能够帮你解决HTML的简介、文档结构及基本标记所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(36)

相关文章

解决LaTex中插入Visio画图有多余边框的问题
解决LaTex中插入Visio画图有多余边框的问题
Adobe Acrobat 裁剪pdf
Adobe Acrobat 裁剪pdf
latex 论文绘图： 图像文字重叠
latex 论文绘图： 图像文字重叠
LaTeX格式模板二-插入图片
LaTeX格式模板二-插入图片
HTML的简介、文档结构及基本标记
HTML的简介、文档结构及基本标记
Latex Visio画图边框删除
Latex Visio画图边框删除
texwork 伪代码_Latex论文elsevier，手把手如何用Latex写论文
texwork 伪代码_Latex论文elsevier，手把手如何用Latex写论文
Word在转PDF的过程中如何创建标签快速方便阅读（图文详解）
Word在转PDF的过程中如何创建标签快速方便阅读（图文详解）

评论列表共有 0 条评论

立即
投稿
返回
顶部