2.HTML:超文本标记语言
3.双标签:成对出现的标签
单标签:只有开始标签,没有结束标签 edg:换行:
水平线:
4.VS Code快速生成html骨架:!(英文)+Enter/Tab
5.标签之间的两种关系:(1)父子关系(嵌套) (2)兄弟关系(并列)
6.标题标签:
~
特点:(1)独占一行 (2)文字加粗 (3)字号逐渐减小
tips:h1标签在一个网页中只用一次,用来放新闻标题或网页的logo
7.段落标签:
...
特点:(1)独占一行 (2)段落之间存在间隙- 换行:
水平线:
浏览器不识别代码中的Enter键换行
9.文本格式化标签:加粗(strong、b)、倾斜(em、i)、下划线(ins、u)、删除线(del、s)
在同一行内显示
10.在网页中插入图片:
src为单标签的必须属性,指定图片的名称和位置
tips1:在VS Code中uri以./开头 edg:
tips2:浏览器缩放图片,默认等比缩放
11.属性名="属性值"
属性写在尖括号里面,标签名后面,标签名和属性之间用空格隔开,不同属性前不区分先后顺序
12.相对路径:. 当前文件所在的文件夹 ..当前文件的上一级文件夹 /进入某个文件夹里面
13.超链接:
跳转到本地文件:相对路径 跳转到网页:绝对路径
target="_blank" :新窗口跳转页面
若开发初期,不知道超链接的跳转地址,href属性值写#,表示空链接,不会跳转
14.音频播放:
一般浏览器会禁用自动播放功能,controls显示出播放控制面板,loop功能为循环播放
15.视频播放:
controls显示出播放控制面板,loop功能为循环播放,muted为静音播放,autoplay在 muted功能启用的条件下才会正常使用
16.列表分类:
(1)无序列表:ul(无序列表)嵌套li(列表条目)
(2)有序列表:ol(有序列表)嵌套li
(3)定义列表:dl(定义列表)嵌套dt(定义列表的标题)和dd(定义列表的描述/详情)
!!tips:ul/ol标签里面只能包裹li标签;而li标签里面可以包裹任何内容
dl标签里面只能包裹dt/dd,而dt/dd标签里可以包裹任何内容
17.表格:table嵌套tr(行),tr嵌套th(表头单元格)/td(内容单元格)
!!!tips:在网页中,表格默认没有边框线,使用broder属性(broder=”1“)可以为表格添加边框线
表格结构标签:tbhead、tbody、tfoot
18.单元格合并:
(1)跨行合并:rowspan
(2)跨列合并:colspan
合并步骤:
(1)保留最左最上的单元格,添加属性(edg:),数字表示为要合并的单元格数量
(2)删除其他单元格
tips!!:不能跨结构合并
19.表单:收集用户信息
input标签:type属性值不同,则功能不同
type属性值:(1)text:文本框,输入什么显示什么,用于输入单行文本
(2)password:密码框,无论输入什么都显示..
(3)radio:单选框
(4)checkbox:多选框
(5)file:上传文件(默认情况在只能上传一个文件)
占位文本:提示信息 <input type="text"/"password" placeholder="提示信息">在文本框和密码框都可以使用 提示信息显示字体默认为灰色 用户输入为黑色
<input type=“radio”name="..." checked>
(1)在多个radio单选框中要想实现单选,需把多个name值设为相同 ;
(2)要想进入页面有一个固定的单选框值,只需添加checked(默认选中)
!!tips:若单词只有一个,没有=“’,说明属性名和值相等
file:上传文件(默认情况在只能上传一个文件)
要想上传多个文件,只需要添加multiple
<input="checkbox" checked> checked:实现默认选中
20.下拉菜单:select嵌套option edg:
下拉菜单实现默认选中:selected
21.文本域:多行输入文本
22.label标签:用label标签绑定文字和表单控件的关系,增大表单控件的点击范围
写法一:label标签只包裹文字内容,label的for属性值要和表单控件的id属性值相同
edg:
写法二:使用label标签包裹表单控件,不需要属性edg:<label><input type="radio" >女</label>
23.按钮button:
type属性值:(1)submit:提交按钮,点击后可以提交数据到后台(默认功能)
(2)reset:重置按钮,点击后将表单控件恢复默认值
(3)button:普通按钮,默认没有功能,一般配合JavaScript使用
!!!tips:要想使按钮起作用,需将按钮包裹在form标签里
24.无语义的布局标签:划分网页区域,摆放内容
(1)div(大盒子):独占一行
(2)span(小盒子):不换行
25.在网页中显示预留字符:字符实体:以&开头 ;结尾
字符实体:(1)空格 : ;
(2)< :<
(3)> :>