首页  思维导图  详情

HTML前端

2021-12-18 10:08:15   53  举报





AI智能生成

前端

程序员必备

前端知识

作者其他创作

大纲/内容

选择器

通配选择器，选择所有 *{ }

标签选择器 span{ }

.类选择器 class类名选择

#id选择器

属性选择器 p[class="yellow"][name="p1"]{  }

派生选择器 ul li{ }

相邻选择器 li+li{ }相邻标签上面也为li的被选中

锚伪类选择器

未访问状态 a:link{ }

已访问状态 a:visited{ }

悬停状态 a：hover{ }

选中状态 a:active{ }

定位

相对定位 position: relative;

相对于原本的位置进行移动， 保留原有的位置，不影响其他div

绝对定位 position：absolute

寻找父标签有没有position 没有的继续往上找，知道找到或者以body为定位

浮动 float

浮动就是让元素可以向左或向右移动， 直到它的外边距碰到其父级的内边距或者是上一个元素的外边距

浮动清除 clear:both

输出

为在控制太上输出 console.log

为在网页是输出，可以写标签代码 document.write

获取标签对象

根据id获取标签对象 document.getElementById("div1");

根据类名获取标签对象 document.getElementsByClassName("div2")[0];

根据名字属性获取标签对象 document.getElementsByName("div3")[0];

根据标签名获取标签对象 document.getElementsByTagName("div")[0];

BOM操作

浏览器里的前进于后退

history.back()后退

history.forward()前进

history.go(2) 2为前进两页，-2为后退两页

事件驱动

子主题

定时器

setTimeout定时器

setInterval循环定时器

标签

块级标签

标题标签 h1-h6

段落标签 p

列表

有序列表 ol-li

属性值1为阿拉伯数字，默认为这 属性值A/a为答谢/小写英文字母 属性值I/i为大写/小写罗马数字

无序列表 ul-li

一级默认为实心圆,二级为空心圆 可以通过type改变形状，circle为空心圆，square为方形

自定义列表 dl-dt-dd

dl父级标签 dt一级标签 dd二级标签

表格 table

<th>行 <td>列，为文本内容 <tr>列，内容为标题

属性

border属性为外边框粗细

cellspacing为单元格于单元格的间距

cellpadding为内容于单元格的间距

rowspan行合并--内容会上下居中

colspan列合并--内容不会左右居中

<table border="1" cellspacing="0" cellpadding="10">         <tr>             <th>姓名</th>             <th>性别</th>             <th>年龄</th>             <th>爱好</th>         </tr>         <tr>             <td>陈浩南</td>             <td rowspan="2">男</td>             <td>25</td>             <td>山鸡</td>         </tr>

子主题

div标签

行级标签

图片标签 img

1、src=""里面写入路径 2、只改变height或width，会按比例缩放

超链接标签 a

外网时，href="https://www.__.com" 需要加上https

1、href="#"表示在本网页点击，没实质作用 2、href="#anchor"表示跳到name为anchor的标签上，       而且能跳到的标签只能是a标签

表单 form

input

type = "text"为文本输入框

type = "password"为加密文本框