HTML笔记

天空中那座城

已于 2023-04-27 13:43:09 修改

阅读量624

点赞数 3

分类专栏：前端知识文章标签： html

于 2022-01-03 11:25:07 首次发布

本文链接：https://blog.csdn.net/Microhoo_/article/details/122279778

版权

前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章内容

前言: HTML定义了网页的内容

网页的基本结构:

! 表示声明

DOC 表示文档(全称:document)

TYPE 表示类型

meta 表示编码格式(utf-8)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

一 : table表格

1. table表格的标签

table 表示表格

thead 表示表头

tbody 表示表体

tfood 表示表尾

tr 表示行

td 表示列

th 表示列标题(加粗,居中)

2. 属性的结构

属性名 = "属性值"

3. 属性有哪些?

border 表示边框粗细(数字越大,边框越粗)

width 表示宽

height 表示高

style 表示样式

cellspacing 表示边框与边框的间距

cellpadding 表示文本与边框的间距

valign = "top / middle / bottom" 表示居上 / 中 / 下(上下方向)

align = "left / center / right" 表示居左 / 中 / 右(左右方向)

rowspan = "行数" 表示合并行

colspan = "列数" 表示合并列

<body>
		<table border="1px" cellpadding="10px" width="400px" height="300px" cellspacing="0px">
				<thaed>
					<tr>
						<th colspan="4">这是我的table表头</th>
					</tr>
				</thaed>
				<tbody>
					<tr>
						<td>数字</td>
						<td>123</td>
						<td>456</td>
						<td>789</td>
					</tr>
					<tr>
						<td>字母</td>
						<td>abc</td>
						<td>def</td>
						<td>ghi</td>
					</tr>
					<tr>
						<td>符号</td>
						<td>!@#</td>
						<td>$%^</td>
						<td>*/-</td>
					</tr>
				</tbody>
				<tfood>
					<tr>
						<th colspan="4">这是我的table表尾</th>
					</tr>
				</tfood>
		</table>
	</body>

二 : form表单

1. form 表单中的标签

input 表示输入框

label 与input标签一起使用(点击文字时聚焦到输入框)

textarea 表示文本域标签

<textarea name="" id="" style="width: 415px; height: 100px;" ></textarea>

select 表示下拉框标签

option 表示下拉内容标签

<select name="" id="">
	<option value="1">河北</option>
	<option value="2">河南</option>
	<option value="3">山东</option>
	<option value="4">山西</option>
	<option value="5">江苏</option>
</select>

2. form标签中的属性

name = "名称"

ID = "id 名"

value = "值"

type = "text" 表示文本框

<input type="text" placeholder="请输入用户名" name="username">

type = "password" 表示密码框

<input type="password" placeholder="请输入密码" name="password">

type = "radio" 表示单选框

type = "checkbox" 表示复选框(多选框)

minlength = "?" 表示最小长度为?

maxlength = "?" 表示最大长度为?

placeholder = "提示文字" 表示提示文字

checked = "checked" 表示选中默认(可直接写checked)

disabled = "disabled" 表示禁止

type = "file" 表示上传按钮

type = "submit" 表示提交按钮

type = "reset" 表示重置按钮

type = "button" 表示普通按钮

type = "image" 表示图片按钮

<!-- 上传按钮 -->
<input type="file">
<!-- 重置按钮 -->
<input type="reset" value="取消">
<!-- 普通按钮 -->
<input type="button" value="普通按钮">
<!-- 提交按钮 -->
<input type="submit" value="登录">
<!-- 图片按钮 -->
<input type="image" src="../img素材/HTMLimg素材/Snipaste_2021-11-11_09-41-26.png" style="width: 70px;">

3. form表单中的提交方式

method = "get / post"

get 表示明文提交

post 表示密文提交

4. form 表单中的提交地址

action = "提交的路径或网址"

5. 关于路径的问题

1) 绝对路径

例: E:\···\···\···

2) 相对路径

例: ../···/···/···

注意: ../ 返回上一级