夜猫子的知识栈 夜猫子的知识栈
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夜猫子

前端练习生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML

    • html5
    • html常用代码
      • HTML+CSS 代码
        • 文本设置
        • 超链接设置
        • 方框
        • 边框
        • 列表
        • 鼠标
      • HTML常用代码之:结构性定义
    • html常用标签
    • 常用meta整理
  • CSS

  • 页面
  • HTML
夜猫子
2022-06-26
目录

html常用代码

# HTML常用代码

# HTML+CSS 代码

# 文本设置

font-size 字号大小
font-style 字体格式
font-weight 字体粗细
color 文本颜色

**提示:**注意使用网页安全色.

# 超链接设置

text-decoration 参数
underline 为文字加下划线
overline 为文字加上划线
line-through 为文字加删除线
blink 使文字闪烁
none 不显示上述任何效果

背景

background-color 设置背景色
背景图片 background-image: url(URL) URL就是背景图片的存放路径,none表示无。
背景图片重复 background-repeat: 参数
参数取值范围
no-repeat 不重复平铺背景图片
repeat-x 使图片只在水平方向上平铺
repeat-y 使图片只在垂直方向上平铺 如果不指定背景图片重复属性,浏览器默认的是背景图片向水平和垂直两个方向平铺
背景图片固定 background-attachment: 参数
参数取值范围 fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动 scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动

区块

单词间距 word-spacing
字母间距 letter-spacing
文本对齐 text-align
参数的取值 left:左对齐 right:右对齐 justify:相对左右两端对齐
垂直对齐 vertical-align
参数 top:顶对齐 bottom:底对齐 text-top:相对文本顶对齐 text-bottom:相对文本底对齐 baseline:基准线对齐 middle:中心对齐 sub:以下标的形式显示 super:以上标的形式显示
文本缩进 text-indent: 缩进距离
显示样式 display block:块级元素,在对象前后都换行 inline:在对象前后都不换行 list-item:在对象前后都换行,增加了项目符号 none:无显示

# 方框

height 高度
width 宽度
padding 内边距
margin 外边距
float(浮动) 可以让块级元素在一行中排列,例如横向菜单。
clear 清除浮动

# 边框

样式 border style none:无边框 dotted:边框为点线 dashed:边框为长短线 solid:边框为实线 double:边框为双线
宽度 border width
颜色 border color

# 列表

list-style-type 列表样式 不同浏览器的列表符可能不相同,可能会影响到网页,所以网页中的列表大多都是由背景图片显示

# 鼠标

cursor 鼠标形状参数
style="cursor:hand"      手形
style="cursor:crosshair"   十字形
style="cursor:text"      文本形
style="cursor:wait"      沙漏形
style="cursor:move"     十字箭头形
style="cursor:help"      问号形
style="cursor:e-resize"    右箭头形
style="cursor:n-resize"    上箭头形
style="cursor:nw-resize"   左上箭头形
style="cursor:w-resize"    左箭头形
style="cursor:s-resize"    下箭头形
style="cursor:se-resize"   右下箭头形
style="cursor:sw-resize"   左下箭头形

# HTML常用代码之:结构性定义

文件类型 放在档案的开头与结尾
文件主题 必须放在「文头」区块内 <title></title>
文头 描述性资料,像是「主题」 <head></head>
文体 文件本体 <body></body>
标题 从1到6,有六层选择 <h?></h?>
标题的对齐 <h? align=left|center|right></h?>
区分 <div></div>
区分的对齐 <div align=left|right|center|justify></div>
引文区块 <blockquote></blockquote>
强调 通常会以斜体显示 <em></em>
特别强调 通常会以加粗显示 <strong></strong>
引文 通常会以斜体显示 <cite></cite>
码 显示原始码之用 <code></code>
样本 <samp></samp>
键盘输入 <kbd></kbd>
变数 <var></var>
定义 有些浏览器不提供 <dfn></dfn>
地址 <address></address>
大字 <big></big>
小字 <small></small>
加粗 <b></b>
斜体 <I></I>
底线 <u></u>
删除线 <s></s>
下标 <sub></sub>
上标 <sup></sup>
打字机体 <tt></tt>
预定格式 <pre></pre>
向中看齐 文字与图片都可以 <center></center>
闪耀 有史以来最被嘲弄的标签 <blink></blink>
编辑 (opens new window)
上次更新: 2023/7/11 18:57:41
html5
html常用标签

← html5 html常用标签→

最近更新
01
IoC 解决了什么痛点问题?
03-10
02
如何调试 Nest 项目
03-10
03
Provider注入对象
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式