(自考专升本)《HTML》知识点学习知识点串讲笔记.docx
HTML知识点学习笔记一、 基本标签<!DOCTYPE html>->告诉浏览器,我得文档类型是 html<html lang="en"><head>->引入外部js文件、css文件,css样式<meta charset="UTF-8"> ->设置页面编码格式<title>Document</title> ->设置浏览器面板的名字</head><body>->页面展示的内容页面显示的内容写在body标签内</body></html>1 标题标签: h1h6,在普通文本基础上: 文字大小、文字粗细、行间距2 段落标签: p标签,在普通文本基础上: 行间距3 加粗标签: strong、b4 斜体标签: em、i5 上下标标签: sub(下)、sup(上) 例子:H<sub>2</sub>O -> H2O6 大小标签: big、small7 删除标签: del8 换行标签: br9 分割线标签: hr10 没有样式的标签: span11 排版标签: div12 图片标签: <img src=”图片的路径” alt=”图片丢失显示文字” title=”鼠标悬停显示名字”>图片路径分类:(1) 绝对路径:E:img1.png(2) 相对路径:相对与当前文件找另一个文件返回上一目录: ./进入某个文件夹: 文件夹名/E:java2002demo.htmlE:java2002img1.jpg13 链接标签: <a href=”链接地址” target=”>名字</a>(1) 如果a标签不写 href,那么此标签内容为纯文本(2) 超级链接:链接网址-> https:/网址(3) 锚链接: 点击锚链接,跳转到绑定id的位置<a href=”#bottom”>跳转到</a><p id=”bottom”>我是锚链接目标位置</p>例:当点击a标签时,会自动跳转到p标签位置,p标签的id名字要与a标签的href一致,并且href要先加上#(4) target有两个值: _self在当前窗口打开新页面、 blank在新窗口打开新页面(5) 锚链接跳转页面设置锚点用法:参考案例:a标签所有用法.html、index.html二、 行内元素与块级元素的定义1、 块级元素:元素的宽度独占一行, 例:h1h6、p2、 行内元素:宽度有内容撑开,两个行内元素可以在同一行排列3、 判别方法:在浏览器中F12,检查Elements,鼠标滑到想要检验的标签上,看此标签是否内容占领一行三、 列表、表格1 无序列表: <ul><li></li>.<li></li></ul>描述: 每一个li前默认有一个实心小圆点修改li前样式方法:<ul type=”值”>值分别有: none去掉样式、 square实心方块、circle空心圆2 有序列表:<ol><li></li>.<li></li></ol>描述:每一个li前默认排序方式 1 2 3.修改li前样式方法:<ul type=”值”>值分别有: a、A、i、I、13 定义列表:<dl><dt>一级目录</dt><dd>内容</dd>.<dt>一级目录</dt><dd>内容</dd></dl>4 表格:<table><tr> 控制行<td></td> 控制列</tr></table>四、 表单1 表单整体结构: <form action=”请求地址” method=”请求方式”> </form>(1) method默认请求方式为:get (2) 当method=”get”的时候:在浏览器url地址显示参数(3) 当method=”post”的时候:url隐藏参数 划红线的就是url2 表单元素: <input> type默认值type=”text”,修改type的值,会改变表单样式:(1) text:可以写任何文本(2) password: 输入内容不可见(3) date:时间选择器(4) file:选择本地文件(5) radio:单选按钮 绑定name值一样,只选择一个,默认选中:checked(6) checkbox:复选框,默认选中:checked(7) range:滑块(8) color:取色器(9) reset:重置按钮,必须结合form标签使用(10) submit:提交按钮,必须结合form标签使用3 下拉菜单:<select><option value=”>内容1<option>.<option value=” selected>内容2<option></select>备注:如果在某个option标签内写: selected,那么此选项会被默认选中4 文本域: <textarea cols=” rows=”></textarea> 备注:cols控制列、rows控制行5 拓展知识点: placeholder=”默认文字效果” 可以写在 text、password、textarea五、 frame框架:在一个页面中内嵌另一个页面1 iframe用法: 内嵌页面可进行跳转<a href=”car.html” target=”iframe”>汽车页面</a><a href=”girl.html” target=”iframe”>美女页面</a><iframe src=”car.html” name=”iframe”></iframe>(1)a标签的target的值与iframe标签的name值绑定,点击相应a标签会跳转相应页面(2)iframe标签的src含义是跳转页面的路径2 frameset用法: 内嵌页面进行显示<frameset><frame src=”美女.html”></frame><frame src=”帅哥.html” noresize="noresize"></frame></frameset>(1) frameset不能与body同时存在(2) 如果不想让用户拖拽边框,设置属性noresize="noresize",用来固定边框4