14
2020
02

wed前端学习笔记2

em元素:强调的语义,往往以斜体的形式出现而i元素仅仅表示斜体

del元素和ins元素:


<p><del>1949la.com</del>变成<ins>xiaoxiaola.com.cn</ins></p>

image.png

s元素:出现删除线和del元素不一样,s元素划掉错误的内容,看例子

<p><s>猪会飞</s></p>

image.png

u元素:英语单词和汉语中的专有名词标下划线,例子

<p><u>猪会飞</u></p>

image.png

mark元素:标记文本的作用

<p><mark>猪</mark>会<mark>飞</mark></p>

image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习笔记2</title>
<link rel="icon" type="imge/x-icon" href="xin.png">
<style type="text/css">
body{
background-image:url("xin.png");
background-size:2000px 800px;

}

table{
    border:1px solid black;
    border-collapse:collapse;<!--使平行两条线合并-->
}
th{
    border:1px solid black;
    padding:5px;<!--调整单元格的内边距-->
}
td{
    border:1px solid black;
    padding:5px;
}
caption{padding :1px;}
thead th{
    background:grey;
}
tbody th{
    background:lightgrey;
}
</style>
</head>
<body>
<p><del>1949la.com</del>变成<ins>xiaoxiaola.com.cn</ins></p>
<p><mark>猪</mark>会<mark>飞</mark></p>
<p><small>妹子妹子</small></p>
<ul>
<li>猪</li>
<li>虎</li>
<li>鸡</li>
</ul>
<ol>
<li>猪</li>
<li>虎</li>
<li>鸡</li>
</ol>
<dl>
<dt>1949la.com</dt>
<dd>小小</dd>
</dl>

<!--表格-->
<table>
    <caption>自我介绍表</caption><!--给表格增加标题,并且caption元素必须紧挨着table-->
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>小小</th>
        <td>22</td>
    </tr>
    <tr>
        <th>小</th>
        <td>20</td>
    </tr>
    </tbody>
    <tfoot>
    <tr><!---->
    <td colspan="2">风速达到v率</td><!--colspan设置单元格横跨的列数-->
    </tr>
    </tfoot>
</table>
<!--表单-->
<form action="heollow.php" method="post">
    名字:<input type="text" name="name"> <br>
    邮箱:<input type="text" name="email"><br>
    <button type="submit" >提交</button>
    </form>
</body>
</html>


« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。