第一学期学习html的总结

最新推荐文章于 2024-09-13 18:30:21 发布

爱莉希雅&&&

最新推荐文章于 2024-09-13 18:30:21 发布

阅读量802

点赞数 13

文章标签：学习 html 前端

本文链接：https://blog.csdn.net/2301_81704123/article/details/136296252

版权

一

1.常用标签

strong，b加粗标签 em，i--斜体 u--下划线 del--删除线

br，p换行标签（前面单标签后面双标签br可以用来空行）

p（两个p标签会空一行，align--默认是left，font--字体，color--英文单词，#rrggbb三原色

rgba()--a为透明度）

hr--水平分割线可以改变宽度width

sub--下标标签 sup--上标标签

pre--输出原样内容

span--修饰文本的标签（color font-size）

hn（1-6 标题） div（块级标签，自动换行，盒子布局）

特殊字符（空格&nbsp <--&it >--&gt ¥--&yen）

2.表单标签

form（action--跳转的路径）

input标签（可用以制作登入页面）

type的取值：
text ------ 文本框
password ---- 密码框
radio ---- 单选按钮
checkbox ----- 多选按钮
submit ---- 提交按钮
reset ----- 重置按钮
button ----- 普通的按钮
image ---- 图像按钮
file ---- 文件域
hidden ----- 隐藏域
email ------ 邮箱
color ----- 颜色域
date ----- 日期
time ------ 时间
datetime-local ------ 日期+时间
range ---- 进度条

input标签常用的属性：
checked ---- 默认选择
readonly ------ 只读字段只可以读不能修改
disabled ----- 禁用不可以点击
autofocus ------ 默认光标的位置
required---- 不能为空白提交

select--一般和option连用

elected属性 ---- 默认被选中的选项
multiple属性 ------- 以列表的形式显示

a标签 ----- 超链接

vlink ----- 访问过超链接文本的颜色
Alink ------ 激活超链接文本的颜色
link ------ 超链接文本的颜色
text ---- 文本的颜色
bgcolor ----- 背景颜色
background ------ 背景图片

使用锚点跳转，类似小说，#id跳转

img（GIF JPG PNG BMP）

src 属性 ---- 指的是图片的路径（绝对路径和相对路径）
alt属性 ------ 代替图片的文本内容（因为路径的问他或者因为浏览器的问题显示不出来这个张图片的
时候，alt属性值就是去描述这张图片的一个内容）
width ------ 宽度
height ---- 高度
border ------ 边框，默认值0
align ----- 位置（图片和文字的位置）
top (上对齐) middle(居中对齐) bottom(下对齐默认值) left(左对齐) right(右对齐)
title ------ 图片的标题，用来显示描述图片的文字

位图

usemap属性
map标签的name属性，一般会和area标签进行连用
属性：shape ------- 鼠标点击的形状
coords ----- 鼠标点击形状的大小
href ------ 表示跳转的路径

多媒体标签

audio 标签 ---- 音频
video 标签 ---- 视频
controls属性 ---- 表示播放器的组件
autoplay属性 ----- 自动播放（浏览器不支持这个属性值）

表格标签

表格的边框---border 高度和宽度----width和height

align ----- 对齐方式 left right center

bgcolor---背景颜色

background---背景图片

cellpadding ------ 表格边距（表示的是单元格内元素距离单元格边缘的距离）
cellspacing----- 表格的间距（单元格和单元格之间的距离）

<table>
<thead>表头</thead>
<tbody> ----- 表格的主干
<tr> ----- 行
<td>第一行第一列</td> ---- 列
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</tbody>
<tfoot>表尾</tfoot>
</table>