html之标签(2)

  通过html之标签(1)知道了在html中常用的标签,在这些标签中有几个标签的使用要注意:

一、a标签

  <a href=""></a>   默认有一个下划线,可以使用text-decoration为none去掉。不会继承父类的样式颜色,下划线颜色根据文本颜色而变化。a标签之间一定要写上内容,不然找不到这个a标签。a标签不能嵌套a标签。

  强调:base标签:用来统一指定网页中所有的链接以何种方式打开以及链接地址。

  功能有如下几点:

1、跳转页面:

  target        目标点(_blank   在新页面中打开,_self在本页面中打开,默认)

  href       要跳转页面的地址(即可网络地址也可以是本地地址,绝对地址相对地址皆可),下载地址,锚点。href属性一定不能空,如果不确定的话,可以写上#或者是javascript。

2、下载:

  在href里写上地址,如浏览器能认别则可直接打开,如不能识别那就下载(h5新增download属性,添加后浏览器能识别也是可以下载文件的)。

3、锚点

  在href的值里写上#name,name为对应id的名字(这样内容可以在一个页面中显示);也可以写上网址:#id ,跳到指定地址页面设置的id。

4、伪类

  针对元素的某种状态添加的不同样式    :link          未访问链接的(颜色)状态    :visited        访问过的链接的(颜色)状态    :hover       标移入(悬停)的(颜色)状态    :active         鼠标按下不动时候的(颜色)状态 5、href与src的区别   href(HyperText Reference):超文本引用,用在link和a标签上,href是引用和页面关联,是在当前元素和引用资源之间建立联系,在文档中添加href,浏览器会识别这个文档为css文件,不会停止对当前文档的处理。   src(source):表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置,由于src的内容是页面中的一部分,所以浏览器在解析src时会停下对后文的处理,直到src加载完。一般用于srcipt,img,iframe标签中。 6、移动端   移动端中可以在href后面直接加上电话号码,可以唤出手机拨号盘。<a href="tel:137****3456">137****3456</a>。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        a:link{
            color:blue;
        }
        a:hover{
            color:pink;
        }
    </style>
    <base target="_blank" /> 
</head>
<body>
    <a href="#pink">粉色</a>
    <div id="blue">蓝色</div>
    <div id="red">红色</div>
    <div id="green">绿色</div>
    <div id="pink">粉色</div>
</body>
</html>

 二、img标签

<img src="" alt="" title=""/>

        它的标签类型为类联块。引入图片时如果是给图片一个width或是height,它会同比例的缩放,都给会变形。title="",表示鼠标在图片上悬停时显示图片的名称。alt="",表示图片不见时,网页上显示的内容。

三、h标签

  h标签在使用的时候,不要为了减小标题的字体而使用低级别的标题,而是使用css的font-size样式;避免跳过某级标题,要从<h1>~<h6>;避免在一个页面上重复使用<h1>,<h1>一般为标题。

四、表格标签

  在制作表格中,我们要注意表格的默认格式,并清除默认的样式。要善于作用col和colgroup标签。

  table{border-collapse:collapse;}

  th,td{padding:0;}

  其中合并单元格的方法如下:

  rowspan     合并行

  colspan      合并列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
       
        table{
            border-collapse: collapse;
        }
        th,td{
        padding:0;    
        }
        th,td {
            border: 1px solid black;
            text-align: center;
            background: rgba(187, 240, 205,0.7);
        }
        table{
            width: 400px;
        }
       caption{
           background: pink;
           border:1px solid black;
           border-bottom: none;
       }
    </style>
</head>

<body>
    <table>
        
        <thead>
            <caption>**课程表</caption>
            <tr>
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">上午</td>
                <td>数学</td>
                <td>化学</td>
                <td>语文</td>
                <td>英语</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>化学</td>
                <td>语文</td>
                <td>英语</td>
                <td>数学</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>数学</td>
                <td>化学</td>
                <td>语文</td>
                <td>英语</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>化学</td>
                <td>语文</td>
                <td>英语</td>
                <td>数学</td>
            </tr>
        </tbody>
        <tfoot>
                <th colspan="6">晚自习</th>
        </tfoot>
    </table>
</body>
</html>

五、表单

 <form action="提交地址" method="提交方式"></form>

  表单包含表单元素,允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等的区域。

  表单使用<form>标签来设置,<form>下有三点:

  1、action:其作用是指定向何处发送表单的链接,里面可以放绝对路径也可以放相对路径。

  2、method:表单提交数据的方式。分为post(提交的数据不会显示到url中,安全性高,提交的数据无大小的限制,常用)和get(明文提交,安全性低)两种。

  <form>内表单标签

  1、input:用来接收用户输入的信息,用法如下:

    type类型为text,可以输入内容的文本输入框

    type类型为password,输入时不显示明文

    type类型为button,按钮

    type类型为radio,单选框

    type类型为checkbox,复选框

    type类型为file,上传文件

    type类型为submit,提交按钮

    type类型为reset,重置

    type类型为submit,提交

    type类型为email,定义一个邮箱文本框,输入不是,则会有提示。

  name可以指定提交数据的key,value指定提交数据的value,可设置输入框的默认值。

  2、select  下拉列表

    name属性指定提交给后台的数据的key。

  3、label  用来辅助input,点击label后能够让对应的input变成可输入的状态

    for属性的值等于被关联的表单元素的id值

  4、其它:checked让表单一上来就有一个默认选中状态,disabled禁止用户输入,表单不会提交,readonly,表单为只读状态可以提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <div>
        <form action="http://www.baidu.com/" method="GET">
            <input type="text">
            <input type="password" name="password" />
            <input type="button" value="按钮" />
            <input type="radio" name="sex" value="man" />男人
            <input type="radio" name="sex" value="woman" />女人
            <input type="radio" name="sex" value="ladyman" />人妖
            <input type="checkbox" name="interest" value="eat" />吃饭
            <input type="checkbox" name="interest" value="sleep" />睡觉
            <input type="checkbox" name="interest" value="play"/>游戏
        <input type=" file" />
            <input type="email" />
            <input type="url" />
            <input type="submit" value="提交按钮" />
            <input type="reset" value="重置按钮" />
        </form>
    </div>
    <br />

    <!-- 以下为一个简单的例子,虽然格式有点难看,但最终效果出来了 -->
    <div>
        <form action="www.baidu.com/" method="POST">

            <div>用户名 <input type="text" style="width:200px;" placeholder="请设置用户名"></div>
            <div>手机号 <input type="text" style="width:200px;" placeholder="可用于登录和找回密码"></div>
            <div>密 码&nbsp&nbsp&nbsp<input type="password" style="width:200px;" placeholder="设置密码"></div>
            <div>
                验证码
                <input type="text" style="width:200px;" placeholder="请输入验证码"/>
                <input type="button" value="获取验证码"/>
            </div>

            <div> <input type="radio">阅读并接受
                <a href="#" style="text-decoration: none"/>《百度用户协议》</a>及
                <a href="#" style="text-decoration: none"/>《百度隐私保护声明》</a>
            </div>
        </form>
        <dir style="padding:1px">
            <input type="submit" value="注册" style="height:50px;width:300px;" />
        </dir>
    </div>
    
    <br>
    <select name="add" value="value" style="width: 100px">
        <option value="深圳"">深圳</option>
        <option value="北京" selected="selected">北京</option>
        <option value="上海">上海</option>
    </select>
</body> 
</html>

六、figure

  <figure>标签规定独立的流内容(图像,照片,代码等)。figure元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的,如被删除,对文档流不产生影响。

  注意:figure可带有标题,一个figure元素内最多只允许放一个figcaption元素,其它元素可以随意放置。figure有一个子标签:figcaption

  <figcaption>标签定义figure元素的标题,figcaption应该被放置于figure元素的第一个或者是最后一个子元素的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 200px;
        height: 200px;
        margin-bottom: 10px;
        background:yellow;
    }
    img{
        width: 50%;
    }
    </style>
</head>
<body>
    <figure>
        <img src="../MyProject/imges/1.jpg" alt="">
        <img src="../MyProject/imges/2.jpg" alt="">
        <img src="../MyProject/imges/3.jpg" alt="">
        <figcaption>标题可以选择</figcaption>
    </figure>
</body>
</html>

 

 

 

 

上一篇:python数据分析006_Python 2D绘图库Matplotlib


下一篇:2020-12-17 [DataWhale打卡]第二回:艺术画笔见乾坤