HTML基础语法

LUSAIQUN637

于 2024-03-24 15:26:44 发布

阅读量684

点赞数 25

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

本文链接：https://blog.csdn.net/weixin_64829255/article/details/136987613

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.HTML基本骨架：

html：整个网页

head：网页头部，存放给浏览器看的代码，例如CSS

body：网页主体，存放给用户看的代码，例如图片、文字

title：网页标题（选项卡的名字）

（在VS中快速生成基本骨架的方法：在HTML文件（.html）中，!（英文）配合Enter/Tab键）

2.注释：

在VS中添加/删除注释的快捷键：Ctrl+/

3.标题标签：

h1~h6（双标签）

4.换行和水平线单标签

换行：<br>

水平线<hr>

5.文本格式化标签（双标签）

6.图片标签

<img src=”图片的URL”>

src用于指定图像的位置（图像的位置可以用”./”开头做索引，有提示功能）和名称，是<img>的必须属性

图片标签img的属性：（属性之间用空格隔开）

7.按路径查找文件

eg：查找当前文件夹中的1.jpg

<img src=”./1.jpg”>

查找当前文件夹的上级文件夹中的3.jpg

<img src=’../3.jpg’>

8.超链接

跳转到百度网页（填百度的URL）

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

跳转打开本地文档

<a href=”./html学习”>html学习</a>

实现链接跳转的时候打开一个新窗口：target=”_blank”

<a href=”./html学习” target=”_blank”>html学习</a>

当还没确定好跳转到哪个URL时可采用空链接”#”：

<a href=”#”>空链接</a>

9.音频标签

<audio src=”音频的URL”></audio>

音频标签audio的属性：(如果属性名和属性值完全一样，可以简写为一个单词)

10.视频标签

<video src=”视频的URL”></video>

视频标签video属性：（注意muted和autoplay要同时出现才能起作用）

11.列表、表格、表单

11.1列表：（无序列表、有序列表、定义列表）

11.1.1无序列表：

作用：布局排列整齐的不需要规定顺序的区域

注意：ul标签里面只能包裹li标签

li标签里面可以包裹任何内容

11.1.2有序列表：

作用：布局排列整齐的需要规定顺序的区域

注意：ol标签里面只能包裹li标签

li标签里面可以包裹任何内容

11.1.3定义列表：

注意：dl标签里面只能包裹dt和dd标签

dt和dd标签里面可以包裹任何内容

11.2表格-基本用法

11.2.1基本表格：

标签：table嵌套tr，tr嵌套td/th

注意：表格默认没有边框线，使用border属性可以为表格添加边框线

eg：（有几行就加几个tr）

<table border="1">

                <tr>

                    <th>姓名</th>

                    <th>语文</th>

                    <th>数学</th>

                    <th>总分</th>

                </tr>

                <tr>

                    <td>张三</td>

                    <td>99</td>

                    <td>100</td>

                    <td>199</td>

                </tr>

                <tr>

                    <td>李四</td>

                    <td>98</td>

                    <td>100</td>

                    <td>198</td>

                </tr>

                <tr>

                    <td>总结</td>

                    <td>全市第一</td>

                    <td>全市第一</td>

                    <td>全市第一</td>

                </tr>

        </table>

11.2.2表格结构标签

（在浏览器中见不到效果，只是在读代码时结构更清晰）

eg：

<table border="1">

            <thead>

                <tr>

                    <th>姓名</th>

                    <th>语文</th>

                    <th>数学</th>

                    <th>总分</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>张三</td>

                    <td>99</td>

                    <td>100</td>

                    <td>199</td>

                </tr>

                <tr>

                    <td>李四</td>

                    <td>98</td>

                    <td>100</td>

                    <td>198</td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                    <td>总结</td>

                    <td>全市第一</td>

                    <td>全市第一</td>

                    <td>全市第一</td>

                </tr>

            </tfoot>

        </table>

11.2.3合并单元格

（将多个相同内容的单元格合并为一个单元格）

合并单元格步骤：

①明确合并的目标

②保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并，保留最上单元格，添加属性rowspan

跨列合并，保留最左单元格，添加属性colspan

③删除其他单元格

eg：

<table border="1">

            <thead>

                <tr>

                    <th>姓名</th>

                    <th>语文</th>

                    <th>数学</th>

                    <th>总分</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>张三</td>

                    <td>99</td>

                    <td rowspan="2">100</td>

                    <td>199</td>

                </tr>

                <tr>

                    <td>李四</td>

                    <td>98</td>

                    <td>198</td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                    <td>总结</td>

                    <td colspan="3">全市第一</td>

                </tr>

            </tfoot>

        </table>