大致框架＜title＞＜head＞＜html＜body＞
<!DOCTYPE html>
<-- 表示用html5渲染-->
<title> 这里放标签页的名字</title>
<head>
通常放一下导航和css格式
<head>
<html>
这里放html内容
<body>
这里放内容
<h1> 这里放标题</h1>
<p>
这里是一个段落
</p>
</body>
</html>
表格 ＜ol＞＜ul＞
分为有序,无序,定义列表
<--有序列表-->
<h2>电影排行榜</h2>
<ol>
<li>哪吒</li>
<li>唐人街探案3</li>
<li>毒液</li>
</ol>
编辑
<--有序列表-->
<h2> 购物清单</h2>
<ul>
<li> 拖鞋</li>
<li> 纸巾</li>
<li> 袜子</li>
</ul>
编辑
<h2>哪吒</h2>
<dl>
<dt>导演</dt>
<dd>饺子</dd>
<dt>主演</dt>
<dd>哪吒</dd>
<dd>敖丙</dd>
<dt> 上映时间</dt>
<dd>2025-2-28</dd>
</dl>
引入css格式和超链接
css文件和html文件位于同一文件夹下
编辑
a{
display : block ;/* 表示以块状内容显示*/
margin : 0.5em ;/*表示与其他的元素内容间隔为 0.5em*/
width : fit-content ;/*将宽度设置为内容的宽度就是<a></a>包裹的文字长度*/
color : #007BFF ;/*颜色*/
text-decoration : none; /*将下划线取消*/
}
a:hover{
color : #0056b3;/* 鼠标悬停时的文本颜色 */
text-decoration:underline;/* 鼠标悬停时显示下划线 */
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "03.css">
</head>
<body>
<h2>网页内跳转</h2>
<a href = "https://www.bytedance.com/">
字节跳动官网
</a>
<h2>新网页跳转</h2>
<a href = "https://www.bytedance.com/" target="_blank">
字节跳动官网
</a>
</body>
</html>
效果：
编辑
鼠标移动到连接处后
多媒体： 图片，音频，视频。
css文件名为04.css
img, audio, video {
display: block;
margin: 1em;
}
<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "04.css">
</head>
<html>
<body>
<h1>多媒体</h1>
<h2>图片</h2>
<img
src = "https://tse1-mm.cn.bing.net/th/id/OIP-C.ODe9iSJfofzGqtVeYxV-7AHaEK?rs=1&pid=ImgDetMain"
alt = "芙莉连"
width = "430"
/>
<h2>音频</h2>
<audio
src = "https://www.bilibili.com/video/BV1p34y1n79i/?vd_source=bf3b79bf8cff7026d1cfc8d0d4413044"
controls
>
</audio>
<h2> 视频</h2>
<video
src = "https://www.douyin.com/?recommend=1"
controls
>
</video>
</body>
</html>
效果
编辑
输入框
1.非选择类
05.css
input,textarea{
display : block;
margin : 1em;
width: 16em;
font-size : inherit
}
<link rel = "stylesheet" type = "text/css" href = "05.css">
<input placeholder = "请输入姓名">
<input type = "range">
<input placeholder = "请输入年龄" type = "number" min = "0" max = "18">
<input type = "date" min = "2004-01-01">
<textarea>
请输入自我介绍
</textarea>
效果
2.选择类
06.css
img {
width: 100%;
margin-bottom: 1em;
}
.layout-container {
column-count: 3;
}
06.html
<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "06.css">
</head>
<html>
<body>
<h3>在动漫中你喜欢那个？(多选)</h3>
<p>
<label><input type = "checkbox">芙莉连<img src =https://tse1-mm.cn.bing.net/th/id/OIP-C.ODe9iSJfofzGqtVeYxV-7AHaEK ></label><p></p>
<label><input type = "checkbox" >费伦<img src = "https://tse3-mm.cn.bing.net/th/id/OIP-C.TnhhcLgkyMO6Exk6rD_8rwHaLH?rs=1&pid=ImgDetMain" ></label><p></p>
<label><input type = "checkbox">阿乌拉<img src = "https://tse4-mm.cn.bing.net/th/id/OIP-C.7G5hTOqFz2V1Qg2gatyx2QHaFj?w=237&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" ></label><p></p>
</p>
<h3>在动漫中你喜欢那个？（单选）</h3>
<p>
<label ><input type = "radio" name="js"> 尤贝尔 </label>
<label> <input type = "radio" name="js"> 拉比涅 </label>
</p>
<h3>你喜欢什么活动？</h3>
<select>
<option>篮球</option>
<option>唱</option>
<option>rap</option>
</select>
<h3>你想去的国家</h3>
<input list = "countries">
<datalist id = "countries">
<option>China</option>
<option>中国</option>
</datalist>
</body>
</html>
效果
引用
<blockquote cite = "http://www.dmrenwu.com/anime/30166/">
<p>
尤贝尔
性别：女
属性： 重要角色 少年少女(13-18) 齐肩 单马尾 美女 长发 白色皮肤 紫色眼睛 魔法少女 魔法使 美少女 萌娘 绿发
简介：尤贝尔，所属动漫《葬送的芙莉莲》中的人物。一级魔法使考试的应试者，三级魔法使。她很健谈，脸上总是挂着淡淡的笑容。对杀人毫无心理负担。使用“能使用共情的对方擅长的魔法的能力”和“基本什么都能切的魔法”。
</p>
</blockquote>
<p>我喜欢的动漫是<cite>送葬的芙利连</cite></p>
<p>这是封面<q> <img src = "https://www.juejinka.com/news/wp-content/uploads/2023/09/F41fhwYboAAofdF.jpg"></q></p>
<p>this <b> is </b> <strong> are</strong> <em>are</em>cat </p>
效果
编辑
