html基础小总结

190 阅读4分钟

标签

一、标签语法:

1.单标签:<标签名> 如p标签、h标签 2.双标签:<开始></结束> 如div

二、排版标签:

1.标题:标题

标签h1-h6等级逐渐递减

2.段落:

段落

3.文本格式化:

①不强调: b:加粗 i:倾斜 u:下划线 s:删除线

②强调: strong:加粗 em:倾斜 ins:下划线 del:删除线

4.换行:br 5:分割线:hr

三、媒体标签:(图片、音频、视频的路径都是src)

1.图片

img:单标签 属性: ①src:路径(必须要有) ②alt:替代文本,图片加载失败时显示的时候显示文字 ③title: 提示文本,鼠标悬停时会显示的文字 width:宽度 height:高度

2.音频

audio: 属性: src:路径 ①controls:显示播放插件 ②autoplay:自动播放,部分浏览器不支持 ③loop : 循环播放

3.视频

video: 属性: src:路径 ①controls : 显示播放控件 ②autoplay:自动播放,谷歌浏览器可以加上muted可实现静音播放 ③loop : 循环播放

三、超链接:a

属性: href:跳转地址 target:控制页面的打开方式 _self默认当前窗口跳转 _blank新窗口跳转

注释标签:ctrl+/

特殊字符:空格 &nbsp

锚点链接 : 个人生活 目标:

个人生活

四、列表标签(网页中以行的方式整齐的展示数据:如数据列表、排行榜)

1.无序列表:ul>li

​ 整体:ul ​ 每一项:li ​ 显示效果:每一项前面默认有个小圆点 ​ 注意点:①每一项没有顺序的 ​ ②ul标签中只能放li标签 ​ ③li标签里面可以放任意的标签

2.有序列表:ol>li

​ 整体:ol ​ 每一项:li ​ 显示的效果:每一项前面有默认的序号 ​ 注意点:①每一项都是有顺序的 ​ ②ol标签中只能放li标签 ​ ③li标签可以放任意的标签

3.自定义标签:dl>dt>dd

​ 整体:dl ​ 小标题:dt ​ 每一项:dd ​ 注意点:①dl标签中只能放dt或者dd ​ ②dt或者dd中可以放任意标签 ​

五、表格(展示数据,以行+列的单元格的方式整齐的展示数据,如:股票价格)

1.表格的基本标签:

整体:table 每一行:tr 每一个单元格:td

2.属性:

border:边框 width:宽度 height:高度

3.表格的其他标签:

1.caption:

表格整体的大标题,写在:table标签开始标签的下面

3.th:

表头标签(表格一列的小标题),单元格标签加粗居中

3.表格的结构标签:写在:用来包裹tr

表格的头部:thead 表格的身体:tbody 表格的底部:tfoot

表格的头部区域,内部必须有 表格的主体区域 两个标签都是放在

4.合并单元格:

应用场景:多个单元格展示内容相同时让信息简洁不重复显示 合并属性:①rowspan:跨行合并 ②colspan:跨列合并

单元格(步骤1.确定跨行还是跨列2.找到目标单元格3.删除多余的单元格) 跨行合并:rowspan="个数"(代码写在最上侧目标单元格上) 跨列合并:colspan=“个数”(代码写在最左侧目标单元格上) 多出来的单元要删掉

5.表格属性:

​ 属性名 属性值

cellpadding单元格里的字和边框的距离 cellspacing单元格间的距离

六、表单标签(收集用户数据类网页,如:登录页、注册页等)

表单组成: 表单域

把范围内的信息提交给服务器

input标签(可以通过type属性值的不同,表现不同的形态) 一、text:文本框(可以输入任何文字) 属性 1、value 用户输入的数据 如果提前在代码中设置好了,相当于是内容的默认值 最后value属性值会发送给后台 2、name 告诉后台发送出去的数据是什么含义 3、placeholder 占位符

二、password:密码输入(密码框) 属性 1、value 用户输入的数据 如果提前在代码中设置好了,相当于是内容的默认值 最后value属性值会发送给后台 2、name 告诉后台发送出去的数据是什么含义

三、单选框:radio(实现多选一(要加name=“”名称要一样)) 属性 1、name 告诉后台发送过去的数据是什么含义 分组:有相同name属性值的单选框为一组,一组中只能同时有一个被选中 2、value 表示用户选择的数据 3、checked 默认选中 针对于单选框,一组中只能设置一个

四、多选框:checkbox((要加name=“”名称要一样)) 属性 1、name 告诉后台发送过去的数据是什么含义 2、value 表示用户选择的数据 3、checked 当页面打开的时候就可以默认选中按钮

五、文件选择框:file html5新增的属性::multiple(多文件选择)

六、表单按钮: 1.submit:提交按钮 2.reset:重置按钮(让表单恢复成默认值) 3.button(普通按钮) 注意点:如果需要使用功能:需要配合form标签一起使用(使用form标签把表单标签一起包裹起来即可)

maxlength:规定输入字段中的字符最大长度 label:点击此处时,浏览器会自动将光标转到对应表单元素上

下拉列表 选项1 selected="selected"默认选中 选项2