HTML 简介,基本标签及列表和表格

最新推荐文章于 2023-01-01 18:00:39 发布

Dust_SongYunfei

最新推荐文章于 2023-01-01 18:00:39 发布

阅读量907

点赞数 5

分类专栏： # HTML+CSS 文章标签： html简介 html基本标签 html列表标签 html表格标签

本文链接：https://blog.csdn.net/dust__/article/details/90349246

版权

HTML+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一，HTML网页结构

1.HTML:HyperText Markup Language 超文本标记语言

(2) 超文本：在一个网页中除了文本之外的，还包含有视频，图片，音频，超链接，表格，列表等。

标记语言：指标签组合而成的语言<>

浏览器可以识别的只有html语言

网页的后缀名: .html和.htm

(3)网页编译器:

HBulider,Dw(Dreamweaver), Webstorm, Sublime Text,Notpad++,VS(Microsoft Visual Studio),Ecliase等等

(4) 详情了解以下网址:

https://baike.so.com/doc/5869876-6082735.html

2.Hbulider 快捷键的使用:

快速注释/取消注释:ctr+/

快速删除:ctrl+d

移动代码位置:ctrl+方向键 (键盘上下左右)

快速检索元素位置:ctrl+f

整理代码:ctrl+shift+f

代码提示: alt+/

二.html基本标签:

1.网页的基本结构:

<!DOCTYPE html>
    文档类型,主要告诉浏览器当前的HTML文件按照HTML5.0的规范进行组织, 
为了防止HTML5.0的标签设置失效,从而加在文档的最前面
<html>  
    <head>
    网页的头部,所有头部的容积
    <meta charset="utf-8" />
       指当前文档的编码格式为utf-8, 可以识别中文,不会产生乱码
       <title>/title> 
        网页的标题  
    </head>
    <body>
    网页的主要显示区域
    </body>
</html>

2.html的基本标签:

字体标签: font

属性: color(设置字体颜色) size (设置字体大小 1-7 (1为最小字体 7为最大字体网页默认字体为3)) face(设置字体)

加粗标签:b 倾斜标签:i 下划线标签:u 删除标签:s

标题标签:h1-h6(1为最大字体 6为最小)

换行标签:br

水平线标签:hr

属性 :size:水平线的粗细 color:水平线的颜色 width：水平线的宽度 noshade:去掉水平线的阴影

上标标签:sup 下标标签:sub

段落标签:p

预定义格式化标签:pre(可以按照预想位置呈现)

超链接标签:a

属性:href:目标文件的地址 target:目标显示窗口

target取值：_blank:在新窗口打开目标文件

_self: 在当前窗口中打开目标文件（默认）

_parent:在父级窗口来打开目标文件

_top:在最顶级窗口来打开目标文件

绝对地址：访问远程文件，a href=http://.....

相对地址：访问本地文件，a href="img/....."

特殊链接: 邮箱链接：a href="123456@qq.com"

空链接：a href="#"

锚点连接：点击某一个超链接，它就会跳到当前页面的某一部分。

<p id="Top">这是顶部</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#Top">返回顶部</a>

图片标签:img

属性: src:路径 width:宽度 height:高度 border:边框粗细 hspace:图片与左右文字对齐

vspace:图片与上下对齐 align:图片对齐方式取值: top,bottom,left,right

align 属性只能让文本居中，不能让图片单独居中。（要想图片居中div style="text-align: center /div）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
        <p>这是段落标签</p>
        <font color="red" size="5" face="楷体"> 这是字体标签</font><br />
        <hr />
         <font><b>这是加粗字体</b></font><br />
         <font><u>这是下划线字体</u></font><br />
        <font><i>这是斜体字体</i></font><br />
        <font><s>这是删除字体</s></font><br />
        <font>10<sup>2</sup>&nbsp;co<sub>2</sub><font><br />
        <pre> 舂眠不觉晓,
处处闻啼鸟.
        </pre>
        <a href="http://www.baidu.com"></a>
        <a href="#"><a>
        <div style="text-align: center;border: 1px粗细 solid实现 red;">
		<img src="img/200.gif" width="400" border="5" />
		</div>
	</body>
</html>

三.html的列表和表格标签

1.列表: 一组数据的集合

无序列表ul,li

属性: type 取值:disc 小黑点,circle空心圆,square,实心方块

<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQ</li>
</ul>

有序列表: ol, li

属性:type 取值:1,a,A,i,I

strat:从第几个开始编码

<ol type="A" start="6">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQ</li>
</ol>

自定义列表:dl,dt,dd

<dl>
			<dt>静夜思</dt>
			<dd>--李白</dd>
			<dt>静夜思</dt>
			<dd>--李白</dd>
		</dl>

2.表格:

table->tr->td //table->thead->tbody->tfoot

caption:表格的标题,在表格之上

thead:表格的上部表头

tbody:表格的中间内容

tfoot:表格的底部内容

<body>
	<table border="1" width="500" cellspacing="0" align="center">
	<caption>就业学员统计表</caption>
		<thead><tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>岗位</th>
				</tr>
		</thead>
		<tbody>
				<tr align="center">
					<td>张三</td>
					<td>20</td>
					<td>软件开发</td>
				</tr>
			    <tr align="center">
					<td>李四</td>
					<td>22</td>
					<td>数据处理</td>
				</tr>
				<tr align="center">
					<td>王五</td>
					<td>21</td>
					<td>人工智能</td>
				</tr>
		</tbody>
		<tfoot>
				<tr align="center">
					<td colspan="3">
						版权符号 &copy;科技公司所有
					</td>
				</tr>
		</tfoot>
		</table>
</body>

table属性:

border: 表示表格的边框宽度

align:设置元素的水平对齐方式取值: left,center,right

valign:设置元素垂直对齐方式取值:top,bottom

cellspacing:设置单元格与单元格之间距离

cellpadding:设置单元格内容与单元格边框之间距离

bgcolor:设置元素的背景颜色

tr,td属性: rowspan:合并行

colspan:合并列

<table border="1" cellspacing="0" cellpadding="1" width="800px" height="400px" align="center" bordercolor="blue">
	<tr>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
	</tr>
	<tr>
		<td rowspan="4">&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td rowspan="4">&nbsp;&nbsp;&nbsp;&nbsp;</td>
	</tr>
</table>