HTML基础

最新推荐文章于 2023-09-15 17:36:55 发布

ZX周公子

最新推荐文章于 2023-09-15 17:36:55 发布

阅读量252

点赞数

本文链接：https://blog.youkuaiyun.com/ZXD693/article/details/92092962

版权

这篇博客介绍了HTML作为编写Web页面的基础，包括HTML的结构、属性、CSS的使用，以及各种标签的应用。通过学习和实践HTML标签，并结合CSS进行布局，可以逐步掌握网页设计的基本技巧。虽然牢记所有标签并非易事，但频繁练习和关注新标签动态将有助于提升HTML布局能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML是用于编写Web页面的超文本标记语言，下面简单介绍一下HTML。
结构：

<html>                                        //开始HTML文档
	<head>                                   //开始文档头部
		<title>第一个HTML网页</title>       //开始文档标题/文档标题/结束文档标题
	</head>                                     //结束文档头部
	<body>                                      //开始文档体
		<font color="red" size="7" face="楷体">Hello HTML</font>    //文档内容
	</body>                                   //结束文档体
</html>

基础

HTML 标题
  HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.
	<h1>这是一个标题1</h1>
	<h2>这是一个标题2</h2>
	<h3>这是一个标题3</h3>
HTML 段落	
  HTML 段落是通过标签 <p> 来定义的.
	  <p>这是一个段落。</p>
HTML 链接	  
  HTML 链接是通过标签 <a> 来定义的.
  	 <a href="http://www.runoob.com">这是一个链接</a>
HTML 图像
  HTML 图像是通过标签 <img> 来定义的
    <img src="/images/lpicture.png" width="200px" height="300px" />.

属性

class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:

 - 内联样式- 在HTML元素中使用"style" 属性
 - 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
 - 外部引用 - 使用外部 CSS 文件

内联样式:当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
 	<p style="color:blue;margin-left:18px;">It's a paragraph.</p>
内部样式表:当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表
	<head>
	<style type="text/css">
	body {background-color:red;}
	p {color:yellow;}
	</style>
	</head>
外部样式表:当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，可以通过更改一个文件来改变整个站点的外观。
  	<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
	</head>

标签

表格标签：最早就是用来布局页面的，让页面元素放在合适的位置，使页面看起来整洁美观 
border="1" 表格的边框
		 cellspacing="0" 设置为0 可以让边框变成实线边框
		 cellpadding="10px" 调整单元格跟内容之间的间距
		 height="300px"  表格的高
		 width="300px" 表格的宽
		 align="center" 表格的对齐方式 left center right
		 bgcolor="aquamarine" 表格的背景颜色
		 background="img/c.jpg" 表格的背景图片
		 
<table border="1" cellspacing="0" cellpadding="10px" height="300px" width="300px" align="center" bgcolor="aquamarine" background="img/c.jpg">
			<caption><h1>学生信息表<h1></caption>
			<tr> //表头
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>学号</th>
			</tr>
			<tr align="center" bgcolor="palevioletred" height="100px">
				<td width="100px">张某</td>
				<td>23</td>
				<td>男</td>
				<td>s001</td>
			</tr>
			<tr align="center" background="img/c1.jpg">
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr align="center">
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td bgcolor="yellow">单元格</td>
			</tr>		
		</table>

div标签
 div 我们称之为一个块表标签，或者说层标签， 不带任何样式，所以我们就通过他跟CSS配合，来对他所包裹的内容，进行样式的控制。
块标签：这个标签的宽度默认会占据一整行 h1  ul  div
行标签：这个标签的宽度，不会占据一整行，内容有多宽他就有多宽 font b s u a

<div id="">
				abc
</div>

框架标签
frameset
注意 frameset 标签不能和body标签共存

①border  设置框架的边框粗细。
②bordercolor		设置框架的边框颜色。
③frameborder  设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
④cols   纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、*”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“*”表示该区域占用余下页面空间。例如：cols="25%,200,*" 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
⑤rows   横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing   设置框架与框架间的保留的空白距离。
 
frame
①name   设置框架名称。此为必须设置的属性。
②src   设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling   设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor   设置框架的边框颜色。
⑤frameborder   设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize   设置框架大小是否能手动调节。
⑦marginwidth   设置框架边界和其中内容之间的宽度。
⑧marginhight   设置框架边界和其中内容之间的高度。
⑨width  设置框架宽度。
⑩height   设置框架高度。

iframe
是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）

①align  设置垂直或水平对齐方式

②allowTransparency  设置或获取对象是否可为透明。

学习HTML中，学习了很多标签，通过CSS我们可以用嵌套的方式，进行简单的网页布局，虽然做的很简陋，不过还是很有意思的，当然，要将这些标签全部记住难度还是很大的，只有多使用，以及及时查阅，注意新的标签动态，还是要熟练之后才能更好的做出布局。