文章目录
目录
一、什么是html?
Html是超文本标记语言,是用来描述 web文档的一种标记语言。使用标签作为页面的开始和结束部分。html通常被称为静态网页。HTML是带html或Htm扩展名的文件。
二、基本的标签
1.标签的使用和描述
1.1 标签的分类
行级标签:
行级标签在使用后不自动选择换行,如标签:<font>/<img>等等
块级标签:
块级标签在使用后会自动换行,如标签:<p>/<ol>/<ul>/<dl>等等
1.2基本标签
标签 | 描述 |
p | 前后会有空白,会分行 |
font | 字体标签 |
ol | 有序列表 |
ul | 无序列表 |
dl | 自定义列表 |
img | 插入图片 |
marquee | 滚动标签 |
a | 超链接标签 |
table | 表格标签 |
form | 表单标签 |
input | 文本输入域标签 |
slelct | 下拉列表框 |
textarea | 文本域标签 |
frameset | 框架集 |
iframe | i内嵌框架 |
2.特殊标签
特殊标签 | 描述 |
| 空格 |
> | 大于号 |
< | 小于号 |
&qaot; | 引号 |
© | 版权号 |
® | 注册号 |
¥ | 人民币 |
3.列表标签使用
3.1有序列表语法
<ol type="" start="">
<li>
....
</li>
<ol>
3.2无序列表语法
<ul>
<li>
...
</li>
</ul>
3.3自定义列表语法
<dl>
<dt>
.....
</dt>
</dl>
总结:
属性 | 描述 |
type | 输入字母或数字列表排列 为A 从A开始排序 |
start | 排序从数字几或从哪个字母开始 |
列表的内容卸载<li>标签中间可写入多个。自定义列表卸载<dt>标签中。
无序列表默认为实心圆 type=“circle” 空心圆为type="square"
4、字体标签
4.1语法
<font 属性> ... </font>
属性 | 描述 |
size | 改变字体大小 |
color | 改变字体颜色 |
align | 改变字体对齐位置 |
4.2演示:
<font align="center" color="blue" size="50"></font>
5、图片标签
5.1语法
<img src="" alt=""/>
属性 | 描述 |
src | 插入图片的路径 |
alt | 当网络错误时替图片显示,正常时不显示 |
width | 改变图片的宽度 |
height | 改变图片的高度 |
align | i改变图片的对齐方式 |
注:因为<img>时行级标签,所以使图片居中对齐需要放在<p>标签中
列如:
<p align="center"><img src=""></p>
6、滚动标签
6.1语法
<marquee behavior="" direction="">
<!-- 可以插入图片或文字使之滚动起来 -->
<font>...</font>
<img src="" />
</marquee>
属性 | 描述 |
behavior | 滚动的方式: slide:只滚动一次 alternate:来回滚动 |
direction | 滚动的方向 从左到右 从上到下 |
height | 设置滚动框的高度 |
width | 设置滚动框的宽度 |
bgcolor | 滚动框的背景颜色 |
scorlldelay | 滚动的延时 |
onmouseseover="this.stop" | 点击停止滚动 |
οnmοuseοut="this.start" | 鼠标箭头离开开始滚动 |
例:
<!-- 使文字从左向后来回滚动 高100px 宽100px 背景为黑色 -->
<marquee behavior="alternate" direction="left" width="100" height="100" bgcolor="black">
<font size="5" color="blue">欢迎你</font>
</marquee>
7、超链接
7.1语法
<a href="">文字或图片</a>
属性 | 描述 |
href | 跳转的地址 |
target | 目标页面的打开方式 _self(默认)在当前页面打开 _blank 在新的页面打开 |
例:
<!-- 返回登录的链接-->
<a href="">登录</a>
8、锚链接
8.1语法:
<!-- #表示当前页面的最前面 -->
<a href="#name">点击到目标内容</a>
<!-- 设置锚点 -->
<a name="name">目标内容头</a>
注:
1、跳转到当前页面的其他页面可使用相对路径
2、若跳转到其他网站下,需要使用完整的url 如:https://www.baidu.con
9、表格
9.1表格介绍:
表格由行(row)和列(col)组成
表格的结构可以分为三个部分
分别为:表头(thead)、正文(ybody)、脚注(tfoot)
表格是可以相互嵌套的。放在<td>中
9.2表格的语法
<table>
<!-- 表头 -->
<thead>
<!-- 表的标题 -->
<caption>
</caption>
<!-- 第一行 -->
<tr>
<!-- 第一列 -->
<td>
</td>
</tr>
</thead>
<!-- 正文 -->
<tbody>
<tr>
<!-- th标签可以使文字加粗 与<b>标签差不多-->
<th>
</th>
</tr>
</tbody>
<!-- 脚注 -->
<tfoot>
<tr>
<td>
</td>
</tr>
</tfoot>
</table>
属性 | 描述 | 使用范围 |
border | 边框大小 | table |
bordercolor | 边框颜色 | table |
background | 背景图片 | table |
cellspacing | 单元格之间的距离 | table |
cellpadding | 单元格填充 | table |
width | 宽度 | table/td/tr |
height | 高度 | table/tr/td |
align | 对齐方式 | table/tr/td |
valign | 水平向上(top)/下居中(bottom) | tr/td |
rowspan | 跨行 | td |
colspan | 跨列 | td |
9.3示例:
<!-- 写一个3行3列的标签 并使之居中对齐 -->
<table align="center" border="1" width="300" height="300">
<thead>
<caption>标题</caption>
</thead>
<tbody>
<tr align="center">
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr align="center">
<!-- 跨行 -->
<td rowspan="2">2.1</td>
<!-- 跨列 -->
<td colspan="2">2.2</td>
</tr>
<tr align="center">
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
10、表单
10.1表单介绍
表单可以看做成一个容器,用来实现手机用户信息,实现用户交互
表单中有很多表单元素
表单中可以嵌套table表格
10.2语法
<form action="" method="">
<!-- 表单元素 -->
</form>
属性 | 描述 |
action | 表单提交地址 |
method | 表单提交方式 |
10.3 get和post的区别
表单提交的方式分为get和post两种方式
1、get可以将表单元素的值以name=value形式附加在地址栏中,多值时以&连接
2、如表单元素超出地址栏长度,会截断超出的部分导致数据丢失
3、密码类型的数据也会显示在地址栏中,不安全
1、post是以打包邮寄的方式将数据发给服务器进行处理,更加的安全可靠
11、input标签
11.1 input元素介绍
input称为文本输入域,是最基本的表单元素,可以接受用户输入的数据
11.2语法
<input type="text" value="默认值" name="名称" id="唯一标识">
类型 | 描述 |
text | 单行文本框,type的默认值 |
password | 密码框 |
radio | 单选框 同一组单选框需要设置name值相同 防止多选 checked 布尔值默认选中 默认为true |
checkebox | 复选框 用一组复选框name值需一样 方便传值 |
submit | 提交按钮 有内置功能,将from中的表单元素提交给action处理 若不在from中则内置功能失效 |
reset | 重置 有内置功能,从新恢复默认值 |
button | 普通按钮 比submit灵活 |
file | 文件域上传文件 multiple 可多选文件上传 |
hidden | 隐藏域 在页面不显示,服务器可以接受 |
image | 图品按钮 图片形式提交按钮,有内置功能 |
11.3 示例:
<!-- 用户注册表单 -->
<form action="" method="get">
<!-- 使用 label标签当点击文字时 可以自动指向文本框输入值 使得用户体验更好
for和name的值需要相同 使他们关联起来 -->
<label for="username">用户名:</label>
<input type="text" name="username" value="name" maxlength="10"><br>
<label for="pwd">密码:</label>
<input type="password" name="pwd"><br>
<button>提交</button>
<input type="reset">
</form>
12、slelct标签
12.1 select标签介绍
select称为下拉列表框,可以让用户选择多项中的一个或多个 不需要占用太多的空间
12.2 语法
<select name="" id="">
<option value="" ></option>
</select>
属性 | 描述 |
multiple | 多选 |
size | 同时出现的项目个数 |
selected | 默认选中项 |
示例:
<!-- 下路列表框 -->
<select name="" id="" size="3" multiple >
<option value="" selected>请选择城市</option>
<option value="" >苏州</option>
<option value="" >常州</option>
<option value="" >无锡</option>
</select>
13、文本域标签
13.1语法
<textarea name="" id="" cols="30" rows="10">
文本。。。。。。
</textarea>
属性 | 描述 |
cols | 文本框宽度的大小 |
rows | 文本框高度的大小 |
disable | 设置控件禁用 |
readonly | 设置控件只读 |
14、框架集标签
14.1介绍
使用框架可以将多张页面放在同一张页面加载的技术
使用时需要放在body外面 放在里面不生效
14.2语法
<!-- 将一张页面分为2行,第一行占百分之20 *表示第二行占剩下的百分之80 -->
<frameset role="20%,*">
<!-- src插入页面的地址 -->
<frame src="url">
<!-- 将第二行分为2个列 第一列占百分之20 第二列占百分之80 -->
<frameset role="20%,*">
<frame src="url">
<frame src="url">
</frameset>
</frameset>
属性 | 描述 | 使用范围 |
rows | 水平分割 | frameset |
scols | 垂直分割 | frameset |
border | 边框大小 | farmeset |
bordercolor | 边框颜色 | farmeset |
noresize | 禁止调整框架尺寸 | frame |
scrolling=“yes/no” | 是否出现滚动条 | frame |
15、内嵌框架
15.1语法
<!-- 引入其他页面 src 引入页面的地址 frameborder为框架的边框 -->
<iframe src="" frameborder="0"></iframe>