HTML 学习 --- 笔记

w_____y2

已于 2022-09-30 15:39:01 修改

阅读量712

点赞数 1

文章标签： html

于 2022-09-30 15:19:59 首次发布

本文链接：https://blog.csdn.net/w_____y2/article/details/127123098

版权

本文详细介绍了HTML的基础知识，包括HTML的结构、标签、属性及其应用，如文本修饰、图片、链接、表格和表单元素。此外，还提到了前端页面的组成，即HTML、CSS和JavaScript，以及后端程序的作用。对于初学者，本文提供了全面的HTML入门指南。

摘要由CSDN通过智能技术生成

一个网站可分为两个部分

前端页面（HTML + CSS + JavaScript）

后端程序（处理前端请求，连接数据库，查询内容）

HTML 简介

Html：超文本标记语言

超文本：网页上的文本、图片等

标记/标注：一种标志

语言：代码

HTML基础

作用：是用来声明标签里面的内容是干什么的

格式：单标签（单独出现）和双标签（成对出现）

每个标签都会有自己的属性和属性值

html骨架

<! DOCTYPE HTML>

<head>

<titile>网页的标题</title>

</head>

<body>

写的所有内容都是网页主体中展现的

</body>

</html>

HTML 标签格式

双边标记（双标记标签）

双边标记指有开始和结束标记，内容放在开始和结束标记之间

语法格式 <标签名称属性 1=“属性值1” 属性2=“属性值2”>内容</标签名称>

属性是描述一个物体特征名词例如：桌子的属性（长、宽、高）属性值（长=60cm）

单边标记（单标记标签）

单边标记指只有开头没有结尾的标记

单边标记表示一个特殊功能

常用单边标记10个左右

语法格式 <标签名称属性=“属性值” 属性2=“属性值2”>

常用标签和属性

<body> 标签

格式： <body 属性=“属性值”>

属性: bgcolor 网页背景颜色

background 网页背景图片地址

html 文本修饰标记

<b> 文本内容 </b> 加粗文字

<center> 内容 </center> 将内容居中显示到网页里面

<i> 内容</i> 文本倾斜

<u> 内容 </u> 给文字加下划线

<s> 内容 </s> 给文字加删除线

<sup> 内容 </sup> 文字上标

<sub> 内容 </sub> 文字下标

font 标签

作用：修饰文字

格式： <font 内容>

属性：

size：设置文本大小取值1-7之间 1最小 7最大取值：##px

color：设置文本颜色

face：设置文字的字体：黑体楷体宋体

P标签

作用：段落标签

属性： align= left左 center中 right右

br标签

换行标签

hr标签

作用：生成水平方向线

属性：

size 单位px

color

width 默认整个网页宽度

案例：

h标签

作用：标题标签

属性： align 取值 left center right

无序列表 ul标签

属性：type

属性值：disc 实心圆默认值

circle 空心

square 实心方块

none 无

格式： <ul 属性=属性值>

</ul>

有序列表 ol标签

属性： type

属性值：A a I i

属性： start

属性值： # （数字）

格式： <ol 属性=属性值>

</ol>

图片标签 img标签

格式： <img 属性=属性值>

属性：src= 放置图片路径一般情况图片在html文件相同位置

width：指定宽度

height：指定高度

border：为图片设置边框线可指定边框线粗细

align：图片的对齐方式（ center left right ）

hspace：指定文字和图片之间的水平距离

vspace：指定文字和图片之间的垂直距离

超级链接a标签

作用：跳转页面

属性：

href 指定目标URL

target 指定新链接打开位置

-blank 在新窗口打开目标文件或目标位置

-self 在当前窗口打开目标文件默认属性

-parent 在上一级窗口打开目标文件

name 指定锚点链接名称

表格标签

table 标签常用属性

width 设置表格宽度固定值也可百分比（整个页面）

height 设置表格的高度

border 表格边框的粗细

bgcolor 设置背景颜色

cellpadding 单元格边线和内容之间的距离

cellspacing 单元格和单元格之间的宽度

align center left right

rulles 合并两个单元格边框线

tr 标签

bgcolor 背景颜色

height 行的高度

align 行中的文本水平居中 center left right

valign 垂直居中取值： top bottom middle

td 或 th（标题标签）标签

width

height

bgcolor 单元格背景颜色

background 单元格背景图

align 水平对齐

valign 垂直对齐取值： top bottom middle

rowspan 上下合并

colspan 左右合并

表单

form 标签

作用：生成表单

格式： <form 属性=属性值> </form>

属性：name 表单名

method 表单提交方式属性值： get post 隐式传惨

Get 方式提交表单

action 表单处理程序

enctype 表单加密方式 method 属性值必须是 post 才能使用此值

属性值： application/x-www-form-urldecode 默认加密方式

mulitipart /form-data 上传文件需要用此值

action 为空默认提交自己当前文件

单行文本框

属性

name 指定文本框名

type 指定类型

text 单行文本框

value 文本值设置默认值

size 指定长度

maxlength

readonly 文本框只读

disabled 文本框禁用

单行密码框

属性

name 指定文本框名

type 指定类型

password 单行文本框密码

value 文本值设置默认值

size 指定长度

maxlength

readonly 文本框只读

disabled 文本框禁用

单选按钮

属性

name 一组中名字要一样

value 值

checked 默认选项

多选框

属性

name 一组中名字要一样

value 值

checked 默认选项

下拉菜单

</select>

属性

select 默认值是selected

文本域(多行文本框)

<table>

按钮

属性：

type 指定类型按钮

submit 提交按钮

image 将图片作为按钮

reset 重新填写

button 普通按钮无任何功能结合js程序实现功能

src 后面填写图片地址

value: commit

onclick 表示单击

上传文件