1.图片标签
<img src="图片路径" alt="替代文本" width="宽度" height="高度">
2.超链接
点击之后跳转到另一个位置
外部链接
内部链接
锚点链接
<a href="要跳转到地址" target="_self当前标签或者_blank是新的标签页">被标记的内容</a>
<a href="https://www.taobao.com/" target="_blank">百度</a>
<a href="https://blog.csdn.net/qq_50864240?spm=1000.2115.3001.5343" target="_blank"><img src="D:\qf\H5\day03\图片\表情.gif" width="500" height="500" alt="博客主页链接在这里"></a>
3.路径
1.绝对路径
从顶层出发(盘符、协议)得到的路径。
<img src="D:\qf\H5\day03\图片\表情.gif" alt="">
2.相对路径
从当前文件出发,得到的路径.
同级:直呼其名
<img src="中表情.gif" alt="">
上一级:…/名
<img src="../小表情.jpg" alt="">
下级:/谁 名
<img src="/day03/代码/路径/表情表情.jpg" alt="">
4.列表
1.有序列表
<!-- 有序列表 -->
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
2.无序列表
<!-- 无序列表 -->
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
注意:ul跟ol里只能由li标签,li外边必须有ul或ol,li里可以有任何东西。
3.定义列表(商城的二级导航+图文列表)
<dl>
<!-- 对名词、术语进行解释说明 得到的列表 -->
<dt>名词/术语</dt>
<dd>解释说明</dd>
</dl>
5.布局标签
排版过程中使用到的标签
<div>< /div>或者<span></span>
注意:他们不会对元素内容有任何改变
div独占一整行,span有多宽占据多宽
当要实现一行内容中某些文字有特殊效果的时候使用span,其他时候使用div.
6.表单
在页面中负责数据采集功能的
表单标签:负责数据提交的地址和方式
1.表单域
<input type='text / password | radio |checkbox' name='名字’ placeholder='提示信息">
1. 文本输入框
<input type="text">
2.密码输入框
<input type="password">
3.单选输入框
<input type="radio" name="属性值“”>
注意:同一组的单选选项,必须有相同的name属性值!
4.复选框
<input type="checkbox">
2.表单按钮
事件的标识 可以是提交、重置、普通按钮
<button type="submit">提交按钮</button>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
3.表单标签
数据提交的地址和方式
<from action= "数据提交的方式" method="数据提交的方式可以是get或post">
表单域
表单按钮
</from>
注意:如果数据要提交到后端,必须保证表单域有name属性值
表单域和表单按钮必须放在form标签里面哦!
4.表单标签的数据提交方式
get和post的区别
1.get
将地址追加到地址栏
数据量小
安全性低
传输速度快
2.post
post以服务器的方式提交信息
数据量大
安全性高
传输速度慢
表单域:数据填入的部分
表单按钮:点击提交数据