<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#"></form>
<h1>青春不常在,抓紧谈恋爱</h1>
<hr/>
昵称:<input type="text" name="username"placeholder="请输入您的昵称">
<p>性别:<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</p>
<p>婚姻状况:<input type="radio" name="no" value="未婚">未婚
<input type="radio" name="no" value="已婚">已婚
<input type="radio" name="no" value="保密">保密</p>
<p>所在城市:<select name="city" id="">
<option value="西安">西安</option>
<option value="南京">南京</option>
<option value="上海">上海</option>
</select></p>
<p>喜欢的类型:<input type="checkbox" name="no" value="可爱">可爱
<input type="checkbox" name="no" value="性感">性感
<input type="checkbox" name="no" value="御姐">御姐
<input type="checkbox" name="no" value="萝莉">萝莉
<input type="checkbox" name="no" value="小鲜肉">小鲜肉
<input type="checkbox" name="no" value="大叔">大叔</p>
个人介绍:
<p><textarea name="" id=""cois="50" rows="10"></textarea></p>
<h2>我承诺</h2>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</select>
<input type="url">
<input type="time" name="" id="">
<button>提交</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><center>用户注册</center></h1>
<div align="center"><form action="#" >
<p>用户名 <input type =”text” name=”username” placeholder="请输入昵称"></p>
<p>密码 <input type =”password” name=”pud” placeholder="密码">
<p>性别 <input type="radio" name= "sex"value="男" > 男
<input type="radio" name= "sex"value="女"> 女 </p>
<p>爱好 <input type="checkbox">唱
<input type="checkbox">跳
<input type="checkbox">Rap
<input type="checkbox">打篮球</p>
<p>邮箱 <input type =”text” name=”you” placeholder="请输入你的邮箱"></p>
<p>用户头像 <input type="file"></p>
<p>家庭住址 <select name="city" >
<option value="请输入你的住址">请输入你的住址</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="重庆">重庆</option>
<option value="南京">南京</option>
</select></p>
<p>收货地址 <select name="city" >
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="重庆">重庆</option>
<option value="南京" selected>南京</option>
</select>
</p>
<p>建议或意见 <textarea name="" cols="20" rows="2" placeholder="你的建议或意见"></textarea></p>
<p>选择你喜欢的颜色 <input type="color"> 注册时间 <input type="datetime-local"></p>
<p><br></p>
<button>注册</button> <button>重置</button>
</div>
</body>
</html>
<table>为表格</>
<caption>标题
<thead>表头</> align=”“ 设置水平对齐模式 valign=”“设置竖直对齐模式
<tbody>中间文字</>
<tr>创建一行</tr> bgcolor=““设置颜色 <th>在<tr>中创建横向小单元属性
<td>单元格</td>在单元格上rowspan=“ 数字“ 跨行合并 colspan=” 数字“ 跨列合并
<table border=” _px” cellspacing+” 0px”>
格式如下:
<body>
<table border="1px" width="300px" height="200px">
<caption>优秀学生信息表格</caption>
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>迪丽热巴</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>古力娜扎</td>
<td>120</td>
<td>三年三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们很优秀</td>
</tr>
</tbody>
</table>
</body>
Iframe框架
广告嵌入等,<iframe src=” 地址”>
可以与a链接使用
<dialog>可以设一个可以关闭的对话框 里面加上open属性才可以看到,不然是不可见
<script>Const
<details><summary>标题</>
全局属性
所有标签都具有的属性
一个标签可以有多个class名
<,,,class><sytle格式进行class内容的定义
Title也是全局属性、
<div tabindex=”1”>使其可选择 后面可以使其被更改
表单的补充:
通过<label>标签去标记到一起
特殊字符
空格符: ;表示一个空格
小于号:<;
大于号:>;
版权信息:©;
MDN;网道;可以去查找标签
HTML:原始
CSS:进行包装
Javes;进行动作等等
CSS学习
名称.css
在<head>
选择器{}
比如:div{ }
引入css 外链式
<title><style>(放在<head>里面) CTRL+/ 是注释
选择器:
/标签选择器/
Div{ }
/类选择器/
.类型名{ } 配合class使用
/id选择器/
#加上id名
/通配符选择器/ (找到网页内所有标签)
*{ }
/包含选择器/
1./子代选择器/
.类>另一类{ } (只选择了第一层)
2./后代选择器/
.类+空格+类{ } (都能选择)
/复合选择器/ (逗号选择器)
标签加逗号加别的 { }
/属性选择器/
Input[ 标签及其值(标签名加^=表示以。。。开头 $=表示以。。。结尾 *=表示包含。。。) ] { }
/伪类选择器/
标签:hover{ } 如果对div则hover+div
标签:focus{ }
/其他选择器/
(<li>$数值,自动写出数值行)
例子:Ul li :nth-child(数值行){ }
在ul 下面找第数值个li
Nth-of-type( 数值行) 对li进行编号查找
First-child { }第一个
Lasy-child { }最后一个
2n-1 奇数行 (可以放在数值行)
在之前之后加上内容:
/伪元素选择器/
标签::selection 鼠标选中选择