可知在html5中产生了很多定制的标签,例如<p>,<span>,<heaher>,<nav>,<aside>,<article>,<input>,<footer>
等等…这些特定的标签,浏览器会给定特定的特性,所以在开发网页时,html标签的选择也至关重要。下面给个简陋的代码示例。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" />
<title>html标签的使用</title>
<link href="css/new_file.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="img/1.jpg"
srcset="img/1.jpg 800w,img/2.jpg 1100w,img/3.jpg 1300w"/>
</header>
<nav>
<ul>
<span><h3>first</h3>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</span>
<span><h3>second</h3>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</span>
<span><h3>third</h3>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</span>
</ul>
</nav>
<aside style="float: left;">
<a href="https://blog.csdn.net/h1234561234561/article/details/85996866">CSS3 - 新单位vw、vh、vmin、vmax使用详解</a><br />
<a href="https://blog.csdn.net/h1234561234561/article/details/85946830">focus;invalid 用法-----浅析</a>
</aside>
<article>
<table>
<tr>
<td>username:</td>
<td><input/></td>
</tr>
<tr>
<td>password:</td>
<td><input/></td>
</tr>
<tr>
<th colspan="2">
<button type="reset">reset</button>
<button type="submit">submit</button>
</th>
</tr>
</table>
<p>kasnasncanckncanlncandlnlnvanldkasdlskpdjasdjasjdajs;djasdjlaskjdlkj</p>
</article>
<aside style="float: right;">
<a href="https://blog.csdn.net/h1234561234561/article/details/85932604">多列等高问题</a><br />
<a href="https://blog.csdn.net/h1234561234561/article/details/85874114">堆叠规制以及z-index浅谈</a>
</aside>
<footer><img src="img/4.jpg"></footer>
</body>
</html>
css:
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
header img{
width: 100vw;
height: 10vw;
}
nav{
width: 100vw;
height: 2vw;
border: 2px solid red;
background-color: blueviolet;
}
ul{
list-style: none;
}
span{
float: left;
padding: 0 1vw;
margin-left: 20vw;
}
span>ul{
position: absolute;
display: none;
}
span:hover ul{
display: block;
}
h3{
height: 100%;
color: white;
}
span:hover h3{
background-color: #DEB887;
}
span li:hover{
background-color: #FF0000;
}
aside{
border: 2px solid black;
width: 20vw;
height: 25vw;
display: inline-block;
}
article{
border: 2px solid blueviolet;
width: 55.7vw;
height: 25vw;
display: inline-block;
margin: 0 10px;
}
table{
margin: 50px auto;
border:2px solid red
}
table td{
text-align: right;
border:2px solid red
}
p{
width: 150px;
margin: 50px auto;
word-wrap: break-word;/* 指定如果足够长得话,应该换行(不需要空格键分位符) */
word-break: break-all;/* 在合适的点换行(需要空格键作为分位符,否则不换行) */
border:2px solid green;
}
footer{
float: left;
border: 2px solid darkblue;
width: 100vw;
height: 8vw;
}
footer img{
width: 100vw;
height: 8vw;
}
a{
text-decoration: none;
color: blueviolet;
margin-top: 50px;
}
a:hover{
color: red;
}
简单介绍下所用标签的特定场合
<header>
一般用于页头
<nav>
用于导航栏
<ol>/<ul>
用于列表
<section>
一般用于表示普通章节
<article>
文章主体
<aside>
侧边栏
<footer>
一般表示页尾
<img>
用图片,如果是响应式图片就用picture/srcset加上媒体查询详细描述
<span>
内联元素,比较灵活。一般用于文章中的特定部分,比如给某一段字画红线。
<p>
段落标签,一般用于一段文字的编写(一般与word-wrap,word-break属性连用)
<form>
一般用于提交数据给后台,且table有个很不错的优点—自适应
<input>
这个的根据不同的type来进行选定input
<button>
同上