网站动态和静态的区别网站流程示意
一、笔记
表单：数据交互的一种方式
登录、注册、搜索
<from>
<input type=""> ---
<input type="text"> --- 普通输入框，内容在一行显示
<input type="password"> --- 密码框
<input type="radio">男 --- 单选框
eg：性别
<input type="radio">男 等等
name属性，表明是一组单选
eg：<input type="radio"name="sex">男<input type="radio"name="sex">女
默认选中 --- checked
Eg:默认选中女type="radio"name="sex">男<input type="radio"name="sex"checked>女
<br /> --- 换行
<input
type="checkbox"> --- 多选框
Eg:喜欢的水果
<input type="checkbox" name="hobby">榴莲<input type="checkbox"name="hobby">香蕉<input type="checkbox"name="hobby">火龙果name="hobby">莲雾
点字会勾选 --- 放大光标作用率
Eg1：<label>type="radio"name="sex">男</lebel>
Eg2：
<input type="checkbox"name="hobby"> <label for="huolongguo">火龙果</label>
eg：最喜欢的人
<input type="checkbox">卢洋洋
<input type="file"> --- 上传文件，一次传多个 --- multiple
昵称:<input type="text"
placeholder="请输入4-6位汉字"readonly> --- 输入时消失，删除玩输入的字符后出现
Readonly -- 只读
<input type="submit" value=""> --- 按钮
不写value显示为提交
有则写啥有啥
每写一个input记得把name带上，才能看到其状态
将此项设置为必填项 --- require
<button>点击</button> --- h5的上传
<input type="button" value="普通按钮"> --- 不会上传数据
<input type="email"> --- 不写@不给上传数据
<input type="color"> --- 选颜色
<input type="time"> ---
下拉框 --- <select name="city">
<option> value="上海"</option>
<option> value="广州" selected>广州</option>
<option> value="北京"</option>
</select>
<button>提交</button>
selected --- 默认
<textarea name="留言" cols="300" row="10" maxlengrh="200" placeholder="请留下你的留言"</textarea>
get/post 区别
1.get相对于post较为安全
2.http协议上规定不同
框架标签：嵌入广告
<iframe src="https://www.taobao,com" frameborder="1"></iframe>
<a href="">点击进入</a>
CSS 层叠样式表
1
<style>
/*选择器{
属性名:属性值;
属性名:属性值;
}*/
div {
width: 300px;
height: 300px;
background-color:green;
}
</style>
<!--外链----推荐 -->
行内
内嵌
1.基本选择器：
标签选择器
类选择器
id选择器
通配符选择器（优先级最低）
2.
子代选择器
后代选择器
逗号选择器
.类名{}
标签{}
#id名{}
*
Ul>li{}
Ul li{}
选择器1，
选择器2
直到选择器你{
}
3.属性选择器
应用软件：c/s架构（客户端服务器）b/s（浏览器服务器）
web前端：html5 css3 javascript
html5：超（超链接）文本 标记语言
网页中包括：文字，图片，视频，音乐，超链接
标签：
双标签语法规范：<标签名> <标签名> 内容 </标签名></标签名> (可相互嵌套）
单标签：<input type ="text"> （不用尾标签）
属性：定制标签行为，每一个标签存在自身的属性，互不相通
格式：<标签名 属性名="属性值"> <marquee loop="1">
当属性名=属性值时可以只写属性值（disabled =="disabled" == disabled =""）
全局属性：
常用标签：
标题标签：<h1> </h1> —— <h6> </h6> 逐级减少，单独换行
换行标签：文本后 <br / >
水平线标签 ：文本后<hr / >
段落标签：<p> </p>
文本格式化：
加粗标签：<strong> </strong> <b> </b>
倾斜标签：<em> </em> <i> </i>
下划线标签：<u> </u> <ins> </ins>
上标签：<sup> </sup>
下标签：<sub> </sub>
删除线标签：<del> </del> <s> </s>
原样输出：<pre> </pre>
行内标签：只会占用自身内容的位置，不会独占一行 <span></span>
块标签：独占一行 <div></div> <h1></h1>
图像标签：<img src="../(返回文件上一级) " 图片路径：绝对路径，相对路径，网络路径
width="200px"
height="400px"
border="10px"（边框）
title=""（注释）
align="top/center/left/right/bottom"（对齐方式）
vspace="200px"（垂直间隔距离）
>
视频标签：<video src=""
controls（播放键）
loop（循环播放）
autoplay muted（自动播放+静音）
> </video>
音频标签：<audio src=""
controls（播放键）
loop（循环播放）
autoplay muted（自动播放+静音）
> </audio>
超链接标签：<a href=" "
targrt="_blank"
> 点击进入新的页面 </a>
锚链接标签：<a href="# "> <
表格标签：
<table width="400px" border="2" （边框）cellspacing="0"（间距）>
<caption>2024年下学期课表</caption>
<tr align="center" bgcolor="">（第一行）
<td rowspan="2">（跨行）语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<ty align="center">（第二行）
<td>数学</td>
<td>英语</td>
</tr>
<ty align="center">（第三行）
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
</table>
特殊字符：
有序列表：
你喜欢吃什么
<ol type="">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
无序列表：
你喜欢吃什么
<ul type="">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
自定义列表：
<dl>
<dt>你喜欢吃什么</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>雪梨</dd>
</dl>
4.伪类选择器
描述某一个标签的状态
访问前
：link{
}
访问后
：visited{
}
鼠标悬停时
：hover{
}
鼠标点击时
：active{
}
需按顺序写
<style>
ul li:nth-child(6) {
Background-color:pink;
}
Li:last-child{
Background-color:aqua;
}
5.伪元素选择器
字体倾斜 --- font-style
行高 --- line-height
文本装饰
层叠性：相同的选择器，设置相同的属性，遵循就近原则，哪一个样式距离结构近就用哪个
继承性子标签会继承父标签的某些属性（字体颜色、字号）
优先性
二、表单练习
三、五彩导航
