HTML简述

最新推荐文章于 2024-05-25 15:23:56 发布

ZJMing_sir

最新推荐文章于 2024-05-25 15:23:56 发布

阅读量163

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/zjming_sir/article/details/114045416

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基础概念，包括其作为超文本标记语言的作用，以及如何使用doctype声明、结构标签如`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`等构建基本网页结构。内容涵盖了HTML标签的使用，如设置背景颜色、背景图片，表格的创建，以及注册表单的详细实例。

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

HTML简述

前端开发的定义：

为B/S架构软件提供界面解决方案

HTML概述

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记[标签]语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。

HTML文档基本结构

一个html的基本结构如下：

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>
12345678910

第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链Css样式文件和Javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。

一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。

常用标签介绍

例子1：
   <html>
    <head><title>背景颜色</title> </head>
     <body  bgcolor="red">
     <font  size="4"  face="黑体"  color="red">背景颜色</font>
     </body> </html>
  例子2：
   <html>
    <head><title>背景颜色</title> </head>
     <body  background="bg.jpg">
     <font  size="4"  face="黑体"  color="red">背景图片</font>
     </body> </html>


html中有很多特殊的字符是需要特殊的处理。
   下面看几个特殊的字符处理：
转义字符
     &lt;   <        &gt;    >         &amp;   &           &qout;  “   &nbsp; 空格
例子：  <html>
    <head><title>特殊的字符</title> </head>
    <body>
      &lt;<br>&gt;<br>&amp;<br>  &qout;<br>
    </body>
  </html>


表格的结构
       1.<table>
            <table>...</table>是用来在html页面上创建表格的。
	 2.<th>代表列名一般放在第一行
      3.<tr>代表格的一行。
      4.<td>用来定义表格的一列。
      在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。

HTML注册表单制作例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 align="center">注册</h1>
		<center>
			<form action="#" method="get">
				<table border="0" cellspacing="0" cellpadding="20" width="400px" height="500px" bgcolor="whitesmoke">

					<tr>
						<td align="center">用户名:</td>
						<td><input type="text" name="username" value="" placeholder="请输入用户名" required="required" maxlength="10" /></td>
					</tr>
					<tr>
						<td align="center">密码:</td>
						<td><input type="password" name="password" value="" placeholder="请输入密码" required="required" maxlength="10" /></td>
					</tr>
					<tr>
						<td align="center">性别:</td>
						<td><input type="radio" name="sex" value="1" checked="checked" id="nan" />
					<label for="nan">男</label>
					<input type="radio" name="sex" value="0" checked="checked" id="nv" />
					<label for="nv">女</label></td>
					</tr>
					<tr>
						<td align="center">生日:</td>
						<td><input type="date" value="" /></td>
					</tr>
					<tr>
						<td align="center">爱好:</td>
						<td><input type="checkbox" name="hobby" id="basketball" value="basketball" checked="checked" />
					<label for="basketball">篮球</label>
					<input type="checkbox" name="hobby" id="football" value="football" checked="checked" />
					<label for="football">足球</label>
					<input type="checkbox" name="hobby" id="volleyball" value="volleyball" checked="checked" />
					<label for="volleyball">排球</label></td>
					</tr>
					<tr>
						<td align="center">学历:</td>
						<td><select name="xueli">
					<option value="">--请选择你学历--</option>
					<option value="youeryuan">幼儿园</option>
					<option value="xiaoxue">小学</option>
					<option value="zhongxue">中学</option>
					<option value="daxue" selected="selected">大学</option>
				</select></td>
					</tr>
					<tr>
						<td align="center">个人描述:</td>
						<td><textarea rows="5" cols="30" name="desc">
					请输入内容
				</textarea></td>
					</tr>
					<tr>
						<td align="center">上传照片:</td>
						<td><input type="file" name="photo" /></td>
					</tr>
					<tr>
						<td></td>
						<td><input type="submit" value="注册" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置" /></td>
					</tr>
				</table>
				<!-- 用户名:<input type="text" name="username" value="" placeholder="请输入用户名" required="required" maxlength="10" />
				<br>
				密码:<input type="password" name="password" value="" placeholder="请输入密码" required="required" maxlength="10" />
				<br>
				性别:<input type="radio" name="sex" value="1" checked="checked" id="nan" />
					<label for="nan">男</label>
					<input type="radio" name="sex" value="0" checked="checked" id="nv" />
					<label for="nv">女</label>
				<br>
				生日:<input type="date" value="" />
				<br>
				爱好:<input type="checkbox" name="hobby" id="basketball" value="basketball" checked="checked" />
					<label for="basketball">篮球</label>
					<input type="checkbox" name="hobby" id="football" value="football" checked="checked" />
					<label for="football">足球</label>
					<input type="checkbox" name="hobby" id="volleyball" value="volleyball" checked="checked" />
					<label for="volleyball">排球</label>
				<br>
				学历:<select name="xueli">
					<option value="">--请选择你学历--</option>
					<option value="youeryuan">幼儿园</option>
					<option value="xiaoxue">小学</option>
					<option value="zhongxue">中学</option>
					<option value="daxue" selected="selected">大学</option>
				</select>
				<br>
				个人描述:
				<textarea rows="5" cols="30" name="desc">
					请输入内容
				</textarea>
				<br>
				上传照片:<input type="file" name="photo" />
				<br>
				<input type="submit" value="注册" />
				<br>
				<input type="reset" value="重置" /> -->
			</form>
		</center>
	</body>
</html>