31.html_31.htlm-CSDN博客

本文链接：https://blog.csdn.net/m0_53222768/article/details/117636303

本文详细介绍了前端开发的基础知识，包括HTML、XHTML的规范和结构，浏览器兼容性问题，以及常用的前端开发工具。特别强调了XHTML的语法要求，如标签闭合、属性值需引号包围等。此外，还涵盖了前端框架集和内联框架的使用，以及HTML中的头部和body常用标签，如表单、链接、图片等。

摘要由CSDN通过智能技术生成

@一贤爱吃土豆

1.前端的组成:

html(内容)
css(排版样式)
JavaScript(特效,表单验证)

2.前端编译(解析)器

浏览器
同一个页面,不同浏览器,解析出效果不同,这叫浏览器兼容性问题.因为不同浏览器的内核不同,而全球浏览器没有统一

3.前端开发工具

记事本,
nodePad++,
hbuilder,
Dreamweaver,
WebStorm,
eclipse,
myeclipse,
idea等

4.html

是一种超文本标记语言.
后缀名:.html 或.htm
(html由标签组成的一种语言,它的标签都有特定含义)

5.xhtml规范

因为html由标签组成语言.

5.1:每个xhtml页面都有根标签

<html></html>

其他标签必须定在根标签里面.

5.2:xhtml标签不区分大小写,但是w3c提倡标签名全小写.

5.3:xhtml标签必须关闭:

双标签:<标签名></标签名>
单标签:<标签名/>

5.4:xhtml标签可以有一个到多个属性,属性值必须用引号

双标签:<标签名属性名1=“值1” 属性名2=“值”></标签名>
单标签:<标签名属性名1=“值1” 属性名2=“值”/>

5.5:xhtml标签可以相互嵌套,嵌套要正确.

eg:<标签名1><标签名2></标签名2></标签名1>

5.6:xhtml标签都有特定含义,这些标签已经规定好了,不能随意自己定义标签.

6.xhtml组成

文档声明+html基本结构组成.

7.xhtml的文档声明:

7.1:严格型文档声明

<!DOCTYPE html    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
						"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

7.2:过度型文档声明

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
						"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

7.3:框架集型文档声明

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
						"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

8.html基本结构:

	<html>
		<head>
			<title>页面标题</title>
		</head>
		<body>

		</body>
	</html>

9.html注释

<!--注释内容-->

10.html中头部常用标签:

10.1:页面标题标签

<title></title>

10.2:设置页面内容编码:

<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<meta http-equiv="charset" content="iso-8859-1"/>

10.3:设置搜索关键字

<meta name="keywords" content="关键字"/>

10.4:设置网页描述

<meta name="description" content="内容"/>

10.5:设置几秒跳转

 <meta http-equiv="refresh" content="3;url=页面地址"/>

11.html中body常用标签:

11.1:块级标签:独占一行.

11.1.1:内容标题标签

<h1>~<h6>

11.1.2:段落标签

<p></p>

11.1.3:水平线标签

<hr/>

11.1.4:有序列表标签

		<ol type="A">
			<li>买辆劳斯莱斯</li>
			<li>买游艇</li>
			<li>天天洗脚</li>
		</ol>

11.1.5:无序列表标签

		<ul type="square">
			<li>睡觉</li>
			<li>在梦中实现</li>
			<li>还是希望大家在现实中实现</li>
		</ul>

11.1.6:自定义列表:图文混排

		<dl>
			<dt>java</dt>
			<dd>java是一种跨平台,编译型解释型语言</dd>
			<dd>java是一种纯面向对象的语言</dd>
		</dl>

11.1.7:表格. 跨列:colspan=“列数” 跨行:rowspan=“行数”

注意:一般情况下,先按最细的行和列来完成表格,再实现跨行和跨列,删除多余的表格.

		<table border="1" width="300px" height="200px">
			<!--行-->
			<tr>
				<!--列--><!--跨列:colspan="列数"-->
				<td colspan="3"></td>
				
			</tr>
			<!--行-->
			<tr>
				<!--列--><!--跨行:rowspan="2"-->
				<td rowspan="2"></td>
				<td></td>
				<td></td>
			</tr>
			<!--行-->
			<tr>
				<!--列-->
				
				<td></td>
				<td></td>
			</tr>
		</table>

功能性表格(了解)

	eg:<!--功能性表格-->
		<table border="1">
			<!--表的标题-->
			<caption>年终数据报表</caption>

			<!--表头-->
			<thead>
				<!--行-->
				<tr>
					<!--列-->
					<th>宿舍号</th>
					<th>水费</th>
					<th>电费</th>		
				</tr>
			</thead>

			<!--表主体-->
			<tbody>
				<!--行-->
				<tr>
					<!--列-->
					<td>101</td>
					<td>50</td>
					<td>500</td>
				</tr>
				<!--行-->
				<tr>
					<!--列-->
					<td>102</td>
					<td>50</td>
					<td>500</td>
				</tr>
				<!--行-->
				<tr>
					<!--列-->
					<td>103</td>
					<td>50</td>
					<td>500</td>
				</tr>
			</tbody>


			<!--表尾-->
			<tfoot>
				<!--行-->
				<tr>
					<!--列-->
					<th>总计</th>
					<th>150</th>
					<th>1500</th>		
				</tr>
			</tfoot>
		</table>

11.1.8:整个表单是块级标签,表单中元素是行级标签

			eg:<!--表单-->
		<form method="get/post" action="4.超链接.html" enctype="application/x-www-form-urlencoded">
			<!--文本框--><!--只读属性:readonly="readonly"-->
			用户名:<input type="text" name="" value="sx" readonly="readonly"/><br/>
			<!--密码框-->
			密码:<input type="password" name="" value=""/><br/>
			<!--单选按纽:同一组单选按纽的name属性值必须一致-->
			性别:<input type="radio" name="sex" value="man" checked="checked"/>男
			     <input type="radio" name="sex" value="woman"/>女<br/>
			<!--多选框:同一组多选框的name属性值必须一致-->
			爱好:<input type="checkbox" name="hobby" value="sleep"/>sleep
			     <input type="checkbox" name="hobby" value="basketball"/>basketball
			     <input type="checkbox" name="hobby" value="game"/>game
			     <input type="checkbox" name="hobby" value="study" checked="checked"/>study<br/>
			<!--日历框-->
			出生日期:<input type="date" name="" value=""/><br/>
			<!--邮箱-->
			邮箱:<input type="email" name="" value=""/><br/>
			<!--下拉列表框-->
			出生城市:<select name="">
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen" selected="selected">深圳</option>
					<option value="guangzhou">广州</option>
				</select><br/>
			<!--文件域-->
			头像:<input type="file" name=""/><br/>
			<!--隐藏域-->
			隐藏域: <input type="hidden" name="id" value="1"/><br/>

			<!--多行文本框-->
			协议:<textarea rows="4" cols="20">请阅读以下协议
					辱偶尔佛饿佛耳机偶发融入更投入
			     </textarea><br/>
			
			<!--提交按纽-->
			<input type="submit" value="提交"/>
			<!--图片按纽,自带提交-->
			<input type="image" src="images/btnLogin.jpg"/>
			<!--重置按纽-->
			<input type="reset" value="重置"/>
			<!--普通按纽--><!--禁用属性:disabled="disabled"-->
			<input type="button" value="普通按纽" disabled="disabled"/>
		</form>

11.1.9:容器标签

<div></div>

11.2:行级标签(内联标签):内容有多大占多大位置.

11.2.1:换行标签

<br/>

11.2.2:图片标签:

<img src="图片相对地址" title="鼠标悬停文字" alt="图片加载失败的提示文字"/>

11.2.3:超链接:

11.2.3.1:页面间链接

<a href="页面地址">链接内容</a>

11.2.3.2:锚链接:

					页面间锚链接:从A页面的A位置跳转到B页面的B位置
								B页面的B位置做标记:<a name="标记名">内容</a>
							A页面的A位置跳转:<a href="B页面地址#标记名">内容</a>
			
					页面内锚链接:从A页面的A位置到转到当前页面的B位置
							A页面的B位置做标记:<a name="标记名">内容</a>
							A页面的A位置跳转:<a href="#标记名">内容</a>

11.2.3.3:功能性

<a href="mailTo:邮箱地址">内容</a>

11.2.4:范围标签

<span></span>

12.框架集:与标签不共存;页面要么不用框架集,要用必须整个页面全用框架集.

优点:方便布局.
缺点:灵活性差;加载效率低.

	eg:<!--框架集-->
	<frameset rows="20%,60%,*">
		<!--上面部分-->
		<frame src="3.功能性表格.html" />
		<!--中间部分-->
		<frameset cols="20%,60%,*">
			<!--左边部分-->
			<frame src="4.超链接.html" />
			<!--中部分-->
			<frame src="5.表单的使用.html" />
			<!--右边部分-->
			<frame src="4.超链接.html" />
		</frameset>
		<!--下面部分-->
		<frame src="3.功能性表格.html" />
	</frameset>

13.内联框架:在页面的任何地方都可以用.

优点:灵活性好;实现页面复用

eg:<!--内联框架-->
	<iframe src="4.超链接.html" width="100%"></iframe>

14.特殊符号

	&lt; 小于号          
	 &gt; 大于号       
	 &amp; 与字符        
	 &quot; 引号         
	 &reg; 己注册        
	&copy; 版权        
	&trade; 商标        
	&nbsp; 空格

总结:
1.前端的组成.
2.前端的编译器.
3.前端的开发工具
4.html定义
5.xhtml的规范(重点)
6.html的组成
7.html的常用文档声明
8.html基本结构
9.常用头部标签(重点)
10.常用body中标签(重点)
11.框架集
12.内联框架(重点)
13.特殊符号