HTML常用标签

文本标签

超链接

<a href="www.baidu.com">点击进入百度</a>

路径两种，一种是绝对路径另外一种是相对路径，相对路径是指相对于包含这个标签的html文件的路径。这里不再过多赘述，不懂得可以自行百度。

外部链接：访问页面外的元素，就像上面的一样
内部链接（锚点）：也可以访问页面内的，就好像我们平时在word或者PFD中使用的标签那样，点击一下可以直接跳转到对应的页面内的地方。下面看代码示例如下

<!--文件内的链接>
<!---->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>超链接</title>
    </head>
    <h1>标题一</h1>
    <a href="#title2">点击跳转到标题二</a>
    <p>内容一</p>
    <p>内容一</p>
    <h2 id="title2">标题二</h2>
    <p>内容二</p>
    <p>内容二</p>

</html>

自己可以把中间的内容填充的多一点，自己试试

下面介绍他的第二个属性，打开的超链接实在当前窗口打开还是在新开的窗口打开，意思就是，比如我们在百度搜素爱奇艺，点进去爱奇艺官网的时候，那么百度搜索结果展示的那一栏并不会关闭，打开的爱奇艺实在新的标签页的，当然，至于是在新的标签页打开还是在本来的标签页打开，都是可以由开发人员去设定的。目前国内的的网站总是在新的窗口打开标签页，二国外的一般都是不会再去开一个新的标签页，使用百度和谷歌的时候可以明显看到不同。

    <a href="www.baidu.com" target="_blank">点击跳转到百度</a>
    <a href="www.baidu.com" target="_parent">点击跳转到百度</a>
    <a href="www.baidu.com" target="_self">点击跳转到百度</a>
    <a href="www.baidu.com" target="_top">点击跳转到百度</a>

target的默认值是"_self",也就是当前窗口打开。具体的其他几个值，自己去实验一下，这里不再过多赘述。

引用

长引用
短引用
引用来源（书、影视、页面）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>引用</title>
    </head>
    <body>
        <blockquote cite="https://live.bytedance.com/1442/8247082">
            <p>这是字节跳动的前端视频教程</p>
            <cite>来自字节跳动</cite>
        </blockquote>

        <p><cite>维基百科</cite><p>上说JAVA</p></p>
    </body>
</html>

强调

em标签：强调重读
strong标签：强调重要性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>强调</title>
    </head>
    <body>
        <p>猫是可爱的动物</p>
        <p>猫<em>是</em>可爱的动物</p>
        <p>猫是<em>可爱</em>的动物</p>


        <p>
            用法和用量：每日三片，每次一片，饭后服用
            <strong>警告：孕妇和儿童请遵医嘱</strong>
        </p>
    </body>
</html>

实际效果是标签是字体变成斜体，变成粗体

代码

代码片段
变量名
输出示例

键盘操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>代码</title>
    </head>
    <boay>
        <p><code>printf("Hello World\n"")</code></p>
        <p><var>int a;</var></p>
        <p><samp>输出示例</samp></p>
        <p><kbd>Ctrl+Shift</kbd></p>
        
    </boay>
</html>

空白字符

html语言并不像我们想的那样，他是会忽略代码里面的空白字符，例如下面一段代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>空白字符</title>
    </head>
    <body>
        <p>Hello           World!</p>
        <p>你好           
            
            
            
            世界</p>
    </body>
</html>

实际的输出结果是Hello和World之间只会有一个空格，而不是像源代码那样的有好多个空格。下面的你好世界之间也不会有那么多的换行和空格。这是因为HTML会把空格和换行识别为空白字符，并且会合并多个空白字符。但如果我们想要让他显示很多个空格字符或者换行呢？

使用pre标签：会保留源代码中的空格和换行
使用实体字符：

&nbsp 空格
&lt  <
&gt  >
&amp  &

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y6yU58Fx-1623562107802)(C:\Users\mixinju\AppData\Roaming\Typora\typora-user-images\image-20210607222127480.png)]

多媒体标签

图片

使用img标签，代码如下：

<img src="图片路径" alt="无法加载图片" />

其中alt属性是指当图片加载失败的时候显示的文字，而且是一个必要的属性。除了alt属性，img标签还有可以调整图片大小的属性width和height，如果不指定，图片会以默认的大小展示，如果只指定一个，那么另一个会随着指定的那个根据图片比例自动调整。

这里再补充说明一下，目前Web使用的图片格式一般有jgp、png、webp、gif等

视频

使用video标签

<p>
            <video src="https://home.miui.com/videos/out_540p.mp4"
            controls
            autoplay
            muted
            loop
            poster="https://home.miui.com/_next/image?url=https%3A%2F%2Fcdn.cnbj1.fds.api.mi-img.com%2Fmiui12-half%2Fassets%2Flightcone-arch-m.jpg&w=1024&q=75"
            width="1000"
            height="500"
            preload>
            <track kind="subtitles" srclang="ch" src="字幕文件路径">
            </video>
</p>

control展示是否显示浏览器的播放控制界面，autoplay设置是否自动播放，muted设置视频静音的属性，loop设置循环播放。是照片一样，也可以为视频设置大小，他的高度和宽度。使用方法和图片的一样，preload设置视频是否提前加载。如过要添加字幕文件，可以在<video>标签里面嵌套一个<track>标签。具体效果可以参考苹果官网的发布会视频。

音频

使用方法和视频差不多，直接上代码了，自己研究。

 <p>音频</p>
        <p>
            <audio src="音频路径"
            controls
            loop
            muted>
            <track kind="subtitles" srclang="ch" src="字幕文件路径">
            </audio>
        </p>

组织页面内容

段落

在html中分别用h1-h6表示不同级别的标题，熟悉word或者写过论文的的同学就知道这个分级的作用了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>组织页面</title>

    </head>
    <body>
        <h1>计算机科学与技术</h1>
        <h2>专业概述</h2>
        <h3>专业由来</h3>
        <h3>专业发展历史</h3>
        <h2>培养计划</h2>
        <h3>物联网方向</h3>
        <h3>互联网方向</h3>
        <h3>人工智能方向</h3>
    </body>
</html>

内容划分

<article>
<section>

列表

有序列表

<h1>世界电影票房排行</h1>
    <ol start="1">
        <li>阿凡达</li>
        <li>复仇者联盟</li>
        <li>泰坦尼克号</li>
    </ol>

其中<start>属性制定列表开始的第一个值

无序列表

使用方法和有序列表只差了一个地方就是把ol改成ul，那么就自然没有start属性了。

当然列表也可以嵌套列表。

<h1>世界电影票房排行</h1>
    <ol start="1">
        <li>阿凡达</li>
        <li>复仇者联盟</li>
        <ol start="1">
            <p>复仇者联盟1</p>
            <p>复仇者联盟2</p>
            <p>复仇者联盟3</p>
        </ol>
        <li>泰坦尼克号</li>
    </ol>

定义列表

具体见代码

<h1>设备详情</h1>
    <dl>
        <dt>机型名称</dt>
        <dd>一加9R</dd>
        <dt>制造商</dt>
        <dd>OPPO&& One Plus</dd>
        <dt>处理器</dt>
        <dd>高通骁龙870</dd>
        <dt>操作系统</dt>
        <dd>Color OS 11</dd>
    </dl>

导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航</title>
    </head>
  <header>
      <h1><img src="https://www.huawei.com/cn/" alt="LOGO"></h1>
      <nav>
          <ul>
              <li><a href="https:www.baidu.com">百度</a></li>
              <li><a href="https:www.baidu.com"></a>你好</li>
              <li><a href="https://bytedance.com"></a>世界</li>
          </ul>
      </nav>
  </header>
</html>

表格

<table> 标签表示一个表格,<thead>表示表头，<tbody>表示主题部分。<tr>表示每一行的内容。<td>表示表头的内容，<td>表示表格主题的内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>身高</th>
                    <th>体重</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>小明</th>
                    <th>女</th>
                    <th>189cm</th>
                    <th>78kg</th>
                </tr>
                <tr>
                    <th>小赵</th>
                    <th>男</th>
                    <th>160cm</th>
                    <th>45kg</th>
                </tr>
                <tr>
                    <th>小K</th>
                    <th>女</th>
                    <th>170cm</th>
                    <th>41kg</th>
                </tr>
                <tr>
                    <th>小王</th>
                    <th>男</th>
                    <th>177cm</th>
                    <th>67kg</th>
                </tr>
            </tbody>
        </table>
    </body>
</html>

那么当我们需要用到合并的表格呢？其实可以使用rowspan属性来设置跨过几行

<tr>
   <td rowspan="3">编程语言</td>
    <td>C++</td>
    <td>8</td>
</tr>

以上代码表示<编程语言>占3行，下面的两行（去掉自己的哪一行）最开始都是<编程语言>，相同的，还有多列合并，自己去试试吧。
表格标题可以使用标签，直接写在

标签下面就好了。

表格的内容不止这些，有其他需要，自己动手，丰衣足食

表单

一般用来做用户输入的，包含文本框，复选框，单选框，提交按钮。下面我们看个具体的代码来了解一下。

文本框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单工具</title>
    </head>
    <body>
    <form>
        <p>
            <label>用户名:</label>
            <input type="text" placeholder="3-32"个字符>
        </p>
        <p>
            <label>密码:</label>
            <input type="password">
        </p>
        <p>
            <label>年龄</label>
            <input type="number">
        </p>
        <p>
            <label>头像</label>
            <input type="file">
        </p>
        <p>
            <label>生日</label>
            <input type="date">
        </p>
        <p>
            <label>搜索</label>
            <input type="search">
        </p>
        <p>
            <label>电话</label>
            <input type="tel">
        </p>
        <p>
            <label>url</label>
            <input type="url">
        </p>
        <p>
            <label>email</label>
            <input type="email">
        </p>
        <p>
            <label>month</label>
            <input type="month">
        </p>
        <p>
            <label>time</label>
            <input type="time">
        </p>
        <p>
            <label>range</label>
            <input type="range">
        </p>
        <p>
            <label>color</label>
            <input type="color">
        </p>
        
    </form>    
    </body>
    <body>
        <form>
            <p> 请输入您最喜欢的水果(单选框)</p>
            <input type="radio" name="fruit"> <label>香蕉</label>
            <input type="radio" name="fruit"> <label>苹果</label>
            <input type="radio" name="fruit"> <label>葡萄</label>

            <p>请选择您最适合的衣服尺码(单选框)</p>
            <label><input type="radio" name="size"> XS</label>
            <label><input type="radio" name="size"> S</label>
            <label><input type="radio" name="size"> M</label>
            <label><input type="radio" name="size"> L</label>
            <input type="radio" name="size" id="xl">
            <label for="xl">XL</label>
        </form>
        <form>
            <p>复选框</p>
            <p>请输入你喜欢的水果</p>
            <label><input type="checkbox">香蕉</label>
            <label><input type="checkbox">猕猴桃</label>
            <label><input type="checkbox">葡萄</label>
        </form>
        <p>
            <label>提交</label>
            <input type="submit">
        </p>
    </body>
</html>

下拉选择框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下拉选择框</title>
    </head>
    <body>
        <p>下拉选择你最喜欢的水果</p>
        <select name="fruit">
            <option value="1" selected>苹果</option>
            <option value="2" >火龙果</option>
            <option value="3">芒果</option>
            <option value="4">橘子</option>
            <option value="5">榴莲</option>
            <option value="6">木瓜</option>
            <option value="7">西瓜</option>
            <option value="8">葡萄</option>
        </select>
        
    </body>
</html>

如果想要某一项默认显示，那么加上selected就好了。

按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>按钮</title>
    </head>
    <body>
        <form>
            <p>
                <label>账号</label>
                <input type="number">
            </p>
            <p>
                <label>密码:</label>
                <input type="password">
            </p>
            <button type="submit">点击提交</button>
            <button type="button">点击提交</button>
            
        </form>
    </body>
</html>

这是最基本的一个提交过程，在实际应用中还要在本地的输入进行校验，然后提交到服务器。

在这里插入图片描述
以上是听了字节的前端基础课程做的笔记，欢迎大家前来补充。也可以访问一下我的个人博客哟，（博客搭建初期，还比较简陋）

个人博客