HTML基础

HTML基础

标签

标签,表示页面的“头”,定义特殊内容,其常见的内部标签如下表所示:
内部标签说明
<title>定义网页的标题
<meta>定义网页的基本信息(供搜素引擎)
<style>定义CSS样式
<link>链接外部CSS文件/脚本文件
<script>定义脚本语言
<base>定义页面所有链接的基础定位
标签

在通过VS Code快捷生成HTML时,会自动生成部分<meta>标签,更具体的使用参考下述文章,链接如下:
<meta>标签

单标签(自闭合标签)

不必确定开始和结束,例如<br>和<hr>

标题标签

标题标签属于块元素(独占一行),有<hi>(i=1,2,…,6)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

段落标签

段落标签<p>属于块元素,段落之间有一定的空隙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    <h1>文章标题</h1>
    <hr>
    <p>123456789123456789<br>123456789123456789123456789123456789123456789123456789123456789123456789</p>
    <hr>
    <p>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789</p>
    <hr>
</body>
</html>

格式化标签

格式化标签用于修改文字样式,常用的格式化标签如下图所示:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    <b>加粗字体</b><br>
    <strong>加粗字体</strong><br>
    <u>下划线字体</u><br>
    <ins>下划线字体</ins><br>
    <i>倾斜字体</i><br>
    <em>倾斜字体</em><br>
    <s>删除线字体</s><br>
    <del>删除线字体</del><br>
    <strong><ins><em><del>极限融合</del></em></ins></strong>
</body>
</html>

标题语义化

根据语义选择正确的标签,而不是通过其他标签叠加、修改样式等方式模拟出类似的效果。
例如标题使用<h1>,<h2>等,而段落要使用<p>。

图像标签

<img>标签,该标签内部有若干属性,常用的属性如下表所示:

属性含义
src图像的URL
alt图像的替换文本(加载失败时显示)
width图像宽度(HTML5-CSS像素;HTML4也可以是百分比)
height图像高度(没有该属性时等比例缩放)
title鼠标悬停时显示的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
    <img src="./88.jpg" title="悬停显示" alt="加载失败显示" width="800">
    <!--width和height,只需给出其中一个,另一个是自动等比例缩放-->
</body>
</html>

音频标签

<audio>音频标签,支持的音频格式有MP3,wav,ogg等。
<audio>常用的属性如下表所示:

属性含义
controls显示播放的控件
autoplay自动播放(部分浏览器不支持)
loop循环播放
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频标签</title>
</head>
<body>
    <audio src="./test.wav" controls>
    </audio>
    <audio controls>
        <source src="..." type="mpeg"/>
        <source src="..." type="ogg"/>
        <source src="..." type="wav"/>
        不支持现有音频格式
    </audio>
    <!--优先级mp3>ogg>wav,都没有则无法播放-->
</body>
</html>

视频标签

<video>视频标签,常用的属性同<audio>,但是自动播放需要配合muted属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频标签</title>
</head>
<body>
    <video src="./舞蹈风2.mp4" controls autoplay muted width="200"></video>
</body>
</html>

超链接标签

<a>超链接标签,常用的属性如下表所示:

属性含义
href跳转目标链接(#代表空链接)
target链接打开方式
download是否是下载而非打开
title鼠标悬停时显示的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接标签</title>
</head>
<body>
    <a href="http://today.hit.edu.cn" target="_blank">跳转至今日哈工大</a>
    <a href="./88.jpg" download="picture.jpg">下载图片</a>
</body>
</html>
target属性

target属性表示链接打开的方式,常见的取值如下表所示:

取值含义
_blank在新窗口打开
_self在当前窗口打开(默认值)
_parent在父窗口打开

列表

列表有无序列表、有序列表、自定义列表。

无序列表和有序列表

无序列表<ul>无序列表整体 <li>列表每一项
有序列表<ol>有序列表整体 <li>列表每一项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表和有序列表</title>
</head>
<body>
    <h1>
        无序列表和有序列表
    </h1>
    <ul>
        <li>123</li>
        <li>234</li>
        <li>345</li>
    </ul>
    <hr>
    <ol>
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ol>
</body>
</html>
自定义列表

自定义列表<dl>列表整体 <dt>列表表头 <dd>每一项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt><strong>列表表头</strong></dt>
        <dd><ins>123</ins></dd>
        <dd>345</dd>
    </dl>
    <!--dd默认有缩进-->
</body>
</html>

表格标签

<table>标签,内含有标签<caption>表名,<thead>表头,<tbody>表体,<tfoot>表尾。
<thead>中使用<tr>和<th>标签,而<tbody>和<tfoot>中使用<tr>和<td>;

跨行合并与跨列合并

在<td>标签中,使用rowspan属性进行跨行合并(保留最上面单元格的值),使用colspan属性进行跨列合并(保留最左边单元格的值)。
但是不能跨结构合并(如跨越<tbody>、<thead>)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例表格</title>
</head>
<body>
    <table border="2" width="800" height="600">
        <caption><strong>优秀学生信息表格</strong></caption>
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年二班</td>
            </tr>
            <tr>
                <td>赵四</td>
                <td>120</td>
                <td>三年三班</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>评语</td>
                <td colspan="2">优秀</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表单标签

<form>标签,用于表示整体,其action属性表示提交地址。
在<form>标签内部,多用<input>标签。

<input>标签

<input>标签根据type取值不同,有不同的作用,type取值如下图所示:
在这里插入图片描述
其中,有以下几点:
(1)单选框(radio)需要配合name属性使用。同一个name属性值的radio为一组,具有单选功能。
(2)文件上传(file)可以使用multiple属性实现多个文件上传功能。
(3)placeholder属性表示占位符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例表单</title>
</head>
<body>
    <h1>青春不常在,抓紧谈恋爱</h1>
    <hr>
    <form action="#">
    昵称:<input type="text" id="username" placeholder="请输入昵称">
    <br>
    性别:<label><input type="radio" name="gender"></label>&nbsp;<label><input type="radio" name="gender"></label>
    <br>
    所在城市:<select name="city">
        <option value="shanghai" selected>上海</option>
        <option value="beijing">北京</option>
    </select>
    <br>
    婚姻状况:<label><Input type="radio" name="info1">未婚</Input></label>&nbsp;<label><input type="radio" name="info1">已婚</label>&nbsp;<label><input type="radio" name="info1">保密</label>
    <br>
    喜欢的类型:<input type="checkbox">可爱&nbsp;<input type="checkbox">御姐&nbsp;<input type="checkbox">小鲜肉
    <br>
    个人介绍:
    <br>
    <textarea name="info2" cols="40" rows="20"></textarea>
    <br>
    <strong>我承诺</strong>
    <ul >
        <li>年满18</li>
        <li>真心</li>
    </ul>
    <input type="checkbox" id="agree"><label for="agree">我同意所有条款</label>
    <br>
    <button value="免费注册">免费注册</button>&nbsp;<input type="reset" value="重置">
    </form>
</body>
</html>
下拉列表标签

<select>标签表示下拉列表,内部包含若干个<option>标签表示每一个选项,<option>中使用selected属性表示整体下拉列表的默认值。

<label>标签

使用<label>标签可以实现点击其他区域时,也能选中/取消<input>选项。
(1)使用<label>标签包裹文字,使用其for属性表示选中的标签的id。
(2)直接使用<label>标签包裹<input>和文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Label</title>
</head>
<body>
    <form action="">
        性别:
    <input type="radio" name="gender" id="male"> <label for="male"></label>
    <label><input type="radio" name="gender" id="female"></label>
    </form>
</body>
</html>

无语义标签

<div>标签独占一行,而<span>标签一行可以有多个。他们常用来实现页面布局(如CSS中的盒子模型)。

字符实体

字符实体用来表述特殊字符,有如下几点作用:
(1)避免HTML解析错误。
(2)保留原有字符的含义。
(3)提供可读性和可维护性。
常见的字符实体如下图所示:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

深海质粒ABCC9

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值