常用快捷键

1.!:代表生成html骨架元素

2.html元素:直接书写html元素名称

3.{}:书写html元素内容,更多时候配合2、4

4. *:批量生成相同元素

5. >:生成html的下一级子元素

6. +:批量生成不相同元素

7. .class属性值:添加class属性值,连续,可以同时添加多个class属性值

8. #id:添加id属性值

9.():代表快捷键组合

Html知识

基本标签

隔离标签span

span:生成横的独立空间

标题标签h1-6

h1-h6 :标题标记,六级标题之间不可嵌套,默认换行、变粗(h7和普通标题相同的样式)

div

div标签:属于块级标签 常用标签之一可定义文档中的分区或节(division/section)。div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记 ,那么该标签的作用会变得更加有效。

p标签

p标签:需要分段把文字有条理的显示出来时候且有间距

a标签

a标签(超链接):用于页面的跳转 配合href使用

href:指定页面资源路径:网络资源,本地资源

跳到百度

target:设置页面打开方式 _self(默认,本窗口) _blank(新窗口) _top(顶级窗口) _parent(父级窗口), 自定义窗口

a标签(描点):跳到指定地方

name:描点名称

跳转到锚点

图像标签img

img(src属性值,显示本地/网络图片地址,./代表当前html同级目录;../代表上级 目录,也同有width和height属性,alt属性是图片加载失败显示的文本)

width:设置图片宽度

height:设置图片高度

注意:1.使用图片要注意默认是以原始尺寸显示的,如果想设置图片尺寸,切记图片变形使用,单方向设置图片尺寸,未设置图片尺寸的方向会自动等比例变化

2.如果就想按开发者设置的尺寸不变性显示图片,借助css object-fit:cover

列表标签

1.无序列表ul

子元素:li

2.有序列表ol

相关属性:

start:表示起始值

type:次序的类型

子元素:li

3.描述列表dl

子元素dt dd

表格元素table

相关属性: border:表格边框

cellpadding:设置单元格内填充

cellspacing:设置单元格间空隙

width:设置表格宽度,黑认是内容撑起来的宽度

align :设置表格本身对齐方式

子元素:

col:代表虚拟列

相关属性:

span:设置合并的列数

tr:代表行

相关属性:

align:设置行中每个单元格中内容的对齐方式

子元素:

td:代表普通单元格

相关属性:

width:设置单元格的宽度,这一列中最宽的单元格的宽度是这一列的宽度

align:单元格中内容的对齐方式

rowspan:设置单元格合并的行数

colspan:设置单元格合并的列数

th:代表标题单元格(与普通单元格的区别:居中,加粗)

相关属性:

width:设置单元格的宽度,这一列中最宽的单元格的宽度是这一列的宽度

align:单元格中内容的对齐方式

rowspan:设置单元格合并的行数

colspan:设置单元格合并的列数

框架元素iframe

src:设置嵌套窗口打开的页面资源路径

frameborder:设置嵌套窗口边框是否显示

width:设置嵌套窗口宽度

height:设置嵌套窗口高度

name:设置嵌套窗口名称

媒体元素audio video

audio

属性:

src:设置音频资源路径

controls:音频播放器是否显示

autoplay:设置音频是否自动播放

loop:设置音频是否循环播放

width:视频宽度

height:视频高度

表单元素form

表单控件元素input

type:设置控件类型

text:单行文本框

password:密码框

radio:单选框

checkbox:复选框

file:文件上传器

submit:提交按钮

button:普通按钮

reset:重置按钮

color:颜色拾取器

number:数字输入框

range:滑块

date:日期控件

time:时间控件

datetime-local:本地日期时间控件

month:月控件

week:周控件

name:设置控件名称

value:设置控件的值

min:数字最小值 当类型是number range

max:数字最大值 当类型是number range

step:数字步长值(倍数) 当类型是number range

check:是否默认选中 当类型是radio checkbox

disabled:是否可用

readonly:是否可读

placeholder:设置输入框提示信息

autofocus:设置表单控件为焦点状态(可以键入的状态)

表单控件元素 下拉框 列表框 select

name:设置控件名称

size:设置显示下拉项的个数

multiple:设置是否多选

子元素:

option:下拉选项

value:下拉值

selected:默认下拉项选中

optgroup:下拉项分组

label:下拉项组名

表单控件元素 多行文本框 textarea

cols:设置多行文本框的宽度

rows:设置多行文本框的高度


fieldset元素和legend元素 主要是把表单控件分类

行内样式>内部样式=外部样式

内部样式和外部样式看书写的顺序

外部样式