500字范文 > 【前端学习日志】HTML表格表单注册页面案例+CSS选择器

【前端学习日志】HTML表格表单注册页面案例+CSS选择器

时间：2021-04-22 16:18:55

今日学习

一、HTML部分1.表格的基本语法2.表头单元格标签3.还是表头单元格标签4.小说排行榜案例5.合并单元格6.无序列表7.有序列表8.自定义列表9.表单域10.Input表单元素11.lable标签12.下拉表单13.文本域14.注册页面案例二、CSS部分1.CSS标签选择器2.类选择器3.利用类画三个盒子4.类选择器的多命名使用5.id选择器6.通配符选择器7.文字属性8.新闻案例三、写在最后

一、HTML部分

1.表格的基本语法

<tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr><tr> <td>甲</td> <td>男</td> <td>18</td> </tr><tr> <td>乙</td> <td>女</td> <td>20</td> </tr><tr> <td>丙</td> <td>男</td> <td>19</td> </tr>

2.表头单元格标签

<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr><tr> <td>甲</td> <td>男</td> <td>18</td> </tr><tr> <td>乙</td> <td>女</td> <td>20</td> </tr><tr> <td>丙</td> <td>男</td> <td>19</td> </tr>

3.还是表头单元格标签

<table align="center" border="1" cellpadding="20" cellspacing="0" width="2s"><tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr><tr> <td>甲</td> <td>男</td> <td>18</td> </tr><tr> <td>乙</td> <td>女</td> <td>20</td> </tr><tr> <td>丙</td> <td>男</td> <td>19</td> </tr></table>

效果如下：

4.小说排行榜案例

代码太长了我直接放结果图了
效果如下：

5.合并单元格

<table width="500" height="249" border="1" cellpadding="0" cellspacing="0"><tr><td> </td> <td colspan="2"> </td> </tr><tr> <td> </td> <td> </td> <td> </td> </tr><tr> <td> </td> <td rowspan="2"> </td> <td> </td> </tr><tr> <td> </td> <td> </td> </tr>

效果如下：

6.无序列表

<body><h4>您喜欢的食物？</h4><ul><li>榴莲</li><li>臭豆腐</li><li>鲱鱼罐头</li></ul>

效果如下：

7.有序列表

<h4>您喜欢的食物？</h4><ol><li>榴莲</li><li>臭豆腐</li><li>鲱鱼罐头</li></ol>

效果如下：

8.自定义列表

<dl><dt>关注我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>联系我们</dd></dl>

效果如下：

9.表单域

<form action="demo.php" method="post" name="name1"></form>

10.Input表单元素

<form action="demo.php" method="post" name="name1">用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br />密码： <input type="password" name="password"> <br />性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"> <br />爱好：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"> <br /><input type="radio" name="agree" value="agree" checked="checked">我同意此条款 <br /><input type="submit" value="免费注册"> <input type="reset" value="重置"><input type="button" value="获取短信验证码"> <br /><input type="file" value="上传头像"></form>

效果如下：

11.lable标签

<label for="text">用户名：</label><input type="text" id="text" > <br />性别：<label for="nan">男</label><input type="radio" id="nan"><label for="nv">女</label><input type="radio" id="nv">

lable标签效果如下：
光标挪到字体时也能选中radio

12.下拉表单

籍贯：<select><option>山东</option><option>北京</option><option>天津</option><option selected="selected">贵州</option></select>

效果如下：

13.文本域

<form >留言：<textarea cols="50" rows="5">请留言</textarea></form>

效果如下：

14.注册页面案例

<h3>青春不常在，抓紧谈恋爱</h3><form action="demo.php" method="post" name="name1">姓名：<input type="text" value="请输入姓名" maxlength="6" name="username"> <br />性别：<input type="radio" value="男" name="sex" id="man"><label for="man">男</label><input type="radio" value="女" name="sex" id="woman"><label for="woman">女</label> <br />生日：<select><option>2000</option><option>2001</option><option>2002</option><option></option><option></option><option></option></select><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option> </select><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option> </select><br />所在地区：<input type="text" name="adress" value="请填写地址"><br />婚姻状况：<input type="radio" value="未婚" name="option" id="wei"><label for="wei">未婚</label><input type="radio" value="已婚" name="option" id="yi"><label for="yi">已婚</label><input type="radio" value="离婚" name="option" id="li"><label for="li">离婚</label> <br />学历：<input type="text" name="xueli" value="请填写学历"><br />喜欢的类型：<input type="checkbox" name="hobby" id="wumei"><label for="wumei">妩媚的</label><input type="checkbox" name="hobby" id="keai"><label for="keai">可爱的</label><input type="checkbox" name="hobby" id="xianrou"><label for="xianrou">小鲜肉的</label><input type="checkbox" name="hobby" id="all"><label for="all">都喜欢</label><br />自我介绍<textarea>自我介绍</textarea><br /><input type="submit" value="免费注册"><input type="radio" name="agree" checked="checked" >我同意注册条款和会员加入标准<br /><a href="/video/BV1uT4y1P7CX/?spm_id_from=333.788." target="_blank">我是会员，立即登录</a><h5>我承诺</h5><ul><li>已满十八岁，单身</li><li>抱着严肃的态度</li> <li>真诚寻找另一半</li></ul></form>

效果如下：

以上，html部分学完
开始进入css的学习

二、CSS部分

1.CSS标签选择器

<style>/* 标签选择器：写上标签名 */p{color: rgb(146, 188, 103);}</style></head><body><div>我是div</div><div>我是div</div><p>我是段落</p><ul><li>我是ul里面的li</li></ul><ol><li>我是ol里面的ol</li></ol>

效果如下：

2.类选择器

<style>.bule{color: deepskyblue;}.red{color: brown;}</style></head><body><ul><li class="bule">冰雨</li><li class="red">来生缘</li><li>李香兰</li><li>生僻字</li><li>江南</li></ul>

效果如下：

3.利用类画三个盒子

<style>.one{width: 100px;height: 100px;background-color: crimson;}.two{width: 100px;height: 100px;background-color: darkgreen;}</style></head><body><div class="one"></div><div class="two"></div><div class="one"></div>

效果如下：

4.类选择器的多命名使用

<style>.red{color: firebrick;}.font35{font-size: 35px;}</style></head><body><div class="red font35">刘德华 </div>

5.id选择器

<style>/* 只能调用一次 */#pink{color:pink;}</style></head><body><div id="pink">迈克尔—杰克逊</div>

6.通配符选择器

<style>*{color:darkmagenta;}</style></head><body><div>我的</div><span>我的</span><ul><li>还是我的</li></ul>

7.文字属性

在这里插入代码片 <style>p{/* 字体 */font-family: '宋体';/* 粗细 */font-weight: 400;/* 大小 */font-size: 30px;/* 样式（正常Or倾斜）*/font-style:italic;/* 复合属性：简写的方式 *//* font: font-style font-weight font-sizw/line-height font-family; *//* font:italic 700 16px/20px '微软雅黑' *//* 文字对齐 */text-align: center;/* 装饰文本 */text-decoration: underline;/* 文字缩进 */text-indent: 2em;/* 文本间距 */line-height: 26px;}</style>