HTML笔记

无聊的烤苕皮

已于 2024-07-13 19:16:58 修改

阅读量417

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html

于 2023-03-31 15:25:11 首次发布

本文链接：https://blog.csdn.net/tt19123657188/article/details/129870308

HTML 专栏收录该内容

1 篇文章

订阅专栏

HTML笔记

一、常用标签

1、a标签
这个标签的作用是用于给文字或图片做链接的.

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

> 它有以下属性：

href：用于指定链接的路径，可以是相对路径，也可以是绝对路径
target：用于指定打开的方式，有以下几个值：
_self：当前窗口打开，即要打开的页面替换当前窗口，它是默认值
_blank：在新的标签页中打开指定的页面
_parent：它需要用到iframe模式中才效
_top：它需要用到iframe模式中才效

2、p标签
p标签叫段落标签，一对p标签要占一行，多个p标签之间有换行。

<p>有人曾经这样说过：“对自己生命的来源和基础浑浑噩噩，
便是最大的蒙昧和无知。”
</p>

3、br标签
标签用于换行，它是一个独立的标签，不需要闭合

    1. 点击进入 插件 主页，并点击，<br>Download Extension下载 插件 ， 插件 后缀名为.vsix <br>
    2. 将 插件 放入VS Code安装目录的bin文件夹下<br>

4、hr标签
hr标签也是一个独立的标签，它是在页面中画一条水平实线

<hr>

效果如下

>hr有以下属性

size：用于指定水平线的粗细，值越大越粗
- width：用于指定水平线的宽度，值越大越宽
- noshade：设置没有阴影
- color：给水平线指定颜色
- align：用于指定水平线的对齐方式有： left center right

5、pre标签
这个标签叫预打印标签，使用它可以显示出我们在html页面中书写的原样格式

<pre>
                床前明月光，            
                疑似地上霜。
                举头望明月，
                低头思故乡。
</pre>

6、div标签

它是一个窗口标签，一般用于在页面中存放另外的标签。

div可以嵌套使用

<div>
        哈哈哈哈哈哈哈哈哈哈<div>也可以哈哈哈哈</div>
</div>

7、span标签
这是一个行内标签，一般用于定义一些不需要宽度和高度的内容。

<span>哈哈</span><span>咳咳</span><span>可以</span>

8、img标签
这个标签的作用是插入图片的链接

<img src="images/h.webp" alt="图片不显示，可能是路径问题" width="300" height="200" title="我是图片1" border="5">

> img标签有以下属性

src：用于指定图片的路径
alt：用于指定当图片不能正常显示时的一个提示信息
width：指定图片显示宽度
height：指定图片显示高度
title：用于当鼠标移到图片上时显示的提示信息，一般用于搜索引擎优化
border：指定图片边框粗细
align：指定图片对齐方式

9、多媒体标签

video标签

 <video src="" autoplay controls loop></video>

通过src属性来指定视频的地址 autoplay 属性来指定自动播放
audio 标签

<audio src="media/snow.mp3" autoplay></audio>

10、列表标签

a、无序列表

<ul type="square">
    <li>重庆</li>
    <li>北京</li>
    <li>上海</li>
</ul>

b、有序列表

<ol>
        <li>哈哈</li>
        <li>哦好</li>
        <li>略略</li>
        <li>嗯哼</li>
        <li>怎么</li>
</ol>

c、带标题的列表

<dl>
        <dt>四个直辖市</dt>
        <dd>重庆</dd>
        <dd>上海</dd>
        <dd>北京</dd>
        <dd>天津</dd>
</dl>(可以嵌套)

11、strong标签
可以加粗文字

<strong>哈哈哈哈哈哈</strong>

12、标题标签

<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>

二、table（表格）标签

定义一个表格标签我们需要用到table、tr、td
这是一个三行三列的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签的使用</title>
</head>
<body>
    <table width="700" border="1" cellpadding="0" cellspacing="0">
        <caption>表格标题</caption>
        <tr align="center">
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td width="100">刘备</td>
            <td>3</td>
        </tr>
        <tr align="center" >
            <td>4</td>
            <td>关羽</td>
            <td>6</td>
        </tr>
        <tr align="center">
            <td>7</td>
            <td>张飞</td>
            <td>9</td>
        </tr>

    </table>
</body>
</html>

> table还有以下几个子标签：

caption：用于定义表格的标题
thead：用于定义表头部分
tbody：用于定义表体部分
tfoot：用于定义表尾部分
tr：用于定义表格的一行
th：用于定义一个单元格，它的特点是内容加粗且居中显示
td：用于定义一个单元格
----td 标签有几个属性需要说明：
colspan：用于定义跨列操作，也就是合并多个列；
rowspan：用于定义跨行操作，也就是合并多个行

> table标签有以下几种属性：

width：用于指定表格的宽度，单位是像素
border：用于定义表格的边框，值的类型是数字，而是一个正数，值越大边框越粗
cellpadding：用于定义单元格的内边距，即单元格中的内容也单元格的边之间的距离
cellspecing：用于定义单元格的外边距，即单元格与单元格之间的距离
align：用于定义表格的对齐方式

三、form（表单）标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form表单标签</title>
</head>
<body>
    <!--
        在定义表单时，通常就定义action和method
    -->
    <form name="form1" id="form1" action="http://www.baidu.com" method="get" enctype="application/x-www-form-urlencoded">
       <!--文本输入框，重点-->
        <p><input type="text" name="username" value="" placeholder="请输入用户名" size="20" maxlength="6"></p>
       <!--密码输入框，重点-->
       <p><input type="password" name="password" placeholder="请输入密码"></p>
       <!--邮件格式输入框，了解-->
       <p><input type="email" name="email" placeholder="请输入邮箱地址"></p>
       <!--日期控件输入框，次重点-->
       <p><input type="date" name="date" placeholder="请输入日期" size="20"></p>
       <!--时间控件输入框，了解-->
       <p><input type="time" name="time" placeholder="请输入时间"></p>
       <!--电话输入框，了解-->
       <p><input type="tel" name="phone" placeholder="请输入手机号"></p>
       <!--数据输入框，了解-->
       <p><input type="mumber" name="age" placeholder="请输入年龄"></p>
       <!--普通按钮，次重点--> 
       <p><input type="button" name="btn" value="普通按钮"></p>
       <!--提交按钮，重点-->
       <p><input type="submit" name="submit" value="提交"></p>
       <!--重置按钮，重点-->
       <p><input type="reset" name="reset" value="取消"></p>
       <!--图片按钮，它也是提交按钮的一种，了解-->
       <p><input type="image" src="images1/x.jpg" width="100"></p>
       <!--单选框，重点-->
       <p><input type="radio" name="gender" value="男" checked="">男 <input type="radio" name="gender" value="女">女 </p>
       <!--多选框，重点-->
       <p><input type="checkbox" name="hobby" value="看书" >看书
       <input type="checkbox" name="hobby" value="游戏" >游戏
       <input type="checkbox" name="hobby" value="电影" >电影
       <input type="checkbox" name="hobby" value="编码" >编码</p>

       <!--文本输入域，重点-->
       <p>
        <textarea name="intro" rows="10" cols="40"></textarea>
       </p>
       <!--下拉列表，重点-->
       <p>
       <select name="province" multiple size="2">
        <option>请选择</option>
        <option value="重庆">重庆</option>
        <option value="北京">北京</option>
        <option value="天津">天津</option>
        <option value="上海">上海</option>
       </select>
    </p>
         <!-- 文件上传 -->
        <input type="file" name="f">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    
    </form>      
 </html>

> 文本输入框的属性：

name：用于表单提交是把数据提交到后端
id：给这个输入框一个唯一值，一般是用于 JavaScript来获取它时所使用
value：它代表是这个输入框所输入的值
size：用于指定这个输入框的长度，不推荐使用，后续会用 CSS 来控制
maxlength：用于指定这个输入框所能输入值的最大的长度
placeholder：用于指定在输入框中没有值是的提示信息，它是H5的属性

> > 单、多选框属性：
（单选框也是使用 input 标签，但它的 type 属性的值为 radio，它一般用于多个值中只能选择一个值的情况。如，姓别）