01-HTML

1.HTML

前言

本文用来记录自己的学习过程，第一次上传文章，有误地方还请多多指教

1.1 HTML简介

HTML是一种开发页面的编程语言，简称超文本标记语言

超文本，比普通文本功能丰富，图片，动态效果，超链接，多媒体等等
标记，就是标签，HTML语言编程，就是利用各种标签来开发，不同的标签实现不同的效果
语言，一种编程语言

主要作用

使用搁置标签，实现一个网页

1.2 基本语法

1 HTML文件，后缀是.html

2 编辑可以使用记事本编辑

3 基本语法

标签是由尖括号组成
标签大部分是由一对标签组成，前面成为开标签，后面的称为闭标签，闭标签有/
开标签内可以给标签设置属性，
- 属性名 = 属性值
- 多个属性空格隔开
HTML中标签和属性是不区分大小写，但是建议全部小写
标签可以嵌套

4 基本骨架

<html<!--这是html的根标签-->
  <head><!--头标签，主要定义当前页面的信息-->
    <title>第一个HTML界面</title>
  </head>
  <body>
  </body>
</html>

5 运行

浏览器打开

1.3 开发工具

VScode

2.HTML标签

2.1 结构标签【重点】

<!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>
  HTML标签的基本骨架
</body>
</html>

2.2 排版标签

排版标签就是对内容的简单布局

标题 h1-h6
分割线hr
换行br
段落 p

<!--注释-->
<!--
  结构标签，由这些标签组成最基本的HTML页面
-->

<html><!--根标签-->
  <head>
    <title>排版标签</title>
  </head><!--头标签-->
  <body>
    <h1>这是一个一级标题</h1>
    <h2>这是一个一级标题</h2>
    <h3>这是一个一级标题</h3>
    <h4>这是一个一级标题</h4>
    <h5>这是一个一级标题</h5>
    <h6>这是一个一级标题</h6>
    <!--
      分割线  hr
      它是单标签，改变分割线的效果
      width: 宽度,单位有两种
        1. 像素px，是固定尺寸
        2. 百分比，是相对于浏览器的宽度
      size：表示粗细，单位像素
      color：表示颜色
        1. 颜色名
        2. 16进制颜色
        3. rgb颜色
    -->
    <hr width="500px" />
    <hr width="50%" size="50px" color="red" />
    <hr width="50%" size="50px" color="#00ffff" />
    <hr width="50%" size="50px" color="#3999ff" />
    <!--
      br换行标签，单标签
      p标签：段落标签，表示段落
    -->
  </body>
</html>

2.3 块标签【重点】

块标签是我们将来使用最多的一个标签，可以用来布局页面，得配合后续的css来实现

div
- 将来可以通过css来调整它的尺寸大小，位置，完成页面布局
span
- 将来一般做提示语

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>块标签</title>
</head>

<body>
  <!--div标签-->
  <div style="background-color: rgb(0, 255, 0);">
    div标签，行级标签，默认占一行
  </div>

  <span>
    这样他们就表示一个组，只能选中一个
  </span>
</body>

</html>

2.4 文字标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字标签</title>
</head>
<body>
  <!--
    font标签：代表文字
    属性可以更改字体效果
      size：文字大小。单位没有，从标号开始，1-7，从小到大
      color：文字颜色
      face：文字字体
  -->
  <font size="5" color="#0aa0ff">将大局逆转把</font><br>
</body>
</html>

2.5 列表标签【重点】

列表标签是一个非常常见的标签

无序标签（最常见）
- ul
有序标签
- ol

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表标签</title>
</head>
<body>
  <!--
    有序标签  ol
    列表内，有序表项，li
  -->
    <ol>
      <li>首先这个是第一点</li>
      <li>其次这个是第二点</li>
      <li>最后这个是最后一点</li>
    </ol>

    <!--
      无序标签  ul
      列表内，无序表项，li
    -->
    <ul>
      <li>第一点</li>
      <li>第二点</li>
      <li>第三点</li>
    </ul>
</body>
</html>

2.6 图片标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片标签</title>
</head>
<body>
  <!--
    img：图片标签，单标签
    src：图片地址
    alt：图片加载失败时，显示的文字,图片注释
    title：鼠标悬停在图片上时，显示的文字
    路径：
      1.与页面平级，直接写路径（相对路径）
      2.图片在平级文件夹里面
      ./代表当前路径
      3.图片与本文件夹在不同的文件夹里面
      ../代表上一级路径,在向下找
  -->
  <img src="1.jpg" alt="图片加载失败时，显示的文字" title="鼠标悬停在图片上时，显示的文字">
</body>
</html>

2.7 超链接标签

超链接标签是一个点击可以跳转到其他页面的一个标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>超链接标签</title>
</head>
<body>
  <!--
    a，超链接标签，用来跳转页面
      href，要跳转目的地的地址
      target，跳转的方式
        blank，在新窗口中打开
        self，在当前页面中打开
        特别注意，有下划线
  -->
  <a href="https://www.baidu.com" target="_blank">百度一下，你就知道了</a>
  <a href="https://www.youku.com" target="_self">优酷一下，你就知道了</a>
  <a href="https://www.taobao.com" target="_top">淘宝一下，你就知道了</a>
  <a href="https://www.4399.com" target="_top">4399一下，你就知道了</a>
</body>
</html>

表格标签可以展现一个表格，用来填充数据，以及布局页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格标签</title>
</head>
<body>
  <!--
    4行3列的表格

    表格标签是table
    行标签是tr
    行内单元格是td
    单元格td可以改成th，这样就有加粗效果，一般是表格标题

    给table设置属性，让表格看起来更好看
    border，边框
    width 尺寸
  -->
  <table border="1" width="50%">
    <tr>
      <th>1</th>
      <!--
        实现加粗效果，需要使用th标签
        一般的表格边框就是td标签
      -->
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>
</body>
</html>

3.框架标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>框架标签</title>
</head>
<body>
  <ul>
    <!--
      在a标签内使用属性，将页面跳转至ifram内
      设置targe属性,属性值指定iframe的name属性值
    -->
    <li><a href="http://www.baidu.com" target="iframe1">百度</a></li>
    <li><a href="Demo1-表格标签.html" target="iframe1">腾讯</a></li>
    <li><a href="http://www.4399.com" target="iframe1">新浪</a></li>
  </ul>
  <iframe name="iframe1" width="50%" height="300px"></iframe>
</body>
</html>

4.表单标签

表单用来和服务器交互，可以将数据发送到后台服务器

表单用来收集数据，比如登陆，注册，搜索

常用的功能，输入框，下拉框，单选框，多选框，文件上传框，文本域，一些按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单标签</title>
</head>
<body>
  <!-- 
        表单 form
            属性 action,用来指定submit提交后的服务器路径,
                        即数据发送到这个路径背后的服务器
        -------------------------------------
        各种表单框,要想将数据发送到后台,必须指定一个属性 name
        -------------------------------------
        输入框 input,单标签
        属性value ,是输入框的值,默认展示value中的值
        属性placeholder ,背景提示
        属性type,有很多值,不同属性值,可以实现不同的输入效果
            type=text 普通文本
            type=password 密码
            type=radio 单选框,需要给多个单选标签设置同一个name属性值
                        这样他们就是一组
                        设置一个value属性,以便于提交后展示数据
            type=checkbox,复选框,需要给多个复选框设置同一个name属性值
                        设置一个value属性,以便于提交后展示数据
            type=file ,选择文件上传
            type=date , 选择日期
            type=email , 邮箱
            type=hidden , 会将输入框隐藏
            type=button , 按钮
            type=reset , 重置
            type=submit , 提交
    -------------------------------------
        下拉框 select
        下来选项  option
    -------------------------------------
        文本域 textarea
    -------------------------------------
        按钮  button
            属性type,有很多值,点击按钮的效果不一样
                type=button 纯按钮
                type=reset 重置,点击会将表达信息恢复到默认
                type=submit 提交,将表达中输入的数据提交都后台服务器
                这个后台服务器是form标签中指定的服务器路径
     -->
     <form action="/java2217">
      隐藏框<input type="hidden" name="money"><br>
      用户名<input type="text" name="username" placeholder="请输入用户名"/><br>
      密码<input type="password" name="pwd"/><br>
      性别<input type="radio" name="sex" value="man"/> 男
          <input type="radio" name="sex" value="women"/> 女<br>
      技能 <input type="checkbox" name="skills" value="javase"/> JavaSE
           <input type="checkbox" name="skills" value="javaweb"/> JavaWeb
           <input type="checkbox" name="skills" value="ssm"/> SSM<br>
      头像 <input type="file" name="touxiang"/> <br>
      生日 <input type="date" name="birthday"/> <br>
      邮箱 <input type="email" name="email" value="11111@qq.com"/> <br>
      籍贯 <select name="jiguan">
              <option value="henan">河南</option>
              <option value="yunnan">云南</option>
              <option value="hainan">海南</option>
          </select>
          <select name="city">
              <option>郑州</option>
              <option>周口</option>
              <option>驻马店</option>
          </select> <br>
      个人简历
          <textarea></textarea><br>
      <button type="button">按钮</button>
      <button type="reset">重置</button>
      <button type="submit">提交</button>
      <hr>
      <input type="button" value="按钮"/>
      <input type="reset" value="重置"/>
      <input type="submit" value="提交"/>
   </form>
</body>
</html>

5.补充

在html敲空格，没有效果

需要使用

&nbsp

这个表示一个空格