- HTML、HTML5
- 标题标签、段落标签
<h1 id="title" class="title"> 标题 </h1>
<p> 第一个段落 </p>
- 水平线
<hr>
- 按钮标签
<button>按钮</button>
给按钮添加属性(效果:点击按钮则变换)
注:点击效果也涉及了JavaScript
<!-- 给按钮添加属性,使点击按钮使标题变biao dom操作 -->
<div id="btn" class="title">按钮</div>
<script>
var btn = document.getElementById('btn')
btn.addEventListener("click", function () {
var title = document.getElementById("title")
var a = document.getElementsByClassName("title")
title.innerHTML = "biao"
// console.log(a)
})
</script>
- a标签定义链接
<a href="https://www.baidu.com/">点击百度一下</a>
- 图片
相对路径:相对于当前文件获取路径
"./":代表目前所在的目录。
"../":代表上一层目录。
以"/"开头:代表根目录。
<img src="./111.jpg" alt="图片信息有误" title="图片">
绝对路径:主页上的文件或目录在硬盘上真正的路径
- 不产生新的空格换行
<p>懒洋洋<br>在睡觉</p>
- Input 各项表单命令
<form action="">
<!-- 点击用户名即可输入 -->
<label for="user">用户名: </label>
<!-- 类型 文本输入框 value一开始就有值,控制文本框本内容 placeholder无内容是提示的信息-->
<input type="text" name="user" id="user" value="javas" placeholder="请输入用户名">
<input type="password" name="psd" id="" placeholder="请输入密码">
<!-- 换行 -->
<br>
<!-- 点击男女即可选中 相同name属性只能选择其一-->
<input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
<input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
<br>
<!-- checked默认选中 属性和属性值一致时候可以直接写属性-->
<input type="checkbox" name="hobby" value="shi" id="" checked>网球
<!-- checked默认选中 -->
<input type="checkbox" name="" id="" checked="checked">乒乓球
<input type="checkbox" name="" id="">足球
<br>
<br>
<!-- 区域 -->
<textarea name="" id="" cols="30" rows="10" placeholder="aaaa"></textarea>
<br>
<!-- 提交按钮 -->
<input type="submit" name="" id="">
<!-- 重置 -->
<input type="reset" name="" id="">
<!-- 图片提交按钮 src -->
<input type="image" name="" id="" src="../img/111.jpg" height="50" width="50">
<!-- 选择文件 -->
<input type="file" name="" id="">
</form>
- 表格
<!-- border边框 内边距 外边距 -->
<table border="1" cellpadding="10" cellspacing="0">
<caption>标题</caption>
<tr>
<!-- 表头th -->
<td></td>
<th title="我是B">B</th>
<th>C</th>
</tr>
<!-- 行 -->
<tr>
<!-- 列 -->
<td rowspan="2">name</td>
<td colspan="2">id</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>xjh</td>
<td>18</td>
<td>21</td>
</tr>
</table>
<table >
<!-- 行 -->
<tr>
<!-- 列 -->
<td>name</td>
<td>id</td>
<td>age</td>
</tr>
<tr>
<td>whl</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>xjh</td>
<td>18</td>
<td>21</td>
</tr>
</table>
- li标签
<ul type="square">
<!-- 列表项必须嵌套在li标签里面 -->
<li>
<div>
<a href="">aaa</a>
<img src="ccc" alt="bbb">
</div>
</li>
<li>item1</li>
<li>item2</li>
</ul>
<ul type="1" start="2">
<!-- 列表项必须嵌套在li标签里面 -->
<li>
<div>
<a href="">aaa</a>
<img src="ccc" alt="bbb">
</div>
</li>
<li>item1</li>
<li>item2</li>
</ul
- 输入框
<form action="" align="left">
<p>姓名:
<input type="text" name="username" value="是否有名字">
//value是默认值
</p>
<p>登录名:
<input type="text">(可包含a-z,0-9和下划线)
</p>
<p>密码:
<input type="password">(至少包含6个字符)
</p>
<p>确认密码:
<input type="password">
</p>
<p>性别:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</p>
<p>爱好:
<input type="checkbox">运动
<input type="checkbox">聊天
<input type="checkbox">玩游戏
</p>
<p>职业:
<select name="" id="">
<option value="">工程师</option>
<option value="">老师</option>
<option value="">医生</option>
</select>
</p>
<textarea name="" id="" cols="50" rows="10">淘宝平台服务协议</textarea>
<p>
<input type="checkbox" name="" id="">已阅读条款
</p>
<input type="reset">//重置
<input type="submit">//提交
</form>
最大字符数、不能直接修改都在html5里面,新添加属性
<!-- maxlength文本框中输入最大字符数 readonly,disabled不能直接修改 -->
<input type="text" maxlength="11" readonly="">
<input type="text" disabled="">
<input type="text" autofocus="">
时间
<!-- 时间 -->
<p>
<time datetime="2024-12-11">2024-12-11</time>
</p>
如何去掉<a>的下划线:
对超链接下划线设置 使用代码"text-decoration"
语法:
text-decoration : none || underline || blink || overline || line-through
text-decoration参数:
none : 无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
- css、css3
设置样式的变化需要在<style></style>标签里面来写内容
1. :hover在鼠标移到链接上时添加的特殊样式
<style>
.box1 {
display: none;
}
.title:hover+div {
display: none;
}
.titl1{
display: none;
}
.box2:hover .titl1 {
display: block;
}
</style>
</head>
<body>
<div>
<!-- 放上鼠标才会显示,兄弟选择器+ -->
<p class="title">标题</p>
<div class="box1">段落</div>
<div class="box1">段落</div>
</div>
<!-- 放上鼠标才会显示,后代选择器 . -->
<div class="box2">
<p>标题111</p>
<hr>//分隔线
<p class="titl1">段落111</p>
</div>
</body>
</html>
2.link元素用于链接css样式
3.选择器在我的css博客中有具体解释
4.盒模型
边框border
内边距padding
外边距margin、
下面是我利用边框内部特点做出来的松树三角形,代码和效果图如下:
- 浮动:脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3.18讲课内容</title>
<style>
.box {
width: 500px;
height: 500px;
background: red;
}
/* 浮动:脱离文档流 */
.box1 {
width: 100%;
background: blue;
}
.box1 p {
width: 33%;
float: left;
text-align: center;
}
/* 清除浮动 包裹在一个父空间里面*/
.clear::after {
content: "";
display: block;
clear: both;
}
.box2 {
width: 150px;
height: 150px;
background: green;
/* float: left; */
}
/* 脱离文档流 */
.box3 {
width: 200px;
height: 200px;
background: purple;
float: right;
}
.box4 {
width: 300px;
height: 300px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="box1 clear">
<p>1111111111111111111111</p>
<p>2</p>
<p>3</p>
</div>
<div class="box2"></div>
<!-- <div class="box3"></div> -->
<!-- <div class="box4"></div> -->
<!-- <div class="box1"></div> -->
</div>
</body>
</html>
- 定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css定位练习</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
/* 相对定位 */
position: relative;
top: 50px;
left: 50px;
}
.box2{
width: 150px;
height: 150px;
background-color: green;
}
.box3{
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
- flex布局
相对于浮动和定位来说更方便,但是flex布局不能层叠
在我前面的flex布局