十分钟学会 HTML

最新推荐文章于 2023-06-27 09:37:43 发布

原创最新推荐文章于 2023-06-27 09:37:43 发布 · 523 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #列表 #css #java

Java Web 专栏收录该内容

20 篇文章

订阅专栏

1.1 HTML 简介

1.1.1 概述

HTML 是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm。

1.1.2 格式

<!-- 定义整个 html 文档整体 -->
<HTML>
	<!-- 对网页进行一些设置以及定义标题文件等 -->   
    <head>     
        <title></title>
    </head>
	
	<!-- 文档主题，编写网页上显示的内容 -->
    <body>
    </body>
</HTML>

1.2 HTML 标签

1.2.1 标签分类

围堵标签

格式：<标签名> 内容 </标签名>
例如：<body>HelloWorld</body>

自闭合标签

格式：<标签名 />
例如：<br />

1.2.1 字符集

<head></head> 中使用 <meta charset="UTF-8"> 进行字符集设置，常用字符集有：
UTF-8 包含全世界所有国家需要用到的字符
BIG5 繁体中文，港澳台等用
gb2312 简单中文，包括6763个汉字
GBK 包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312

1.2.3 标签介绍

☛ 文档类型

<!DOCTYPE> 于文档的最前面，用于向浏览器说明当前文档使用哪种标准规范，必需在开头处使用该标签。为所有的 XHTML 文档指定 HTML 版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

☛ 简单标签

标签	说明
<hn>标题标签</hn>	n 越大字越小，h1 标签重要，尽量少用，不要动不动扔一个h1。一般 h1 都是给 logo 使用
<p>文本标签</p>	默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行
<hr />	在网页中显示默认样式的水平线
<br />	强制换行显示
<div></div>	没有语义，是我们网页布局盒子
<span></span>	没有语义，是我们网页布局盒子
<b></b> <strong></strong>	加粗
<i></i> <em></em>	斜体
<s></s> <del></del>	删除线
<u></u> <ins></ins>	下划线

☛ 标签属性

<标签名属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面；属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开；任何标签的属性都有默认值，省略该属性则取默认值。

☛ 图像标签

属性	内容	说明
src	URL	图片路径
alt	文本	图片不能显示提示消息
title	文本	鼠标悬停时的内容
wideh	像素	图片宽度
height	像素	图片高度
border	数字	设置图像边框的宽度

<img src="http://pic.90sjimg.com/design/00/79/33/96/592399fd35cfb.png" width="200px"/>

在这里插入图片描述

☛ 链接标签

属性	内容	说明
href	URL	跳转目标
target	self、blank	打开方式，其中self为默认值，blank为在新窗口中打开方式

<a href="http://www.baidu.com" target="blank">去百度</a>

在这里插入图片描述
注意：
① 外部链接需要添加 http
② 内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页
③ 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
④ 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

☛ 列表

① <ul></ul> 无序列表

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	......
</ul>

在这里插入图片描述
② <ol></ol> 有序列表
有排列顺序的列表，其各个列表项按照一定的顺序排列定义

<ol type="A" start="4">        <!-- 用ABCD标号，从第四个开始 -->
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	......
</ol>

在这里插入图片描述
③ 自定义列表
常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
	<dt>名词2</dt>
	<dd>名词2解释1</dd>
	<dd>名词2解释2</dd>
	...
</dl>

在这里插入图片描述

☛ 表格

table 用于定义一个表格。 th 用户定义表中的字段 tr 用于定义表格中的一行，必须嵌套在 table 标签中，在 table 中包含几对 tr 就有几行表格。 td 用于定义表格中的单元格，必须嵌套在 tr 标签中，一对 tr 中包含几对 td 就表示该行中有多少列（或多少个单元格）。

<table>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
	...
</table>

表格属性

属性	内容	说明
border	像素	表格边框宽度
cellspacing	像素	单元格边框之间的间距
cellpadding	像素	单元格内容与边框的间距
width	像素	表格宽度
height	像素	表格高度
align	left、center、right	表格对齐方式
rowspan	单元格	跨行合并
colspan	单元格	跨列合并

其他标签
<thead></thead>：用于定义表格的头部。必须位于 table 标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>：用于定义表格的主体。位于 table 标签中，一般包含网页中除头部和底部之外的其他内容。

☛ 表单

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

属性	内容	说明
action	URL	表单提交的地址
method	get、post	表单数据的提交方式
name		用于指定表单的名称

☛ 控件

input

属性	内容	说明
type	text	单行文本框
	password	密码输入框
	radio	单选框
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式提交按钮
	file	文件域
name	自定义	控件名称
value	自定义	默认文本值
size	正整数	显示宽度
checked	checked	默认选中
maxlength	正整数	允许输入的最大字符数

<input type="text" />
<input type="button" value="按钮"/>

在这里插入图片描述
label
用于绑定一个表单元素, 当点击 label 标签的时候, 被绑定的表单元素就会获得输入焦点，for 属性规定 label 与哪个表单元素绑定

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

在这里插入图片描述
textarea
需要输入大量的信息，就需要用到 textarea 标签。通过 textarea 控件可以轻松地创建多行文本输入框

<textarea cols="每行中的字符数" rows="显示的行数">
 	文本内容
</textarea>

在这里插入图片描述
下拉菜单

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>

在这里插入图片描述
注意
① select 中至少应包含一对 </option。
② 在 option 中定义 selected =" selected "时，当前项即为默认选中项。

关注公众号一起学习 Java 开发，跟大家分享我的学习成长过程

在这里插入图片描述