一.图片标签
常用的图片格式
.png
.jpg
.gif
.jpeg
.webp
src 图片的路径
title 鼠标悬停在图片上出现的文字
width宽度
height高度
alt图片加载失败出现的文字
<img src="./../img/img2/f4.jpg" alt="我是f4" title="请点击我" width="100px" height="200">
二.列表
列表有三种,分别是
1.有序列表 ol
属性值为 type 序号为数字(默认)A/a序号为大小写英文字母,I/i 序号为罗马数字,start 序号从第几个开始 一定是数字
<ol type="i" start="10">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
2.无序列表ul
属性 type 修改序号样式
circle 空心小圆点
disc 黑色小圆点
square 黑色小方块
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
<ul type="circle">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
<ul type="disc">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
<ul type="square">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
3.自定义列表 dl
dt :列表项标题
dd:列表
<d1>
<dt>男生喜欢什么</dt>
<dd>法拉利</dd>
<dd>萝卜丁</dd>
<dt>女生喜欢什么</dt>
<dd>法拉利</dd>
<dd>萝卜丁</dd>
</d1>
三.表格
1.表格标签:table
属性:
border 边框(border="10" 边框粗细)
cellspacing 单元格与单元格之间的距离
cellpadding 单元格内字体到边框的距离
align='center' 水平居中
width 宽度
height 高度
th 表头 加粗居中
tr行
td列
rowspan 合并行
colspan 和并列
caption :表格标题
<table border="10" cellspacing="0" cellpadding="10" align="center" width="400" height="300">
<caption>我是表格标题</caption>
<tr align="center" >
<td rowspan="2">1-1</td>
<td colspan="2">1-2</td>
<!-- <td>1-3</td> -->
</tr>
<tr align="center" >
<td>2-1</td>
<td rowspan="2" >2-2</td>
<!-- <td>2-3</td> -->
</tr>
<tr align="center">
<td colspan="2">3-1</td>
<!-- <td>3-2</td> -->
<!-- <td>3-3</td> -->
四.表单
1.表单 form
属性 action 数据提交的地址
method 表单的提交方式两种(get,post)
get 将用户信息显示在地址栏上 不安全 传送数据量小 传送速度快
post 不会将用户信息显示在地址栏上 相对安全 传送数据量大(理论上无限大) 传送速度慢
input 输入框
属性 type
text:文本输入框
password:密码输入框
radio:单选框按钮 (同一组单选框必须有相同的名字)
checkbox:复选框(同一组复选框必须有相同的名字)
lable: 扩大选择范围 <lable for="input中id的值">
button :按钮 在表单中有默认提交功能
select:下拉表单
option列表项 属性 selected下拉列表默认选中项
textarea :文本域
属性 cols 表示列数(宽度)
·rows 表示行数(高度)
<form action="xxx.php" method="Method">
<!-- action 数据提交的地址,methed 表单的提交方式 -->
用户名:<input type="text" name="username">
<br>
密码:<input type="password" name="password">
<br>
性别:
<label "nan">男:</label>
<input type="radio" name="sex" id="nan" value="nan">
<label "nv">女:</label>
<input type="radio" name="sex" id="nv" checked="checked" value="nv">
<br>
爱好:
吃<input type="checkbox" name="hobby" value="chi">
睡<input type="checkbox" name="hobby" value="shui">
玩<input type="checkbox" name="hobby" value="wan">
<br>
家乡:
<select name="home">
<option value="nj">南京</option>
<option value="bj" selected>北京</option>
<option value="dj">东京</option>
</select>
<br>
自我介绍:
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<input type="submit">
<input type="reset" value="我要重置">
<input type="button" value="我是普通按钮">
<button>我是button</button>
<!-- 这个按钮 有默认提交功能 -->
五.html补充
1.span p div
span是普通文本标签
p是段落标签
div盒子标签
2.实体字符
© 版权符
®商标注册
<小于号
"大于号
空格
"引号
例:< p >Copyright © 2004 - 2021 京东版权</ p >
< p >Copyright © 2004 - 2021 京东版权</ p ><br>
3.iframe标签
使用iframe 可以直接将页面嵌套在iframe指定的src中
frameborder 取值0或者1 规定是否显示框架周围的边框
例:百度页面在页面实现
<iframe src="https://www.baidu.com/" frameborder="0"></iframe>