HTML简单入门

最新推荐文章于 2022-11-17 19:49:56 发布

鑫仔的记忆

最新推荐文章于 2022-11-17 19:49:56 发布

阅读量3.6k

点赞数 2

分类专栏： Java 文章标签：程序人生 intellij idea html 前端

本文链接：https://blog.csdn.net/qq_53526922/article/details/121498276

版权

Java 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

HTML简单入门

一、HTML概念

网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。

二、HTML简介

2.1什么是html

HTML全称：Hyper Text Markup Language（超文本标记语言）

超文本：页面内可以包含图片、链接、甚至音乐、程序等非文字元素
标记：标签，不同的标签实现不同的功能
语言：人与计算机的交互工具

2.2html能做什么

HTML使用标记标签来描述网页，展示信息给用户

2.3html书写规范

HTML标签是以尖括号包围的关键字

HTML标签通常是成对出现的，有开始就有结束

HTML通常都有属性，格式：属性 = ‘属性值’（多个属性之间空格隔开）

HTML标签不区分大小写，建议全小写

三、HTML基本标签

3.1结构标签

<html>根标签
	<head>网页头标签
		<title></title>页面标题
	</head>
	<body></body>网页正文
</html>

属性名	代码	描述
text	`<body text="#f00"></body>`	设置网页正文中所有文字的颜色
bgcolor	`<body bgcolor="#f00"></body>`	设置网页的背景色
background	`<body background="1.png"></body>`	设置网页的背景图

颜色的表示方式：

第一种方式：用表示颜色的英文单词，例：red green blue
第二种方式：用16进制表示颜色，例：#000000、#fffff、#325687、#377405

3.2排版标签

可用于实现简单的页面布局

注释标签：

换行标签：<br>

段落标签：<p>文本文字</p>

特点：段与段之间有空行
属性：align对齐方式（left、center、right）

水平线标签：<hr/>

width：水平线的长度（两种：第一种：像素表示；第二种：百分比表示）
size：水平线的粗细（像素表示，例如：10px）
color：水平线的颜色
align：水平线的对齐方式

3.3块标签

使用CSS+DIV是现下流行的一种布局方式

标签	代码	描述
div	`<div></div>`	行级块标签，独占一行，换行
span	`<span></span>`	行内块标签，所有内容都在同一行

3.4基本文字标签

font标签处理网页中文字的显示方式

属性名	代码	描述
size	`<font size="7"></font>`	用于设置字体的大小号，最小1号，最大7号
color	`<font color="#f00"></font>`	用于设置字体的颜色
face	`<font face="宋体"></font>`	用于设置字体的样式

3.5文本格式化标签

使用标签实现标签的样式处理

标签	代码	描述
b	`<b></b>`	粗体标签
strong	`<strong></strong>`	加粗
em	`<em></em>`	加强字体
i	`<i></i>`	斜体
small	`<small></small>`	小号字体
big	`<big></big>`	大号字体
sub	`<sub></sub>`	上标签
sup	`<sup></sup>`	下标签
del	`<del></del>`	删除线

3.6标题标签

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

标签	代码	描述
h1	`<h1></h1>`	1号标题，最大字号
h2	`<h2></h2>`	2号标题
h3	`<h3></h3>`	3号标题
h4	`<h4></h4>`	4号标题
h5	`<h5></h5>`	5号标题
h6	`<h6></h6>`	6号标题，最小字号

3.7列表标签

无序列表：使用一组无序的符号定义，`<ul></ul>`

<html>
	<head>
		<title></title>
	</head>
	<body>
		<ul type="circle">
			<li></li>
		</ul>
	</body>
</html>

属性值	描述	用法举例
circle	空心圆	`<ul type="circle"></ul>`
disc	实心圆	`<ul type="disc"></ul>`
square	黑色方块	`<ul type="square"></ul>`

有序列表：使用一组有序的符号定义，`<ol></ol>`

<html>
	<head>
		<title></title>
	</head>
	<body>
		<ol type="a" start="1">
			<li></li>
		</ol>
	</body>
</html>

属性值	描述	用法举例
1	数字类型	`<ol type="1"></ol>`
A	大写字母类型	`<ol type="A"></ol>`
a	小写字母类型	`<ol type="a"></ol>`
I	大写古罗马	`<ol type="I"></ol>`
i	小写古罗马	`<ol type="i"></ol>`

列表嵌套：无序列表与有序列表相互嵌套使用

<html>
	<head>
		<title></title>
	</head>
	<body>
		<ol>
			<li></li>
			<li>
				<ul>
					<li></li>
				</ul>
			</li>
		</ol>
	</body>
</html>

3.8图形标签

在页面指定位置处中引用一幅图画，<img/>

属性名	描述
src	引入图片的地址
width	图片的宽度
heigth	图片的高度
border	图片的边框
align	与图片对齐显示方式
alt	提示信息
hspace	在图片左右设定空白
vspace	在图片上下设定空白

3.9链接标签

在页面中使用链接标签跳转到另一页面
- 标签：<a href=""></a>
- 属性：href：跳转页面的地址（跳转到外网需要添加协议）
设置跳转页面时的页面打开方式，target属性
- _blank在新窗口中打开
- _self在原空口中打开
指向同一页面中指定位置
- 定义位置：<a name="名称"></a>
- 指向：<a href="#名称"></a>

3.10表格标签

普通表格（table、tr、td）

<table>
    <tr>
        <td></td>
    </tr>
</table>

表格的列标签（th）：内容有加粗和居中效果

<table>
    <tr>
        <th></th>
    </tr>
</table>

表格的列合并属性（colspan）：在同一行内同时合并多个列

<table>
    <tr>
        <td colspan=""></td>
    </tr>
</table>

表格的行合并属性（rowspan）：在同一列跨多行合并

<table>
    <tr colspan="">
        <td></td>
    </tr>
</table>

四、HEML表单标签

html表单用于收集不同类型的用户输入数据

4.1form元素常用属性

action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
method请求方式：get 和post
- get：
  - 地址栏，请求参数都在地址后拼接path?name=“张三”&password=“123456”
  - 不安全
  - 效率高
  - get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据
- post：
  - 地址栏：请求参数单独处理。
  - 安全可靠些
  - 效率低
  - post请求大小理论上无限；一般用于插入删除修改等操作
enctype：表示是表单提交的类型
- 默认值:application/x-www-form-urlencoded普通表单
- multipart/form-data多部分表单（—般用于文件上传）

4.2input元素

作为表单中的重要元素，可根据不同type值呈现为不同状态

属性	描述	代码
text	单行文本框	`<input type="text"/>`
password	密码框	`<input type="password"/>`
radio	单选按钮	`<input type="radio"/>`
checkbox	复选框	`<input type="checkbox"/>`
date	日期框	`<input type="date"/>`
time	时间框	`<input type="time"/>`
datetime	日期和时间框	`<input type="datetime"/>`
email	电子邮件输入	`<input type="email"/>`
number	数值输入	`<input type="number"/>`
file	文件上传	`<input type="file"/>`
hidden	隐藏域	`<input type="hidden"/>`
range	取值范围	`<input type="range"/>`
color	取色按钮	`<input type="color"/>`
submit	表单提交按钮	`<input type="submit"/>`
button	普通按钮	`<input type="button"/>`
reset	重置按钮	`<input type="reset"/>`
image	图片提交按钮	`<input type="image"/>`

4.3select元素（下拉列表）

单选下拉列表：<select></select>
默认选中属性：selected="selected"

<select>
    <option selected="selected">内容</option>
    ...
    <option></option>
</select>

多选下拉列表属性：<select></select>
多选列表：multiple=“multiple”

<select multiple="multiple">
    <option></option>
</select>

4.4textarea元素（文本域）

多行文本框：<textarea cols="列" rows="行"></textarea>

五、HTML框架标签

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的缺点:
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面

5.1框架结构标签frameset

框架结构标签（< frameset></frameset>)用于定义如何将窗口分割为框架
每个 frameset定义了一系列行或列
rows / columns的值规定了每行或每列占据屏幕的面积
- <frameset rows=""></frameset>
- <frameset cols=""></frameset>

5.2框架标签frame

每一个frame引入一个html页面

<frameset cols="*.*">
    <frame src="info1.html" />
    <frame src="info2.html" />
</frameset>

5.3基本的注意事项

不能将<body></body>标签与<frameset></frameset>标签同时使用
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在< frame>标签中加入：noresize=“noresize”。

六、HTML的其他标签和特殊字符

6.1其他标签

<meta http-equiv="keywords" content="keyword1 , keyword2, keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page ">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- href:引入CSS文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css ">
<!--src: js的文件地址-->
<script type="text/javascript" src=""></script>

6.2特殊字符

占位符：空格

&nbsp;

鑫仔的记忆

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML简单入门

HTML简单入门文章目录HTML简单入门一、HTML概念二、HTML简介2.1什么是html2.2html能做什么2.3html书写规范三、HTML基本标签3.1结构标签3.2排版标签3.3块标签3.4基本文字标签3.5文本格式化标签3.6标题标签3.7列表标签无序列表：使用一组无序的符号定义，``有序列表：使用一组有序的符号定义，``列表嵌套：无序列表与有序列表相互嵌套使用3.8图形标签3.9链接标签3.10表格标签四、HEML表单标签4.1form元素常用属性4.2input元素4.3select元素
复制链接

扫一扫