HTML基础知识总结

最新推荐文章于 2024-09-11 10:10:41 发布

writer__zz

最新推荐文章于 2024-09-11 10:10:41 发布

阅读量144

点赞数

分类专栏： html 前端知识回顾文章标签： html5 前端 css

本文链接：https://blog.csdn.net/weixin_42704812/article/details/108936257

版权

知识回顾同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

HTML:（超文本标记语言）Hyper Text Markup Language

超文本：页面内可以包含图片、链接，甚至音乐。程序等非文字元素

标记：标签，不同的标签实现不同的功能

语言：人与计算机的交互工具

html基本标签

结构标签

<html>:根标签

<head>:网页头标签

<title></title>:页面标题

</head>

<body></body>:网页正文

</html>

属性名：

text ：<body text = "#f00"></body>设置网页正文中的所有文字的颜色

bgcolor:<body bgcolor = "#00f"></body> 设置网页的背景色

background <body background = "1.png"></body> 设置网页的背景图

排版标签

可用于实现简单的页面布局

注释标签：

换行标签：<br>

段落标签：<p>文本文字</p>

特点：段与段之间有空行

属性：align对齐方式（left,center,right)

水平线标签：<hr/>

属性:

width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color:水平线的颜色
align:水平线的对齐方式

块标签：使用css+div是现下流行的一种布局方式

标签：div 行级块标签，独占一行，换行

span 行内块标签，所有内容都在同一行

文字标签：font标签处理网页中文字的显示方式

属性名	代码	描述
size	< font size="7"></ font>	用于设置字体的大小，最小1号，最大7号
color	< font color="#f00"></ font>	用于设置字体的颜色
face	< font face="宋体"></ font>	用于设置字体的样式

文本格式化标签：使用标签实现标签样式的处理

标签	代码	描述
b	< b></ b>	粗体标签
strong	< strong></ strong>	加粗
em	< em></ em>	强调字体
i	< i></ i>	斜体
small	< small></ small>	小号字体
big	< big></ big>	大号字体
sub	< sub></ sub>	上标标签
sup	< sup></ sup>	下标标签
del	< del></ del>	删除线

标题标签：h1、h2、h3、h4、h5、h6

列表标签：也称清单标签

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

属性值	描述	用法举例
circle	空心圆	< ul type="circle">< /ul>
disc	实心圆	< ul type="disc">< /ul>
square	黑色方块	< ul type="square">< /ul>

有序标签：<ol></ol>

属性值	描述	用法举例
1	数字类型	< ul type="1">< /ul>
A	大写字母类型	< ul type="A" >< /ul>
a	小写字母类型	< ul type="a">< /ul>
I	大写古罗马	< ul type="I">< /ul>
i	小写古罗马	< ul type="i">< /ul>

可通过type属性设置序号样式

列表嵌套：无序列表与有序列表相互嵌套使用

图形标签：<img/>

属性名	描述
src	引入图片的地址
width	图片的宽度
height	图片的高度
border	图片的边框
align	与图片对齐显示方式
alt	提示信息
hspace	在图片左右设定空白
vspace	在图片的上下设定空白

链接标签：<a></a>

跳转到其他页面：<a href = "#"></a>

属性：href：跳转页面地址

页面跳转时页面的打开方式：target="_blank"在新窗口中打开

target="_self"在原空口中打开

指向同一页面中的位置：定义位置：<a name="名称"></a>

指向：<a href = "#名称></a>,注意#不要省略

表格标签：<table>行：<tr></tr>首列：<th></th> 普通列：<td></td></table>

表格常用属性：colspan：合并行内多列 rowspan：合并列内多行 border:边框大小 cellspacing:单元格间框距

cellpading:单元格内容距边框距离 width：宽 height：高 bgcolor:表格背景颜色 align：对齐方式

form表单：

action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
method:请求方式：get 和post

get:

地址栏,请求参数都在地址后拼接 path?name="张三"&password="123456"
不安全
效率高
get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据

post：

地址栏：请求参数单独处理。
安全可靠些
效率低
post请求大小理论上无限；一般用于插入删除修改等操作

enctype:表示是表单提交的类型

默认值：application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)

input元素：

常用在注册和登录等录入信息的界面

属性值	描述	代码
text	单行文体框	< input type="text"/>
password	密码框	< input type="password"/>
radio	单选按钮	< input type="radio"/>
checkbox	复选框	< input type="checkbox"/>
date	日期框	< input type="date"/>
time	时间框	< input type="time"/>
datetime	日期和时间框	< input type="datetime"/>
email	电子邮件输入	< input type="email"/>
number	数值输入	< input type="number"/>
file	文件上传	< input type="file"/>
hidden	隐藏域	< input type="hidden"/>
range	取值范围	< input type="range"/>
color	取色按钮	< input type="color"/>
submit	表单提交按钮	< input type="submit"/>
button	普通按钮	< input type="button"/>
reset	重置按钮	< input type="reset"/>
image	图片提交按钮	< input type="image"/>