小白的HTML求索之路

最新推荐文章于 2024-08-14 10:15:39 发布

Mirai1124

最新推荐文章于 2024-08-14 10:15:39 发布

阅读量92

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/m0_50869511/article/details/109320803

版权

Let’s start with the basics！

<p>content<p>

p：tag
content：中间包裹的文本内容

<!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>
    <!-- 注释内容-->
    <h1>title</h1> //h1-h6标题 从大到小
    <p>paragraph1</p>
    <p>paragraph2</p>
</body>
</html>

head：包含不在网页中渲染的部分
body：网页渲染的部分

块级元素与内联元素（Inline and Block Level Element）
块级元素：
1.在页面以块的形式展现
2.出现在新的一行
3.占全部宽度

<div>
<h1>-<h6>
<p>

内联元素：
1.通常在块级元素内
2.不会导致文本换行
3.只占必要的部分宽度

<a> //超链接
<a href=url target="_blank">xxx</a> //新建一个网页，跳转到url
<img>
<em> //斜体
<strong> //加粗

列表：
无序列表：
<ul>
    <li> list item 1 </li>
</ul>
有序列表：
<ol>
    <li>xx<li>
</ol>

表格：
    <table>
        <thead>
            <tr> //table row 行的形式
                <th>姓</th> //可以看到表头加粗了
                <th>名</th>
                <th>年龄</th>
                <th>Team</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>周</td>
                <td>泽楷</td>
                <td>16</td>
                <td>Samsara</td>
            </tr>
        </tbody>
    </table>

在这里插入图片描述

表单：
    <form action="form.js" method="POST">
        <div>
            <label>first name</label>
            <input type="text" name="firstname" placeholder="Enter First Nmae">
           
        </div>
        <input type="submit" name="submit" value="Submit">
    </form>

在这里插入图片描述
name用于提交表单数据，提交表单需要按钮；

<br> //换行
<hr> //加水平线

注释：
    <p><abbr title="这是一段注释">周</abbr>泽楷</p>

在这里插入图片描述

引言：
    <p><cite>周泽楷</cite>by me</p>

在这里插入图片描述
11.12更新

表格：

thead-表格头部
tbody-表格主体
tr-行标签
td-单元格标签
cellspacing-表格边框内部距离
cellpadding-单元格内部的距离

目标单元格（合并代码）：
1.先确定是跨行还是跨列合并
2.找到目标单元格。写上合并方式=合并的单元格数量
3.删除多余的单元格

rowspan-跨行合并
colspan-跨列合并

    <table align="center" border="1" width=600 height=300 cellspacing=0>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

示例：
在这里插入图片描述

    <table align="center" border="1" width=600 height=300 cellspacing=0>
        <tr>
            <td></td>
            <!-- 1.第一行第二列第三列合并 -->
            <td colspan="2"></td>
            <!-- 2.删除第一行第三列的单元格，因为向右合并把它挤出去了，它是多余的-->
            <!-- <td></td> -->
        </tr>
        <tr>
            <!-- 1.第一列第二行向下合并 -->
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- 2.删掉第三行第一个，因为向下合并把它挤到右边去了-->
            <!-- <td></td> -->
            <td></td>
            <td></td>
        </tr>
    </table>

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

无序列表：

<ul>里面只能嵌套<li>

有序列表：

<ol>里面只能嵌套<li>

自定义列表：

dl-框

    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>

在这里插入图片描述

表单：

action-表单提交到哪里
method-GET/POST
name-区分表单

    <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    </form>

表单控件（表单元素）：
1.input-输入表单元素用于收集用户信息
2.select-下拉表单元素
3.textarea-文本域元素

<label>标签：关联标签，例如，点它（图片、文字等）就可以选择上，增加用户体验。

input：

    <form action="reg.jsp" method="POST" name="reg" align=center>
        <!-- text默认宽度为20个字符 -->
        姓名：<input type="text" value="请输入你的姓名"><br><br>
        密码：<input type="password"><br><br>
        <!-- radio标签起相同的名字，表示这是同一组，就是多选一；如果不加限制，就都可以选择 -->
        <!-- checked表示默认显示选择哪一个 -->
        性别：<input type="radio" name="sex" value="男"  id="nan"> <label for="nan"><img src="" alt="">男</label>
        <input type="radio" name="sex" checked="checked" value="女" id="nv"> <label for="nv"><img src="" alt="">女</label>
        <br><br>
        爱好：<input type="checkbox" value="游泳">游泳
        <input type="checkbox" value="登山">登山
        <input type="checkbox" value="旅游">旅游
        <input type="checkbox" value="阅读">阅读
        <br><br>
        籍贯：
        <select name="" id="">
            <option value="">浙江</option>
            <option value="">上海</option>
            <option value="">江苏</option>
            <option value="">黑龙江</option>
            <option value="">北京</option>
        </select>
        <br><br>
        我的简介：
        <!-- 每行最多输入50个字符 -->
        <textarea name="" id="" cols="50" rows="10">
            请介绍您的经历等
        </textarea>
        <br><br>
        <input type="submit" value="免费注册">
        <br><br>
    </form>

在这里插入图片描述

Mirai1124

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白的HTML求索之路

Let’s start with the basics！<p>content<p>p：tagcontent：中间包裹的文本内容<!DOCTYPE html> //解释文档的类型<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫