周三笔记和作业

最新推荐文章于 2024-07-21 23:58:44 发布

panshiyangmaye

最新推荐文章于 2024-07-21 23:58:44 发布

阅读量17

点赞数

文章标签：笔记 html

本文链接：https://blog.csdn.net/panshiyangmaye/article/details/134466776

版权

笔记：

1、表格标签：
<table border="1px" width="200px" cellspacing="0">
<caption>学员信息</caption>
<thead height="200px" align="center" valign="middle"> (align控制水平方向 valign控制垂直方向)
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>政治面貌</th>
</tr>
<tbody>
<tr>
<td>张三</td>
<td colspan="2">男</td> (colspan跨行合并 rowspan跨列合并)
<td>18</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>20</td>
<td>团员</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>共计</td>
</tr>
</tbody>
</table>

2、表单标签补充：(<lable></lable> multiple：下拉框变列表)
<form action="#">
性别：<lable><input type="radio" name="sex">男</lable>
<input type="radio" name="sex" id="nv"><lable for="nv">女</lable>
<select name="city" multiple>
<option vaule="西安">西安</option>
<option vaule="南京">南京</option>
</select>
</form>

3、iframe标签：（将一个页面迁入）
<ifram src=“https://www.taobao.com” frameborder="1" width="800px"></ifram>
<a href="https://www.taobao.com" taget="ww">去淘宝</a>
<ifram name="ww" framborder="0"></ifram>

4、其余标签：(<diaiog open></diaiog>：默认关闭 <details></details>：详情)
(1) <diaiog open>
<form action="#">
<input type="text" placeholder="请输入用户名：">
<button>提交</button>
</form>
</diaiog>
(2) <details>
<summary>自我介绍</summary>
你们都是祖国的花骨朵儿
</ddetails>

5、全局属性：
<div class="box">我是导航栏部分</div>
<div class="box">我是主体部分</div>

6、tabindex属性（使div能被tab键便利）
<input type="text">
<div tabindex="0">我是一个盒子</div>
<a href="#">去百度</a>
<div tabindex="0" contenteditable="true">我是一个盒子</div> (contentditable：默认div可以被修改)

7、css引入：
(1)内嵌：
<style>
div{
with:300px;
height:300px;
background-color:pink;
}
</style>
(2)外联：
<link rel="stylesheet" href="./09-text.css">
(3)行内：
<div style="width:300px; height:3000px; background-color:pink;"></div>

8、基本选择器：
<p>我是一段文字</p>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3" id="one">3</div>
<span>1111</span>

(1)标签选择器：（标签{}）
P{
color:pink;
}
(2)类选择器：（.类名{}）
.box1{
color:red
}
(3)id选择器：（#id名{}）
#one{
color:bule
}
(4)通配符选择器：（*{}）
*{
color:green
}

9、包含选择器：
<ul class="wai">
<li>19<li>
<li>29<li>
<li>39<li>
<ul>
<li>我是内层的</li>
</ul>
<li>59<li>
<li>69<li>
<li>79<li>
<li>89<li>
<li>99<li>
</ul>

(1)子代选择器：(只找到第一层)
.wai>li{
border:1px solid pink;
}
(2)后代选择器：
ul li{
border:1px solid black;
}

10、复合选择器：(逗号选择器)
<p>我是一个段落</p>
<div class="box1">我是一个盒子</div>

p,
.box1{
color:red;
}

11、属性选择器：
<form action="#">
<input type="text" name="aaa">
<input type="password">
<input type="email">
</form>

(1)input[type="password"]{
backgroung-color:pink;
}
(2)input[name]{
background-color:yellow;
}
(3)input[type^="a"]{
backgroung-color:red;
}
(4)input[type*="a"]{
backgroung-color:black;
}

(5)input[type$="1"]{
backgroung-color:blue;
}

12、伪类选择器：
<a href="#">我是一个链接</a>
（1）访问后：
a:visited{
color:green;
}
（2）鼠标悬停：
a:hover{
color:pink;
}

13、伪元素：
<ul>
<li>第1个1</li>
<p>hjkh</p>
<li>第2个</li>
<li>第3个</li>
</ul>

(1)ul li::before{
content："sssss";
}
(2)ul li::after{
content："666";
}
(3)ul li:nth-child(){
color:pink;
}
(4)ul li:first-child{
color:red;
}
(5)ul li:last-child{
color:green;
}

作业：

<!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>
    <h1>用户注册</h1>
    用户名<input type="text" name="yonghuming"><br>
          <input type="text" name="ming" value="zhangsan" disabled><br>
    密码<input type="password" name="mima"><br>
    性别<input type="radio" name="xingbie">男
        <input type="radio" name="xingbie">女<br>
    爱好<input type="checkbox" name="hobby">唱
        <input type="checkbox" name="hobby">跳
        <input type="checkbox" name="hobby">rap
        <input type="checkbox" name="hobby">打篮球<br>
    邮箱<input type="text" name="youxiang" placeholder="请输入你的邮箱"><br>   
    用户头像<input type="button" value="选择文件"><br>
    家庭住址<select name="addess">
               <option value="请选择你的住址">请选择你的住址</option>
           </select><br>
    收货地址<select name="city" multiple>
               <option value="广州">广州</option>
               <option value="深圳">深圳</option>
               <option value="重庆">重庆</option>
               <option value="南京" selected>南京</option>
           </select><br>
    建议和意见<textarea name="advice" cols="30" rows="10">你的建议和意见</textarea><br>
    选择你喜欢的颜色<input type="color"> 注册时间<input type="datetime-local" name="time"><br>
    <button>注册</button> <button>重置</button>
    </form>
</body>
</html>