HTML基本文档结构标签的是,认识 HTML 文档结构及元素

初识 HTML 文件结构

Document

复制代码

一、元素框

1.元素框的查看

页面中看到的都是元素，它们以“框”的形式存在

使用CSS检查器查看 *{outline:1px solid red}

2.类型

块级框——块级元素——垂直排列

行内框——行内元素——水平排列

行内块级框——行内块元素——行间垂直，行内水平

3.描述

1. 标签

双标签：可替换元素，内容写到两个标签之间

单标签：不可替换元素，内容由标签属性指定

2. 属性

2.1. 通用属性

内容

内容

内容

2.2 预定义属性

php中文网

2.3 自定义属性

内容

2.4 事件属性

二、布局元素

image.png

布局元素

页眉

主体

页脚

页眉

主体

页脚

三.文本元素

image.png

四、链接元素

32ccc0c3af064e7e85b1ecd68fdd4f6c_tplv-k3u1fbpfcp-watermark.jpg

当前窗口打开

新窗口打开

打开QQ新闻

发邮件

1570551&&&&

五、列表元素

image.png

• 首页
• 教学视频
• 社区问答

10. 开晨会
11. 吃午饭
12. 准备晚上的吃什么

联系方式

发邮件

1570551&&&&

备案号:

皖ICP-2222222222

六、图像元素

image.png

认识HTML元素

七、表格元素

[图片上传失败...(image-f312f6-1617938458125)]

小练习：制作课程表

学生课程表

学生课程表

时间星期一星期二星期三星期四星期五

上午英语语文数学历史地理英语语文数学历史地理英语语文数学历史地理英语语文数学历史地理中午休息下午英语语文数学历史地理英语语文数学历史地理备注：在15:00-16:00自习写作业，写完作业在回家

效果图：

image.png

八、表单元素

1.表单元素

image.png

2.label 控件标签

[图片上传失败...(image-4b2ab4-1617938458125)]

3.input 输入框

3.1 type 类型

image.png

3.2 其它属性值

image.png

4. select 下拉列表

image.png

5.textarea 多行文本域

[图片上传失败...(image-2ca049-1617938458125)]

6.datalist 控件可选值列表

image.png

7.button 按钮

image.png

8. fieldset 表单域分组

[图片上传失败...(image-885a0d-1617938458125)]

9.时间属性

[图片上传失败...(image-bb5f63-1617938458125)]

小练习：制作一个简单的表单

Document

必填项

帐号:

密码:

邮箱:

性别:

男

女

保密

爱好:

编程

游戏

旅游

摄影

铜牌会员

银牌会员

金牌会员

钻石会员

关键字:

提交

效果图：

image.png

九、元素框架

1.基本属性

image.png

2.了解 sandbox

[图片上传失败...(image-e7e458-1617938458125)]

iframe 标签的使用

Document

北京

合肥

上海

---

效果图：

image.png

十、视频/音频

image.png

十一、图片适配元素

[图片上传失败...(image-2cfd52-1617938458125)]