HTML前端
2021-12-18 10:08:15 53 举报AI智能生成
前端
作者其他创作
大纲/内容
选择器
通配选择器，选择所有
*{ }
*{ }
标签选择器
span{ }
span{ }
.类选择器
class类名选择
class类名选择
#id选择器
属性选择器
p[class="yellow"][name="p1"]{ }
p[class="yellow"][name="p1"]{ }
派生选择器
ul li{ }
ul li{ }
相邻选择器
li+li{ }相邻标签上面也为li的被选中
li+li{ }相邻标签上面也为li的被选中
锚伪类选择器
未访问状态
a:link{ }
a:link{ }
已访问状态
a:visited{ }
a:visited{ }
悬停状态
a：hover{ }
a：hover{ }
选中状态
a:active{ }
a:active{ }
定位
相对定位
position: relative;
position: relative;
相对于原本的位置进行移动，
保留原有的位置，不影响其他div
保留原有的位置，不影响其他div
绝对定位
position：absolute
position：absolute
寻找父标签有没有position
没有的继续往上找，知道找到或者以body为定位
没有的继续往上找，知道找到或者以body为定位
浮动
float
float
浮动就是让元素可以向左或向右移动，
直到它的外边距碰到其父级的内边距或者是上一个元素的外边距
直到它的外边距碰到其父级的内边距或者是上一个元素的外边距
浮动清除
clear:both
clear:both
JS
输出
为在控制太上输出
console.log
console.log
为在网页是输出，可以写标签代码
document.write
document.write
获取标签对象
根据id获取标签对象
document.getElementById("div1");
document.getElementById("div1");
根据类名获取标签对象
document.getElementsByClassName("div2")[0];
document.getElementsByClassName("div2")[0];
根据名字属性获取标签对象
document.getElementsByName("div3")[0];
document.getElementsByName("div3")[0];
根据标签名获取标签对象
document.getElementsByTagName("div")[0];
document.getElementsByTagName("div")[0];
BOM操作
浏览器里的前进于后退
history.back()后退
history.forward()前进
history.go(2)
2为前进两页，-2为后退两页
2为前进两页，-2为后退两页
事件驱动
子主题
定时器
setTimeout定时器
setInterval循环定时器
标签
块级标签
标题标签
h1-h6
h1-h6
段落标签
p
p
列表
有序列表
ol-li
ol-li
属性值1为阿拉伯数字，默认为这
属性值A/a为答谢/小写英文字母
属性值I/i为大写/小写罗马数字
属性值A/a为答谢/小写英文字母
属性值I/i为大写/小写罗马数字
无序列表
ul-li
ul-li
一级默认为实心圆,二级为空心圆
可以通过type改变形状，circle为空心圆，square为方形
可以通过type改变形状，circle为空心圆，square为方形
自定义列表
dl-dt-dd
dl-dt-dd
dl父级标签
dt一级标签
dd二级标签
dt一级标签
dd二级标签
表格
table
table
<th>行
<td>列，为文本内容
<tr>列，内容为标题
<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>
<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
img
1、src=""里面写入路径
2、只改变height或width，会按比例缩放
2、只改变height或width，会按比例缩放
超链接标签
a
a
外网时，href="https://www.__.com"
需要加上https
需要加上https
1、href="#"表示在本网页点击，没实质作用
2、href="#anchor"表示跳到name为anchor的标签上，
而且能跳到的标签只能是a标签
2、href="#anchor"表示跳到name为anchor的标签上，
而且能跳到的标签只能是a标签
表单
form
form
input
type = "text"为文本输入框
type = "password"为加密文本框
type="radio"为单选框，
同一个name为统一属性，
只能选一个
同一个name为统一属性，
只能选一个
type="checkbox"为多选框，
同一个name为同一属性
同一属性课选多个
同一个name为同一属性
同一属性课选多个
type="submit"为提交按钮，提交到服务器
type="reset"为重置按钮
type="button"为吴功能按钮，
多结合js使用
多结合js使用
下拉框
select
select
option为其子标签
一个option为一个内容
一个option为一个内容
Bootstrap框架
怎么用看文档和自己写的代码吧
https://www.bootcdn.cn
官网
官网
0 条评论
下一页
