一、 学习html的目标:认识网页组成和五大浏览器,明确Web标准的构成。使用HTML骨架搭出一个网页。
认识网页。网页包括 :文字、图片、视频、音频、超链接。(超链接指:点击文字或图片链接到其他的页面),网页是由代码编辑出来的。分为前端(html、css、js)和后端(php、mysql、Java),前端是看到的内容,由前端人员开发。后端是看不到的操作,比如:数据的处理等。
浏览器:是网页显示、运行的平台,是前端开发必备利器。常见的浏览器包括:IE、火狐浏览器(Firefox)、谷歌(chrome)、Safari浏览器、Opera(欧朋)。
二、Web标准中分三个构成
构成 语言 说明
结构 HTML 页面元素和内容
表现 css 外观和位置等页面样式(大小、颜色等)
行为 js(javascript) 网页模型的定义和页面的交互
三、1.html的概念:专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
2.构建网页的基本步骤:1.新建一个文本文档 2.在文本中输入代码等内容,结束保存 3.修改文件后缀为html 4.打开html,就会显示之前输入的内容
3.(1)代码的组成:是由很多的标签组成 (2)标签分单、双。 单:自成一体 双:由开始标签和结束标签组成
四、HTML骨架结构 1.网页类似文章,也有开头、正文、结尾。但网页的固定结构叫做整体、头部、标题、主体... 2.网页中的结构是通过特定的HTML标签进行描述。 结构代码如下图:
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Documenttitle>
- CSS/JS
- head>
- <body>
- HTML
- body>
- html>
-
-
-
- 例如:
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Documenttitle>
- head>
- <body>
- <h1>这是我的音乐收藏夹h1>
- <hr>
- <h3>这是音乐h3>
- <h3>这是图片h3>
- <p>哈哈哈哈哈你想看小狗吗,<a href="./4-图片.html">点击这里a>p>
- body>
- html>
ctrl+y 恢复原样 ctrl+a 全选 ctrl+f 查找 ctrl+d 批量选中 ctrl+z 撤回 ctrl+c 复制
ctrl+v 粘贴 ctrl+x 剪切 ctrl+s 保存
添加媒体文件: 1.图片: [../] 表示上一级文件目录 [./] 表示当前目录/下级目录 2.音频: 3.视频:
-
-
- 瞄点
-
六、列表标签
-
- 列表:有多条数据 整体列表 列表中的每一项 =列表项
- 无序列表
- 有序列表
- 自定义列表
-
- 无序列表 ul>li 特点:每一个列表项前面带一个小圆点
- ul标签代表 整个列表
- li标签代表 列表中的每一项
- 注意:ul中只能放li标签,li中可以放任何内容
-
- 有序列表 ol>li 特点:每一个列表项前是数字
- ol标签 代表整个列表
- 属性:
- start 开始的序号
- type 序号类型 a、A、i、I
- li标签 代表每一个列表项
- ol里只能放li ,li可以放任何内容
-
- 自定义列表 dl>dt/dd 特点:dd标签会缩进
- dl 表示 整个列表
- dt 表示 列表中的小标题
- dd 表示 列表中的每一项
七、表格标签
- table 表格标签
- 属性:
- border边框 width 宽 height高
- tr 行 td 单元格
-
- align 对齐方式 :center(中间) 内容居中
-
- 表格的大标题,默认在表格的中间 小标题 默认 加粗 居中
-
- rowspan 合并行 colspan合并列
八、表单
- 标签名
- {
- 样式:样式值
- }
- 1- 什么是表单?(注册、登录、搜索、)
- 用于收集用户的信息
- form标签 整体的表单
- 属性:
- action 提交地址(将数据提交给后台)
- method 提交方式(get\post)
- get 不太安全 数据显示在地址栏上
- post
-
- 前端 数据展示 页面效果
- 后端 处理数据 a.php
- input标签 输入框
- 属性:
- disabled 禁用
- readonly 只读
- placeholder 提示内容 自定义内容
- name 名字 方便后台接收数据 name=value 自定义内容
- value 输入的值 默认值 (提交给后台的值) 自定义内容
- type 类型
- text 文本
- password 密码
- file 上传文件
- radio 单选框 checked
- checkbox 多选框 checked
- email 邮箱
- date 日期
- button 普通按钮
- submit 提交按钮
- image 图片提交 src指定图片路径名称
- reset 重置按钮
- select 标签
- 单选、多选框
- name的值 统一
- 必须要加value属性。否则获取到的on
- checked属性 默认选中
- select下拉框标签 下拉框的框架
- option下拉框选项
- 属性:
- selected 下拉框默认选中
- 文本域textarea cols 列 rows 行
-