HTML学习笔记

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标签的窗口内打开

练习: 主页面内嵌套其他页面