html中标签的选择使用

可知在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>同上

html中标签的选择使用

猜你喜欢