前端开发——HTML基础入门

临渊羡鱼、

已于 2023-04-09 21:00:50 修改

阅读量1.5k

点赞数 2

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

于 2023-04-08 19:04:08 首次发布

本文链接：https://blog.csdn.net/m0_74304535/article/details/129992333

版权

html 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

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).文本格式化标签：

b、strong	加粗
u、strong	下划线
i、em	倾斜
s、del	删除线

(5).媒体标签：
1’图片：显示图片使用（img src=“ ” alt=“ ”）单标签，src=“ ./目标图片”，alt=“ ”替换文本，当图片加载不出来时，才显示alt，title=“ ”，当鼠标悬停时显示提示文字。
2’路径：分为绝对路径和相对路径，绝对路径通常从盘符开始、相对路径从当前文件开始出发找目标文件，相对路径

同级	本文件与目标文件在同一文件夹：例如src=“ ./目标图片”
上级	目标文件与本文件所在文件夹在同一文件夹：例如src=“…/目标文件”
下级	目标文件所在文件夹与本文件在同一文件夹中：例如src=“图片名”

3’音频：显示音频使用（audio src=“ ” controls）（/audio）双标签
属性：controls显示播放音频的控件，autoplay自动播放，loop循环播放。（这三个属性在视频标签中同样适用）
4’视频：显示视频使用（video src=“ ” controls）（/video）双标签
(6).链接：（a href=“./目标网页.html”）跳转到那里（/a）作用：从一个网页跳转到另一个网页，target属性控制目标网页的跳转方式。

_self	默认值，跳转后会覆盖原网页
_blank	会在新窗口打开目标网页（保留原网页）

(7).列表标签，
1’无序列表：无顺序之分，（ul）标签只允许包含li标签，li标签表示列表中的每一项，可以包含其他标签。在这里插入图片描述
2’有序列表：明确顺序，（ol）标签只允许包含li标签，li标签表示列表中的每一项，可以包含其他标签。
3’自定义列表：（dl）表示列表整天，只允许包含（dt）/（dd）标签，（dt）/（dd）标签可以包裹任意内容，（dd）会默认显示缩进效果。
(8).表格标签
1’

table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

<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>

相关属性：

属性名	效果
border	边框宽度
width	表格宽度
height	表格高度
以上属性写在table中	参考上图代码块
caption	表格大标题，默认居中写在table内部可参考上图代码块
th	属于表头单元格，默认加粗居中 th替换td
rowspan	跨行合并，垂直合并多行单元格写在td中
colspan	跨列合并，水平合并多列单元格

注意：rowspan属性和colspan属性都遵守保留左上单元格，删除右下单元格的原则。
(8).表单标签
1’input系列

名	type属性值	说明
input	text	文本框，输入单行文本
input	password	文本框，输入密码
input	radio	单选框，多选一
input	checkbox	多选框，多选多
input	file	文本选择，用于上传文件
input	submit	提交按钮
input	reset	重置按钮
input	button	普通按钮，默认无功能

2’属性

属性	作用
placeholder	占位符，用于提示用户输入内容
name	分组，有多个相同name属性值的单选框为一组，每组同时只有一个能选中。
checked	默认选中

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

select	下拉菜单整体
option	下拉菜单中的每一项
selected	默认选中

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的基础知识标签的应用。

临渊羡鱼、

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
前端开发——HTML基础入门

HTML指的是超文本标记语言，它是用来描述网页的一种语言，而非编程语言。HTML使用标签来描述网页，例如：(1).标签名(body)放在中。(body)属于双标签，成对出现。以(body)为开始标签，(/body)为结束标签。内容放在开始标签和结束标签之间。(2).少数标签为单标签，区别与双标签，它只有开始标签。(3).开始标签中有些时候可能会带有属性。
复制链接

扫一扫