前三次笔记、表单和五彩导航

骨架:

笔记:

需要有包裹的内容,用双标签,不需要包裹内容就可以完成的操作用单标签

标签之间的关系只有父子关系和兄弟关系

标题标签只有h1-h6,且大小依次递减,独占一行

在段落标签"<p> </p>"里进行换行,只会在浏览器里面多一个空格,段落与段落之间默认存在空隙。

换行<br>,水平线<hr>

<a></a>点击跳转

音乐:audio,视频:video

<input>:输入(表单输入)元素

<!-- -->注释文字,解释说明,不影响程序

<label> 元素(标签)表示用户界面中某个元素的说明

<marquee> 元素用来插入一段滚动的文字

<select> 元素表示一个提供选项菜单的控件

<option> 用于定义在 <select>, <optgroup> 或 <datalist> 元素中包含的项

placeholder 表示 <input> 或 <textarea> 元素中的占位文本

<li> 元素 (或称 HTML 列表条目元素)用于表示列表里的条目

<textarea> 元素表示一个多行纯文本编辑控件

<button> 元素表示一个可点击的按钮,可以用在表单或文档其他需要使用简单标准按钮的地方

<caption> 元素展示一个表格的标题

<tr>:表格行元素

<table>:表格元素

<title> 元素 定义文档的标题,显示在浏览器的标题栏或标签页上。

<style>:样式信息元素

<ul>:无序列表元素

background-color 会设置元素的背景色,color 属性设置元素的文本以及文本装饰的颜色值

font-size 设置字体大小

font-weight 指定了字体的粗细程度

text-align 设置块元素或者单元格框的行内内容的水平对齐

ont-style 允许选择 font-family 字体下的 italic 或 oblique 样式

font-family 允许通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体

line-height 用于设置多行元素的空间量,如多行文本的间距

表格:

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h1>用户注册</h1>

<from action="">

用户名:<input type="text" name="usename">

<br />

密码:<input type="password" name="password" required>

<br />

性别:<label><input type="radio" name="sex" value="nan">男</label>

<label><input type="radio" name="sex" value="nv">女</label>

<br />

爱好:<label><input type="checkbox" name="hobby">写作</label>

<label><input type="checkbox" name="hobby">听音乐</label>

<label><input type="checkbox" name="hobby">体育</label>

<br />

省份:<select name="city" >

<option value="shanxi"selected>陕西</option>

<option value="guangzhou">广州</option>

<option value="shanghai">上海</option>

<option value="chongqing">重庆</option>

</select>

<br />

自我介绍:<textarea name="liuyan" cols="10" rows="10" maxlength="10" placeholder=""></textarea>

<br />

<button>提交</button>

<button>重置</button>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.wucai a{

display:inline-block;

width: 120px;

height: 60px;

background-color: aqua;

text-align: center;

color: rgb(255, 132, 0);

line-height: 50px;

text-decoration: none;

}

.wucai .wucai1{

background-color: rgb(156, 156, 22);

}

.wucai .wucai1:hover{

background-color: rgb(169, 206, 100)

}

.wucai .wucai2{

background-color: rgb(225, 176, 233);

}

.wucai .wucai2:hover{

background-color: rgb(163, 231, 25);

}

.wucai .wucai3{

background-color: rgb(17, 200, 228);

}

.wucai .wucai3:hover{

background-color: rgb(188, 13, 13);

}

.wucai .wucai4{

background-color: rgb(75, 67, 227);

}

.wucai .wucai4:hover{

background-color: blanchedalmond;

}

</style>

</head>

<body>

<div class="wucai">

<a href="#" class="wucai1">五彩导航</a>

<a href="#" class="wucai2">五彩导航</a>

<a href="#" class="wucai3">五彩导航</a>

<a href="#" class="wucai4">五彩导航</a》

</div>

</body>

</html>

相关推荐
子兮曰1 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰1 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
一隅论数智1 天前
给AI一张“业务概念地图“:本体如何从哲学走向企业智能
大数据·人工智能·经验分享·笔记·学习·学习方法·政务
前端小万1 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝1 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋1 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁1 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
深圳老胡1 天前
STM32F407 控制 L6470 步进电机驱动 —— 控制过程简介
笔记·stm32·单片机·嵌入式硬件·代码规范
Because_of_Her11 天前
并查集-听课笔记
笔记·算法·并查集
彧azz1 天前
Linux 环境下 Redis 学习总结:数据类型、持久化、锁、事务、主从与缓存问题
linux·redis·笔记·学习·面试