持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

HTML

基础标签

标签作用

标签	作用	扩展
`<html>`	html页面由一对html标签组成
`<title>`	网页的标题
`<meta>`	设置编码格式	< meta charset="UTF-8>
`<br/>`	换行	该标签是单标签
`<p>`	段落标签
`<img>`	图片标签	src：图片文件的路径 width、height：图片宽高
`<h1>—<h6>`	标题标签
`<ol>`	有序列表	type：显示的类型(A a I i 1) start：从*开始
`<ul>`	无需列表	type：circle空心圆、square正方块

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <title>First website</title>
    <meta charset="UTF-8">
</head>
<body>
    Hello World!<br/>Hello,Sentiment!
    <p>这是第一个段落</p>
    <p>这是第二个段落</p>
    <img src="imgs/WarmJava.jpg" width="50" height="45">
    <h1>只有六级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
    这是ol有序列表：
    <ol type="A" start="2">
        <li>Sentiemnt</li>
        <li>Tana</li>
        <li>Shelter</li>
    </ol>
    这是ul无序列表：
    <ul type="disc">
        <li>Sentiemnt</li>
        <li>Tana</li>
        <li>Shelter</li>
    </ul>
</body>
</html>

效果

在这里插入图片描述

标签作用

标签	作用	扩展
`<u>`	下划线
`<b>`	加粗
`<i>`	斜体
`<sup>`	上标
`<sub>`	下标
`<a>`	超链接	href：连接 target： __blank 在一个新窗口打开 __self本窗口打开

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <title>First website</title>
    <meta charset="UTF-8">
</head>
<body>
    <u>下划线</u><br/>
    <b>粗体</b><br/>
    <i>斜体</i><br/>
    上标<sup>2</sup><br/>
    下标<sub>2</sub><br/>
    5&lt;10 版权&copy;<br/>
    <a href="https://blog.csdn.net/weixin_54902210" target="_blank">Sentimentのblog</a>
</body>
</html>

效果

在这里插入图片描述

table标签

标签	作用	扩展
`<table>`	表格	border：边框线粗细 width：表格宽度 cellspacing：单元格间距 cellpadding：单元格填充
`<tr>`	行	align：center,left,right
`<td>`	列
`<th>`	表头列

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <title>First website</title>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1" width="500" cellpadding="5" cellspacing="0">
        <tr align="center">
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr align="center">
            <td>苹果</td>
            <td rowspan="2">5</td>
            <td>20</td>
            <td>100</td>
            <td><img src="imgs/1.jpg" width="20"></td>
        </tr>
        <tr align="center">
            <td>菠萝</td>
            <td>15</td>
            <td>45</td>
            <td><img src="imgs/1.jpg" width="20"></td>
        </tr>
        <tr align="center">
            <td>西瓜</td>
            <td>6</td>
            <td>6</td>
            <td>36</td>
            <td><img src="imgs/1.jpg" width="20"></td>
        </tr>
        <tr align="center">
            <td>总计</td>
            <td colspan="4">181</td>
        </tr>
    </table>
</body>
</html>

效果

在这里插入图片描述

表单标签

标签	作用	扩展
`<form>`	表单	action：规定当提交表单时向何处发送表单数据。 method：请求方式
`<input>`	输入框	type： text：文本框 password：密码框 radio：单选按钮通过checked设置默认值 checkbox：复选框
`<input>`	提交按钮	type： submit：提交按钮 reset：重置按钮 button：普通按钮
`<select>`	下拉列表	option：下拉列表选项，select设置默认值
`<textarea>`	多行文本框	value值就是结束标签前的内容

HTML基础

HTML

基础标签

table标签

表单标签