1.html简介
HTML(Hypertext Marked Language)称为超文本标记语言,是一种标识性的语言。
它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
版本(新):
HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手
2.H5包含的知识
HTML:通过标签搭建一个网页的框架
------------
CSS3、JS:
CSS:美化网页,布局
JavaScript(JS):交互,比如轮播图、新闻滚动、表单校验......
3.常用的开发工具
1. HBuild[推荐]
2. WebStorm
3. Text
4. Dreamweaver:比较老的工具
4. H5的结构
Hello H55.常用标签
5.1 文本相关
5.1.1 标题标签(块元素[独占一行的元素])
默认加粗、而且独占一行
我是H1
我是H2
我是H3
我是H4
5.1.2 段落标签 p
5.1.3 换行、水平线
无需在标签内写内容,我们称之为自结束标签/单标签需要封装内容的标签,需要成对出现的
可以设置属性
5.1.4 特殊符号
空格:
大于号:>
小于号:<
版权:@copy;
5.1.5 斜体、加粗(行内元素[水平排列的标签])
加粗:b/strong
斜体:i/em
加粗
我是strong
斜体
我是斜体
5.2 超链接(行内元素)
5.2.1 主要功能
1.链接到另外一个页面/请求
2.锚点链接
3.a标签中可以嵌套img,作为超链效果
4.打开客户端工具,比如联系我们[发邮件、qq、迅雷]
5.2.2 关键属性
5.2.2.1 href:要到的目的地
5.2.2.2 name:锚点名字
第一步:定义一个锚点
第二步:跳转到锚点位置
5.2.2.3 target
_blank:开一个新窗口
_self:当前窗口
5.2.3 例子
此标签也是一个行内元素
此标签也是一个行内元素
此标签也是一个行内元素
此标签也是一个行内元素顶部
打开邮箱客户端
5.3 图像
5.3.1 一般格式
5.3.2 属性
5.3.2.1 src:图片路径
本地资源
网络资源
5.3.2.2 width、height
width:设置图片宽度
height:设置图片高度
注意:width和height若指给定一个,图像不会变形 若不是原来比例,就会变形
5.3.2.3 alt:图像不能正常显示的情况下使用
5.3.3 例子
5.4 列表
5.4.1 无序列表
- 列表内容
特点:
1.每个li独占一行;默认样式黑色实心点
2.可以通过type属性修改列表样式
5.4.2 有序列表
- 列表内容
特点:
1.每个li独占一行;默认样式数字
2.可以通过type属性修改列表样式
5.4.3 自定义类表
dl:自定义类别的开始
dt:一级分类
dd:二级分类
-
水果
- 苹果
5.5 表格
表格的基本标签
tr:行
td:单元格
th:默认加粗且居中,一般用于设置表头
td:无th默认的样式
table常用的属性:
border:设置边框
cellspacing:单元格之间的间隙
cellpadding:设置内容跟单元格内边框的间隙
合并列:
学生成绩合并行:
张三了解:thead、tbody、tfoot
用处:
1.可以单独设置某一部分的效果
2.tbody可以逐行显示【互联网的远古时代,网速比较慢的时候】
5.6 表单
表单元素
明确:表单作为向后台发送数据的一个重要元素,经常用到
1.所有的表单元素都在form中
form中常用的属性
①action:请求交给谁处理
②method:请求方式,常用的两种get和post
【面试】get和post的区别
get post
请求参数在哪显示 浏览器地址栏 不在地址栏【请求体】
大小有无限制 有限制 无限制,常用这个
安全性 不安全 安全
2.input系列,通过type属性去标识属于什么元素
type:text ----文本框,输入可显示的文字,比如用户名、昵称
type:password ---密码框,默认实心黑点显示
type:radio ---单选按钮
注意: ①name属性必须一致,否则无法实现单选
②value要给定:后台java代码中,要获取这个value值的
type:checkbox ----复选框 用法同radio
type:file ----文件框
type:hidden ---隐藏域
type:button ---按钮,不能直接提交表单,若提交需要结合后面的js
type:image ---用图片作为提交按钮
---邮箱 会自动验证Email地址格式是否正确
---网址:会自动验证URL地址格式是否正确
---数字
---滑块
---搜索框
3.select:下拉框 + option
4.textarea:文本域
5.表单元素的标注
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
标注的文本
注意:lable的for的值跟input的id值一致
属性:
readOnly:只读
disabled:
required:验证内容不能为空
placeholder:为input类型的文本框提供可描述输入字段预期值的提示信息
pattern:正则校验
5.7 音/视频
您的浏览器不支持 video 标签。