HTML学习day2

标签的使用

a:

　　　　1超链接

　　　　href 超链接的地址

　　　　target:_self 默认 在当前中打开链接地址

　　　 　　　　：_blank  在空白的页面中打开链接地址

标签内部跳转：瞄点有默认点击操作，可以用href='javascript:void(0);'来取消默认点击行为

img:

  1. src:连接图片的地址
  2. alt:图片资源加载失败，显示文本

ul:　unordered list 无序列表 ul下的子元素只能是li，可以嵌套使用， --------去掉ul前面的图形符号的方法是:list-style:none

ol:有序列表，将标号标上，列表有type和start俩个属性，分别设置标号的类型和开始计数的数字

dl:定义列表 dt:定义标题

　　　　　dd:定义描述

table:表格  border 边框属性

<table>
    <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
    </tr>
</table>

 　　td中的colspan和rowspan属性分别可以合并横向，纵向单元格，还有<thead><tbody><tfoot>分别代表表格的首 ，主体和尾

form标签(是块级标签)

　　与服务器进行交互的标签

　　http协议

　　action:提交的服务器网址example:action="http://www.baidu.com"

　　method属性值是get和post（登录注册，上传文件），页面中的a,img,link默认是get请求(向服务器要资源的时候)

　　input:

　　　　type:

　　　　　　text:文本输入框

　　　　　　password:密码输入框

　　　　　　file:文件按钮，提交文件的时候用post,因为get方式提交的内容不够

　　　　　　submit:提交form表单的按钮　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　button:普通按钮

　　　　name:提交到服务器端的key

　　　　value:显示的文本内容，与服务器端的value

　　　　placeholder:文本代替框

　　label:

　　　　for:此属性和下面的与其有关联的input中id属性的值保持一致

　　Enctype:

　　　　表单数据的编码方式(加密方式),取值可以是:multipart/form-data（当用form表单来传送文件的时候）

<form action="http://www.baidu.com" method="get">
    <p class="user">
        <label for="username">用户名:</label>
        <input type="text" name="username">
    </p>
    <p class="pwd">
        <label for="pwd">密码:</label>
        <input type="password" name="pwd">
    </p>
    <input type="submit" value="注册">
</form>

 　　radio:单选按钮

    <p>
        男:<input type="radio" name="sex" value="man" checked>
        女:<input type="radio" name="sex" value="woman">
    </p>

 　　　　　单选按钮，只有当name的值相同时，几个不同的选项才有互斥效果，checked代表的是默认选项

　　　　

　　checkbox:多选按钮

　　reset:重置按钮，清空已经选的内容

　　select:下拉列表标签

        <select>
            <option>小学</option>
            <option>初中</option>
            <option selected>大学</option>
        </select>

 　　<textarea name='' id='' cols='60' rows='10'></textarea>

　　　　此标签在网页中开辟出一块空白区域，用来写文字等信息

注：p标签只能放文本，图片 ，表单元素，不能放其他元素

 

 

二、CSS 层叠样式表

　　　　作用:修饰网页结构

　　　　css的三种引入方式:

　　　　　　-行内样式 优先级最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--选择器-->
        span{
            color:blue;
            font-size:20px;
        }
    </style>
<!--外接样式-->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<!--行内样式-->
<p style="color:red;font-size:30px;">你好啊</p>
<span>alex</span>
</body>
</html>

 

　　　　　　-内接样式

　　　　　　-外接样式

几种不同的基本选择器

<!--选择器-->
    /* 标签选择器   */
        span{
                color:red;
            }
    /*重置样式*/
        ul{
            list-style: none;
        }
    /*类选择器 .类名  选中的也是共性 ，可以有多个  */
        .active{
            color:yellow;
        }
    /*id选择器，选中的是特性，只能有一个    */
        #id{
            color:red;
        }
    </style>

还有高级一些的组合选择器 ul,p{.....}

对于一些特殊的情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color:yellow;
        }
        .box{
            color: red;
        }
    </style>
</head>
<body>
<div class="box active">你好啊</div>
</body>
</html>

如果在style中先定义active类，再定义box类表示为红色，如果二者定义的先后顺序相反则表示为黄色，后定义的颜色将前面的覆盖了。

posted @ 2020-04-20 20:30  it弟中弟  阅读(126)  评论(0)    收藏  举报