常见html标签

常见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="">
常见html标签

链接类标签:作用:跳转链接

 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>
  1. 列表001
  2. 列表002
  3. 列表003
  • 列表001
  • 列表002
  • 列表003
列表001
列表002
列表003
上一篇:[淘宝客技术篇003]如何获取淘客私密优惠券链接


下一篇:Python基础实例003:九九乘法表