常见html标签
认识html元素
html 是标签
lang 是html标签的属性 作用:声明html 使用什么语言
<html lang="en"> en 是lang 属性的值 作用:英文
<header></header> header 表示头部标签 指的是网站头部
<meta charset="UTF-8"> 作用: 解决中文乱码问题 charset 设置编码格式,UTF-8是国际标准编码格式
<meta name="viewport" content="width=device-width, initial-scale=1.0">在移动端情况下;显示正常字体
根据用途分类
布局类标签:页面布局
<main>
<header> 我是网站上面部分的布局
<nav>我是导航栏布局标签</nav>
</header>
<section>内容区域</section>
<aside>我是侧边栏标签</aside>
<footer> 网站底部</footer>
</main>
文本类标签只要跟文字有关的;就用以下标签
<p>我是段落标签</p>
<span>文字标签</span>
<i>我是斜体标签</i>
<strong>我是变粗的</strong>
我是段落标签
文字标签 我是斜体标签 我是变粗的标题在一个页面中,h1标签只能出现一次,其他标题标签 可以出现多次 h1-h6 标题级别依次降低,字体依次减小
<h1>我是大标题,一个网页中只能有一个h1标签</h1>
<h2>我是标题标签</h2>
<h3>我是标题标签</h3>
<h4>我是标题标签</h4>
<h5>我是标题标签</h5>
<h6>我是标题标签</h6>
我是大标题,一个网页中只能有一个h1标签
我是标题标签
我是标题标签
我是标题标签
我是标题标签
我是标题标签
图片类标签 作用:加载图片
src 作用:图片路径
alt 作用:图片信息描述;在图片不能加载时候回出现
<img src="http://img3.imgtn.bdimg.com/it/u=3139953554,3011511497&fm=26&gp=0.jpg" alt="">
链接类标签:作用:跳转链接
href 输入跳转页面的地址
a 标签有默认文本修饰
<a href="http://www.baidu.com">链接</a>
<audio src="http://mp3.9ku.com/m4a/637791.m4a" controls="controls">音频</audio>
<video src="./image/6.mp4" controls="controls">视屏</video>
表格类标签 ;
作用:应用 有规律的排列 几行几列
<table>
<!--表头-->
<thead>
<th>表格行</th>
</thead>
<!-- 表体 -->
<tbody>
<!-- tr 行 -->
<tr>
<!-- td 列 -->
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
</tbody>
</table>
表格行 | ||
---|---|---|
星期一 | 星期二 | 星期三 |
星期四 | 星期五 | 星期六 |
表单标签 作用:表单提交,录入信息,登录注册等
<form action="">
<label for="">用户名</label>
<!-- input 是输入框标签 -->
<input type="text">
<button>我是按钮标签</button>
<textarea name="" id="" cols="30" rows="10"></textarea>
<select name="" id="">
<option value="">1111</option>
<option value="">2222</option>
<option value="">3333</option>
</select>
</form>
我是按钮标签
1111
2222
3333
#####列表类 有序列表 无序列表
<ol>
<li>列表001</li>
<li>列表002</li>
<li>列表003</li>
</ol>
<ul>
<li>列表001</li>
<li>列表002</li>
<li>列表003</li>
</ul>
<dl>
<dt>列表001</dt>
<dt>列表002</dt>
<dt>列表003</dt>
</dl>
- 列表001
- 列表002
- 列表003
- 列表001
- 列表002
- 列表003
- 列表001
- 列表002
- 列表003