首页 > 其他分享> 文章详细

HTML笔记

2022-01-03 11:32:28 阅读：137 来源： 互联网

标签：表示样式标签笔记边框 HTML text type

文章内容

前言: 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) 相对路径

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

注意: ../ 返回上一级

文件名/ 访问该文件

三. 标签及样式

1. 标签都有哪些?

div 盒子标签

p 段落标签

span 文本标签

h1 ~ h6 标题标签

i / em 斜体标签

b / strong 加粗标签

sup 上标签

sub 下标签

del 删除标签

u 下划线标签

hr 水平线标签

br 换行标签

ul li 无序列表标签

ol li 有序列表标签

dl dt dd 自定义列表标签

a 超链接标签

...

2. 关于 a 标签中的属性

href = " 地址 " 表示跳转地址

target = " _self / _blank" 表示在原 / 新网页中打开

3.图片标签 img标签

1) 图片标签里边的属性

src = " 图片路径 " 表示引入图片的路径

title = " 提示文字 " 表示鼠标放图片上有提示

alt = " 提示文字 " 表示图片的备选文本,图片无法显示时,出现提示文字

注意: title 和 alt 的异同点:

· title 和 alt 都表示提示文字

· title 无论图片显示是否正常,鼠标放图片上都会有提示

alt 图片路径错误或无法正常显示时,会出现提示文字

2) 图片的样式

width 表示宽

height 表示高

background 背景颜色

border : 边框粗细边框类型边框颜色;

例: border: 1px solid red

边框类型有: solid 实线

dashed 虚线

double 双划线

dotted 点划线

3) 颜色的表示方式:

a. 英文单词: red 、blue、white、green....

b. 十六进制:

# 加上六位英文数字混合

c. rgb (0, 0, 0) 范围(0 ~ 255)

4. 字体样式

font - size : ?px; 表示字体大小

color: ?; 表示字体颜色

font - weight : bold / bolder / 100 ~ 900; 表示字体粗细

font - style: oblique / normal; 正体变斜体 / 斜体变正体

font - family : "黑体、宋体、微软雅黑....." 表示字体类型

text - align: center; 表示文本字体居中

line - height :?px; 与行高的值一致,表示行高(上下居中)

text-indent : 2px; 表示首行缩进(只能在P标签中使用)

5. 关于样式的一些问题:

1) 去掉input框聚焦时出现的亮光问题

给input标签添加样式: outline : none ;

2) 禁止文本域拖拽

给textarea添加样式: resize : none ;

3) 去掉a超链接的下划线

给a超链接添加样式: text-decoration : none ;

4) 给元素添加上 / 中 / 下划线

text-decoration : overline ;

text-decoration : line-through ;

text-decoration : underline ;

5) 解决图片缝隙问题

给img标签添加样式: vertical-align : top / middle / bottom ;

6) 去掉列表的默认格式

给列表添加样式: list-style : none ;

标签：表示,样式,标签,笔记,边框,HTML,text,type
来源： https://blog.csdn.net/Microhoo_/article/details/122279778

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML笔记

目录

文章内容

一 : table表格

二 : form表单

三. 标签及样式