11.15作业+笔记

<body>
    <form action="#">
        <center><h1>用户注册</h1>
        <p>用&nbsp;户&nbsp;名<input type="text" value="zhangsan"></p>
        <br>
        <p>密&nbsp;&nbsp;&nbsp;码<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{}"