HTML笔记

最新推荐文章于 2022-09-16 08:46:14 发布

小黄鸡

最新推荐文章于 2022-09-16 08:46:14 发布

阅读量490

点赞数 1

分类专栏：零散备忘文章标签： html

本文链接：https://blog.csdn.net/SImple_a/article/details/76873151

版权

零散备忘专栏收录该内容

53 篇文章 0 订阅

订阅专栏

文章目录

1 HTML介绍

HTML是一种超文本标记语言。
超文本：比普通文本功能更加强大。
标记语言：使用一组标签对内容进行描述的一门语言，不是编程语言。

2 HTML的使用

语法和规范：

所有的html文件后缀名都是以.html或者。htm结尾的。建议使用.html结尾。
整个html文件分别由头部分< head> < / head>和体部分< body>< /body>组成。
html标签都是由开始标签和结束标签组成。
html标签忽略大小写，建议使用小写。

3 HTML相关标签学习

3.1 1 标题标签

<h1>公司简介</h1><br />

标题标签使用< hn>< /hn>,n从1到6逐渐变小。超过6的按6的进行显示。
特点：加粗加黑显示，单独占用一行，与其他行有一定的行间距。

3.2 水平线标签

水平线标签：< hr/>

<hr />

3.3 段落标签

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

<p>
Java的主要应用领域就是企业级的项目开发！
</p>

3.4 字体标签

字体标签使用< font>< /font>
必须结合其属性才能具备一定的样式效果。
设置颜色：color(可以是英文单词也可以是16进制)
设置字体：face(前提是字体必须是本机已经有的)
设置大小：size(从1到7逐渐变大，超过7的部分按照7显示)

<font color="red" size="7">德玛西亚必胜！</font><br />
<font color="#00FF00" face="楷体">德玛西亚必胜！</font><br />

3.5 注释的快捷键

ctrl+/

4 网站图片信息显示页面

图片标签< img />

图片的位置属性：src
绝对路径：带有盘符的
相对路径：
1如果是同级，直接写文件名或者./文件名称。
如果是上一级：…/文件名称（如果是多层，那么多写几个…/）
如果是下一级：写目录名称/文件名称
width:设置图片的宽度
height:设置图片的高度
alt:当图片无法正常显示的时候给出的提示信息。

<img src="../../img/logo2.png" width="150px" height="30" alt="加载失败"/>

5 网站友情链接页面

5.1 列表标签

有序列表：< ol>< /ol>
属性：type有5个取值start起始位置，reverse:倒序。

<ol start="4" reversed="reversed" type="a">
	<li>CSDN</li>
	<li>百度</li>
	<li>阿里</li>
</ol>

无序列表：< ul>< /ul>
square方形块

<ul type="square">
	<li>CSDN</li>
	<li>百度</li>
	<li>阿里</li>
</ul>

属性：type有三个取值。

5.2 超链接标签

< a href="#" target="_self / _blank">点击跳转< /a> #号表示不发生跳转

6 网站布局

表格标签

表格标签的使用< table>< /table>
属性：
边框：border
宽度：width
高度：height
背景颜色：bgcolor
边框与边框间隔：cellspacing
边框与内容间隔：cellpadding
居中显示：align
表格跨行，跨列操作：rowspan，colspan（针对单元格）

<table border="1px" width="450px" height="150px" align="center" bgcolor="pink" cellspacing="0px" cellpadding="0px">
			<tr height="100" bgcolor="gold">
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>
			</tr>
</table>

7 网站后台管理页面

框架集结构标签
< frameset>< /frameset>
属性：
cols:进行垂直切割划分，可以切割为任一块。（参数的值相加=100%，有一块可以用表示）
rows：水平切割划分，可以切割为任一快。（参数的值相加=100%，其中有一块可以用表示）
一旦划分区域之后，我们需要对具体的区域进行内容的填充，此时需要使用
< frame>< /frame>标签
属性：
src:指定该区域显示的文件（路径）
name:它通常会结合超链接的targer属性使用，来定义最终显示的位置。

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

top.html

<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
		<font size="7">欢迎进入百度管理系统</font>
</body>

right.html

<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
		所有用户信息
</body>

left.html

<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="right.html" target="right">会员管理</a><br />
		<a href="#">品牌管理</a><br />
		<a href="#">商品管理</a><br />
		<a href="#">分类管理</a><br />
	</body>

8 form表单

<body>
		<form action="#" method="get">
			用户名：<input type="text" /><br />
			
			密码：<input type="password" /><br />
			
			确认密码：<input type="password" /><br />
			
			性别：<input type="radio" name="sex"/>男
			<input type="radio" name="sex"/>女<br />
			
			爱好：<input type="checkbox" name="hobby" />打游戏
			<input type="checkbox"  name="hobby"/>打球
			<input type="checkbox"  name="hobby"/>撸码<br />
			
			籍贯：<select name="province">
				<option>--请选择--</option>
				<option>北京</option>
				<option>上海</option>
				<option>广州</option>
			</select><br />
			
			自我介绍：
			<textarea>
				
			</textarea><br />
			
			提交按钮:
			<input type="submit"  value="注册"/><br />
			
			普通按钮：<input type="button" value="regist" /><br />
			
			重置按钮：<input type="reset" />
		</form>
	</body>

这里写图片描述

小黄鸡

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记

1 HTML介绍 HTML是一种超文本标记语言。超文本：比普通文本功能更加强大。标记语言：使用一组标签对内容进行描述的一门语言，不是编程语言。2 HTML的使用语法和规范：所有的html文件后缀名都是以.html或者。htm结尾的。建议使用.html结尾。整个html文件分别由头部分< head> < / head>和体部分< body>< /body>组成。 html标签都是由
复制链接

扫一扫