HTML初步入门

最新推荐文章于 2024-07-18 13:52:01 发布
最新推荐文章于 2024-07-18 13:52:01 发布
阅读量115 收藏 1
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/lixiaopan/p/6142220.html
版权

标签元素

标签介绍

html元素包括一个或一对标签定义的包含范围。而标签就是由两个字符串“<”和“>”号组成，标签包括开始标签“<>”和结束标签“</>”。

html标签元素有四种形式分别是：

空元素：<br>

带有属性的空元素：<hrfont="red">

带有内容的元素：<titile>这是内容</titile>

带有内容和属性的元素:<fontcolor="red">这是内容</font>

这里有一点要说的是在html文档中，标签和属性的名字是和大小无关的。

 

html框架的必备基本元素

<html></html>表示文档的开始和文档结束

<head></head>表示文档头部的开始和结束

<title></title>表示文档标题的开始和结束

<body></body>表示文档的正文的开始和结束

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>　

html注释

格式是小于号（<），感叹号（!）小于号和感叹号间无空格，接下来是两条短线（--）,然后就是注释内容，最后又是两条短线（--）和大于号（>）。

如：<!--这是注释内容-->

 

<html>
	<head>
		<meta charset="utf-8" />
		<!--这是注释内容-->
		<title></title>
	</head>
	<body>
		
	</body>
</html>

　　

与段落控制相关的标签

<palign="#">

创建一个段落，属性align表示段落的对齐方式，#可以是left、center、right、justify。

<br>

作用是换行

<hrcolor="#">

作用是插入一条水平线，属性color用来表示颜色。

 

<BODY>
<HR size="5" color="red" width="300">
<HR size="10" color="black" width="200">
<HR size="5"  color="#0000FF" width="50%">
</BODY>

　　

与文本显示相关的标签

<center>…</center>

使文本居中显示

<hnalign="#"></hn>

作用是表示文档的标题，n是从1-6的整数，一次为最大标题，6是最小标题，align为设置标题对齐方式，包括left、center、right

<fontsize=n color="#">...</font>

设置字体，size为字体大小，从1到7的整数，数字越大，字体越大。

<b>...</b>

使文本成为粗体。

<i>…</i>

使文本成为斜体

 

<BODY>
   <H1>一级标题</H1>  
   <H2>二级标题</H2> 
   <H3>三级标题</H3> 
   <H4>四级标题</H4> 
   <H5>五级标题</H5> 
   <H6>六级标题</H6> 
</BODY>

　　

列表元素创建的标签

a.创建带数字编号的列表：

<ol>...</ol>用start属性，设置起始的序号。

<li>...</li>用value属性，改变列表内的序号顺序。

b.创建带有项目符合的列表：

<ul>和<li>，他们标签的type属性指定符号的样式：

     disc，显示为实心的圆圈；

     square，显示未实心的方块。

     circle，显示未空心的圆圈

<H4>注册步骤：</H4>
  <OL type="1" >
    <LI>填写信息</LI>
    <LI>收电子邮件</LI>
    <LI>注册成功 </LI>
  </OL>
  新人上路指南
  <UL type="circle">
    <LI>如何激活会员名？ </LI>
    <LI>如何注册淘宝会员？ </LI>
    <LI>注册时密码设置有什么要求？</LI>
    <LI>支付宝认证</LI>
  </UL>

　　

b.建立无符号的列表

<dl>与<dt>标签创建无符号的列表

<dd>和<dt>，创建缩进的列表

 

<body>
		<TABLE border="2">
			<TR>
				<td>成绩</td>
				<TD colspan="3">学生成绩表</TD>
			</TR>
			<TR>
				<td rowspan="2">学生</td>
				<TD>英语</TD>
				<TD>数学</TD>
				<TD>语文</TD>
			</TR>
			<TR>
				<TD>95</TD>
				<TD>98</TD>
				<TD>89</TD>
			</TR>
		</TABLE>
	</body>

　　

表格元素的标签

表格在网页布局中的作用是至关重要的，表格是用<table>来定义的，

具体的定义为：<tableborder=n aligh="#" bgcolor="rgb">

属性border用于定义表格边框的宽度，属性align用于设定表格的对齐方式，可以是left、right、center。bgcolor是颜色。

 

<caption>…</caption>用来定义表格的标题

<tr>...</tr>为表格添加新行

<th>…</th>用于定义表头

<td>…</td>用于定义单元格

 

html交互式表单

表单在网页中主要负责数据采集功能，比如我们平常注册信息、输入信息可以与网页进行交互的都是表单。

表单使用<form>...</form>元素创建，在两者之间嵌入其它相关元素或者说是控件，就可以创建作为html文档一部分的表单。

创建表单的基本语法如下：

<formmethod="get or post" action="URL">….</form>

属性method用于指定向服务器发送表单数据时所使用的HTTP方法，用get或者post皆可，提交的数据被附加到URL的末端，作为URL的一部分发送到服务器。

下面就是关于表单常用的一些元素:

 

<input>元素用于接收用户输入的信息，它是一个带有属性的空元素，用来创建表单中的控件语法是

<inputtype="type" name="name" size="size"value="value'>

 

属性type用来指定要创建的控件的类型，属性那么用来指定控件的名称，size用来指定表单中控件的初始宽度，属性value指定控件的初始值。

 

关于type的类型可以参考下面张图片：

 

列表框元素

允许用户从一个下拉菜单中选择一项或多项，列表框由<select>元素创建，列表框中的各个选项用<option>元素提供。

 

多行文本输入控件

<textareaname="name" rows="number of rows" cols="number ofcolumns" >…</textarea>

属性rows用于指定文本框输入控件可视区域显示的文本行数，cols指定文本输入控件可视区域显示的宽度。

 

超链接标签

<ahref="URL">…</a>

属性href用于指定链接的目标，目标地址有URL定位，在开始标签<a></a>之间的文本将作为浏览器中显示的链接文本。

 

嵌入图像标签

<img src="URL" width=n height=m>属性src指定图像资源的位置，属性width和height用于指定图片的尺寸，在这里需要注意的是src应该尽量用相对路径而不用绝对路径。

 

 

特殊字符元素

特殊字符包括字符引用和实体引用，下面我们将常用的进行总结

 

在写几个代码留着看！

1》练习标签

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>网页制作啦！</title>
	</head>
	<body bgcolor="coral">
	<img src="images/logo.JPG" width="290" height="60" alt="欢迎光临拍拍网"align="middle">
	       
	<A href="login.html">登录</A> | 关于拍拍 | 拍拍助理 | 
    <A href="mailto:907655189@qq.com">联系我们</A>
    <P>
    	<FONT color="#FFA275" size="+6">手机 - 诺基亚 - 
    		<A href="#MOTO">MOTO</A> - 索爱</FONT>
    </P>
	<h1>导购资讯</h1>
	<p>参观电玩达人的宝贝仓库</p>
	<p>
		炎炎夏日，冰凉家具两折起
		周末折扣，品牌三折起
	</p>
	<hr size="5" color="dimgrey"  noshade width="400" align="left"/><br />
	网游专区
	<ol type="A">
		<LI>QQ幻想100点卡只需￥8.8元</LI>
  		<LI>热血江湖250点只需￥8.8元</LI>
  		<LI>问道30元卡只需￥25.0元</LI>
  		<LI>跑跑点卡200点只需￥16.8元</LI>
	</ol>
	数码产品
		<UL type="disc">
 		<LI>最酷音乐手机导购</LI> 
 		<LI>最强街机6300仅售1450</LI> 
 		<LI>99元热销学生Mp3推荐</LI> 
 		<LI>漫步者音箱76元搞定</LI> 
	</UL>
	<hr size="5" color="dimgrey"  noshade width="400" align="left"/><br />
	<A name="#MOTO">MOTO E2  音乐手机</A>
	<pre>
130W像素摄像头 Linux智能系统
Intel XScale 处理器
A2DP蓝牙立体声 市场价：1690
开学价：1045
	</pre>
	<MARQUEE scrolldelay="150">
		精品推荐:超酷PSP  NIKE球星球鞋  ZIP珍藏限量版
	</MARQUEE>
	<hr size="5" color="dimgrey"  noshade width="400" align="left"/><br />
	版权信息： Copyright © 1998 - 2007 TENCENT Inc. All Rights Reserved
	</body>
</html>

 

2》练习表格

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>表格一</title>
	</head>

	<body>
		<TABLE border="2">
			<TR>
				<td>成绩</td>
				<TD colspan="3">学生成绩表</TD>
			</TR>
			<TR>
				<td rowspan="2">学生</td>
				<TD>英语</TD>
				<TD>数学</TD>
				<TD>语文</TD>
			</TR>
			<TR>
				<TD>95</TD>
				<TD>98</TD>
				<TD>89</TD>
			</TR>
		</TABLE>
	</body>
	<br />

	<body>
		<table border="3" bgcolor="aqua">
			<tr>
				<td>手机充值、ID卡</td>
				<td colspan="3">办公设备、文具、耗材</td>
			</tr>
			<tr>
				<td rowspan="3">各类卡的总汇</td>
				<td>铅笔</td>
				<td>彩笔</td>
				<td>粉笔</td>
			</tr>
			<tr>
				<td>打印</td>
				<td>刻录</td>
				<td>墨盒</td>
			</tr>
			<tr>
				<td>笔记</td>
				<td>港币</td>
				<td>墨水</td>
			</tr>
		</table>
	</body>
	<br />

	<body>
		<TABLE width=“400” height=“200” border=“15” bordercolor="red">
			<TR>
				<TD colspan="4"> 品牌商城</TD>
			</TR>
			<TR>
				<TD colspan="2">笔记本电脑</TD>
				<TD colspan="2">办公设备、文具、耗材</TD>
			</TR>
			<TR>
				<TD>惠普</TD>
				<TD>华硕</TD>
				<TD>打印机</TD>
				<TD>刻录盘</TD>
			</TR>
		</TABLE>

	</body>
	<br />

	<body>
		<TABLE width="350" height="100" cellspacing=“5” cellpadding=“10” border=“1 " background="images/type_back.jpg ">
			<TR>
				<TD colspan="4 "> </TD>
			</TR>
			<TR bgcolor="#EBEFFF ">
				<TD colspan="2 " align="center ">笔记本电脑</TD>
				<TD colspan="2 " align="center ">办公设备、文具、耗材</TD>
			</TR>
			<TR bgcolor="#EBEFFF ">
				<TD>惠普</TD>
				<TD>华硕</TD>
				<TD>打印机</TD>
				<TD>刻录盘</TD>
			</TR>
		</TABLE>
	</body>
	<br />
	<BODY>
<TABLE width="450 " height="100 " border="0 " 
	background="images/type_back.jpg " cellpadding="10 ">
  <TR>
    <TD colspan="4 "> </TD>
  </TR>
  <TR bgcolor="#EBEFFF ">
    <TD width="40% " rowspan="2 ">阿里巴巴旗下</TD>
    <TD width="20% " >我要买</TD>
    <TD width="20% " >我要买</TD>
    <TD width="20% ">我淘宝</TD>
  </TR>
  <TR bgcolor="#EBEFFF ">
    <TD colspan="3 " align="center ">您好，欢迎来淘宝！
    	<a href="# ">[免费注册]</a></TD>
  </TR>
</TABLE>

	<br />
	<BODY>
<TABLE width="600 " border="0 ">
  <TR>
    <TD width="300 " rowspan="2 "><IMG src="images/logo.gif " width="250 " height="40 "></TD>
    <TD width="100 "><IMG src="images/banner_1.gif " width="51 " height="24 "></TD>
    <TD width="100 "><IMG src="images/banner_2.gif " width="51 " height="24 "></TD>
    <TD width="100 "><IMG src="images/banner_3.gif " width="73 " height="24 "></TD>
  </TR>
  <TR>
    <TD colspan="3 " align="left ">您好，欢迎来淘宝！<A href="# ">[免费注册]</A> </TD>
  </TR>
</TABLE>
<table bgcolor="aqua " border="1 ">
		<tr>
			<td colspan="4 " align="absmiddle ">拍拍公告栏</td>
		</tr>
		<tr>
			<TD rowspan="3 "><IMG src="images/ppgg.JPG " width="90 " height="71 "></TD>
			<td colspan="3 ">"彩票大卖 "频道开张！</td>
		</tr>
		<tr>
			<td colspan="3 ">社区新版首页亮相啦!</td>
		</tr>
		<tr>
			<td colspan="3 ">自输卡密自动发货功能发布</td>
		</tr>
		<tr>
			<td >积分换购</td>
			<td >货到付款</td>
			<td >手机充值</td>
			<td >点卡售货机</td>
		</tr>
	</table>
	</body>
	<br />
	<body>
		<table width="400 " height="134 " border="0 " 
			background="images/background.jpg " cellpadding="5 ">
			<tr>
				 <TD height="30 " colspan="4 "> </TD>
			</tr>
			<tr bgcolor="#EBEFFF ">
				<td colspan="2 " align="center ">手机充值 - IP卡 - 电话卡</td>
				<td colspan="2 " align="center ">网游 - 点卡 - 金币 - 代练</td>
			</tr>
			<tr bgcolor="#EBEFFF ">
				<td align="center " width="132 " height="30 " bgcolor="#FFD2D2 ">移动</td>
				<td align="center " width="132 ">联通</td>
				<td align="center " width="132 " bgcolor="#C4FFC4 ">魔兽</td>
				<td align="center " width="132 ">跑跑卡丁车</td>
			</tr>
		</table>
	</body>
	
	<br />
	<!--这是一个方法，里面放一个表格-->
	<body>
		<table width="957 " border="0 " background="images/naviBg.JPG " >
			<tr>
				 <TD width="529 " rowspan="2 "><img 
				 	src="images/logo.JPG " width="290 " height="60 "</TD>
				<td width="67 " height="33 " ><IMG src="images/buy.gif "  width="58 " height="22 "></td>
				<td width="67 "><IMG src="images/sell.gif " width="58 " height="22 "></td>
				<td width="98 "><IMG src="images/mypp.gif " width="83 " height="22 "></td>
				<td width="61 "><IMG src="images/bbs.gif " width="45 " height="22 "></td>
				<td width="109 ">
					<img src="images/help.gif " width="13 " height="13 "/>
					<FONT size="-1 " color="#FF0000 ">帮助中心</FONT>
				</td>
			</tr>
			<tr>
				<TD height="28 " colspan="2 "><FONT size="-1 " color="#FF6262 ">欢迎来到拍拍网！</FONT></TD>
    			<TD colspan="3 ">
					<FONT size="-1 "><A href="# ">[登录]</A> | 
						<A href="# ">[免费注册]</A> | <A href="# ">[结算中心]</A></FONT>
				</TD>
			</tr>
		</table>

</BODY>

</html>

　　

 

转载于:https://www.cnblogs.com/lixiaopan/p/6142220.html

weixin_30522095
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML/CSS中table表格布局
xiaokangmiclong的博客
04-01 3146
省略超出列部分，设计到表格的列计算规则：table-layout，其值包括： automatic： 为默认值，列的宽度由单元格里面的内容来设定。 fixed: 列宽度由表格宽度和列宽度来设定。 inherit: 列宽度从父元素继承而来。   table{ width:400px; }
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
web前端基础知识—HTML初步
Steven_YE
07-28 140
web前端基础知识—HTML初步 Http: Hypertext Transfer Protocol 超文本传输协议 什么是协议？ 规定，约定； 用来规范和约束某一类事物； Http:是用来规范两个人之间如何沟通，也就是规范范约束浏览器和服务器之间是如何沟通和交流 沟通最常见的问题，就是语言不通； HTML：（纯文本文件） HyperText Markup Language 超文本标记语言 作用：...
html入门以及css的学习的心理路程。
weixin_34293059的博客
03-29 100
*前言 学习这门学科之前，感觉是非常简单，往往现实都不是想象的那样。听老师教课的的时候感觉能听懂，基本上也完全掌握了，实际上做的时候，磕磕碰碰，浪费了大量的时间，因此我自从接触了这门学科了解到，不论是html还是其他计算机相关的科目时，都必须自己动手去做，脑子里必须要有一个整体的模板，思路要清晰，多做一些例子，基本上就完全可以随心应手的去设计想要的网站，不仅效率高，而且速度快。长话短说，接下来进入...
使用HTML制作网页
weixin_30482181的博客
04-11 370
网页基本信息【编码格式】 gb2312:简体中文，一般用于包含中文和英文的页面 ISO-885901：纯英文，一般用于只包含英文的页面 big5：繁体中文，一般用户带有繁体字的页面 utf-8：国际通用的字符编码，同样适用于包含中文和英文的页面。和gb2312相比，它的国际通用性好，但是字符压缩比较低，对网页性能有一定影响。 HTML和XHTML的区别 HTML和XHTML之间的差别，...
HTML+CSS3的购物网站（首页+商品页+购买页）
苦涩精灵的博客
06-28 2万+
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/index.css" /> <title></title> </head> <body&g
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML零基础入门教程（详细）
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
html初学入门之表单
kongla
07-19 83
表单标签 最重要的数据交互功能 input select textarea
快速入门HTML和CSS
m0_54129816的博客
03-12 1782
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言这里只是讲一些我自己学习网页制作后认为可以快速掌握的学习方法和小技巧。因为不可能一篇本章就可以把HTML讲的非常清楚明白。感兴趣的可以向下看一看。一、HTML和CSS是什么？二、清楚要重点学什么说回来网页制作这块，我认为重点学习的话是css和javaScript，html的元素常用的会用后，拿过来知道几个结构我觉得差不多了，css才是能让你的网页焕然一新的工具。另外为什么说javascript也是重点？因为学到最后每个人做出来.
html初学者入门教程
05-22
HTML5作为下一代网站开发技术，无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者，都值得去研究。此教程为新手提供学习指导，有兴趣的可以了解一下。
html的入门讲义
10-16
本讲义主要面向初学者，旨在帮助快速掌握HTML的基本概念和使用方法。 一、HTML结构 HTML文档通常由三部分组成：头部（Head）、主体（Body）和声明（Document Type Declaration）。声明位于文档顶部，例如`<!DOCTYPE...
html入门代码.rar
05-20
对于初学者来说，理解HTML的基本结构、元素和属性是关键的第一步。通过实践编写简单的网页，逐步掌握各种标签的用法，再结合CSS进行样式设计，就能创建出功能齐全、美观的网页。这个“html入门代码.rar”中的...
初学者必知的HTML 5入门级技巧
11-24
因此，为了应对即将到来的HTML 5，本文总结了11个HTML 5的初级技巧，希望能对你进一步学习好HTML 5会有所帮助。 1. 新的Doctype声明 XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。 <!...
html入门软件及资料
09-26
总的来说，这个压缩包提供了从HTML基础知识到Sublime Text 3编辑器的全方位入门资料，包括颜色系统、文本编辑器的使用以及网页表单的构建，对于初学者而言是一套完整的自学资源。通过学习和实践，不仅可以掌握HTML...
web前端基础面试85题（一）
最新发布
柯晓楠
07-18 387
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
udp分片报文pcap文件
07-18
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片
计算机教学导案.doc
07-18
计算机
摩根：2024年大市前瞻.pdf
07-18
摩根：2024年大市前瞻
HTML5入门教程：初学者指南
"HTML很不错的入门教程" HTML（HyperText Markup Language）是用于创建网页的标准标记语言，对于初学者来说，它是互联网技术的基础。本教程旨在帮助新手快速掌握HTML的基本概念和使用方法。 一、HTML基本概念 HTML...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值