和cool一起学前端----第二天

最新推荐文章于 2024-09-14 22:18:26 发布

i'm cool

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量198

点赞数 1

分类专栏：前端 # html 文章标签：前端 html

本文链接：https://blog.csdn.net/heyoung/article/details/103048784

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

几个常用的html标签

昨天介绍了开发工具，以及html的基础结构，今天就正式的来看看我们的html标签，我就列举一些常用的标签。

标题标签

h1-h6 定义标题,在编辑器里编辑
代码描述

段落标签

article,p,section,div

<article>这是article标签</article>
<section>这个是section标签</section>
<div>这个是div标签</div>
<p>这个是p标签</p>

在这里插入图片描述
看着这几个标签好像没啥区别，都用一个不行么，答案当然是可以的，为什么到要区分开呢，，主要就是web语义化，顾名思义，你要让人看到你这个标签的名字就知道你这个标签是要干啥的，当然web语义化更有利于搜索引擎抓取我们的页面内容，就是我们常说的seo。

链接标签

a标签，通过定义href属性，可以跳转到指定的页面，通过定义target属性，浏览器会以哪种方式打开页面（默认当前页打开）；a标签还有一个用法，就是锚点，我们我们可以在页面的其他标签里定义一个id属性，点击a标签可以跳到指定的标签。

<h1 id="link">和cool一起学前端----第二天    ----这个是最大的标题标签</h1> 
<h2>和cool一起学前端----第二天</h2>
<h3>和cool一起学前端----第二天</h3>
<h4>和cool一起学前端----第二天</h4>
<h5>和cool一起学前端----第二天</h5>
<h6>和cool一起学前端----第二天    ----这个是最小的标题标签</h6>
<article>这是article标签</article>
<section>这个是section标签</section>
<div>这个是div标签</div>
<p>这个是p标签</p>
<a href="http://www.baidu.com">跳转百度</a>
<a href="http://www.baidu.com" target="_blank">新页面跳转百度</a>
<a href="#link">跳转到h1标签</a>

列表标签

ul 无序列表
ol 有序列表
dl 自定义列表

<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
    <li>梨子</li>
</ul>
<ol>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
    <li>梨子</li>
</ol>
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>苹果</dd>
    <dd>苹果</dd>
    <dt>语言</dt>
    <dd>html</dd>
    <dd>css</dd>
    <dd>js</dd>
</dl>

表单标签

input 属性type规定 input 元素的类型
select 子元素option标签
form

<form action="">
    <p><input type="text" placeholder="这是一个输入框"></p>
    <p><input type="password" placeholder="这是一个密码输入框"></p>
    <p><input type="radio" name="sex" value="男" checked>男</p>
    <p><input type="radio" name="sex" value="女">女</p>
    <p><input type="checkbox" name="fruit" value="苹果"> 苹果</p>
    <p><input type="checkbox" name="fruit" value="香蕉"> 香蕉</p>
    <p><input type="checkbox" name="fruit" value="梨子"> 梨子</p>
    <p><input type="checkbox" name="fruit" value="桃子"> 桃子</p>
    <p><input type="file">这个是文件上传按钮</p>
    <p><input type="button" value="这是一个按钮"></p>
    <p><input type="submit" value="这是一个提交按钮"></p>
    <p>
        <select>
            <option value="选项一">选项一</option>
            <option value="选项二">选项二</option>
            <option value="选项三">选项三</option>
        </select>
    </p>
</form>

在这里插入图片描述
input标签还有一些其他属性，例如readonly设置只读，disabled不能操作该元素等，具体我们后期涉及到应用的时候会继续说。

媒体标签

img 图片标签，设置src显示图片
video 视频标签，设置src属性显示要播放的视频，controls显示控件
audio 音频标签，设置src属性显示要播放的音频，controls显示控件

<div>
   <p><img src="imgs/miao.jpg" alt="" width="200"></p>
   <p><audio src="imgs/music.mp3" controls>不支持的audio显示出来</audio></p>
   <p><video src="imgs/video.mp4" controls></video></p>
</div>

在这里插入图片描述
这三个标签都可以设置width和height属性，来调整大小，video标签还可以设置poster属性来设置视频的封面，具体的属性可以看看手册

表格标签

table 定义一个表个
tr 定义行
th 定义表头单元格
td 定义单元格

<table border="1" cellspacing=0 cellpadding=0>
    <tr>
        <th>语言</th>
        <th>难度</th>
    </tr>
    <tr>
        <td>html</td>
        <td>简单</td>
    </tr>
    <tr>
        <td>css</td>
        <td>简单</td>
    </tr>
    <tr>
        <td>js</td>
        <td>简单</td>
    </tr>
    <tr>
        <td>java</td>
        <td>难</td>
    </tr>
</table>