【校招VIP】前端开发——HTML基础入门- 校招VIP

转载声明：文章来源https://blog.csdn.net/m0_74304535/article/details/129992333

1，什么是HTML

HTML指的是超文本标记语言，它是用来描述网页的一种语言，而非编程语言。HTML使用标签来描述网页，例如：

(1).标签名(body)放在<>中。(body)属于双标签，成对出现。以(body)为开始标签，(/body)为结束标签。内容放在开始标签和结束标签之间。

(2).少数标签为单标签，区别与双标签，它只有开始标签。

(3).开始标签中有些时候可能会带有属性。

2，HTML主体框架/基本结构

(1).HTML主题分为head和body两部分，head头部放页面属性，body身体放页面显示的内容。

(2).title双标签中放网页标题。例图中标题为“例子”。

(3).标签层次关系有：父子关系、兄弟关系。例如head标签和body标签是html标签的子标签，

而head标签和body标签是兄弟标签。

另：用vscode直接输入！和回车可迅速生成HTML基本框架

(4).注释提高代码可读性，快捷键 ctrl+/可快速生成注释。

3，关于标签

(1).标题标签，通过(h1)到(h6)来定义。

重要性依次递减。

(2).段落标签，通过p标签来定义

(3).介绍两个常用单标签，（br）换行，（hr）出现水平分割线。

(4).文本格式化标签：

(5).媒体标签：

1’图片：显示图片使用（img src=“ ” alt=“ ”）单标签，src=“ ./目标图片”，alt=“ ”替换文本，当图片加载不出来时，才显示alt，title=“ ”，当鼠标悬停时显示提示文字。

2’路径：分为绝对路径和相对路径，绝对路径通常从盘符开始、相对路径从当前文件开始出发找目标文件，相对路径

3’音频：显示音频使用（audio src=“ ” controls）（/audio）双标签

属性：controls显示播放音频的控件，autoplay自动播放，loop循环播放。（这三个属性在视频标签中同样适用）

4’视频：显示视频使用（video src=“ ” controls）（/video）双标签

(6).链接：（a href=“./目标网页.html”）跳转到那里（/a）作用：从一个网页跳转到另一个网页，target属性控制目标网页的跳转方式。

(7).列表标签，

1’无序列表：无顺序之分，（ul）标签只允许包含li标签，li标签表示列表中的每一项，可以包含其他标签。

2’有序列表：明确顺序，（ol）标签只允许包含li标签，li标签表示列表中的每一项，可以包含其他标签。

3’自定义列表：（dl）表示列表整天，只允许包含（dt）/（dd）标签，（dt）/（dd）标签可以包裹任意内容，（dd）会默认显示缩进效果。

(8).表格标签

1’

<body>
    <table>
        <caption>信息表</caption>
        <tr>
            <th>人物</th>
            <th>性格</th>
            <th>结果</th>
        </tr>
        <tr>
            <td>帅哥</td>
            <td>很幽默</td>
            <td rowspan="2">配对成功</td>
        </tr>
        <tr>
            <td>美女</td>
            <td>很可爱</td>
        </tr>
    </table>
</body>
</html>

相关属性：

注意：rowspan属性和colspan属性都遵守保留左上单元格，删除右下单元格的原则。

(8).表单标签

1’input系列

2’属性

3’select下拉菜单标签，（提供多个选择项的下拉菜单控件）双标签

4’textarea文本域标签（可以输入多行文本，常用于网页评论区等）

属性：cols：文本域可见宽度 rows：文本域可用行数

5’label标签（用于绑定内容和表单标签关系）

a.使用label标签把内容如文本包裹起来，在表单标签中添加id属性，label标签for属性中设置对应id属性。

b.直接使用label标签把内容和表单标签一起包裹起来，并删去for属性。

<input type="radio" id="man"><label for="man">男</label> <input type="radio" id="nv"><label for="nv">女</label>
<label><input type="radio" name="sex" checked>男</label> <label><input type="radio" name="sex">女</label>

作用：当点击内容时也可选择上内容所对应的选项。

用以下例图说明以上内容的使用方法：

<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称">
        <br>
        <br>
        密码：<input type="password">
        <br>
        <br>
        性别：<label><input type="radio" name="sex" checked>男</label> <label><input type="radio" name="sex">女</label>
        <br>
        <br>
        所在城市：<select>
            <option>北京</option>
            <option selected>上海</option>
            <option>深圳</option>
        </select>
        <br>
        <br>
        婚姻状况：<input type="radio" name="marry" checked>未婚 <input type="radio" name="marry">已婚 <input type="radio" name="marry">保密
        <br>
        <br>
        喜欢的类型：<input type="checkbox" checked>可爱 <input type="checkbox">性感 <input type="checkbox">御姐 <input type="checkbox">萝莉
        <br>
        <br>
        个人介绍：<br>
        <textarea cols="30" rows="10"></textarea>

以上即为HTML的基础知识标签的应用。