HTML基础入门总结

最新推荐文章于 2022-05-11 08:48:50 发布

"_修乄一世才华_"

最新推荐文章于 2022-05-11 08:48:50 发布

阅读量202

点赞数 1

分类专栏： JavaWeb 文章标签： HTML快速入门 HTML标签介绍及示例

本文链接：https://blog.csdn.net/qq_37484253/article/details/85109603

版权

JavaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML：超文本标记语言（HyperText Markup Language）

“语言” 就是指人与计算机交互的工具。
“标记” 就是使用标签的方式将需要的内容包括起来。例如：<a>www.itcast.cn</a> （xml）
“超文本”就是指页面内可以包含图片、链接等非文字内容。

HTML用于编写网页。网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。

HTML代码：结构层（一个妹子）负责从语义的角度搭建页面结构
JavaScript代码：行为层（一个愿意跟你聊天的妹子）负责从交互的角度提升用户体验。
CSS代码：表现层（一个化了妆的妹子）负责从审美的角度美化页面

HTML语言特点

HTML文件不需要编译，直接使用浏览器解析即可。（.java---javac----.class）
HTML文件的扩展名是*.html 或 *.htm。
HTML结构都是由标签组成。
标签名预先定义好的，我们只需要了解其功能即可。

1）标签名不区分大小写，通常都是小写。<a></a> <A></A>

2）通常情况下标签由开始标签和结束标签组成。例如：<a>传智播客</a>

3）如果没有结束标签，建议以/结尾。例如：<img /><img>

HTML结构包括两部分：头head和体body。

标题标签：<hn>

<hn>标题标签</hn> n的取值1-6

水平线标签：<hr/>

<hr /> 标签在 HTML 页面中创建一条水平分隔线，用于定义内容中的主题变化。

size属性：水平线的高度，单位像素（px）
noshade属性：没有阴影，取值：noshade，表示显示纯色

字体标签：<font>

<font size="2" color="red" face="微软雅黑">字体的内容</font>

格式化标签：<b><i>

<b>要加粗的字体</b>

<i>要倾斜的字体</i>

段落标签：<p> <br/>

特殊字符标签

符号	名称	HTML页面展示
	空格符
<	小于号	<
>	大于号	>
©	版权符	©

标签图片

注意：图片名称不要使用中文。

img标签对应的属性：

属性名称	含义	作用
src	图片的路径地址	必写属性，否则看不到图片
width	宽度	如果只设置其中一项，那么图片会等比例缩放
height	高度	如果只设置其中一项，那么图片会等比例缩放
title	提示文本	鼠标悬停在图片上方会出现的文字信息
alt	替换文本	图片加载失败的时候才会出现的文字信息
border	边框	只能定义边框的粗细

列表标签：<ul><ol>

1）无序列表<ul>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul type="circle">
			<li>红楼梦</li>
			<li>水浒传</li>
			<li>三国演义</li>
			<li>西游记</li>
		</ul>
	</body>
</html>

代码效果：

ul无序列表的属性：

名称	含义
type="circle"	空心圆
type="disc"	默认值，实心黑色圆
type="square"	实心黑色正方形
注意：写在ul身上是所有li改变，写在li身上是单个改变

2）有序列表<ol>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <ol type="1">
			<li>红楼梦</li>
			<li>水浒传</li>
			<li>三国演义</li>
			<li>西游记</li>
        </ol>
	</body>
</html>

代码效果：

ol有序列表的属性：

名称	形式
type="1"	默认值，1、2、3...
type="a"	小写的英文字母，a、b、c...
type="A"	大写的英文字母，A、B、C...
type="i"	小写的罗马数字，i、ii、iii...
type="I"	大写的罗马数字，I、II、III...
注意：写在ol身上是所有li改变，写在li身上是单个改变

超链接标签：<a>

超链接的属性：

名称	作用	取值
href	规定链接的目标 URL。	必写属性
target	规定在何处打开目标 URL。仅在 href 属性存在时使用	_blank 新窗口打开 _self 默认打开方式 framename 框架的名称
name	规定锚的名称	自定义

空链接（假链接）

锚点链接

通过和name值做一个绑定，实现区域的跳转。

做法：

首先创建点击跳转的链接a标签，href写上 #锚点名实现一个绑定的操作。
定义一个锚点a标签，定义一个name属性，name的值要与锚点名一致，这个操作也称之为抛锚。

表格标签<table><tr><td>

<table>表格
<tr>行
<td>单元格

<table> 是父标签，相当于整个表格的容器。

table标签的属性：

名称	作用
border	表格边框的宽度
cellpadding	单元格边沿与其内容之间的空白
cellspacing	单元格之间的空白
bgcolor	表格的背景颜色
height	表格的高度
width	表格的宽度

<tr> 标签用于定义行

<td> 标签用于定义表格的单元格（一个列）

td标签的属性：

名称	作用
colspan	单元格可横跨的列数（横向合并单元格）
rowspan	单元格可横跨的行数（纵向合并单元格）
align	单元格内容的水平对齐方式, 取值：left 左、right 右、center 居中

<th>标签用于定义表头。单元格内的内容默认居中、加粗。

注：表格默认是没有边框的，需要手动添加border的属性，每一个单元格的大小是根据内容自动适配的，同样可以给表格标签设置整体的大小。

合并单元格

表格可以合并单元格的操作，通过跨行和跨列的标签属性进行合并，但是要注意被合并的单元格标签需要手动删除才可以。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>跨行合并</h1>
		<!--设置一个4行两列的单元格-->
		<table border="1" cellspacing="0" cellpadding="10" width="300">
			<tr><th>姓名</th><th>手机号</th></tr>
			<tr><td rowspan="2">张三</td><td>1380000000</td></tr>
			<tr><td>1380000001</td></tr>
			<tr><td>李四</td><td>1390000000</td></tr>
		</table>
		<hr />
		<h1>跨列合并</h1>
		<table border="1" cellspacing="0" cellpadding="10" width="300">
			<tr><th>姓名</th><th colspan="2">手机号</th></tr>
			<tr><td>张三</td><td>1380000000</td><td>1380000001</td></tr>
			<tr><td>李四</td><td>1390000000</td><td>1390000001</td></tr>
		</table>
	</body>
</html>

框架标签：<frameset><frame>

<frameset> frame框架 set集合：框架集合

<frameset> 标签，是多个窗口页面整合在一起的一个集合（框架集:frameset）。每一个页面（框架:frame）都是单独文档(html)，需要使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局，使用cols确定列数，使用rows确定行数。多个<frameset>可以嵌套使用。

需求：将页面先分成上下两个部分，在下部将页面再分成左右两个部分，一共三个部分。如图所示：

rows属性和cols属性取值：值1,值2,值3,….. 一个值表示一行（列），多值使用逗号分隔，值可以是 10px、10% 等，最后一个值如果不想计算可以使用*匹配剩余量。

演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--设置框架（frameset），先分成上下两个部分，rows：按照行分 20%上面部分，*：表示其他部分占比-->
		<frameset rows="20%,*">
			<frame src="top.html"/>
			<!--<frame />-->
			<!--将下半部分分成左右两个部分，因此，下半部分也是框架集合，需要frameset-->
			<frameset cols="20%,*">
				<frame src="left.html" />
				<frame src="right.html" />
			</frameset>
		</frameset>
</html>

框架子标签：<frame>

<frame>标签，用于设置<frameset>框架集中的一个页面（框架）。

src属性：设置此框架要显示的网页名称或路径。此为必须设置的属性。
name属性：设置框架名称。（方便后期使用超链接，指定网页数据要显示的具体框架位置）
noresize属性：设置框架大小是否能手动调节。

"_修乄一世才华_"

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML基础入门总结

HTML：超文本标记语言（HyperText Markup Language）“语言” 就是指人与计算机交互的工具。 “标记” 就是使用标签的方式将需要的内容包括起来。例如：&lt;a&gt;www.itcast.cn&lt;/a&gt; （xml） “超文本”就是指页面内可以包含图片、链接等非文字内容。HTML用于编写网页。网页内容包含：HTML代码、CSS代码、JavaSc...
复制链接

扫一扫