<body>
<form action="#">
<center><h1>用户注册</h1>
<p>用 户 名<input type="text" value="zhangsan"></p>
<br>
<p>密 码<input type="text"></p>
<p>性别<input type="radio" name="性别" checked>男
<input type="radio" name="性别">女
</p>
<p>爱好<input type="checkbox" name="爱好">唱
<input type="checkbox" name="爱好">跳
<input type="checkbox" name="爱好">Rap
<input type="checkbox" name="爱好">打篮球
</p>
<p>邮箱<input type="text" value="请输入你的邮箱"></p>
<p>用户头像<input type="button" value="选择文件">未选择文件</p>
<p>家庭住址<select>
<option>请选择你的住址</option>
<option>住址2</option>
</select>
</p>
<p>收货地址<select multiple>
<option>南京</option>
<option>重庆</option>
<option>深圳</option>
<option>广州</option>
</select>
</p>
<p>建议或意见<textarea>你的建议或意见</textarea></p>
<p>选择你喜欢的颜色<input type="color">
注册时间<input type="datetime-local">
</p>
<p><input type="submit">
<input type="reset">
</p></center>
</form>
</body>
表格标签 ps:表格可嵌套
表格标签(最外层)"<table>"
表格标题"<caption>"
表格头部"<thead>"
单行(类似<p>)"<tr>"
加粗(表头)"<th>"
表格数据"<tbody>"
单元格(一个)"<td>"
表格尾部"<tboot>"
加边框"border="宽度"(属性)"(须加在<table>中)
表格宽高"width="宽度"/height="高度"(属性)"【不常用】
单元格间隔"cellspacing="数字"(属性)"
文字位置"align="right/left······"(属性)"
合并单元格(跨列)"colspan="列数"(属性)"ps:找到起始单元格
跨行"rowspan="行数"(属性)"
表单补充
标签可选(点文字选选项)"<lable>"/"<lable for="id">"
以列表形式呈现选项"multiple(属性)"
iframe标签
将其他页面嵌入本页面"<iframe src="网址">"(可设置宽高)
框架"frameborder"
其余标签
可关闭对话框"<dialog open(打开)>"
打开对话框"modal.showModal()"
关闭对话框modal.close()
点击查看详情"<details>" 编辑文字(更改"详情")"<summary>"
全局属性
分区"<div>"
分类"class="类名"(属性)"[中间空格,可用多个类名] ps:可有多个类名
(内嵌)更改某组的形式"<style>
.组名
{
color等
}"
头部"<header>"
可聚焦(可被tab键选中)"tabindex="0"(属性)"
分区(div)可编辑contenteditable="true"
CSS
(外联)链接以获取形式"<link rel="stylesheet" href="路径">"【推荐】
(行内)形式"style="·······"(属性)"
基本选择器
分为标签选择器、id选择器、类选择器、通配符选择器
标签选择器 "标签 {·········(形式)}"
类选择器".类名 {}"
id选择器"#id {}"
通配符选择器"* {}"
包含选择器
子代选择器、后代选择器
子代选择器(只找到第一层)".类名>li"
后代选择器(内层也找)".类名(空格)li "
复合选择器(用逗号隔开)
例"p,div{}"
属性选择器(可用于任意属性)
属性选择器"标签[属性]{}"ps:"^="用于判断是否带有此字符 例:input[type^="e"]选择带有字符"e"的属性
"*="字符""判断以此字符开头
"$="字符""判断以此字符结尾
伪类选择器(判断一个标签的不同状态)
状态
访问前"a:link{}"
鼠标悬停时"a:hover{}" ps:"a:hover+.类名"当悬停在链接时,带此类名的改变
鼠标点击时"a:active{}"
访问后"a:visited{}"(放前面)
伪元素
前+"字符" "ul li::before{content:"字符"} "
后+(before换)
nth-child()
找第n个"ul li:nth-child(n){}"
第一个"ul li:first-child{}"
最后一个"ul li:lasts-child{}"