▲一个网页是由三部分组成,分别是:
- 结构:对应的是 HTML 语言
- 表现:对应的是 CSS 语言
- 行为:对应的是 JavaScript 语言
1.HTML
1)文件结构:
①文件类型说明:
HTML文件中第一行的内容,用来告诉浏览器当前HTML文档的基本信息,其中最重要的就是当前HTML文档遵循的语法标准。
HTML5版本的文档类型声明是:
<!DOCTYPE html>
②结构标签:
③注解:
HTML注释的写法是:
<!-- 注释内容 -->
2)HTML语法规则:
- 根标签有且只能有一个
- 无论是双标签还是单标签都必须正确关闭
- 标签可以嵌套但不能交叉嵌套
- 注释不能嵌套
- 属性必须有值,值必须加引号,单引号或双引号均可
- 标签名不区分大小写但建议使用小写
3)HTML的常用标签:
注意:在上图页面中版权所有里有特殊字符,需要使用转义字符。有如下转义字符:
img:定义图片
- src:规定显示图像的 URL(统一资源定位符)
- height:定义图像的高度
- width:定义图像的宽度
audio:定义音频。支持的音频格式:MP3、WAV、OGG
- src:规定音频的 URL
- controls:显示播放控件
video:定义视频。支持的音频格式:MP4, WebM、OGG
- src:规定视频的 URL
- controls:显示播放控件 尺寸单位:
height属性和width属性有两种设置方式:
- 像素:单位是px
- 百分比。占父标签的百分比。例如宽度设置为 50%,意思就是占它的父标签宽度的一般(50%)
资源路径: 图片,音频,视频标签都有src属性,而src是用来指定对应的图片,音频,视频文件的路径。此处的图片,音频,视频就称 为资源。资源路径有如下两种设置方式:
- 绝对路径:完整路径 这里的绝对路径是网络中的绝对路径。 格式为: 协议://ip地址:端口号/资源名称。 如: 这里src属性的值就是网络中的绝对路径。
- 相对路径:相对位置关系 找页面和其他资源的相对路径。
./ 表示当前路径
../ 表示上一级路径
../../ 表示上两级路径
ul标签: 无序列表
ol标签: 有序列表
li标签: 列表项
a标签: 超链接标签:
target: 打开方式
href: 指定要跳转的链接地址
table标签: table > tr > td
tr标签: 行
td标签: 列
合并行: rowspan
合并列: colspan
form 标签: 表单标签,主要是用来向服务器提交数据
method: 提交方式 get post
action : 提交的路径
input 标签:
type:
password: 密码框
text: 文本
submit: 提交
button: 普通的按钮
reset: 重置按钮
radio: 单选按钮 设置name属性让它们是一组
checkbox: 复选按钮
★HTML的块标签
div
标签: 默认占一行,自动换行span
标签: 内容显示在同一行