• 初识html

    HTML的结构

    HTML是由一些标签构成了，每个标签都有开始标签与结束标签~~也有部分标签，只有开始标签(单标签)~~标签之间可以嵌套~~

    HTML的标签(tag)，也可以称为元素(element)~~

    vscode中，直接输入!，按 enter 键，此时能自动生成代码的主体框架。

    1. <html>
    2.   <head>
    3.     <title>第一个页面</title>
    4.   </head>
    5.   <body>
    6.     hello world
    7.   </body>
    8. </html>

    html 标签是整个 html 文件的根标签(最顶层标签)

    head 标签中写页面的属性

    body 标签中写的是页面上显示的内容

    代码框架

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>Documenttitle>
    7. head>
    8. <body>
    9.  	hello world
    10. body>
    11. html>

    描述当前的文件是一个 HTML5 的文件

    其中 lang 属性表示当前页面是一个 "英语页面"

    描述页面的字符编码方式

    HTML常见标签

    注释标签： 注意：ctrl + / 快捷键可以快速进行注释/取消注释。

    标题标签: h1-h6：数字越小，标题越大越粗；数字越大，标题越小越细~~

    1. <h1>一级标题h1>
    2. <h2>二级标题h2>
    3. <h3>三级标题h3>
    4. <h4>四级标题h4>
    5. <h5>五级标题h5>
    6. <h6>六级标题h6>

    段落标签：

    这是一个段落

    换行标签：它是一个单标签

    格式化标签：

    加粗: strong 标签 和 b 标签

    倾斜: em 标签 和 i 标签

    删除线: del 标签 和 s 标签

    下划线: ins 标签 和 u 标签

    1. <strong>加粗strong>
    2. <b>加粗b>
    3.  
    4. <em>倾斜em>
    5. <i>倾斜i>
    6.  
    7. <del>删除线del>
    8. <s>删除线s>
    9.  
    10. <ins>下划线ins>
    11. <u>下划线u>

    图片标签：它是一个单标签(img标签)

    src: 表示图片的路径，img标签必须带有 src 属性

    alt: 替换文本. 当文本不能正确显示的时候，会显示一个替换的文字

    写法：<img src="图片路径" alt="文字">

    超链接标签：

    href: 必须具备，表示点击后会跳转到哪个页面

    <a href="http://www.baidu.com">百度a>

    表格标签：

    table 标签: 表示整个表格

    tr: 表示表格的一行

    td: 表示一个单元格

    border: 表示边框, 1 表示有边框(数字越大, 边框越粗), "" 表示没边框。

    1. <table border="1">
    2.   <tr>
    3.     <td>姓名td>
    4.     <td>性别td>
    5.     <td>年龄td>
    6.   tr>
    7.   <tr>
    8.     <td>张三td>
    9.     <td>男td>
    10.     <td>10td>
    11.   tr>
    12.   <tr>
    13.     <td>李四td>
    14.     <td>女td>
    15.     <td>11td>
    16.   tr>
    17. table>

    列表标签：

    无序列表：ul标签

    有序列表：ol标签

    列表项：li标签

    1. <h3>无序列表h3>
    2. <ul>
    3.   <li>咬人猫li>
    4.   <li>兔总裁li>
    5.   <li>阿叶君li>
    6. ul>
    7. <h3>有序列表h3>
    8. <ol>
    9.   <li>咬人猫li>
    10.   <li>兔总裁li>
    11.   <li>阿叶君li>
    12. ol>

    表单标签：表单标签是为了和用户交互的~~

    form标签：进行前后端交互，功能是构造一个HTTP请求~~

    input标签：有很多形态，这些形态表示了不同的元素效果

    1. 1) 文本框
    2. <input type="text">
    3.  
    4. 2) 密码框
    5. <input type="password">
    6.  
    7. 3) 单选框
    8. <input type="radio" name="sex">男
    9. <input type="radio" name="sex">女
    10.  
    11. 4) 复选框
    12. <input type="checkbox"> 吃饭 
    13. <input type="checkbox"> 睡觉 
    14. <input type="checkbox">打游戏
    15.  
    16. 5) 普通按钮
    17. <input type="button" value="我是个按钮">
    18.  
    19. 6) 提交按钮
    20. <form action="test.html">
    21.   <input type="text" name="username">
    22.   <input type="submit" value="提交">
    23. form>
    24.  
    25. 7) 清空按钮
    26. <form action="test.html">
    27.   <input type="text" name="username">
    28.   <input type="submit" value="提交">
    29.   <input type="reset" value="清空">
    30. form>
    31.  
    32. 8) 选择文件
    33. <input type="file">

    label 标签：

    搭配 input 使用，点击 label 也能选中对应的单选/复选框，能够提升用户体验。

    for 属性：指定当前 label 和哪个相同 id 的 input 标签对应 (此时点击才是有用的)

    <input type="radio" name="sex" id="male"> <label for="male">男label>

    select 标签：下拉菜单，里面的每个选项是一个option标签

    1. <select>
    2.   <option>北京option>
    3.   <option>上海option>
    4. select>

    textarea 标签：多行文本框

    <textarea rows="3" cols="50">textarea>

    无语义标签：div & span

    其实它们就是两个盒子，用于网页布局

    div 是独占一行的, 是一个大盒子。

    span 不独占一行, 是一个小盒子。

    1. <div>
    2.   <span>咬人猫span>
    3.   <span>咬人猫span>
    4.   <span>咬人猫span>
    5. div>
    6. <div>
    7.   <span>兔总裁span>
    8.   <span>兔总裁span>
    9.   <span>兔总裁span>
    10. div>
    11. <div>
    12.   <span>阿叶君span>
    13.   <span>阿叶君span>
    14.   <span>阿叶君span>
    15. div>

  • 相关阅读:
    Linux中安装Tomcat
    谣言检测——《社会网络谣言检测综述》
    网络安全新资讯-《关键信息基础设施安全保护要求》于明年五月正式实施
    C 与 C++ 的真正区别在哪里？
    上采样方式（反卷积、插值、反池化）
    文件系统相关
    因特网中的电子邮件系统（SMTP）
    强制结束subprocess.Popen开启的任务
    力扣 8049. 判断能否在给定时间到达单元格
    思腾云计算
  • 原文地址：https://blog.csdn.net/zyyy0/article/details/127592204