HTML 基本语法

最新推荐文章于 2024-07-20 22:13:44 发布

杜若~

最新推荐文章于 2024-07-20 22:13:44 发布

阅读量72

点赞数

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

本文链接：https://blog.csdn.net/weixin_42647964/article/details/118754639

版权

前端入门专栏收录该内容

16 篇文章 0 订阅

订阅专栏

表格基础：

创建一个简单的表格至少有三部分组成：<table>、<tr>、<td> 标签

table：表格，定义是的整个表格的大结构
- border：添加边框（表格的单元格之间有默认的空隙，会导致双边线框）
th：表头单元格，在内容中替换了 td 的位置（上表头）
tr：表格行，定义的是表格由多少行组成
td：表格数据，表格单元格，定义每一行内部的单元格

合并单元格：

表格的单元格可以进行合并，通过 <th> 和 <td> 的两个属性进行合并设置

rowspan：跨行合并，上下的合并
colspan：跨列合并，左右的合并
属性值都为数字，表示跨几行，或者跨几列进行合并

制作技巧：

先列出所有的行 <tr>，以最小的单元格为标准
再添加每一行的 <td> 或者 <th> 单元格
划分单元格所在行时，顶边对齐的属于同一行
将所有的行和列写完后，再查看哪个单元格需要跨行或者跨列，属性值的个数要参考最小的单元格

<!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>
    <style>
        td {
            width: 100px;
        }
    </style>
</head>

<body>
    <table border="1" style="border-collapse: collapse; text-align: center;">
        <tr>
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
        <tr>
            <td>4</td>
            <td rowspan="2">5</td>
            <td>6</td>
            <td rowspan="2">7</td>
        </tr>
        <tr>
            <td rowspan="2">8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>11</td>
            <td colspan="2">12</td>
            <td>13</td>
        </tr>
    </table>
</body>

</html>

表格分区：

表格标题、表格头部、表格主体、表格页脚

分区标签：

<table> 内部最直接的子级包含四个分区标签，他们都是双标签

caption：表格的标题，内部书写标题文字
thead：表格的头部
tbody：表格的主体
tfoot：表格的页脚
不论书写的顺序怎样颠倒，浏览器中的加载顺序都是自动按照 caption，thead，tbody，tfoot 执行的

制作技巧

先书写大分区标签结构
填充每个分区的内部内容
如果存在单元格合并，则进行合并单元格

<!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>
    <style>
        td {
            width: 180px;
        }

        th {
            color: brown;
        }
    </style>
</head>

<body>
    <table border="1" style="border-collapse: collapse;">
        <caption>各地区固定资产投资情况</caption>
        <thead>
            <tr>
                <th rowspan="2">地区</th>
                <th colspan="2">按总量分</th>
                <th colspan="2">按比重分</th>
            </tr>
            <tr>
                <th>自年初累计（亿元）</th>
                <th>比去年同期增长（%）</th>
                <th>自年初累计（%）</th>
                <th>去年同期（%）</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>全国</td>
                <td>123456.90</td>
                <td>9.6</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>123456.90</td>
                <td>9.6</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>123456.90</td>
                <td>9.6</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>123456.90</td>
                <td>9.6</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>123456.90</td>
                <td>9.6</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

表单的了解和制作

作用：收集用户的输入信息
组成：表单域、提示信息、表单控件（表单元素）

功能：

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过定义处理表单数据所使用的程序的 url 地址，以及数据来提交到服务器。如果不定义表单域，表单中的数据就无法传输到后台服务器
提示信息：用于提示用户进行填写和操作的说明性文字
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框等

表单域：

<form>，该标签是一个功能性的标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个 <form> 之内

属性：

通过对应的属性规定提交数据的方法和提交的位置

action：指定接收并处理表单数据的服务器的 URL 地址
method：用于设置表单数据的提交方式（get/post）
name：规定表单的名称

表单元素

<input>

最重要的表单元素，本身相当于一个特殊的文本，需要通过标签属性实现各种功能

type：

决定了 input 标签的形态

text（单行文本输入框）：定义提供用户输入的单行文本的输入框，不能输入多行文字，常用 value 属性定义默认输入文字
password（密码输入框）：定义用户输入的密码框，内部的字符会被做掩码处理（显示为星号或者实心圆）
radio（单选框）：定义提供用户点击选择的单选框，单选框一般会成组出现，多个单选框组成一组的选择情况，同一组单选框必须是互斥的关系，通过给同一组单选框都设置相同的 name 属性值实现，使用 checked 属性设置默认选中属性
checkbox（复选框）：定义提供用户点击选择的多选框，复选框允许用户在有限的数量中选择零个或多个实现，同一组复选框最好也设置相同的 name 属性，使用 checked 属性设置默认选中属性
按钮：
- button（普通按钮）
- reset（重置按钮）
- submit（提交按钮）
- image（图片按钮）
file（上传）：定义文件上传按钮，可以提供用户选择本地文件进行上传到服务器，设置属性 multiple 后可以多选

<textarea>

制作可以输入多行文本的区域，该标签为双标签，本身相当于一个特殊的文字，在双标签中间书写默认内容

属性

rows：行，属性值是数字，表示文本框显示的最大行数，如果超过了行数，会被隐藏并显示滚动条
cols：列，表示每一行显示的最大子节数（每个汉字是两个子节）

下拉菜单：

一下标签均为双标签，文本级标签

<select>：

选择，表示定义下拉菜单的整体结构

<option>：

选项，表示定义下拉菜单的每一项

<optgroup>：

双标签，将分组中每组的 option 包裹在双标签之内

属性：

label：表示给本组添加一个分组标签名，分组的标签是不可以被点击选择的

下拉菜单中如果选项变得复杂，可以将 option 进行分组管理

属性

selected：<option> 设置该属性，则对应的 option 为默认选中项

绑定效果：

所有的表单元素都可以通过绑定其他内容并且配合 <label> 标签作用去扩大触发点击范围

<label>：

帮助表单元素定义标注（标记）：如果将表单控件与提示内容 <label> 绑定后，当用户鼠标点击 <label> 内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上

绑定方法1：

给相应的表单元素设置 id 属性
将需要绑定的其他内容用 <label> 包裹
给 <label> 标签设置 for 属性，属性值为绑定的表单元素的 id 值

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

绑定方法2：

将表单元素和需要绑定的内容用一个 <label> 包裹起来

<label><input type="radio" name="sex"> 女</label>

了解字符实体

在普通文字书写时，有一些特殊的符号不能直接书写（如：连续的空格），或者符号具有特殊的功能也不能连续书写（例如：<> 符号）
可以使用一些 HTML 提取预留好的替换字符进行书写，这些替换字符叫做字符实体（如： ）
```
<textarea cols="30" rows="10">200字的自我介绍&gt;</textarea> // 200字的自我介绍>
```

规则和建议：

所有的字符实体和实体编号都是以 & 开头，以；结尾的
实体名称区分大小写
浏览器可能并不支持所有的实体名称（对实体数字的支持却很好）

杜若~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML 基本语法

表格基础：创建一个简单的表格至少有三部分组成：<table>、<tr>、<td> 标签table：表格，定义是的整个表格的大结构border：添加边框（表格的单元格之间有默认的空隙，会导致双边线框）th：表头单元格，在内容中替换了 td 的位置（上表头）tr：表格行，定义的是表格由多少行组成td：表格数据，表格单元格，定义每一行内部的单元格合并单元格：表格的单元格可以进行合并，通过 <th> 和 <td> 的两个属性进行合
复制链接

扫一扫