自学前端HTML学习笔记

最新推荐文章于 2024-05-14 23:39:54 发布

caixingzhang

最新推荐文章于 2024-05-14 23:39:54 发布

阅读量34

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_62764364/article/details/134529384

版权

今年专升本到民办本科，今天开始励志学习前端，争取在明年暑假找实习。

以后都会在这里记学习笔记，希望大家监督！
我是跟着B站的视频学习的，之前专科学过html、css和JavaScript的基础，不过现在都忘得差不多的，这个东西还是应该多动手去练一练。

我的学习前端线路是参考的小红书努力的但丁，我是从他在b站发布的暑假实习阶段的视频关注他的，了解了一下前端实习需要做的准备。

一、常见的HTML标签

<h1></h1>.....<h7></h7> 标题标签

<br>换行

<p></p>段落标签

<hr>水平分割线

<ul></ul>无序列表

<ol></ol>有序列表

<li><li>列表项

<dl></dl>自定义列表

<dt></dt> 自定义列表头

<dd></dd>自定义列表内容

<div></div>常用用于组合块级元素

<span></span>常用于包含的文本

<img>图片标签

<a>必须属性为href，是链接的地址

二、案例

<!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>
  </head>
  <body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="500" border="1">
      <tr>
        <td>姓名</td>
        <td>
          <input type="text" />
        </td>
      </tr>
      <!-- 第一行 -->
      <tr>
        <td>性别：</td>
        <td>
          <input type="radio" name="sex" id="nan" /><label for="nan"
            ><img src="未标题-1.png" width="40" /> 男</label
          >
          <input type="radio" name="sex" id="nv" /><label for="nv"
            ><img src="未标题-1.png" width="40" /> 女</label
          >
        </td>
      </tr>
      <!-- 第二行 -->
      <tr>
        <td>生日：</td>
        <td>
          <select>
            <option>--请选择年份--</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
          </select>
          <select>
            <option>--请选择月份--</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
          </select>
          <select>
            <option>--请选择日--</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
          </select>
        </td>
      </tr>
      <!-- 第三行 -->
      <tr>
        <td>所在城市：</td>
        <td>
          <select>
            <option>--请选择所在城市--</option>
            <option>北京</option>
            <option>上海</option>
            <option>南康</option>
          </select>
        </td>
      </tr>
      <!-- 第四行 -->
      <tr>
        <td>婚姻状况：</td>
        <td>
          <input type="radio" name="marry" checked="checked" />未婚
          <input type="radio" name="marry" />已婚
          <input type="radio" name="marry" />离婚
        </td>
      </tr>
      <!-- 第五行 -->
      <tr>
        <td>学历：</td>
        <td><input type="text" value="硕士" /></td>
      </tr>
      <!-- 第六行 -->
      <tr>
        <td>喜欢的类型：</td>
        <td>
          <input type="checkbox" name="love" />妩媚的
          <input type="checkbox" name="love" />妖艳的
          <input type="checkbox" name="love" />可爱的
          <input type="checkbox" name="love" />高挑的
          <input type="checkbox" name="love" checked="checked" />都喜欢
        </td>
      </tr>
      <!-- 第七行 -->
      <tr>
        <td>个人介绍</td>
        <td>
          <textarea>自我介绍</textarea>
        </td>
      </tr>
      <!-- 第八行 -->
      <tr>
        <td></td>
        <td>
          <input type="submit" value="提交按钮" />
        </td>
      </tr>
      <!-- 第九行 -->
      <tr>
        <td></td>
        <td>
          <input type="checkbox" checked="checked" />
          我同意注册条款和会员加入标准
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="#">我是会员，立即登录</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <h5>我承诺</h5>
          <ul>
            <li>年满18周岁、单身 </li><li>抱着严肃的态度</li> <li>真诚寻找另一半</li>
          </li>
        </td>
      </tr>
    </table>
  </body>
</html>

三、总结

前端的学习比较有趣，因为在专科期间学期过HTML、CSS、JS基础，我这部分学到比较快。代码还是得多敲，不然容易忘记，加油！

caixingzhang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学前端HTML学习笔记

前端的学习比较有趣，因为在专科期间学期过HTML、CSS、JS基础，我这部分学到比较快。代码还是得多敲，不然容易忘记，加油！
复制链接

扫一扫