html学习心得

最新推荐文章于 2022-02-20 22:54:03 发布

仟仟千千芊芊

最新推荐文章于 2022-02-20 22:54:03 发布

阅读量242

点赞数

文章标签： html

本文链接：https://blog.csdn.net/redciel/article/details/115455595

版权

文章目录

html学习心得
一·标题
二·图片
三·表格
四·列表
五·表单
六·总结

html学习心得

一·标题

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon"href="favorite.ico" type="image/x-icon">
        <title>taylor swift</title>
        </head>
        <body>
            <h1>blank space</h1>
            <p>1989</p>
        </body>
        </html>

在这里插入图片描述
从这张图可以看到自己及设置的标签，标题以及内容。里面的每一个元素在代码中的呈现方式都是由开始标签和结束标签包围的。他们都是成对出现的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon"href="favorite.ico" type="image/x-icon">
        <title>taylor swift</title>
        </head>
        <body>
           
            <h1>1989</h1>
            <p>blankspace</p>
            <p>style<br>new romantic</p>
             <hr>
            <!-- 输入框 -->
        </body>
        </html>

在这里插入图片描述

首歌的名字嵌入进去的，所以不同。我还加入了一个hr的元素，可以看到有一条下划线。可以看到，第一个是直接输入的歌曲名，第二个是加入了空元素的两首歌曲名，发现第二首和第三首歌曲之间的距离明显比第一首和第二首之间小。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon"href="favorite.ico" type="image/x-icon">
        <title>taylor swift</title>
        </head>
        <body>
           
            <h1>1989</h1>
            <p>blankspace</p>
            <p>style<br>new romantic</p>
             <hr>
            <!-- 输入框 -->
            <h2>reputation</h2>
            <p>look what made me do</p>
            <p>ready for it</p>
            <hr>
        </body>
        </html>

在这里插入图片描述
这是添加了二级标题后的界面。可以看到里面出现了两张专辑并列的名字，它们标题的大小是一样的。最多可以添加六个标题。HTML 提供了从大到小6级标题，分别是：

~

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon"href="favorite.ico" type="image/x-icon">
        <title>taylor swift</title>
        </head>
        <body>
           
            <h1>1989</h1>
            <p>blankspace</p>
            <p>style<br>new romantic</p>
             <hr>
            <!-- 输入框 -->
            <h2>reputation</h2>
            <p>look what made me do</p>
            <p>ready for it</p>
            <hr>
            <img src="picture/ts1.png" alt="MDB Logo" width="500" height="200">
        </body>
        </html>

二·图片

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形
在这里插入图片描述
我们可以看到网页中插入了一图片，他的大小都是由自己设置的。

三·表格

有时，页面的内容需要用表格来进行呈现。我们使用

等标签即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon"href="favorite.ico" type="image/x-icon">
        <title>taylor swift</title>
        </head>
        <body>
           
            <h1>1989</h1>
            <p>blankspace</p>
            <p>style<br>new romantic</p>
             <hr>
            <!-- 输入框 -->
            <h2>reputation</h2>
            <p>look what made me do</p>
            <p>ready for it</p>
            <hr>
            <img src="picture/ts1.png" alt="MDB Logo" width="500" height="200">
            <table>
                <tr>
                  <th>ablum</th>
                  <th>year</th>
                </tr>
                <tr>
                  <td>taylor swift</td>
                  <td>2006</td>
                </tr>
                <tr>
                    <td>fearless</td>
                    <td>2008</td>
                  </tr>
                  <tr>
                    <td>speak now</td>
                    <td>2010</td>
                  </tr>
                  <tr>
                    <td>red</td>
                    <td>2012</td>
                  </tr>
                  <tr>
                    <td>1989</td>
                    <td>2014</td>
                  </tr>
                  <tr>
                    <td>reputation</td>
                    <td>2017</td>
                  </tr>
              </table>
        </body>
        </html>

在这里插入图片描述
我在这里插入了一个表格·

四·列表

在这里插入图片描述

<h2>1989</h2>
            <ul>
              <li>welcome to new york</li>
              <li>blank space</li>
              <li>style</li>
              <li>out of the woods</li>
              <li>all you had to stay</li>
              <li>shake it off</li>
              <li>i wish you would</li>
              <li>how you get the girl</li>
              <li>this love
              <li>i knew places</li>
              <li>clean</li>
              <li>wonderland</li>
              <li>you are in love</li>
              <li>new romantics</li>
            </ul>

我将原来的文本格式换成了列表的形式，可以看到变化

五·表单

当网站需要获取我们的一些信息如：用户名、密码、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。

在这里插入图片描述

 <form>
                <!-- 文本框，注意有 placeholder 提示符 -->
                用户名：<br>
                <input type="text" name="name" placeholder="请输入用户名"><br>
                <!-- 密码框 -->
                密码：<br>
                <input type="password" name="ps" placeholder="请输入密码"><br>
                年龄：<br>
                <!-- 数字输入框，注意 min 和 value 属性-->
                <input type="number" name="age" min="12" value="18"><br>
                <!-- 单选按钮, 注意 checked 属性 -->
                性别：<br>
                <input type="radio" name="gender" value="male" checked> 男<br>
                <input type="radio" name="gender" value="female"> 女<br>
                <input type="radio" name="gender" value="other"> 其它<br>
                <!-- 下拉列表，注意 selected 属性 -->
                年级：<br>
                <select name="party">
                  <option value="D">初中</option>
                  <option value="R" selected>高中</option>
                  <option value="N">大学</option>
                </select><br>
                <!-- 多选框 -->
                您有最喜欢她的哪一张专辑：<br>
                <input type="checkbox" name="album1" value="fearless"> fearless<br>
                <input type="checkbox" name="album2" value="speak now" checked> speak now<br>
                <input type="checkbox" name="album3" value="red"> red<br>
                <input type="checkbox" name="album4" value="1989"> 1989<br>
                <!-- 日期选择器 -->
                您的工作日期：<br>
                <input type="date"><br>
                <!-- 文件选择器 -->
                上传您的照片:<br>
                <input type="file" name="photo"><br>
                <!-- 文本输入区域，注意 rows 和 cols 属性 -->
                您的建议：<br>
                <textarea name="message" rows="5" cols="30">
                  The cat was playing in the garden.
                </textarea><br><hr>
                <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
                <input type="submit" value="提 交">
                <input type="reset" value="重 置">
              </form>

六·总结

以上就是大概的html的运用方法，表格，图片，链接，等等，一个大概的框架就搭好了。

仟仟千千芊芊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习心得

文章目录html学习心得html学习心得<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="shortcut icon"href="favorite.ico" type="image/x-icon"> <title>taylor swift</title> </head
复制链接

扫一扫