html练习

最新推荐文章于 2022-10-28 17:21:16 发布
最新推荐文章于 2022-10-28 17:21:16 发布
阅读量935 收藏 2
点赞数 3
分类专栏： html学习 文章标签： html html练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenzhizi01/article/details/39432681
版权

使用notepad++在http://www.dreamdu.com/xhtml/教程的指导下进行了一些列的练习，基本掌握了作者所教授的html教程，但是其中仍有一些细节没有明白。

1.根据作者的描述其实XHTML和HTML的差别特别小，其中HTML对大小写不敏感，而XHTML对大小写敏感，但是如何对到底使用的是HTML还是XHTML语言进行区别；自己练习的时候使用的是HTML还是XHTML?

2.<br/>是换行标签，但是其实<br>也可以使用，还有就是前后标识的标签，其实只标明前面的标签，而无后面的标签也可以正常显示，是不是说明其实可以没有后面的标签？为什么？

3.标准网页设计DOCTYPE的声明，决定了浏览器用什么模式来加载网页，也决定了自己书写代码的格式？

4.对于表格在网页中的位置的控制问题？

5.common属性？

详见：http://www.dreamdu.com/xhtml/attribute_collections/#common

6.链接到指定位置，网站，图片；列表；form；表格特别重要；


<!--这些都是HTML的基础呀，要好好学。-->
<!DOCTYPE html PUBLIC>
<html>
	<head>
		<title>hello world</title>
	</head>
	<body>
		<p>
			
			<a href="http://www.baidu.com/">baidu</a>
			<br/>
			<a href="mailto:shishunlogic@163.com" subject="hello" body="i need  help" cc="shishunlogic@163.com" >给我写邮件</a>
			<br>
			<a href="http://www.google.com/" title='百度' alt="谷歌">
			<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
			</a>
			<br>
			列表<br>
			<ul>
				<li>www</li>
				<li>dreamdu</li>
				<li>com</li>
			</ul>
			<ol>
				<li>www</li>
				<li>dreamdu</li>
				<li>com</li>
			</ol>
			<dl>
				<dt>www</dt>
				<dd>world wide web</dd>
				<dt>dreamdu</dt>
				<dt>com</dt>
			</dl>
			<ul>
			<li>www.</li>
			<li>dreamdu
				<dl>
					<dt>dream</dt>
					<dd>梦</dd>
					<dt>du</dt>
					<dd>我是dudu</dd>
				</dl>
			</li>
			<li>.com</li>
			</ul>
			导航列表
			<br>
			<nl>
				<label>梦之都</label>
				<li href="#introduction">介绍</li>
				<li>
				<nl>
					<label>网址(http://www.dreamdu.com/)</label>
					 <li href="#http">http://</li>
					 <li href="#www">www</li>
					 <li href="#dreamdu">dreamdu</li>
					 <li href="#com">com</li>
				 </nl>
				 </li>
				 <li href="#html">html教程</li>
				 <li href="#css">css教程</li>
			</nl>	 
				<br>表格<br>
				<table width="80%" border ="1" cellspacing='50' cellpadding='2'>
					<tr>
						<th>www.baidu.com</th>
						<th>com的域名数量</th>
						<th>cn域名的数量</th>
						<th>net域名数量</th>
						<th>总数</th>
					</tr>
					<tr>
						<td>2003年</td>
						<td rowspan="2">1000</td>
						<td>2000</td>
						<td>3000</td>
						
					</tr>
					<tr>
						<td>2004年</td>
						<td>5000</td>
						<td>6000</td>
					</tr>
					<tr>
						<td>2005年</td>
						<td colspan="2">7000</td>
						<td>9000</td>
					</tr>
					<br>
					<form id ="zhuce" action="www.baidu.com" method="post">
						用户名:<input type="text" id="username" name="username" size="10" maxlength="25"/>
						密码:<input type="password" id="password" name="password" size="50" maxlength="25"/>
						<br>网站建设服务:<br>
						注册域名 <input type="radio" value="注册域名" id="service1" name="service" />
						购买空间 <input type="radio" value="购买空间" id="service2" name="service" />
						购买云主机 <input type="radio" value="购买云主机" id="service3" name="service" />
						网站定位与策划 <input type="radio" value="网站定位与策划" id="service4" name="service" />
						网站建设与制作 <input type="radio" value="网站建设与制作" id="service5" name="service" />
						网站推广 <input type="radio" value="网站推广" id="service6" name="service" />
						网站运营 <input type="radio" value="网站运营" id="service7" name="service" />
						SEO服务 <input type="radio" value="SEO服务" id="service8" name="service" />
						<br>个人发展方向:<br>
						游戏人生 <input type="checkbox" value="游戏人生" id="direction1" name="direction1"/>
						美工设计  <input type="checkbox" value="美工设计" id="direction2" name="direction2" />
						编程开发 <input type="checkbox" value="编程开发" id="direction3" name="direction3" />
						运营与管理 <input type="checkbox" value="运营与管理" id="direction4" name="direction4" />
						创业 <input type="checkbox" value="创业" id="direction5" name="direction5" />
						<br>照片<br>
						个性照片上传：<input type="file" id="image" name="image" size="25" maxlength='255'/>
						<br>
						<input type="submit" id="submit" name='submit' value='submit'/>
						<input type='reset' id='reset' name='reset' value='reset'/>
					</form>
					<br>
					<form id="test" action='www.baidu.com' method='get'>
						计算机
						<input type='checkbox' value='1' id='favl' name='fav1'/>
						旅游
						<input type='checkbox' value='2' id='fav2' name='fav2' checked="checked"/>
						购物
						<input type='checkbox' value='3' id='fav3' name='fav3' disabled='disabled'/>
						<br>
						单行输入域：
						无法输入的单行输入域：
						<input id ='noinput' name='noinput' type='text' value='hello world' readonly='readonly'/>
						<br>多行输入域：
						无法输入的多行输入框
						<textarea cols="50" rows="10" id="textarea" name="textarea" readonly="readonly">梦之都</textarea>
					</form>
					<form id='help' action='baidu.com' method='post'>
						<br>help:
						<textarea cols='5' rows='10'  name='help' readonly='readonly'>women,if you need help ,please</textarea>
					</form>
					<form id ='select' action='baidu.com' method ='post'>
						<br>你对此次服务的评价：
						<select size='10' id='select' name='select' multiple='multiple'>
							<option selected='selected'>非常满意</option>
							<option>十分满意</option>
							<option disabled='disabled'>满意</option>
						</select>
					</form>
					<form action="dreamdu.php" method="post" id="dreamduform">
						选择一个你在梦之都最想学的
						<select id="WebDesign" name="WebDesign">
							<optgroup label="client">
								<option value="HTML">HTML</option>
								<option value="CSS">CSS</option>
								<option value="javascript">javascript</option>
							</optgroup>
							<optgroup label="server">
								<option value="PHP">PHP</option>
								<option value="ASP">ASP</option>
								<option value="JSP">JSP</option>
							</optgroup>
							<optgroup label="database">
								<option value="Access">Access</option>
								<option value="MySQL">MySQL</option>
								<option value="SQLServer">SQLServer</option>
							</optgroup>
						</select>
						<br>
						<fieldset>
							<legend>label-for</legend>
							<label for='username1'>用户名</label><input type='text' id='username1' value='admin' name='username' size='10' maxlength='25'/>
							<label for='password1'>密码<input type='text' id='password1' name='password' size='15' maxlength='25'/> </label>
						</fieldset>
					</form>
		</p>
		<p>
		<abbr title='Limited'>Ltd.</abbr>
		<acronym title='Cascading Style Sheets' id='acronym'>CSS</acronym>
		<cite cite="http://www.dreamdu.com/xhtml/">一步步的教我学会HTML与XHTML</cite>
		<dfn>梦之都</dfn>
		强调一下,<em>不要</em>和我开玩笑!
		<address href="mailto:dreamdu@dreamdu.com">梦之都 webmaster</address>
		<blockquote cite="http://www.dreamdu.com/xhtml/">
		<p>标准网页设计要区分内容与表现,学习标准网页设计.</p>
		</blockquote>
		<pre> 
			 All
		   I   have
		to          do
		   is   learn
			 HTML
	                                 --梦之都
		</pre> 
		<separator />
		women his
		<br>
		<h1>FIRST</h1>
		<h2>SECOND</h2>
	</body>
</html>


大致效果图

baidu 
给我写邮件 
 
列表

  • www
  • dreamdu
  • com
  1. www
  2. dreamdu
  3. com
www
world wide web
dreamdu com
  • www.
  • dreamdu
    dream
    梦
    du
    我是dudu
  • .com
导航列表 
  • 介绍
  • http://
  • www
  • dreamdu
  • com
  • html教程
  • css教程
    表格

    用户名: 密码:
    网站建设服务:
    注册域名  购买空间  购买云主机  网站定位与策划  网站建设与制作  网站推广  网站运营  SEO服务 
    个人发展方向:
    游戏人生  美工设计  编程开发  运营与管理  创业 
    照片
    个性照片上传：

    计算机  旅游  购物 
    单行输入域： 无法输入的单行输入域： 
    多行输入域： 无法输入的多行输入框 
    help: 
    你对此次服务的评价： 
  •  
  •  
  •  
  •    选择一个你在梦之都最想学的 
  •    
  •  
  •  
  •  
    •    
  •  
  •  
  •  
    •    
  •  
  •  
  •  
    •  
    label-for  

    Ltd. CSS 一步步的教我学会HTML与XHTML 梦之都 强调一下,不要和我开玩笑!

    梦之都 webmaster

    标准网页设计要区分内容与表现,学习标准网页设计.

     
			 All
		   I   have
		to          do
		   is   learn
			 HTML
	                                 --梦之都
    women his 

    FIRST

    SECOND

    www.baidu.comcom的域名数量cn域名的数量net域名数量总数
    2003年100020003000
    2004年50006000
    2005年70009000


陈耀烨力量很强
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML实战训练(1)——美站库
皮蛋瘦肉没有肉
06-22 1460
本人新手，在学习了近一个月HTML之后第一次进行了实战项目，写个博客主要是想记录一下自己的学习路程，欢迎高手指出缺点         本次实战训练主要是运用自己所学知识写出美站库的界面，选择美站库的原因主要是因为其界面简洁，适合初学者练习。 准备事项: 美站库（http://www.jilalin.com/）DW CS6Firefox 相关图片素材 美站库
HTML简易网页练习
zhangmingxian1的博客
10-28 1373
例如：h1-h6，p，div(没有任何默认样式的块级元素，最常用的元素，不用特意清除默认样式)例如：b i u sub sup span(没有任何默认样式的行内元素)定义：在默认情况下，可以和其他行内元素在一行显示。3、在p标签中，不能嵌套其他的块级元素。定义：在默认情况下，独占一行的元素。4、p标签常用于页面中的纯文本。分割线可以用标签2、文字的尺寸依次减小。
第1章 补充案例（HTML练习题）
Ice Point.
02-03 4592
一、案例描述 1、 考核知识点 HTML5文档基本格式 2、 练习目标  初步了解HTML5文档基本格式。  能够运用HTML5文档基本格式制作简单的页面。 3、 需求分析 学习任何一门语言，都要首先掌握它的基本格式，HTML5标记语言也不例外。要想制作丰富多彩的HTML5网页，首先需要掌握HTML5文档的基本格式。本案例通过编写一个简单的HTML5网页，使初学者更好地理解HTML5文档的基本格式。 4、 案例分析 效果如图1-1所示。 具体实现步骤如下： a) 新建Dreamweaver默认文档。
HTML-简单练习
crraxx的博客
02-24 7900
练习1-李白 要求示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body align = "center"> <h1> 古诗词鉴赏</h1> <hr /> <h2 >静夜思</h2> <a href="
html表单练习
weixin_45239190的博客
08-06 2631
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
下面语句中,( a )将html页面的标题设置为"html练习",HTML试题
weixin_33481022的博客
07-28 1444
一、选择题1. 以下描述将图像作为链接的形式(一项)正确的是()A. ＜A Href=”http://doc.xuehai.net”＞＜IMG SRC="logo.gif"＞＜/A＞B. ＜A Href=”http://doc.xuehai.net”＞＜/A＞＜IMG SRC="logo.gif"＞C. ＜A Href=”http://doc.xuehai.net” IMG SRC="logo.g...
Html入门练习
热门推荐
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
html相关案例练习题
卓卓卓
10-16 1244
案例一 <!doctype html> <html> <head> <meta charset="utf-8"> <title>H5,200行代码实现粒子漩涡特效</title> <style> html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background
html 练习素材
01-02
这个"HTML练习素材"压缩包提供了一系列实例，旨在帮助学习者深入理解和掌握HTML5的相关技术。 在HTML5中，我们看到了一些重要的改进和新特性。首先，语义化标签的引入使得代码更具有可读性，例如`<header>`, `<nav>...
HTML练习之qq飞车首页
03-16
在本实践项目中，我们关注的是“HTML练习之QQ飞车首页”，这涉及到网页开发的基础技术，主要包括HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）。这两个核心技术是构建网页界面的主要工具，用于...
HTML练习文档 HTML练习文档
01-14
这个"HTML练习文档"可能是一系列用于学习和实践HTML语法、结构和元素的文件集合。通过这些文档，我们可以深入理解HTML的工作原理，提升网页设计和开发的能力。 HTML的主要特点在于其结构化标签，这些标签用来定义...
html练习.zip
07-25
这个“html练习.zip”压缩包显然包含了一些与HTML学习相关的资源，可能包括练习文件、示例代码、教程文档等。下面我们将深入探讨HTML的基本概念、重要元素以及它在网页设计中的作用。 HTML是一种标记语言，它通过一...
WE'RE GETTING MARRIED HTML练习模板_HTML_练习
09-24
这个"WE'RE GETTING MARRIED HTML练习模板"为初学者提供了一个实践HTML和CSS技能的机会。在这个模板中，你将学习到如何创建一个关于婚礼主题的静态网页。 首先，HTML用于定义网页的结构和内容，如标题、段落、链接...
HTML练习题
05-07
这是我自己整理出来的HTML练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
HTML_course.rar_html 练习题
09-14
本“HTML_course.rar_html 练习题”资源包含了一个完整的HTML学习课程，共分为七章，旨在帮助学习者深入理解和掌握HTML的基本概念、语法以及实际应用。通过这份资料，你可以系统地提升自己的HTML技能，并通过练习题...
html练习题
12-29
网校老师发的html练习题 很经典的 希望大家会喜欢的 感谢你们
JS与HTML练习实用
最新发布
03-25
JS与HTML练习实用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值