h1、h2、h3、h4、h5、h6
只有这六个p
标签 段落之间有空隙换行br
空换行hr
下划线换行b
、strong
加粗u
、ins
下划线i
、em
倾斜s
、del
删除线img
alt
属性值作为替换文本、src
属性作为图片链接、title
属性在鼠标悬停时显示width
、height
很容易理解,控制图片宽高audio
controls
显示播放的空间autoplay
自动播放(部分浏览器不支持)loop
循环播放video
muted
实现静音播放a
href
target
目标网页的打开形式 _blank
在新窗口中跳转 保留原网页_self
在当前窗口中跳转(覆盖原网页) 不打开新的网页窗口h5 不再支持 div盒子 align: center 的属性
ul
无序列表 li
标签li
标签可以包含任意内容ol
有序列表 可以认为是 order list
: 有顺序的列表 ol
列表中只允许包含li
标签li
标签可以包含任意内容dl
自定义列表 diy list
dt
自定义列表的主题dd
自定义列表的内容 注意dd
会默认显示缩进效果dl
标签中只允许包含dt
/dd
标签dt
/dd
标签可以包含任意内容table
tr
行 可以理解为table row
可以包含n
个td
td
单元格th
表头 table head
放在tr
中caption
书写在table
标签内容 表示表格大标题 一般居中thead
tbody
tfoot
thead、tbody、tfoot
)rowspan
、跨列合并colspan
input
系列 type
属性值如下:
text
文本框,用于输入单行文本 不换行 即写代码需要br
手动换行password
密码框 用于输入密码radio
单选框 用于多选一checkbox
多选框file
用于之后上传文件submit
提交按钮 用于提交reset
重制按钮 重制和提交生效 必须要有父级标签表单域button
普通按钮 可以配合js
添加功能input
其他属性
placehold
给输入框提示文字name
用name属性分组,相同name属性的单选框为一组checked
表示默认选中 指选项的默认值multiple
上传文件时实现多选value
给按钮添加或修改按键文字,包括submit
、reset
、button
button
标签 也可以作为按钮使用
button
本身不具有功能,因此可以灵活地给 button
添加功能,拓展性极高js
搭配使用有奇效select
下拉菜单
select
标签,下拉菜单的整体,需要包裹住option
option
下拉的选项selected
,不设置默认为第一项textarea
文本域标签
css
给其添加行列,即宽高label
标签
label
标签把内容包裹起来id
属性label
标签的for
属性中设置对应的id
值label
标签把内容和表单标签一起包裹起来label
标签的for
属性删除div
span
header
、nav
、footer
、aside
、section
、article
html
中空格合并的现象 &nsbp
空格©
网页的版权 copyrightcss
的引入方式
css
写入style
标签中,通常约定为html
文件中的head
标签内.css
文件中link
引入link
中css
写在标签的style
属性中.class
通过类名 指定标签的style
id
选择器 js
诞生,在一个页面中式唯一的,不可替代的#id
{属性名: 属性值}id
属性id
属性值id
选择器只能选中一个标签*
号可以匹配所有的标签margin
、padding
属性font-size
16px
font-weight
normal
加粗 blod
font-style
字体是否倾斜normal
倾斜 italic
font-family
windows
电脑 默认是微软雅黑sans-serif
均匀 无笔锋 一般网页都用这种类型serif
不均匀 有笔锋monospace
所有文字占相同宽度font
相关属性的连写 font: style weight size family
text-indent
px
或者 数字+em
; 1em
为当前font-size的大小text-align
span
标签input
标签、imp
标签text-decoration
underline
下划线 常用line-through
删除线 不常用overline
上划线 不常用none
无装饰线 常用line-height
取值为px
或者font-size
的倍数line-height
: 文字父元素高度font: style weight size/line-height family
margin: 0 auto
选择器1 选择器2 {css}
选择器1 > 选择器2 {css}
选择器1, 选择器2 {css}
选择器1.选择器2 {css}
满足既又原则hover
hover
background-image: url()
100px
控制、也可以用方向right、left、center控制img
、background-image
: 重要的图片用img
不重要的图片用background-image
div、h系列、p、ul、li、dl、dt、dd、form、header、nav、footer
a、span、b、u、i、s、strong、ins、em、del
input、textarea、button、select
img
有行内块的特点 但是chrome调试后显示有inlinedisplay: block
转换为块级元素display: inline-block
转换为行内块元素display: inline
极少……继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
!important
不能提升继承的优先级,且实际开发中不建议使用
!important
如果不是继承,则权重最高main
函数都能搞成mian
content内容区域、padding内边距、border边框、margin外边距
bd
后按tab
键border-width
、 border-style
、 border-color
borde-方位名词
属性值连写box-sizing: border-box
* {margin: 0; padding: 0;}
清除内边距margin-bottom
和 margin-top
会合并 取最大值 而不是相加margin
值,会使父标签子标签都下移, 坑爹现象border-top
或者 padding-top
(分隔父子元素的 margin-top
)overflow:hidden
这个方法最完美padding
、margin
无效情况 margin
和padding