前端html学习笔记

• 前端

目录

一、文本标签

1. 单标签

2. 双标签

3. 重要的信息往下面放（自行判断）

4. 不重要的信息往下面放（自行判断）

二、图片标签

三、路径

1. 绝对路径

2.相对路径

(1) 同级目录：

(2) 下级目录：

(3) 上级目录

四、音频标签

五、视频标签

六、链接标签

1. target：

七、列表标签

1. 无序列表

2.有序列表

3.自定义列表标签

八、表格标签

1.表格的基本标签

2.表格标题和表头单元格标签

3.表格的结构标签（了解）

4.合并单元格

九、表单标签

1. input标签

1.2.input系列标签-文本框

1.4.input系列标签-单选框

1.6input系列标签-文件选择

1.7input系列标签-按钮

​编辑

2. button按钮标签

3. select下拉菜单标签

4. textarea文本域标签

5. label标签

十、语义化标签

10.1没有语义的布局标签

10.2有语义的布局标签（了解）（移动端手机网页常用）

十一、字符实体

一、文本标签

1. 单标签

        网页框架标签

        网页标题标签

        主题标签

        一级标题标签

        段落标签

2. 双标签

        换行标签

        水平分割线

3. 重要的信息往下面放（自行判断）

        加粗

        下划线

        倾斜

        删除线

4. 不重要的信息往下面放（自行判断）

        加粗

        下划线

        倾斜

        删除线

二、图片标签

前端html学习笔记 (里面可有多个属性)

src:图片路径

alt:替换文本，当图片不显示时显示

title:提示文本，当鼠标悬停时显示

width：图片宽度

height：图片高度

（设置宽高时只设置宽或者高时另一个高或者宽会等比例设置，目的是使图片不变形）

三、路径

1. 绝对路径

例如：

盘符开头：D:\day01\images\1.jpg

完整的网络地址：http://www.itcast.cn/2018czgw/images/logo.gif(了解)

2.相对路径

(1) 同级目录：

方法一：

方法二：

(2) 下级目录：

(3) 上级目录

四、音频标签

例如：

src：音频的路径

controls：显示播放控件

autoplay：自动播放（部分浏览器不支持）

loop：循环播放

五、视频标签

例如：

src：视频的路径

controls：显示播放控件

autoplay：自动播放（谷歌浏览器中需配合muted实现静音播放）

loop：循环播放

六、链接标签

例如：超链接

(开发网站初期，还不知道跳转地址的时候，href的值书写#(空链接) –)

1. target：

_self 默认值，在当前窗口中跳转（覆盖原网页）

_blank 在新窗口中跳转（保留原网页）

七、列表标签

1. 无序列表

ul 表示无序列表的整体，用于包裹li标签

li 表示无序列表的每一项，用于包含每一行的内容

特点：列表的每一项前默认显示圆点标识

注：

  • ul标签只允许包含li标签
  • li标签可以包含任意内容

2.有序列表

ol 表示有序列表的整体，用于包裹li标签

li 表示有序列表的每一项，用于包含每一行的内容

特点：列表的每一项前默认显示序号标识

注：

  • ol标签只允许包含li标签
  • li标签可以包含任意内容

3.自定义列表标签

dl：表示自定义列表的整体，用于包裹dt/dd标签

dt：表示自定义列表的主题

dd：表示自定义列表的针对主题的每一项内容

例如：

前端html学习笔记

特点：

  • dd前会默认显示缩进效果

注意：

  • dl标签中只允许包含dt/dd标签
  • dt/dd标签可以包含任意内容

八、表格标签

1.表格的基本标签

前端html学习笔记

例如：

前端html学习笔记

效果：

前端html学习笔记

注意：实际开发时针对于样式效果推荐用css设置

2.表格标题和表头单元格标签

前端html学习笔记

例：

前端html学习笔记

效果：

前端html学习笔记

注意：

  • caption标签书写在table标签内部
  • th标签书写在tr标签内部（用于替换td标签）

3.表格的结构标签（了解）

前端html学习笔记

作用：让表格内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

thead：包裹表格头部

tbody：包裹表格主体

tfoot：包裹表格底部

前端html学习笔记

4.合并单元格

  • 上下合并–>只保留最上的，删除其他
  • 左右合并–>只保留最左的，删除其他

前端html学习笔记

例：

前端html学习笔记

前端html学习笔记

效果：

前端html学习笔记

前端html学习笔记

注意：只用同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead、tbody、tfoot）

九、表单标签

1. input标签

  • input标签可以通过type属性值的不同，展示不同的效果

前端html学习笔记

例：

前端html学习笔记

效果：

前端html学习笔记

1.2.input系列标签-文本框

前端html学习笔记

例：

前端html学习笔记

效果：

前端html学习笔记

1.4.input系列标签-单选框

前端html学习笔记

例：

前端html学习笔记

效果：

前端html学习笔记

1.6input系列标签-文件选择

前端html学习笔记

例：

前端html学习笔记

1.7input系列标签-按钮

前端html学习笔记

注意：

  • 如果需要实现以上按钮功能，需要配合form标签使用
  • form使用方法：用form标签把表单标签一起包裹起来即可

例：

前端html学习笔记

效果：

前端html学习笔记

2. button按钮标签

前端html学习笔记

注意：

  • 谷歌浏览器中button默认是提交按钮
  • button标签是双标签，更便于包裹其他内容：文字、图片等

例：

前端html学习笔记

效果：

前端html学习笔记

3. select下拉菜单标签

前端html学习笔记

例：

前端html学习笔记

效果：

前端html学习笔记

4. textarea文本域标签

前端html学习笔记

注意：

  • 右下角可以拖拽改变大小
  • 实际开发时针对于样式效果推荐用css设置

例：

前端html学习笔记

效果：

前端html学习笔记

5. label标签

使用label标签点击选择标签时可以直接点击内容

前端html学习笔记

例：

前端html学习笔记

十、语义化标签

10.1没有语义的布局标签

前端html学习笔记

例：

前端html学习笔记

效果：

前端html学习笔记

10.2有语义的布局标签（了解）（移动端手机网页常用）

前端html学习笔记

注：以上标签显示特点和div一致，但是比div多了不同的语义

例：

前端html学习笔记

效果：

前端html学习笔记

十一、字符实体

前端html学习笔记

例：

前端html学习笔记

（直接敲空格浏览器只能识别一个空格，需要多个空格时用字符实体）

效果：

 前端html学习笔记

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/352529f1c7.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐