当前位置：首页 > article >正文

HTML学习笔记（全）

article 2025/3/6 21:34:03

基本结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

基本标签元素

标题（heading）

<h1>一级标题</h1>

<h6>六级标题</h6>

生成h1~h6标题的快捷键：h$*6

*n表示生成h1~hn标题

段落

段落标签<p> </p>

段落结束之后自动换行

换行标签<br>

可以在段落内部使用

水平线

<hr>标签在HTML页面中创建水平线

其基本属性

<hr color=" " width=" " size=" " align=" "/>

color：颜色
width：长度
size：高度
align：对齐方式（默认居中），常见取值 left,right,center

图片

<img>定义图像

<img src=" " alt=" " width=" " height=" ">

src：图片的路径（最好使用相对路径）
alt：文件无法正常显示时，的替代文本
width：图片宽度
height：图片高度
border：表框

路径

路径：分为网络路径，相对路径，决对路径

网络路径：

具体的网络地址

示例

<img src="https://www.163.com> （网易）

绝对路径：

示例

<img src="E:\xinjianwenjianjia\1.jpg">

注意：建议路径中不要出现汉字

相对路径：

子级关系：/
父级关系：../
同级路径：./（可省略）

超文本链接

标签<a> </a>

若未添加链接地址，将仅作为文本

可使用属性 herf 来描述链接的地址

示例

<a herf="url" name=" " id=" ">链接文本</a>

链接文本可以为任意内容

未访问过的链接显示未蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时，链接显示为红色并带有下划线

其他属性：

target ：指定链接的目标窗口，可取值_self,_blank,_parent,_top
title ：链接提示文字
rel ：规定当前文本与目标文本之间的关系（暂不学习）

<!DOCTYPE html>
<html>
	<head>
		<title>超链接</title>
	</head>
	<body>
		<a href="表单.html" target="_blank">blank表单.html</a><br />
		<a href="表单.html" target="_parent">parent表单.html</a><br />
		<a href="表单.html" target="_self">self表单.html</a><br />
		<a href="表单.html" target="_top">top表单.html</a><br />
	</body>
</html>

其中 _blank会创建一个新的网页

电子邮件链接mailto

将打开默认的电子邮件程序，比如 outlook 等，并自动填写邮件地址

<a herf="mailto:电子邮箱地址">显示链接的对象

文本标签

<p></p>表示段落，如果想添加的文本仅仅是几个词时，还用这个就会不太舒服

常用

标签	描述
<em>	定义着重文字
<b>	定义粗体文字
<i>	定义斜体文字
<strong>	定义加重语气
<del>	定义删除字
<span>	无特定含义，普通

和段落是不同的，段落表示一段文本，而文本标签一般表示文本词汇，也可以在段落内部使用

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>p白菜头</p>
		<em>em白菜头</em>
		<i>i白菜头</i>
		<b>b白菜头</b>
		<strong>strong白菜头</strong>
		<span>span白菜头</span>
		<del>del白菜头</del>
	</body>
</html>

效果图

列表

列表之间是可以嵌套的

有序列表

<ol>

<li>内容<li>

<li>内容<li>

</ol>

<li>之间自动换行

可添加属性 type

可以是“1”（默认），“a”，“A”，“i”（小写罗马数字），“I”（大写罗马数字）

无序列表

<ul>

<li>内容<li>

<li>内容<li>

</ul>

可添加属性 type

“disc”实心圆（默认）
“circle”空心圆
“square” 小方块
“none”不显示

自定义列表

dl：自定义列表的开始
dt：定义列表的标题
dd：列表中每一项的定义

<dl>

<dt>

<dd>内容 <dd>

<dd>内容 <dd>

<dt>

<dl>

表格*

表格：<table>
标题：<caption>
表头： <th>
行：<tr>
列（单元格）：<td>

快速生成n*n表格结构：table>tr*n>td*n{初始内容}

表格“table”属性（常用）

“border” 边框的宽度（不设置就看不到表格的线条）
“bordercolor”设置边框颜色
“bgcolor”设置表格的背景色
“rules”表格内边框显示规则
“width”“height”
“cellpadding”设置单元格内容与边框的空白间距（单位像素或百分比）
“cellspacing”单元格之间的空白间距（单位同上）

其中 rules 的设定有：

“none”：无内边框
“rows”：仅行边框
“cols”：仅列边框
“all”：所有边框（默认）

单元行“th”的属性（常用）

“width”“height”
“align”表格行的对齐方式（水平），有：left，center，right
“valign”表格行的对齐方式（垂直），有：top，middle，bottom
“bgcolor”“bordercolor”

单元格“td”的属性常用

除拥有“th”的上诉属性外，还有：

“colspan”“rowspan”分别表示定义单元格可横跨（纵跨）的列（行）数

表头“th”的属性（常用）

内容会默认粗体，居中

“scope”定义表头单元格的作用范围，常见取值：

“col”（表示该表头单元格是一列的表头）

“row”（则是一行的表头）

合并单元格示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border=1>
			<tr>
				<td>danyuange6</td>
				<td colspan="2">danyuange7</td>
				<!因为7占了两列，删除8>
				<td>danyuange9</td>
				<td>danyuange10</td>
			</tr>
			<tr>
				<td>danyuange11</td>
				<td>danyuange12</td>
				<td>danyuange13</td>
				<td>danyuange14</td>
				<td rowspan="2">danyuange15</td>
			</tr>
			<tr>
				<td>danyuange16</td>
				<td>danyuange17</td>
				<td>danyuange18</td>
				<td>danyuange19</td>
				<!因为15占了两列，删除20>
			</tr>
		</table>
	</body>
</html>

水平合并：留左删右

垂直合并：留上删下

form表单*

例如注册框，搜索框

表单由容器（表单）和控件（输入框，按钮）组成

form

<form action="url"method="get|post"name="myform"></form>

“action”表单的数据所要传给服务器的地址
“name”表单名称
“method”方式数据提交方式：“get”“post”
target：打开表单的位置，同上超链接的target

“Get”和“Post”暂时不进行深入学习（与后台有关）

控件（表单元素）

“input” 输入框
textarea：定义文本域（一多行输入控件）
select：定义选择列表
button：一个普通按钮
label：定义控件标签

input的type属性

text：单行文本输入区域（文本输入框）
submit：将表单内容提交给服务器的按钮
reset：清除表单内容，重新填写按钮
checkbox：多选按钮
radio：单选按钮
password：输入内容自动显示为****
hidden：隐藏区域，用户不能在此处输入，可用于预设要传送的内容
image：使用图像替代submit按钮，单击后表单内容及点击坐标一起上传
file：文件选择框

HTML5中新增（部分）

required：提交时不能为空
placeholder：提供提示（hint），提示用户所要输入的内容
date：既包含输入域，还提供一下拉日历选择年/月/日
month：选取年和月
week：年和周
time：时间
datetime：时间，日，月，年

select的常用属性

option：定义组合框中包含的下拉菜单项
selected：在某个option项中定义默认被选中
multiple：将select设置为多选

textarea常用属性

cols：设置文本区域的宽度，以字符数为单位
rows：允许输入的最大行数
readonly：使用户无法修改文本区域内容
disabled：首次加载时禁用此文本区

示例

源码

<!DOCTYPE html>
<html>
	<head>
		<title>个人信息调查表</title>
		<style>
		</style>
	</head>
	<body>
		<table border="2">
			<caption><i><strong><big>个人信息调查表</big></strong></i></caption>
		
		<form action="">	
		    <tr><td colspan="2"><p>姓名：<input type="text" /></p></td></tr>
		    <tr><td colspan="2"><p>密码：<input type="password" /></p></td></tr>
			<tr><td colspan="2"><p>性别：<input type="radio" name="sex" value="男"/> 男 &nbsp;&nbsp;<input type="radio" name="sex"/> 女</p></td></tr>
			<tr><td colspan="2"><p>籍贯：<select name="省份" id="" size="1">
			            <option value="河南">河南</option>
					    <option value="河北">河北</option>
					    <option value="湖南">湖北</option>
					    <option value="湖北">湖北</option>
			        </select>省</p></td></tr>
			<tr><td colspan="2"><p>出生日期：<input type="date" /></p></td></tr>
			<tr><td colspan="2"><p>个人爱好：<input type="checkbox" value="音乐"/>音乐&nbsp;<input type="checkbox" value="美食"/>美食&nbsp;<input type="checkbox" value="运动"/>运动&nbsp;<input type="checkbox" value="旅游"/>旅游</p></td></tr>
		    <th>自我介绍：</th><td><textarea name="textarea" cols="30" rows="10"></textarea></td>
		</form>
		</table>
	</body>
</html>