HTML之一天学会html(常用标签+网页架构)

1、网页文件的创建

新建一个文本文件，将其命名为xxx.html或者xxx.htm（注意后缀名）

2、简单的html页面的编写

在网页中都是通过标签来指定相应的显示内容，所有的页面内容都必须在<html>中，每个标签都要有相应的开始和结束，<htlm>表示开始，</html>表示结束。
页面中的标签都用小写（虽然可以用大写，但是基于xhtml的标准就是全部用小写）

3、对于html而言，有两种写法是不允许的：

第一种，只有开始标签没有结束标签。
第二种，标签不能嵌套。

<a> adasdsddc <b> </a></b>：以上写法是不允许的。不能存在嵌套

4、编写网页文件需要成对编程。

5、常用标签

5.1、<head>

Head标签中的内容不会再网页中显示，一般用来设置页面的标题(title)，或者可以设定相应外部文件的引入，

如css文件，js文件，或者设置相应的meta文件。

5.2、文本标签

换行：对于html而言，代码中的换行不会在页面中显示。需要相应的换行标签，br 和 p。对于br而言，里面没有任何内容，需要使用自结束标签

标题标签：一般使用在相应网页的某个标题部分。

列表标签：有序和无序列表

效果：

5.3、常用的其他标签

<!DOCTYPE html>

<html>

	<head>

		<title>常用的其他标签</title>

	</head>

	<body>

		<!--pre里面的内容会按照代码的格式显示-->

		<pre>

			for(int i == 0; i <= 10; i++){

				printf("%d",i);

			}

		</pre>

		<!--<表示小于符号，>表示大于符号-->

		i<10,i>10

		<!-- 用来增加空格--><br />

		hello world

		<!--&copy; copyright符号--><br />

		&copy;

		<!--&&符号--><br />

		&

	</body>

</html>

5.4、超链接+图片

<!DOCTYPE html>

<html>

	<head>

		<title>常用的其他标签</title>

	</head>

	<body>

		<!--所有的标签除了内容还有一些属性，属性全都在开始的标签中来写-->

		<a href="01.html" target="content" title="这是我的第一个超链接">这是一个链接</a>

	</body>

</html>

5.5、布局标签

<!DOCTYPE html>

<html>

	<head>

		<title>常用的布局标签</title>

	</head>

	<body>

		<!--div和span标签一般用来进行容器的控制，在实际的开发中，

		通常使用div来设定一个容器，这个容器中可以放置大量的内容，

		span标签一般用来放置文本数据，用来进行简单的控制-->

		<div>这是一个div</div>

		<div>这是另外一个div</div>

		<span>这是一个span</span>

		<span>这是另外一个span</span>

	</body>

</html>

5.6、表格标签

<!DOCTYPE html>

<html>

	<head>

		<title>表格标签</title>

	</head>

	<body>

		<!--

		一个简单的表格一般由三大部分组成：table，tr,td,还有两个专门用来控制样式的thead和tbody

		-->

		<table border='1px'>

			<tr>

				<td>A1</td> <td>A2</td> <td>A3</td>

			</tr>

			<tr>

				<td>B1</td> <td>B2</td> <td>B3</td>

			</tr>

			<tr>

				<td>C1</td> <td>C2</td> <td>C3</td>

			</tr>

		</table>

	<br />

		<table border='1px'>

			<tr>

				<td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td>

			</tr>

			<tr>

				<td>B1</td> <td>B2</td> <td>B3</td> <td>B4</td>

			</tr>

			<tr>

				<!--colspan表示合并单元格，当colspan=2表示合并两格-->

				<td colspan='2'>C1</td> <td colspan='2'>C2</td>

			</tr>

		</table>

	<br />

		<table border='1px'>

			<tr>

				<td>A1</td> <td>A2</td> <td>A3</td>

			</tr>

			<tr>

				<td>B1</td> <td>B2</td> <td>B3</td>

			</tr>

			<tr>

				<!--colspan表示合并单元格，当colspan=2表示合并两格-->

				<td colspan='3'>

					<table border='1px'>

						<tr>

							<td>C1</td> <td>C2</td>

						</tr>

					</table>

				</td>

			</tr>

		</table>

	</body>

</html>

效果：

6、表单（07.html）

常用的表单标签：原则上所有的表单标签都要放置在form中

<!DOCTYPE html>

<html>

	<head>

		<title>表单</title>

	</head>

	<body>

		<form action="01.html">

		<!--text表示文本输入框，password表示密码输入框-->

			用户名:<input type='text'/><br />

			密码:<input type='password'/><br />

			<!--radio是单选框，通过name来分组，当name一样时，表示这几个radio都在一个组中

			此时如果点击其中一个会取消其他的选择-->

			性别:<input type='radio' value='男' name='sex'>男

				<input type='radio' value='女' name='sex'>女<br />

			<!--checkbox是多选框-->

			兴趣:<input type='checkbox'/>足球<input type='checkbox'/>篮球

			<input type='checkbox'/>羽毛球 <br />

			<!--下拉列表框-->

			籍贯:<select>

					<option>北京</option>

					<option>上海</option>

					<option>杭州</option>

				</select><br />

			<!--多行文本框，cols表示有多宽，rows表示有多高-->

			个人简介:<textarea rows="10" cols="50"></textarea><br />

			<!--submit表示表单提交按钮，当提交的时候会链接到form的action中-->

			<input type='submit' value='用户注册'>

			<!--button表示按钮，如果没有进行任何控制，点击什么都不会做-->

			<input type='button' value='点击一下试试'>

		</form>

	</body>

</html>

效果：

7、frameset标签

frameset标签不能在body内设置。

<!DOCTYPE html>

<html>

	<head>

		<title>框架标签</title>

	</head>

	<!--cols表示让这个框架基于横向的方式切分，

	（150，*，150）第一个150表示第一个框架的大小是150

	*表示剩余的部分都是中间的框架

	第二个150表示右边的框架是150

	rows表示基于上中下来布局

	-->

	<!--如果设置了rows和cols，会进行平均切分-->

	<frameset rows="80,*,80" frameborder="1">

	<!--在rows或者cols中分成几部分，就需要多少个frame

	150，*，150分成的三部分，所以需要三个frame-->

		<frame src="01.html" noresize />

		<frame src="07.html" />

		<frame src="02.html" noresize />

	</frameset>

</html>

效果：

<!DOCTYPE html>

<html>

	<head>

		<title>框架标签</title>

	</head>

	<frameset rows="90,*,90" frameborder="1">

		<frame src="07.html"></frame>

		<frameset cols="150,*">

			<frame src="03.html"></frame>

			<!--在连接的时候增加属性target="content"-->

			<frame src="06.html" name="content"></frame>

		</frameset>

		<frame src="02.html"></frame>

	</frameset>

</html>

效果：

HTML之一天学会html(常用标签+网页架构)的更多相关文章

一周学会HTML----Day02常用标签（上）
扩展在开始第二天的课程之前,我们先来拓展两个概念. 第一个是前台和后台:前台是指用户看到的界面,而后台是指相关具有前线的人操作的界面第二个是前端和后端:前端是值用户看到的界面和界布的操作(安卓.i ...
一周学会HTML----Day03常用标签(下)
form 标签表单(重要) 表单用途用于收集用户信息,提交给服务器基本使用 (action,method,enctype) 要提交的表单必须放到form里 input select textar ...
1个示例学会 mvc 常用标签
HtmlHelper用法大全3:Html.LabelFor.Html.EditorFor.Html.RadioButtonFor.Html.CheckBoxFor @Html.***For:为由指定 ...
9月5日网页基础知识通用标签、属性（body属性、路径、格式控制）通用标签（有序列表、无序列表、常用标签）（补）
网页基础知识一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
《网页设计基础——HTML常用标签》
网页设计基础--HTML常用标签一.网页框架: 格式: <html> <head> <title>网页标题</title> <sty ...
html常用标签及属性,常用英语单词
目录 html常用标签 html常用标签属性前端常用英语单词表(未完待续) 欢迎评论点赞交流,转发请添加原博客连接谢谢! Ctrl键+F 可以查找你想要的内容哦! html常用标签 htmi结构 & ...
HTML常用标签
HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...
CSS常用标签
CSS常用标签一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
HTML基础（一）——一般标签、常用标签和表格
第一部分 HTML <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...

随机推荐

Mysql数据库里面的String类型依照数字来排序以及按时间排序的sql语句
今天做项目的时候,遇到个小小的问题,在数据库中查询的时候,要用String类型的ID进行一下排序!(注:ID字段为 varchar 类型) 解决的方法: 如: SELECT * FROM Stude ...
Dynamics CRM记录页面上隐藏子网格“+”标识
前段时间微软发布了Dynamics 365,这是Dynamics产品的又一次大的变动,期待新的版本能够更好的满足客户的需求,同时提供更多的可定制化的内容. 近期做Dynamics CRM项目遇到很多审 ...
iptables简述
一.linux防火墙基础防火墙分为硬件防火墙和软件防火墙. 1.概述linux 防火墙体系主要工作在网络层,针对TCP/IP数据包实施过滤和限制,属于典型的包过滤防火墙. 包过滤机制:ne ...
easyui 快速开发整理
下面整理了关于easyui的datagrid的开发文档,复制黏贴即刻使用 1: <link href="../../Content/easyUI/themes/default/easy ...
Error:Could not determine Java version-- 关于Android Studio JDK设置和JVM version设置
最近在装AS的时候遇到一个问题,新建工程后,编译报错,Error:Could not determine Java version 不言而喻:可定是JDK的问题,网上查到2中可能性第一:就是JDK路 ...
Oracle 大数据处理（一）
数据量: 日数据 2000万月数据 8000万处理方式:建立父子分区,采用Range+list模式分区,日期作为主分区,地域作为子分区索引选择: 由于应用于查询比较多,故建立位图索引,效率 ...
cocos2dx 帧动画（iOS）
植物大战僵尸的植物摇摆效果 //帧动画 Animation *animation = Animation::create(); Sprite *sprite = Sprite::create(&quo ...
127.0.0.1与localhost与ip的区别
127.0.0.1与localhost与ip的区别 May 18, 2014 localhost 不联网不使用网卡,不受防火墙和网卡限制本机访问一般使用本地套接字文件AF_UNIX 应用程序一般约 ...
zoj 3755
状态压缩dp 扫雷 n×M格子奇数行有雷,给出偶数行的数字,求最少有多少个雷. 刚开始觉得状压状态不知道怎么办,因为每行能影响的范围太广,后来展昭说横着来,然后几分钟就a了. 这件事请告诉我们看问题要 ...
你好，C++（18）到底要不要买这个西瓜？4.1.6 操作符之间的优先顺序
4.1.6 操作符之间的优先顺序在表达一些比较复杂的条件判断时,在同一个表达式中,有时可能会存在多个操作符.比如,我们在判断要不要买某个西瓜时,不仅要判断它的总价(单价8.2元/斤,一共10.3斤) ...

HTML之一天学会html(常用标签+网页架构)

HTML之一天学会html(常用标签+网页架构)的更多相关文章

随机推荐

热门专题