HTML学习笔记
html笔记
一、基础标签
1、标题标签: h1~h6
2、段落标签: p
3、盒子标签:div
4、字体加粗: b、strong
5、字体斜体: i、em
6.换行标签: br
7.分割线标签: hr
8.没有样式的标签: span
9、图片标签: img, src:图片的路径、alt:图片路径错误提示文字、title:鼠标悬停提示文字
10、链接标签:a href:链接地址、target属性:_self在当前窗口打开新页面、blank在新窗口打开新页面
(1)、超链接:
<a href="https://www.baidu.com">百度</a>
(2)、锚点链接:
创建锚点: <h1 id="a">我是这个页面的顶部</h1>
关联锚点: <a href="#a">跳转到顶部</a>
(3)、文件链接:
<a href="login.html">登陆页面</a>
注: 路径使用方式:
1、绝对路径:以盘符为根目录找到相应文件,/代表进入某文件夹
2、相对路径:相对某个文件,找到另一个文件,…/代表后退
注:元素特性
1、块级元素: 此标签独占一行,可以设置宽高
2、行内(内联)元素: 标签宽度由内容撑开,多个行内元素可以排列在一行
练习题:一首诗,诗名用标题标签,作者用加粗标签、每一句诗用段落标签
二、列表、表格
1、无序列表
提问:li是行内元素还是块级元素
<ul type=""> 如果type写在ul中,所有li都发生改变
<li type="">1</li> 如果type写在li中,只有当前li发生改变
<li>2</li>
</ul>
通过type属性值,更改前缀: 默认(实心圆)、none(去掉前缀)、square(实心方块)、circle(空心圆)
2、有序列表
<ol type="">
<li>这是第一个</li>
<li type="">这是第二个</li>
<li>这是第三个</li>
</ol>
通过type属性值,更改前缀: 默认(阿拉伯数字)、none(去掉前缀)、a、A、i、I
3、定义列表
<dl>
<dt>蔬菜</dt> 一级目录
<dd>西红柿</dd> 正文
<dd>黄瓜</dd>
</dl>
4、表格
<table>
<tr> 控制行
<td></td> 控制列
</tr>
</table>
请用表格制作小组名单
练习题:
制作加用电器,左侧是电器图片,右侧是电器的文字描述
制作成绩但
制作小组名单
三、表单
1、form标签: action:提交地址、method:post/get
2、input标签: type属性值有:
(1)、提交按钮:submit
(2)、文本:text
(3)、密码:password
(4)、单选:radio,name绑定、value的绑定
(5)、重置: reset
注:post请求与get请求的区别
get请求会将参数以明文方式拼接在url地址中: index.html?name=a&password=123
缺点: 参数明文拼接不安全,如果参数过长会丢失
post请求会将参数放在请求报文中
优点:参数不会明文拼接,是安全的,如果参数过长不会丢失
四、iframe标签:重点
作用:在一个页面中嵌套另一个页面
<div>
<a href="userM.html" target="tbody">学生管理</a>
<a href="proM.html" target="tbody">专业管理</a>
</div>
<iframe name="tbody" width="100%" height="600px"></iframe>
备注: iframe标签src属性: 打开页面默认嵌套的其他页面路径
当a标签的target属性值 == iframe标签的name值 时,页面会在iframe标签的窗口内打开
练习: 主页面内嵌套其他页面