HTML_制作网页__理解框架

最新推荐文章于 2024-05-11 22:15:28 发布

Xue__Feng

最新推荐文章于 2024-05-11 22:15:28 发布

阅读量4.6k

点赞数 8

分类专栏：网页制作文章标签： HTML

本文链接：https://blog.csdn.net/zuefeng/article/details/100412838

版权

网页制作专栏收录该内容

22 篇文章 0 订阅

订阅专栏

学习目标：

初步认识HTML
能够使用HTML完成各种基本操作

学习内容：

1、设置中英文

	<html lang="zh-CN">
	双引号里面内容代表网页主体是中文还是英文
	中文：zh-CN
	英文：en

2、认识主体

	<body>
		好好学习天天向上
	</body>

3、制作主体

a、标题

	<body>
		<h1>标题一</h1>
		<h2>标题二</h2>
		<h3>标题三</h3>
		<h4>标题四</h4>
		......
		好好学习天天向上
	</body>

b、分段

	<body>
		<p>。。。。。。</p>
		<p>好好学习</p>
		<p>天天向上</p>
	</body>

显示结果

c、换行

	[</br>换行符]
	<body>
		<p>。。。。。。</p>
		<p>好好</br>学习</p>
		<p>天天向上</p>
	</body>

换行结果

d、字符实体转换

	&lt;	小于号用上面表达时表示
	&gt;	大于号用上面表达时表示
	&nbsp;	空格用上面表达时表示

e、插入图片

	<img src="http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg" alt="跑到外星去了">	
	当图片加载不出来时进行解释
	注意：还可以通过把图片链接改成图片相对于网页文件位置的相对路径或绝对路径。

f、制作超链接

	<a href="http://www.baidu.com">百度</a>
	<a href="http://www.baidu.com" target="blank">百度,<img src="http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg" alt="跑到外星去了"></a>
	<a href="#第六章">寻找第六章</a>
	<a name="第一章">
		<p>第一章</br></br></br></br></br></br></br></p>
	</a>
	<a name="第六章">第六章</a>

	(1)	target属性
	当target=“blank”，打开另一页面显示；
	当target=“self”	，直接在当前页面跳转
	(2)	title属性
	当title=“哈哈”，鼠标移到超链接上会出现想要的提示。
	(3)	超链接安装位置		
	(4)	name属性
	快速在一个页面中找到想要的东西

g、添加列表

(1) 有序列表

	<ol>
		<li>--------------</li>
		<li>--------------</li>
	</ol>

(2) 无序列表

	<ul>
		<li>--------------</li>
		<li>--------------</li>
	</ul>

h、添加表格

	<table border="1">
		<tr>
			<th>名字</th>
			<th>年龄</th>
			<th>性别</th>
			<th>地点</th>
		</tr>
		<tr>
			<th>Jim</th>
			<th>23</th>
			<th>male</th>
			<th>china</th>
		</tr>
		<tr>
			<th>Tom</th>
			<th>18</th>
			<th>female</th>
			<th>Landon</th>
		</tr>
		<tr>
			<th>Mary</th>
			<th>29</th>
			<th>female</th>
			<th>Beijing</th>
		</tr>
	</table>

	注意：
	（1）table是表格属性
	（2）tr是行属性
	（3）td是列属性
	（4）th是标题属性
	（5）border是边框属性
	（6）colspan和rowspan是合并行与列的属性
	 附：
	 Ctrl+/	添加注释快捷键

i、添加表单

	注：使用form标签添加表单可以整体上传数据，作为注册页面或登录页面使用

	(1)	input标签
	type=“text”	：	输入文本
	type=“password”	：	输入密码，会隐藏
	type=“checkbox”	：	复选框（多选）

	<p>
		<title>你的爱好：</title>
		<input type="checkbox">香蕉
		<input type="checkbox">苹果

	type=“radio”	：	单选框（单选）

	<p>
		您的性别：
		<input type="radio" name="sex">男	
		<input type="radio" name="sex">女

	type=“textarea”	：	输入文本区域
	type=“select”	：	下拉列表

	<p>
		<select name="site">
			<title>籍贯：</title>
			<option value="0">北京</option>
			<option value="1">上海</option>
			<option value="2">深圳</option>
			<option value="3">湖北</option>
		</select>
	</p>

	type=“file”	：	上传文件
	type=“submit”	：	提交表格数据

4、小补充

	用frame标签进行多个页面的显示：
	<frameset cols="33%,33%,33%">
		<frame src="http://www.xidian.edu.cn">
		<frame src="http://www.baidu.com">
		<frame src="http://www.taobao.com">
	</frameset>

1)	属性cols设置显示占比
2)	网址中www表示显示成电脑上网页的形式
3)	网址中把www改成m表示显示成手机上网页的形式

Xue__Feng

关注

8
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
HTML_制作网页__理解框架

1.设置中英文
复制链接

扫一扫

专栏目录