前端&DAY2

DAY2

[pink老师课的学习笔记]

表格标签

<table><!-- 表格-->
   
    <tr> <!--行-->
        <th>name</th><!--表头单元格,文字会加粗居中-->
        <td>单元格</td><!--单元格-->
    </tr>
    
</table>
  • 表格属性:

  •  

  • 表格结构标签< thead> < tbody>

    <table>
        <thead> <!--表头区域-->
            <tr>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
            </tr>
            <tr>
            </tr>
        </tbody>
    </table>

  • 合并单元格

    • 1.合并单元格方式

      • 跨行合并:rowspan="number"

      • 跨列合并: colspan="number"

    • 目标单元格:

      • 跨行:最上侧单元格为目标单元格,写合并代码

      • 跨列:最左侧单元格为目标单元格,写合并代码

    • 步骤:

      • 先确定跨行还是跨列

      • 找到目标单元格

      • 删除多余单元格

列表标签:

  • 无序列表:

    <ul>
        <li>内容1 </li>
        <li>内容2 </li>
        <li>内容3 </li>
    </ul>
        <!--ul标签中只能放例-->
        <!--例中可以放任何标签-->

  • 有序列表:

    <ol>
        <li></li>
        <li></li>
    </ol>

  • 自定义列表:

    <dl>
        <dt>大字</dt>
        <dd>小字</dd>
        <dd>小字</dd>
    </dl>

    由三种标签组成-

    < dl>中只能出现< dt>和< dd>

表单标签:

 

  • 表单域:

    <form action="url" method="way" name="id">
        各种表单元素控件
        
    </form>

    表单域会把他里面的内容提交给服务器

    < method>的属性可设置为Get或者post

  • 表单控件:

    <form action="url" method="way" name="id">
        <input type="属性值">
        <input type="radio"<br>
        
    </form>

    input type属性值:

  •  

    check是复选框,

    radio如果要多选1,设置多个单选按钮为一个name

    value = " "提交给后台,可以在文本框中显示

    checked在单选按钮和复选框中设置该属性,默认选定该选项

    maxlength 文本框中的最大长度

    submit:将表单元素提交给服务器

    reset:清空表单内容

    file上传文件

  • lable标签

  •  

<label for="id">男</label>
<input type=:"text" id="id">
  • select下拉表单元素

    ​
    <form>    
        籍贯:
    <selecrt>
        <option>北京</option>
        <option selected="selected">火星</option>
        <!--默认选择-->
    </selecrt>
        
     </form> 
    ​

  • 文本域表单元素:

    <form>    
    <textarea rows="number" cols="number" >
        <!--rows是可以显示几行,cols是一行可以写多少字符-->
        打开时显示的内容
        </textarea>
    </form>
    ​
  • 注册表单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册案例</title>
</head>
<body>
    <h4>青春不常在,抓紧谈恋爱</h4>
    <table width="500" border="0">
        <!-- 第一行 -->
        <tr>
            <td> 性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"> 
                <label for="nan"><img src="/Picture/sex=man.jpg">男</label>
                <input type="radio" name="sex" id="nv">
                <label for="nv"><img src="/Picture/sex=woman.jpg">女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
            </td>
            <td>
                <select>
                    <option>--请选择月份--</option>
                    <option>一月</option>
                    <option>二月</option>
                    <option>三月</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="北京">
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况:</td>
            <td>
                <input type="radio" name="marry" id="yihun">
                <label for="yihun"> 已婚 </label>
                <input type="radio" name="marry" id="weihun" checked="checked">
                <label for="weihun"> 未婚 </label>
                <input type="radio" name="marry" id="lihun">
                <label for="lihun"> 离婚 </label>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td>
                <select name="xueli" id="xueli">
                    <option>请选择你的学历</option>
                    <option >大学</option>
                    <option>中学</option>
                    <option>更高</option>
                </select>
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love" id="keai">
                <label for="keai">可爱的</label>
                <input type="checkbox" name="love" id="xinggan">
                <label for="xinggan">性感</label>
                <input type="checkbox" name="love" id="smart">
                <label for="smart" >聪明</label>
                <input type="checkbox" name="love"id="chijia">
                <label for="chijia">持家</label>
                <input type="checkbox" name="love">只要是女的
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td><textarea name="jieshao" id="" cols="30" rows="10">个人简介</textarea></td>
        </tr>
        <!-- 第八号 -->
        <tr>
            <td></td>
            <td><input type="submit" value="注册"</td>
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox"  checked="checked">
                我同意注册条款
            </td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员,立即登陆</a>
              
            </td>
        </tr>
        <!-- 第十一行 -->
        <tr>
            <td></td>
​
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18,单身</li>
                    <li>严肃真诚哈哈哈</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
   
</html>

CSS

CSS 语法规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>哈哈哈</p>
</body>
</html>
  • 每组属性结束后用分号!,属性和值使用键值对的方式

选择器

  • 选择器的作用:选择标签用的

  • 基础选择器:

    • 标签选择器:把某一类标签全部选择,但是不能单独选择

    • 类选择器:

    .类名(自己起名字,但不能用标签名,纯数字,中文) {
        属性1
    }
    然后在要修改的标签属性中添加类名
    /*样式点调用 调用class="  "*/
  • div就是一个盒子,用来装网页内容

  • 多类名:

    • < div class="类名1(空格)类名2">

    • 使用场景:把多个标签共有的特点单独设置类

  • ID选择器

    • 样式通过#定义,调用使用id
  • 通配符选择器:

    • 将所有标签都应用

     

  • 总结:

 

CSS字体属性

  • font-family:xxxxxxx;字体

  • font-size:xxpx; 字大小

  • font-weight: 设置文本字的粗细(bold粗体,

  • font-style:设置文本风格(italic斜体)

< em>标签:倾斜

  • 字体的复合属性:

    (font:font-style font-weight font-size/line-height font-family)

    font:italic 700 16px 'Microsoft yahei'

    (不能更换顺序,每个属性按空格隔开)

不要的属性可以省略,但是size和family必有

  • 总结

 

CSS文本属性

  • text-align 水平对齐

  • 图片必须要设置标签

  • text-decoration可添加上下划线,删除线

    text-decoration: underline;

    text-decoration:line-through 删除线

    text-decoration:line-overline

    text-decoration:none(取消a herf默认的下划线)

  • 文本缩进:

    text-indent : xxpx/xxem(首行缩进xx像素)负值是突出

    em是一个相对单位,缩进几个文字的单位

  • 行间距

  • line-height(两行文字的距离)

  • 总结

 

CSS的引入方式:

  • 内部样式表:

    专门把CSS的内容抽取出来,专门放在head 中的< style>中

  • 行内样式表:

 

  • 直接在标签内部设定style属性就行

  • 外部样式表:

    适合样式比较多的代码

    1.先新建一个后缀为.css的文件

    2.这个css文件里只有样式,没有style

    3.在html中用link标签引入:

     

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值