1.HTML概述
1.什么是HTML语言:超文本标记语言
HTML是:HyperText Markup Language,翻译过来是:超文本标记语言
超文本:比文本更强大
标记语言:通过一组标签标记包裹的内容
2.HTML语言的规范和简单语法
HTML文件的扩展名为.html或.htm
标签不区分大小写,尽量使用小写
通常由开始标签和结束标签组成(有例外,如:<br/>等)
标签中包含属性,设置属性可以达到更好的显示效果
3.基本格式
<html>
<head>
HTML的一些信息
引入的外部文件(CSS等)
</head>
<body>
展示给用户的数据
</body>
<html>
2.HTML的基本标签
1.文字标签
1.排版标签
* <p></p> 段落标签,特点:上下会产生空行。
* <br/> 换行标签
* <hr/> 一条水平线
* color 颜色,值有两种写法
* 直接编写英文单词
* RGB三原色(red green blue) #aa34cc
* width 宽度,值有两种写法
* 直接编写像素值 300px
* 编写百分比 30%
* 区别:像素值是固定值,百分比会随着浏览器的大小的变化而改变。
2. HTML的字体标签
* <font></font>字体标签。
* color 字体颜色
* size 字体大小
* 最大值 7
* 最小值 1
* 默认值 3
* 值的写法
* 直接书写数字
* +数字(+2代表默认值+2)
* face 字体类型
3. 标题标签
<h1>一级标题</h1>
<h2>一级标题</h2>
。。。
<h6>一级标题</h6>
特点:从1到6越来越小的。默认换行的,加粗。
4. 粗体标签和斜体标签
* <b></b> 粗体
* <i></i> 斜体
* 标签是可以嵌套的 <b><i>既是粗体又是斜体</i></b>
2.图片标签
1. HTML的图片标签
* 在HTML的语言中,使用<img />标签作为图片的标签,使用该标签就可以在网页上显示图片了
2. img标签包含的属性
* src -- 要显示的图片的地址
* width -- 图片显示的宽度
* height -- 图片显示的高度
* alt -- 图片的说明文字
3. 图片的路径写法
* 路径会分成两种:绝对路径和相对路径
* 相对路径
* ./ -- 代表当前路径
* ../ -- 代表上一级路径
3. 超链接标签
* <a>文本内容</a>
* 链接资源必须要使用 href属性
* 注意1:如果访问的网络的资源,需要编写http的协议。默认是file文件的协议。
* 注意2:链接本地的资源,如果浏览器可以解析的资源,默认打开了,如果不恩能解析的资源,弹出下载的窗口。
* 打开位置:target属性
* _blank -- 打开新的窗口
* _parent -- 在父窗口打开
*_self -- 在当前的窗口打开,默认值
4. 列表标签分成有序和无序列表
*有序列表
<ol>
<li>有序列表</li>
</ol>
* ol标签的属性
* type 决定的是列表前的标号。type="a"
* start 从哪开始
* 无序列表
<ul>
<li>无序列表</li>
</ul>
* ul标签的属性
* type
5. HTML的表格标签
* <table>表格标签,常用的属性如下
* border -- 边框的宽度
* width -- 表格的宽度
* height -- 表格的高度
* bgcolor -- 表格的背景颜色
* backgroud -- 背景的图片
*align -- 对齐的方式
* <tr>标签代表行,常用的属性如下
* align -- 行的对齐方式
* bgcolor -- 设置每一行的颜色
* <td>标签代表单元格,常用的属性如下
* 列合并单元格 --colspan
* 行合并单元格 --rowspan
6. HTML的表单标签
* 表单标签需要使用<form></form>来声明,在该标签内使用其子标签来显示表单输入项内容
* action -- 提交路径
* method -- 提交方式
* 文本框使用:<input type=”text”/>
* name -- 名称
* value -- 值
* readonly -- 只读
* 密码框使用:<input type=”password”/>
* 单选按钮使用:<input type=”radio”/>
* 需要使用name属性来区分组内容,完成单选的效果
* checked -- 默认选中
* 复选框使用:<input type=”checkbox”/>
* 需要使用name属性来区分组内容
* checked:默认选中
* 下拉列表框使用:<select><option>内容</option></select>
* selected:默认选中
* 文件上传项使用:<input type=”file” name=”file”/>
* 文本域使用:<textarea name="" cols=""rows=""></textarea>
* 提交按钮使用:<input type="submit" value="注册">
* 重置按钮使用:<input type="reset" value="重置">
* 普通按钮使用:<input type=”button” value=”普通按钮”>
* 隐藏域使用:<input type=”hidden” name=”id”/>
表单的提交方式
* GET方式,默认值
* 提交的数据都会在地址栏中进行显示
* 提交的数据的时候是有大小的限制
* POST
* 提交的数据不会再地址栏中进行显示
* 提交的数据没有大小限制
7. HTML的框架标签
*使用<frameset></frameset>标签可以对整个HTML的页面进行分割,但是注意:如果使用了frameset标签,不需要使用body
* <frameset>标签的常用属性如下:
* rows:横向切分页面
* cols:纵向切分页面
* 使用<frame>标签代表切分每个部分的页面
* src:引入页面的路径
* name:该部分页面的名称