HTML笔记

关注

原创最新推荐文章于 2026-06-05 14:02:43 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

HTML基础知识学习笔记 HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性。阅读详情

一、一个简单的html页面：

<?xml version = "1.0" encording = "UTF-8"?> <!-- 表明网页时xml文档，版本为1.0，字符编码类型为UTF-8 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/1999/xhtml11/DTD/xhtml.dtd"> <!-- 指出该文档为XNTML1.1文档，允许网页浏览器检查文档，保证代码满足XHTML1.1的要求  -->
  
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!-- 这个没说 -->
  <head>
    <title>My First Page</title>
  </head>
  
  <body>
  <p>Hello World!</p>
  </body>
</html>

一个网页的有的标签：<html>,<head>,<title>,<body>。可以用标题标签突出文本，如<h1>,<h2>,<h3>等。下面一些总结:

1.链接

链接到另一个页面：

<a href = "url">click here!</a>

这里的下划线是以带下划线的蓝色字体显示，单击之后变为红色。可用CSS修改这些属性：

a:link{/*链接尚未访问过*/   color:#19619A; /*淡蓝色*/   font-weight:bold; /*将链接的字体设置为粗体*/   text-decoration:none; /*删除下划线*/
}
a:hover{/*鼠标指向链接*/   background-color:gold;   font-weight:bold;   text-decoration:none;
}
a:active{/*链接被激活，如用鼠标单击*/   color:red;   text-decoration:none;
}
a:visited{/*链接已访问*/   color:red;   font-weight:bold;   text-decoration:none;
}

可用相对地址链接到另一个文件夹的网页，如：

<a href = "another.html"> click here!</a>

<p><!-- <span style="font-family:宋体;">链接到同一个文件夹的网页 </span><span style="font-family:Times New Roman;">--></span></p><p><a href = "document/another.html">click here!</a></p><p>    <!-- <span style="font-family:宋体;">链接到另一个文件夹的网页 </span><span style="font-family:Times New Roman;">--></span></p><p><a href = "../another.html">click here!</a></p><p>    <!-- <span style="font-family:宋体;">链接到父文件夹下的网页 </span><span style="font-family:Times New Roman;">--></span></p>

二、在新浏览器窗口中打开链接：

<a href = "url", target = "_blank">click here!</a>
   <!-- W3C在XHTML中删除了target = "_blank" -->
<head>
<title>My Page</title>
<script type = "text/javascript" src = "external.js"></script>
</head><!-- 用Javascript来实现 -->

链接到网页内部：

<a href = "#anchor"> click here!</a>
<p id = "anchor">I am here</p>

<a href = "another.html#anchor">click here!</a>
<!-- 链接到另一个网页的特定位置 -->

在网页中链接Email地址：

<a href = "mailto:example@example.com?subject = Question$amp;body = May I ask you a qusetion?">send message to me </a>
<!-- subject表示邮件的主题，body表示邮件的内容。这两个属性邮件地址之间用“?"隔开，属性之间用"&"隔开-->
<a href = "mailto:example@exaple.com">send message to me</a>
<!-- 可用ASCII码代替字符"a"，可以减少垃圾邮件 -->

三、文本对齐和列表

文本对齐:

<p style = "text-align:center">text</p>
<!--text-align样式规则的默认值为left，可选值有left，center，right-->
<div style = "text-align:center">block</div>
<!-- 可为块设置对齐方式 -->

列表：

<ol><!-- 有序列表，自动添加编号，自动缩进和分行-->
  <li>order one</li>
  <li>order two</li>
  <li>order three</li>
</ol>
<ul><!-- 无序列表，自动添加项目符号，自动缩进和分行-->
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<dl><!--自动缩进和分行-->
  <dt>term</dt>
  <dd>defination</dd>
</dl>

另外，可在<ul>,<ol>,<li>标签中使用"list-style-type"指定项目符号类型。

<pre>可将文本格式化为等宽字体，并且在<pre>中使用的空格和分行将被保留。

三、图像

将图像放到网页中：

<!-- "src"标识图像的位置； "alt"指定图像的描述性文本，当图像不可见时，可看到该属性指定的文本；

"title"提供在图像可见时对图像的描述；图像可以是GIF，PNG，JPEG格式的图像文件-->

对齐图像：

<!-- 文本与图像的垂直对齐:

"text-top"表示图像的顶部与同一行中最高的图像或文本的顶部对齐，"middle"图像的中心与同一行中其他内容的中心对齐；

"text-bottom"表示图像的底部与文本的底部对齐；"baseline"表示图像的底部与文本的基线对齐-->

将图像变为链接：

<a href = "MyImage.gif"><img src = "MyImage.gif" alt = "My image" style = "My image" style = "border-style:none"/></a>
<!--通常，网页浏览器会在图片链接的周围绘制一个彩色矩形，如果不希望显示之隔边框，可在<img>中包含style = "borde-style:none"-->

图像映射：

<map id = "MyImage">
<area shape = "rect" coords = "0,0,100,100" href = "MyImage_1.gif" alt = "MyImage_1" />
<!--"rect"表示该区域是矩形，"0,0,100,100"表示左上角的坐标和右下角的坐标-->
<area shape = "cricle" coords = "10,10,5" href = "MyImage_1.gif" alt = "MyImage_2" />
<!--"circle"表示该区域为圆形，"10,10,5"表示圆心坐标和半径-->
<area shape = "poly" coords = "0,0,100,100,234,234,123,123,245,245" href = "MyImage_1.gif" alt = "MyImage_3" />
<!--"poly"表示多边形，"0,0,100,100,234,234,123,123,245,245"表示所有顶点的坐标-->
</map>
<img src = "MyImage.gif" alt = "My image" title = "My image" usemap = "#MyImage" style = "border-style:none"/>
<!--usemap属性的值为<map>标签id的值-->

四、自定义背景和颜色

背景颜色和文本颜色：

背景图像：

五、表格

<table width="50%" border="1">
	<tr>
  	<td> </td>
    <td colspan="2"> </td>
  </tr>
  <tr>
  	<td rowspan="2"> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>

效果图：

总结：rowspan跨行：垂直方向

　　Colspan:跨列：水平方向

六、框架：

（实现左边点击，右边显示内容），franeset要放在body外面

主页面main.html：

<frameset rows="100,*">
	<frame src="top.html" name="top"/>
  <frameset cols="200,*">
  	<frame src="left.html"  name="left"/>
 	 	<frame src="right.html" name="right"/>
  </frameset>
</frameset>

left页面（left.html）:

<body>
left页面<br />

<a href="http://www.baidu.com" target="right">百度</a><br />

<a href="http://www.sina.com" target="right">新浪</a>
</body>

效果图：

总结：关键部分是在定义框架时，给每一个框架增加了name属性，在left页面中的超链接中的target中制定属性

Iframe框架：

七、表单：

<form>
用户：<input type="text" name="user" /><br />
密码：<input type="password" name="pass" /><br />
确认密码：<input type="password" name="repass" /><br />
性别：<input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" value="nv"/>女<br />
爱好：<input type="checkbox" name="java" />Java <input type="checkbox" name="CSS"  />CSS <input type="checkbox" name="python" />Python<br />
国家：
<select multiple="multiple" size="3">
	<option>--请选择国家--</option>
  <option>中国</option>
  <option>美国</option>
  <option>日本</option>
</select><br />
<input type="submit" value="提交" /> <input type="reset" value="默认" /><br />
<input type="image" src="1.jpg" width="100" height="50"/>
</form>

效果图：