HTML基础

最新推荐文章于 2025-06-12 13:34:50 发布

惜茶

最新推荐文章于 2025-06-12 13:34:50 发布

阅读量294

点赞数 5

文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/2301_79253162/article/details/143659058

版权

HTML

描述网页结构的语言
简单的网页

<!DOCTYPE html>    <!--声明告诉浏览器HTML版本方法-->
<html lang="en">    <!--语言是english-->
<head>
<title>hello</title>    <!--标题<title>标签-->
</head>
<body>      <!--用户可见-->
你好！
</body>
</html>

1）标题由大到小

2) 列表

有序

无序

3）媒体标签

标签	含义
<img>	插入图片
<audio>	插入音频
<video>	插入视频
<iframe>	嵌入另一个文档（如网页）

<img src="dog.jpg" alt="狗" width="200">
<!--src代表地址-->
<!--alt文本代替图片-->

<audio src="audio.mp3" controls></audio>

<video src="video.mp4" controls="controls">
您的浏览器支持video标签
</video>
<!--controls则表示向用户显示控件，比如播放按钮-->

<iframe src="https://www.youkuaiyun.com/ "width="600" height="400" title="描述文本"></iframe>

4）链接

<a href="https://wap.baidu.com/">百度</a>

5) 文本格式

标签	含义
<p>	段落
<h1>	标题
<strong> <b>	加粗、强调
<em> <i>	倾斜
<del>	删掉线

<p><strong>这是强调的文本。</strong></p>
<p><b>这是加粗的文本。</b></p>
<p><em>这是倾斜的文本。</em></p>
<p><i>这也是倾斜的文本。</i></p>
<p><del>这是被删除的文本。</del></p>

6）表格标签

标签	含义
<table>	定义表格
<tr>	表格行
<th>	表头单元格
<td>	表格列
<caption>	添加标题

<table>
    <thead><!--每栏标题-->
        <tr>    <!--行-->
            <th>name</th>
            <th>number</th>
        </tr>
    </thead>
    <tbody><!--内容-->
        <tr>
            <td>bob</td><!--列-->
            <td>12</td>
        </tr>
        <tr>
            <td>alix</td>
            <td>15</td>
        </tr>
    </tbody>
</table>

7) 表单标签

标签	含义
<form>	表单
<input>	输入控件，类型通过type定义（text、password、checkbox、radio……）
<textarea>	多行输入
<button>	按钮
<select> 和<option>	下拉选择框

 <form>
        <div><!--块级元素-->
            <input type="text" placeholder="Name" name="name">
            <input type="password" placeholder="Password" name="password">
        <!--placeholder是占位符-->
        </div>
        <div>
            <input name="color" type="radio" value="red">Red
            <input name="color" type="radio" value="green">Green
        </div>
        <div>
            <input name="country" list="countries" placeholder="Country">
            <datalist id="countries">
                <option value="Chinese">
                <option value="Algeria">
            </datalist>
        </div>
  </form>

8）结构性标签

标签	含义
<div>	块级元素，用于分组
<header>	定义页面或部分头部
<footer>	定义页面或部分底部
<nav>	导航链接
<section>	定义文档中的节
<article>	定义独立内容块

<nav>
    <ul>
        <li><a href="https://www.youkuaiyun.com/">链接1</a></li>
        <li><a href="https://www.harvardonline.harvard.edu/">链接2</a></li>
    </ul>
</nav>

<footer>
    <p>你好</p>
</footer>

<header>
    <h1>标题</h1>
    <nav>
        <!-- 导航链接 -->
    </nav>
</header>

<section>
    <h2>节标题</h2>
    <!-- 节的内容 -->
</section>
<article>
    <h3>标题</h3>
    <p>内容</p>
</article>