HTML基础

最新推荐文章于 2024-04-04 13:31:27 发布

琚建飞

最新推荐文章于 2024-04-04 13:31:27 发布

阅读量628

点赞数 7

分类专栏：前端

本文链接：https://blog.csdn.net/Gnd15732625435/article/details/52778056

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

HTML定义

HTML，HyperText Markup Language，超文本标记语言。本来打算总结一下它的标签功能和特殊符号，看了百度百科后，发现介绍的很全面。写一些其他的吧。参考链接：标签功能查询 HTML5 。

它为什么叫超文本呢，是因为它可以做出包含图片，链接，多媒体，程序等非文字元素，所包含内容超出了文本，所以叫超文本。HTML结合其他的Web技术可以创造出功能强大的网页，多个网页的有机结合就是网站。它的特色是超链接，即URL（Uniform Resource Lacator）指针，点击它可以获取新的网页，这个特色是让HTML受欢迎的重要原因之一。网页本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如文字处理，画面安排，图片显示等）。需要注意的是，不同的浏览器对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果，所以写web页面时需要考虑浏览器兼容的问题。

语言特点：制作简单，功能强大，也是万维网（WWW）盛行的原因之一。可扩展；与平台无关；通用性，所有人都可以浏览，无论浏览器和电脑的类型。

HTML格式

HTML语法

1. 属性赋值，加不加双引号都行。

2. html文档中，如果存在连续多个空白字符（空格/制表符/回车/换行），浏览器显示时将只解析为一个空格字符。注意：全角状态下的空格是不消除的，但是在不支持中文的浏览器中会显示乱码，在支持中文的浏览器中，相对于特殊符号，它可以减少字节数。全角和半角切换快捷键：shift+空格。

3. HTML注释：

4. 写HTML的时候，标签要成对儿的写，防止少写。

不同浏览器的兼容问题

实验了一下，如果文本框宽度都是 30，firefox和ie显示的是不一致的，ie浏览器显示的不对齐。如图：

<html>
<head>
    <title>实战小例子</title>
</head>
<body>
 <form method="get" action="reg.jsp" > 
		<table align="center">            
			<tr>
				<td>用户名：</td>        
				<td><input type="text" name="user" value="游客" size="33"></td>
			</tr>
			<tr>
				<td>密　码：</td>
				<td><input type="password" name="pwd" size="33"></td>
			</tr>
			<tr>
				<td>性　别：</td>
				<td><input type="radio" name="sex" value="1" checked>男 
				<input type="radio" name="sex" value="2">女
				</td>
			</tr>
			<tr>
				<td ><input type="reset" value="重写"></td>  
				<td ><input type="submit" value="注册"></td> 
			</tr>
		</table>								
	</form>
</body>
</html>

HTML示例

<html>
<head><title>实战小例子</title></head>  
<body>
	<!--method(提交表单数据使用的HTTP方法);action（附加到url末端）-->
	<form method="get" action="reg.jsp" > 
		<!--整个表格居中-->
		<table align="center">             
			<tr>
				<!--td，一列；tr，一行。-->
				<td>用户名：</td>         
				<td>
				    <!--input,输入框，type，创建的控件类型，name指定控件的名称，value，初始值；size,输入框宽度-->
					<input type="text" name="user" value="游客" size="33">
				</td> 
			</tr>
			<tr>
				<td>密　码：</td>
				<td><input type="password" name="pwd" size="33"></td>
			</tr>
			<tr>
				<td>性　别：</td>
				<!--radio，单选按钮控件；checked表示默认选项；男，按钮后面的字-->
				<td><input type="radio" name="sex" value="1" checked>男  
				<input type="radio" name="sex" value="2">女
				</td>
			</tr>
			<tr>
				<td>兴趣爱好:</td>
				 <!--checkbox，复选框。-->
				<td><input type="checkbox" name="interest" value="football" >音乐  
					<input type="checkbox" name="interest" value="basketball" >篮球
					<input type="checkbox" name="interest" value="dangang" >单杠
					<input type="checkbox" name="interest" value="readbook" >读书
			</tr>
			<tr>
				<td>最高学历：</td>
				<td>
					<!--select，列表框；option，列表框元素-->
					<select size="1" name="education">  
						<option value="高中">高中</option>
						<option value="大学" selected>大学</option>
						<option value="硕士">硕士</option>
						<option value="博士">博士</option>
					</select>
				</td>
			</tr>
			<tr>
			    <!--valign，垂直居中-->
				<td valign="top">个人简介：</td>  
				<!--textarea,多行文本；rows，一页能显示行数；cols，一页有多少列-->
				<td><textarea name="personal" rows="5" cols="24">请输入内容</textarea></td> 
			</tr>
			<tr>
			    <!-- reset，重置按钮-->
				<td ><input type="reset" value="重写"></td>  
				<!-- submit，提交按钮-->		
				<td ><input type="submit" value="注册"></td>  				
			</tr>
		</table>								
	</form>
</body>
</html>

效果图：