目录
学习目标：
- 一周掌握 HTML+CSS 入门知识
学习内容：
- 搭建 HTML开发环境
- 掌握 HTML基本语法
- 掌握基本标签
- 掌握表单、表格
- 掌握CSS选择器的使用
学习时间：
- 周一至周五晚上 7 点—晚上9点
- 周六上午 9 点-上午 11 点
- 周日下午 3 点-下午 6 点
学习产出：
HTML知识点大全：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html回顾</title>
</head>
<body>
<h3 id="top">顶部</h3>
<h3>标题</h3>
<p>p标签是一个段落标签，标题标签的含义：
标题标签分h1-h6<br>
h1-h6逐渐变小
</p>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<!--hr是水平线-->
<hr>
<h3>列表</h3>
<p>列表标签是html中核心得标签，有三种：无序列表，有序列表，自定义列表</p>
<h4>1.无序列表</h4>
<ul>
<li>曹操</li>
<li>赵云</li>
<li>孙权</li>
</ul>
<h4>2.有序列表</h4>
<ol>
<li>吕布</li>
<li>关羽</li>
<li>李白</li>
</ol>
<h4>3.自定义列表</h4>
<dl>
<dt>常玩的游戏：</dt>
<dt>王者荣耀</dt>
<dt>原神</dt>
<dt>LOL</dt>
</dl>
<hr>
<h3>表格</h3>
<p>表格用于展示数据库中的数据，核心标签</p>
<table border="1" cellspacing="0" cellpadding="20">
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>战力</th>
</tr>
</thead>
<tbody>
<tr bgcolor="yellowgreen">
<td>1</td>
<td>火箭筒</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>坦克</td>
<td>400</td>
</tr>
<tr bgcolor="yellowgreen">
<td>3</td>
<td>榴弹发射器</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td colspan="3">武器型号展示</td>
</tr>
</tfoot>
</table>
<hr>
<h3>超链接</h3>
<p>
超链接的作用：
<ul>
<li>1.跳转到某个网页</li>
<li>2.在页面内部锚定跳转，例如：回到顶部/顶部</li>
<li>3.target="_blank"表示新开一个页面</li>
<li>4.href属性为空，会刷新当前页面</li>
<li>5.href="#top"，其中#表示在当前页面寻找：id值为top的标签</li>
</ul>
</p>
<a href="http://www.bailiban.com" target="_blank"></a><br>
<a href="#top">回到顶部</a>
<hr>
<h3>图片</h3>
<P>
图片标签是img，用来在网页镶嵌一个图片文件，了解：路径、宽高
</P>
<img src="黄鹤楼.jpg" alt="这是黄鹤楼的图片" width="500" height="400">
<hr>
<h3>表单</h3>
<p>
表单标签分父元素和子元素
<ul>
<li>父元素是form，子元素以input为核心</li>
<li>可以实现登录注册等功能</li>
<li>用来向后台服务器提交数据</li>
<li>单选和复选的默认选中关键字是checked</li>
<li>下拉框的默认选中关键字是selected</li>
<li>所有的表单项想要把参数提交到后台服务器，必须要有name和value属性值</li>
</ul>
</p>
<form action="" method="">
姓名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
年龄：<input type="number" name="age"><br>
生日：<input type="date" name="birth"><br>
性别：<input type="radio" name="sex" value="男" checked>男<br>
<input type="radio" name="sex" value="女">女<br>
爱好：<input type="checkbox" name="like">洗衣服
<input type="checkbox" name="like">洗碗
<input type="checkbox" name="like">做饭
<input type="checkbox" name="like">逛街<br>
头像：<input type="file"> <br>
省份:
<select name="province">
<option>--请选择省份--</option>
<option>--湖北--</option>
<option>--河南--</option>
</select>
城市:
<select name="city">
<option>--请选择城市--</option>
<option>--北京--</option>
<option>--上海--</option>
</select><br>
简介：<textarea></textarea><br>
<button>按钮</button>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>csss基础</title>
<style>
div{
border: 5px solid yellowgreen;
width: 200px;
height: 100px;
}
p{
border: 5px solid green;
width: 200px;
height: 100px;
}
.a{
font-weight: bolder;
color: red;
}
#one{
color: #000;
}
</style>
<!--引入外部css文件-->
<!--<link rel="stylesheet" href="css/a.css">-->
</head>
<body>
<h3>css的引入</h3>
<ul>
<li>直接在某个元素上加style属性</li>
<li>在head标签中，加style子标签</li>
</ul>
<div style="border: 5px solid rebeccapurple; width: 200px;height: 100px;">1</div>
<div id="one" class="a">2</div>
<p class="a">3</p>
<h3>css选择器</h3>
<ul>
<li>优先级：id选择器>class选择器>元素选择器</li>
<li>后代子代交集并集</li>
<li>属性选择器</li>
<li>伪类选择器</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
/* 子代 */
p>span{
color:blueviolet;
}
/* 后代 */
div span{
color: green;
}
p{
color: royalblue;
}
.a{
color: greenyellow;
}
/* 交集 为了缩小选中范围 */
p.a{
color: red;
}
<!--并集 为了扩大选中范围-->
p,.a{
color: yellow;
}
input{
width: 200px;
height: 35px;
outline: none;
border: 2px solid yellowgreen;
border-radius: 5px;
font-size: large;
}
input[name='bb']{
color: rebeccapurple;
}
button{
width: 120px;
height: 40px;
border: none;
background-color: royalblue;
border-radius: 8px;
font-size: large;
color: seashell;
cursor: pointer;
}
/* 鼠标放上去，有个阴影 */
button:hover{
box-shadow: 10px 10px 10px rebeccapurple;
}
/* 鼠标点击，动一动 */
button:active{
transform: translate(5px,5px);
}
</style>
</head>
<body>
<h3>css选择器</h3>
<ul>
<li>优先级：id选择器>class选择器>元素选择器</li>
<li>后代子代交集并集</li>
<li>属性选择器</li>
<li>伪类选择器</li>
</ul>
<div>
<p>
<span>文本1</span>
</p>
<span>文本2</span>
<p class="a">
文本3
</p>
<p>
文本4
</p>
<div class="a">这是一个div</div>
<hr>
<h4>属性选择器</h4>
<input type="text" name="aa" value="aa">
<input type="text" name="bb" value="bb">
<h4>伪元素选择器</h4>
<button>按钮</button>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
