HTML学习

成七七

已于 2022-10-08 14:49:25 修改

阅读量190

点赞数

分类专栏：前端文章标签： html 前端

于 2022-10-08 13:35:34 首次发布

本文链接：https://blog.csdn.net/kimuin/article/details/127204052

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.结构

HTML代码开始标签和结束标签构成，成对出现，标签之间可以嵌套

整体这些标签就构成了一个树型结构，称为DOM树(Document Objective Model 文档对象模型)

html 标签是整个 html 文件的根标签(最顶层标签)

head 写页面的属性

body页面上显示的内容

title 页面的标题

2.标签用法

2.1标题h1-h6

h1-h6

<body>
<h1>这是一级标题</h1>
</body>

数字越小，里面的内容，就越粗越大，

数字越大，里面的内容，就越细越小。

2.2段落p

<body>
<p>这是一段段落</p>
</body>

p 自占一行,但不能缩进行，因为HTML只是一个“骨架”，补充细节需要css

p标签之间，是有段落间距的

2.3换行标签 br

<body>
<p>这是一<br>行</p>
</body>

br标签表示换行，并且是一个单标签

2.4 格式化标签

<body>
<strong>加粗</strong>
<s>加粗</s>

<em>倾斜</em>
<e>倾斜</e>

<del>删除线</del>
<d>删除线</d>

<ins>下划线</ins>
<i>下划线</i>

</body>

格式化标签为行级元素，标签，段落，a标签为块级元素

2.5图片标签元素 img

img是一个单标签 <img>

img里面可以写很多的属性

value一般使用 “ ” 来引起来，一个标签，可以有多个属性

src属性(图片所在的具体位置)

绝对路径:：C:\..\png

相抵路径.：./png

网址：www.

alt属性，替换文本

若图片加载不出，则用文本替代

<img src="./1.png" alt="1">

title属性，提示文本

鼠标放上去会提示文本

width/height属性，控制宽度高度

改变其中一个，另一个会比例缩放

2.6 超链接：a

href 引用其他网址，外链接

href 引用网站内，相对路径，内链接

href 空链接，使用#在href中占位

href 下载链接，href对应的路径是一个文件，就会触发下载（可以使用zip文件）

点击下载链接后，浏览器自动下载

href 网页元素链接

点击网页元素，如图片即可跳转

href 锚点链接，可以快速定位到页面中的某个位置（可以理解为目录）

<a href="https://www.baidu.com">外连接</a>
<a href="1.html">内链接</a>
<a href="#">空链接</a>
<a href="1.rar">下载链接</a>
<a href="https://www.baidu.com"><img src="./1.png" alt="1">网页元素链接</a>
<a href="#1">定位链接</a>
<p id="1">
找到我了！
</p>

2.7 表格标签

表格标签，是一组标签

table：表示整个表格

tr：表示一行

td：表示一列

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

更美观

border：给表格加上边框

th：给表格加上表头，会居中加粗

width/height：给表格设置宽度高度，让表格更美观

<table border="2px" width="200px" height="500">
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>

</table>

cellspacing:去掉单元格间距

<table border="2px" width="200px" height="500" cellspacing="0">
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>

</table>

合并单元格

跨行合并：rowspan="n"

跨列合并：colspan=“n”

要先确定是跨行还是跨列，然后找好目标单元格，最后必须要删除多余的单元格

2.8列表标签

有序列表：ul li （重要）

有序列表：ol li （使用不多）

自定义列表：dl（总标签）、dt（小标题）、dd（围绕标题来说明）（重要）

2.9表单标签

1.form标签和input标签

文本框和密码框（不能换行）

<input type="text"> 
<input type="password">

单选框和复选框

radio：单选框

加上 name属性，可以实现多选一

label：可以实现点击文字也可以，选择到对应框中

（需要注意 labe中for要和input中id一样，才可以将文字和框联系起来）

<body>
    <form>
        <input type="radio" name="A" id="1">
        <label for="1">1</label>
        <input type="radio" name="A" checked="checked" id="2"> 
        <label for="2">2</label>
    </form>
</body>

checkbox：复选框

<body>
    <form>
        <input type="checkbox"> 1
        <input type="checkbox"> 2
        <input type="checkbox" checked="checked"> 3
        <input type="checkbox" id="4"> 
        <label for="4">4</label>
    </form>
</body>

普通按钮、提交按钮、清空按钮、选择

普通按钮

  <input type="button" value="1" onclick="alert('恭喜你成功变强1')">

提交按钮 submit

<form action="test.html">
    <input type="text" name="1">
    <input type="submit" value="提交">
</form>

清空按钮 reset

<form action="test.html">
    <input type="text" name="1">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

选择文件按钮 file

  <input type="file">

2.select标签

使用select表示一个下拉菜单

每个菜单项，是一个option，可以使用selected来表示默认的选项

    <form>
        <select>
            <option>-- 请选择登录方式 --</option>
            <option>QQ</option>
            <option selected="selected">WX</option>
            <option>CSDN</option>
        </select>
    </form>

3.textarea 标签：多行编辑框

input--text文本框，只能输入单行，不能换行和多行输入

而textarea，可以换行和多行输入

     <textarea cols="50" rows="20"></textarea>

2.10无语义标签：div & span

div：默认是一个块级元素（独占一行）

span：默认是一个行内元素（不独占一行）

<body>
    <form>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>
    </form>
</body>

练习

<!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>
    <h1>填写简历信息</h1>
    <table>
        <tr>
            <td>
                姓名
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name="gender" id="1" checked="checked">
                <label for="1">
                    <img src="男.jpg" alt="" width="25px">男
                </label>
                <input type="radio" name="gender" id="2">
                <label for="2">
                    <img src="女.jpg" alt="" width="25px">女
                </label>
            </td>
        </tr>
        <tr>
            <td>
                出生日期
            </td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1998</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                </select>
                <select>
                    <option>--请选择日期--</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>15</option>
                    <option>16</option>
                    <option>20</option>
                </select>
            </td>
        </tr>
 
        <tr>
            <td>
                就读学校
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
 
        <tr>
            <td>
                应聘岗位
            </td>
            <td>
                <input type="checkbox" id="frontend">
                <label for="frontend">前端开发</label>
                <input type="checkbox" id="backend">
                <label for="backend">后端开发</label>
                <input type="checkbox" id="qa">
                <label for="qa">测试开发</label>
                <input type="checkbox" id="op">
                <label for="op">运维开发</label>
            </td>
        </tr>
 
        <tr>
            <td>
                掌握的技能
            </td>
            <td>
                <textarea cols="50" rows="10"></textarea>
            </td>
        </tr>
 
        <tr>
            <td>
                项目经历
            </td>
            <td>
                <textarea cols="50" rows="10"></textarea>
            </td>
        </tr>
 
        <tr>
            <td></td>
            <td>
                <input type="checkbox" id="confirm">
                <label for="confirm">我已仔细阅读过公司的招聘要求</label>
            </td>
        </tr>
 
        <tr>
            <td></td>
            <td>
                <a href="#">查看我的状态</a>
            </td>
        </tr>
 
        <tr>
            <td></td>
            <td>
                <h3>请应聘者确认：</h3>
                <ul>
                    <li>
                        以上信息真实有效
                    </li>
                    <li>
                        能够尽早去公司实习
                    </li>
                    <li>
                        能够接受公司的加班文化
                    </li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>