1、HTML简介
HTML : Hpyer Text Mark Language 超文本标记语言
- 超文本 （图片、视频、音频、超链接等等…）
- 标记 (特殊的符号)
- 语言 (浏览器能识别的标记)
网页的组成：
HTML(结构)+CSS(样式)+JS(行为)
2、结构标签
<!-- 这表示HTML的版本，当前版本为HTML5的版本 -->
<!DOCTYPE html>
<!-- html表示一个网页的根标签 -->
<html>
<!-- head表示网页头信息 -->
<head>
<!-- meta表示网页的元信息 charset="utf-8" 表示网页的编码格式 -->
<meta charset="utf-8">
<!-- title表示网页标题 -->
<title>这是网页标题</title>
</head>
<!-- body表示网页的正文 -->
<body>
</body>
</html>
<!-- 标签的属性 语法格式： 属性名="属性值" -->
<!-- 围堵标签、单标签 -->
颜色的表示方式：
第一种方式：用表示颜色的英文单词，例，red green blue
第二种方式：用16进制表示颜色，例，#000000 #ffffff #325687 #377405
3、排版标签
可用于实现简单的页面布局
注释标签：
换行标签：< br>
段落标签：< p>文本文字</ p>
- 特点：段与段之间有空行
- 属性：align对齐方式(left、center、right)
水平线标签:< hr/>
- 属性:
- width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
- size: 水平线的粗细 (像素表示，例如：10px)
- color:水平线的颜色
- align:水平线的对齐方式
颜色的表示方式：
第一种方式：用表示颜色的英文单词，例，red green blue
第二种方式：用16进制表示颜色，例，#000000 #ffffff #325687 #377405
4、文字标签
font标签处理网页中文字的显示方式
| 属性名 | 代码 | 描述 |
|---|---|---|
| size | < font size=“7”></ font> | 用于设置字体的大小，最小1号，最大7号 |
| color | < font color=“#f00”></ font> | 用于设置字体的颜色 |
| face | < font face=“宋体”></ font> | 用于设置字体的样式 |
5、文本标签
使用标签实现标签的样式处理
| 标签 | 代码 | 描述 |
|---|---|---|
| b | < b></ b> | 粗体标签 |
| strong | < strong></ strong> | 加粗 |
| em | < em></ em> | 强调字体 |
| i | < i></ i> | 斜体 |
| u | < u></ u> | 下划线 |
| sub | < sub></ sub> | 下标标签 |
| sup | < sup></ sup> | 上标标签 |
| del | < del></ del> | 删除线 |
6、图片标签
在页面指定位置处中引入一幅图片， < img />
| 属性名 | 描述 |
|---|---|
| src | 引入图片的地址 |
| width | 图片的宽度 |
| height | 图片的高度 |
| border | 图片的边框 |
| align | 与图片对齐显示方式 |
| alt | 提示信息 |
| title | 鼠标移到图片上显示的文字 |
7、链接标签
在页面中使用链接标签跳转到另一页面
标签： < a href=“”>< /a>
属性：href:跳转页面的地址(跳转到外网需要添加协议)
设置跳转页面时的页面打开方式，target属性
- _blank在新窗口中打开
- _self在原空口中打开
- 指向同一页面中指定位置
- 定义位置： < a name=“名称”>< /a>
- 指向： < a href=“#名称”>< /a>
8、列表标签
无序列表：使用一组无序的符号定义， < ul>< /ul>
<ul type="circle">
<li></li>
</ul>
| 属性值 | 描述 | 用法举例 |
|---|---|---|
| circle | 空心圆 | < ul type=“circle”>< /ul> |
| disc | 实心圆 | < ul type=“disc”>< /ul> |
| square | 黑色方块 | < ul type=“square”>< /ul> |
有序列表：使用一组有序的符号定义， < ol>< /ol>
<ol type="a" start="1">
<li></li>
</ol>
| 属性值 | 描述 | 用法举例 |
|---|---|---|
| 1 | 数字类型 | < ul type=“1”>< /ul> |
| A | 大写字母类型 | < ul type=“A” >< /ul> |
| a | 小写字母类型 | < ul type=“a”>< /ul> |
| I | 大写古罗马 | < ul type=“I”>< /ul> |
| i | 小写古罗马 | < ul type=“i”>< /ul> |
列表嵌套：无序列表与有序列表相互嵌套使用
代码举例：
<ol>
<li></li>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ol>
9、容器标签
使用CSS+DIV是现下流行的一种布局方式
- 块级标签 (1、独占一行2、可以设置宽度和高度)
- 行内标签 (1、宽高取决于内容宽高 2、不可以设置宽度和高度)
- 行内块标签 (1、宽高取决于内容宽高 2、可以设置宽度和高度)
| 标签 | 代码 | 描述 |
|---|---|---|
| div | < div></ div> | 行级块标签，独占一行，换行 |
| span | < span></ span> | 行内标签，所有内容都在同一行 |
10、表格标签
| 标签 | 代码 | 描述 |
|---|---|---|
| table | < table></ table> | 表格标签 |
| tr | < tr></ tr> | 表格行标签 |
| td | < td></ td> | 表格单元格标签 |
| th | < th></ th> | 标题单元格标签 |
| caption | < caption></ caption> | 标题标签 |
| thead | < thead></ thead> | 表格头部标签 |
| tbody | < tbody></ tbody> | 表格正文标签 |
| tfooter | < tfooter></ tfooter> | 表格尾部部标签 |
| 表格属性 | 含义 |
|---|---|
| width | 表格宽度 |
| height | 表格高度 |
| align | 对齐方式 |
| border | 表格边框 |
| cellspacing | 单元格间距 |
| cellpadding | 单元格内边距 |
| bgColor | 表格背景颜色 |
| rowspan | 跨行 |
| colspan | 跨列 |
11 、表单标签
表单标签
| 标签 | 代码 | 描述 |
|---|---|---|
| form | < form></ form> | 表单 |
| input | < input> | 输入框 |
| select | < select></ select> | 下拉列表 |
| option | < option></ option> | 下拉列表项 |
| textarea | < textarea></ textarea> | 文本域 |
| fieldset | < fieldset></ fieldset> | 属性集合 |
| legend | < legend></ legend> | 属性描述 |
表单属性
| 属性 | 含义 |
|---|---|
| action | 表单提交的后端程序的地址 |
| method | 表单的请求方法(get、post)默认get请求 |
| enctype | 表单提交的数据格式application/x-www-form-urlencoded 将表单的数据以 key=value的形式提交 multipart/form-data 将表单以二进制流的形式提交 |
type属性值
| type属性 | 含义 |
|---|---|
| text | 文本输入框 |
| password | 密码输入框 |
| radio | 单选框 |
| checkbox | 复选框 |
| date | 日期选择框 |
| time | 时间选择框 |
| datetime-local | 日期时间选择框 |
| number | 数字输入框 |
| 邮箱输入框 | |
| file | 文件上传域 |
| image | 图片提交按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
其他属性
| 属性 | 含义 |
|---|---|
| name | 表示输入框的名称(未来指的就是提交到后端程序的中的key) |
| value | 表示输入框中的值 |
| checked | 表示默认选中(一般用在单选和复选上) |
| readonly | 只读 |
| disabled | 不可用 |
| placeholder | 输入框提示信息 |
| maxlength | 最大输入字符 |
| size | 输入框的宽度 (单位：字符) |
| max | 最大值(一般用在数字输入框上) |
| min | 最小值(一般用在数字输入框上) |
| selected | 表示默认选中(一般用在select下拉列表中) |
| rows | 表示文本域的高度(一般用在textarea下拉列表中) |
| cols | 表示文本域的宽度(一般用在textarea下拉列表中) |
12 、框架标签
| 标签 | 代码 | 描述 |
|---|---|---|
| frameset | < frameset></ frameset> | 框架标签 |
| frame | < frame></ frameset> | 页面标签 |
| 属性 | 含义 |
|---|---|
| rows | 将框架集按照上下分配 |
| cols | 将框架集按照左右分配 |
| noresize | 页面不能重置大小 |
13、 iframe标签
| 标签 | 代码 | 描述 |
|---|---|---|
| iframe | < iframe></ iframe> | 框架标签 |
| 属性 | 含义 |
|---|---|
| src | iframe默认页面地址 |
| name | iframe的标识 |
| width | 宽度 |
| height | 高度 |
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
