HTML笔记

àì夳堔傛蜴生んèń 2023-10-02 17:37 2阅读 0赞

### **目录** ###

文章内容

一 : table表格

1. table表格的标签

2. 属性的结构

3. 属性有哪些?

二 : form表单

1. form 表单中的标签

2. form标签中的属性

3. form表单中的提交方式

4. form 表单中的提交地址

5. 关于路径的问题

三. 标签及样式

1. 标签都有哪些?

2. 关于 a 标签中的属性

3.图片标签 img标签

4. 字体样式

5. 关于样式的一些问题

--------------------

### 文章内容 ###

前言: 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 表示文本域标签

select 表示下拉框标签

option 表示下拉内容标签

2. form标签中的属性

name = "名称"

ID = "id 名"

value = "值"

type = "text" 表示文本框

type = "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) 相对路径

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

**注意:** ../ 返回上一级