<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表标签</title>
</head>
<body>
<!--链接标签：<a href="指向链接地址">对链接进行描述</a>
：href属性：只想链接地址
1.链接到地址：href="https://xxx.com/"
2.链接到其他页面：href="xxx.html"（相对路径）
3.空连接：href=“#”
4.锚点链接：在一个页面内进行跳转
step1: 设置锚点
step2: href属性只想锚点 换热#id名称
target：打开新的页面的方式
_self: 在当前窗口打开链接
_blank: 在新的窗口打开链接
-->
<br/>
<a href="https://www.baidu.com/" target="_self">网易云音乐</a>
<br/>
<a href="login.html"target="_blank">注册</a>
<br/>
<a href="#">空链接</a>
<!--id属性：具有唯一性，能唯一的确定一个标签-->
<h1 id="top">回到这里</h1>
<!--快速设置多个标签：标签*数量 br*20 再按Tab键-->
<<br><br>
<!--换行标签-->
<!--快速打注释：ctrl+/-->
<a href="#top">点击回到h1标签</a>
<br>
<!--图片标签：img
1.src:soure源，图片源。
2.width:宽
3.height:高
tips提示：在img中width和height属性一般只使用一个值，
另一个值会自动进行等比例缩放。
4.alt:图片加载错误提示
-->
<img src="img/su7.jpg" height="500" alt="图片加载失败" />
<!--列表标签
1.无序列表
2.有序列表
3.自定义列表
-->
<!--无序列表：ul-->
<ul>
<li>手机</li> <!--列表标签-->
<li>电视</li>
</ul>
<!--有序列表-->
<ol>
<li>杜甫</li>
<li>利弊</li>
</ol>
<!--自定义列表-->
<dl>
<dt>选购指南</dt>
<dd>手机</dd>
<dd>家店</dd>
<dd>su7</dd>
</dl>
<br/>
<dl>
<a href="https://music.163.com/" targrt="_self">阿拉斯加海湾<a/>
<dt><a href="login.html"target="_blank">歌单选择</a><dt/>
<dt><a href="login.html"target="_blank">梨花香</a><dt/>
<dt><a href="login.html"target="_blank">https://music.163.com/album?id=3027098&_hash=songlist-29436904</a><dt/>
</dl>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<!--table表格标签-->
<!--border:边框
cellspcing:单元格之间的空间距离
cellpadding：单元格的填充值
-->
<table border="1px"cellspacing="0"cellpadding="10">
<!--thead:表头部分-->
<thead>
<!--table row:行-->
<tr>
<!--th:表头-->
<td>书名</td>
<td>作者</td>
<td>购买价格</td>
<td>购买地址</td>
</tr>
</thead>
<!--tbody:数据部分-->
<tbody>
<!--第一行数据-->
<tr>
<!--table data数据单元格-->
<td>世界上的另一个你</td>
<td>丹弗朗</td>
<td>¥:64</td>
<td><a href="https://www.mi.com">当当网</a>
</td>
</tr>
<!--第二行数据-->
<td>世界上的另一个你</td>
<td>丹弗朗</td>
<td>¥:64</td>
<td><a href="https://www.mi.com">当当网</a>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单标签</title>
</head>
<body>
<!--
表单标签：
1.表单域：form标签包含的区域
2.表单标签：输入input、选择select、文本域textarea
3.提示信息：文本
-->
<form>
<!-- input:输入 -->
<!-- type:类型 -->
<!-- text：文本，明文 -->
<!-- placeholder：占位符 -->
<span>用户名：</span><input type="text" placeholder="请输入6~8个字符" />
<br />
<!-- password:密码，掩码 -->
<span>密码：</span><input type="password" placeholder="请输入密码" />
<br />
<!-- radio: 单选 -->
<span>性别：</span><input type="radio" name="xb" /><span>男</span>
<input type="radio" name="xb" /><span>女</span>
<input type="radio" name="xb" /><span>其他</span>
<br />
<!-- chenkbox:复选框 -->
<span>个性化定制：</span><input type="checkbox" name="gxh" /><span>懒</span>
<input type="checkbox" name="gxh" /><span>深夜emo</span>
<input type="checkbox" name="gxh" /><span>深情</span>
<br />
<!-- button:按钮 -->
<input type="text" placeholder="请输入验证码" />
<input type="button" value="点击发送验证码" />
<br />
<!-- reset：重置 --> <!-- submit：提交 -->
<input type="reset" />
<input type="submit" value="注册" />
<br />
<span>选课：</span>
<select> <!-- 下拉选择 -->
<option>大学英语</option> <!-- 选项 -->
<option>高数</option>
<option>前端</option>
</select>
<br />
<span>描述：</span>
<textarea></textarea> <!-- 文本域 -->
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>样式</title>
<!--内部样式：在HTML文档的head标签在用style标签来书写样式-->
<style>
h2{
color: green; /*字体颜色*/
font-size: 36px; /*字体大小*/
text-align: center; /*文本居中显示*/
}
p{
color: green;
font-size: 20px;
text-align: center;
}
}
</style>
<!--关联css文件-->
<!--href:指向关联的样式文件地址，rel：关联-->
<link fref="css/字体颜色.css" rel="stylesheet" />
</head>
<body>
<!--
引入样式：
1.内联样式
2.内部样式
3.外部样式
-->
<!--内联样式：在开始标签中使用style属性书写样式-->
<h1 style="color: green; font-size: 48px;">古诗中文网</h1>
<h2>夜雨寄北</h2>
<p>君问归期未有期，巴山夜雨涨秋池。</p>
<p>何当共剪西窗烛，却话巴山夜雨时。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<!-- 内部样式 -->
<style type="text/css">
*{/* *:通配符，之所有的标签。初始化所有标签的内边距和外边距 */
maegin:0;
padding:0;
}
.hz1{
width:300px;/*盒子宽*/
height:300px;/*盒子高*/
/*border-width:18px;
border-color:#red;
border-style;*/
/*复合写法 border:大小 样式 颜色；（顺序不论）*/
/*solid实践,dotted点线,dashed虚线*/
border:1px solid red;
/*border-top,bottom,left,right*/
padding:30px 40px 50px 60px;/*padding:30px 40px 50px;*/ /*分别应对：上右下左 顺时针方向*/
/*padding:50px;*/ /*四个方位都是50px*/
/*padding: 20px 10px;*/ /*分别验证*/
/*padding:40px 50px 60px;*/ /*分别验证*/
/*margin-top:100px;
margin-bottom:500px;
margin-left:100px;*/
margin:50px;
}
.hz2{
width:500px;
height:300px;
border:1px solid green;
/*margin:auto;*/ /*盒子水平居中*/
}
</style>
<link href="css/boxStyle.css" rel="stylesheet"/>
</head>
<body>
<!--盒子模型:内容content
内边距:padding
边框:border
外边框:margin
-->
<!--内边距：padding-->
<!--方位词:top上
bottom：下
right：右
left：左
center：居中
-->
<!--class：类-->
<!--外边距的应用
1.可以让块级盒子水平居中>第一盒子要有宽度；第二盒子左右外边距设置为auto(自动的)
2.
-->
<div class="hz1">盒子1</div>
<div class="hz2">盒子2</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距所带来的问题</title>
<style tpye="text/css">
div{
width: 400px;
height: 200px;
}
.he1{
background-color:pink;
margin-bottom:120px;
}
.he2{
background-color:skyblue;
/*margin-top:80px;*/
}
.bigbox{
width:600px;
height:500px;
background-color:red;
margin-top: 100px;
/* order:1px solid black; */
/*padding-top:100px;*/
overflow:hidden; /* 超出部分：隐藏 */
}
.sbox{
background-color:#FFC0CB;
margin-top:100px;
}
</style>
</head>
<body><!--外边距带来的第一个问题： 相邻的块级元素垂直外边距合并（只会取其中最大的外边距值）
解决方法：一般只会给一个盒子设置外边距。
外边距带来的第二个问题：嵌套块级元素垂直外边框塌陷问题
解决方法1：给父盒子添加边框
解决方法2：给父盒子添加内边距
解决方法1：给父盒子添加overflow:hidden; > 开发中常用的。
-->
<div class="he1">第一盒子</div>
<div class="he2">第二盒子</div>
<div class="bigbox">
<div class="sbox"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器</title>
<style>
/*选择器：标签选择器，类选择器，ID选择器*/
h1{
text-align: center; /*文本居中*/
}
.ziti{ /*类选择器*/
fonnt-size:24px;/*字体大小*/
color:green;/*字体颜色*/
}
#font{/*id选择器*/
fonnt-size:28px;
color:pink;
}
</style>pp
</head>
<body>
<h1>卸下“指尖”之负 扎实为民服务</h1>
<a href="http://www.people.com.cn/">人民网</a><span>2024年04月18日06:06 | 来源：人民网－人民日报</span>
<p class="ziti">谷雨将至 大地春忙</p>
<p id="font">4月17日，河北省遵化市刘备寨乡农民在田间播种薄膜花生。</p>
<p class="ziti">谷雨将至，各地抢抓农时开展农业生产，田间地头一派生机勃勃的忙碌景象。</p>
<p>新华社发（刘满仓摄）</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>显示模式</title>
<style>
h4,p,span,del,a,input{
background-color:whitesmoke;
width:300px;
height:200px;
margin:auto; /*给盒子设置水平居中*/
text-align:center; /*文本居中*/
}
a{
display:block; /*将a标签转换为块元素*/
}
</style>
</head>
<body>
<!--标签的显示模式
1.块元素 block：
比较霸道，单独占一行
默认宽度是父级元素宽度的100%
可以设置宽、高和对齐属性
块元素可以包含行内元素和其他块元素
文本标签（h1~h6,p）内不要再装块元素
2.行内元素 inline：
一行显示多个
默认的宽度是内容的宽度
宽、高属性设置无效
行内元素只包含文本或其他行内元素，一般不要包含块元素
链接标签不要再包含其他链接
3.行内块元素 inline-block:
一行显示多个
可以设置宽、高和对齐属性
<input /> <img /> <td></td>
元素显示模式的转换：
display:block/inline/inline-block;
-->
<h4>小米su7</h4>
<p>性能旋风...</p>
<span>2399</span>
<del>2499</del>
<a href="www.baidu.com">百度一下</a>
<input type="text" />
<input type="password" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米</title>
<style>
div{
width: 400px;
height: 200px;
}
.bigbox{
width:400px;
height:600px;
background-color:whitesmoke;
border:1px solid whitesmoke;
margin-center: 100px;
overflow:hidden;
margin:auto;
}
.sbox{
width:400px;
background-color:whitesmoke;
border:1px solid whitesmoke;
margin-center: 100px;
margin:auto;
}
h4,p,span,del{
height:60px;
text-align:center;
font-size: 20px;
margin:auto;
}
p{
color:darkgray ;
}
span{
margin-left:105px;
color: orange;
}
del{
margin-left:10px;
color: darkgray;
}
</style>
</head>
<body>
<div class="bigbox"><a href="www.baidu.com"><img src="img/Redmi K70E.jpg" height="400" width="400" alt="图片加载失败"/></a>
<div class="sbox">
<h4>Redmi K70E</h4>
<p>新一代旗舰焊门员</p>
<span>1799元起</span>
<del>1999元起</del>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
