前端学习day02--HTML

最新推荐文章于 2024-09-09 22:16:15 发布

W_jiaying

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量114

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/W_Chelsea/article/details/114822586

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>name</td>
            <td>age</td>
            <td>sex</td>
        </tr>
        <tr>
            <td>tom</td>
            <td>18</td>
            <td>boy</td>
        </tr>
        <tr>
            <td>jerry</td>
            <td>20</td>
            <td>boy</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

表头单元格标签

tablehead 标签：加粗居中显示
将上述代码中的标签改成
效果：
在这里插入图片描述

表格属性

要写到表格标签table中去

<table align="left" border="1" cellpadding="20" cellspacing="0" width="500" hight="250">
...
</table>

align:单元格在网页中的位置
border:是否拥有边框，“1”有，“ ”没有
cellsapcing :单元格之间的空隙
cellpadding:内部文字与单元格之间的空隙

表格结构标签

表格：头部+主体

合并单元格

两种方式：跨行合并（rowspan），跨列合并(colspan)
目标单元格：
跨行：最上测单元格为目标单元格
跨列：最左侧
步骤：
1.找到目标单元格，在中添加合并格数：
2.删除被合并的单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border = "1" cellspacing = "0">
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
                <th>sex</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>tom</td>
                <td colspan="2">18</td>
                
            </tr>
            <tr>
                <td>jerry</td>
                <td>20</td>
                <td>boy</td>
            </tr>
            <tr>
                <td>bob</td>
                <td>24</td>
                <td>girl</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述

列表标签

列表分为三类：无序列表，自定义列表，有序列表

无序列表

<ul>
	<li>内容1</li>
	<li>内容2</li>
	...
</ul>

1.无序列表中的内容没有顺序
2.< u l>中只有< li >
3.< li >中可以放其他元素

<ul>
        <li>
            小狼
        </li>
        <li>
            小樱
        </li>
        <li>
            知事
        </li>
</ul>

在这里插入图片描述

自定义列表

自定义列表标签

<dl>
	<dt>名词0</dt>
	<dd>名词解释1</dd>
	<dd>名词解释2</dd>
	...
</dl>

< dl >中只能由< dt >,< dd >

有序列表

有序列表标签

<ol>
        <li>
            小狼
        </li>
        <li>
            小樱
        </li>
        <li>
            知事
        </li>
</ol>

效果：
在这里插入图片描述

表单标签

表单的目的：收集用户信息
构成：表单域，表单控件，提示信息

表单域

包含表单元素的区域

<form action="url地址" method="提交方式" name="表单域的名字">
</form>

表单控件（表单元素）

< input >标签

单标签

<form target="www.baidu.com" method="GET">
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="9"> <br >
        密码：<input type="password" name="password"><br>
        性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <br >
        兴趣爱好：睡觉<input type="checkbox" checked="checked"> 吃饭<input type="checkbox"> 玩游戏<input type="checkbox"> <br >
        <input type="submit" value="免费注册">
        <input type="reset" value="重置"><br >
        <input type="file" value="上传头像">
    </form>

属性：
name：表单元素的名字，要求单选按钮和复选框有相同的名字。
value：规定input元素的名称。
value和name主要是给后台人员使用。
checked：单选按钮和复选框可以设置此属性，打开时默认选中。
submit:把表单数据发送到服务器
reset：恢复表单默认设置
button：点击按钮
file：提供文件上传

< label >标签

为input元素定义标注
与input一起使用

<label for="关联词">选中的文字</label> <input type="" id="关联词">

< select >标签

select中至少包含一对选项
在option中属性select=“”selected“，打开页面默认选中。

<select>
            <option>a</option>
            <option>b</option>
            <option>c</option>
</select>

< textarea >标签

输入文本的区域

<textarea>默认文字</textarea>

困死我了！！！！总算是把HTML学下来了。。。虽然简单，但也太琐碎了吧。。

我们CSS见！

W_jiaying

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习day02--HTML

标签表格标签1.表格的作用用于显示，展示数据，增强数据可读性。2.表格的语法<table> <tr>//行 <td>单元格内文字</td>//一行中的单元格 ... </tr> ...<table>例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
复制链接

扫一扫