前端-初识HTML

1. 初识 HTML

  • HTML：（Hyper Text Markup Language）超文本（包括文字，图片，音频，视频等）标记语言

    • HTML 不是一种编程语言，而是一种标记语言（一套标记标签 (markup tag)）

  • 发展史：由 HTML4.0\(\longrightarrow\) XHTML2.0\(\longrightarrow\)HTML5.0

  • 优势：

    1. 全球知名浏览器对HTML5的支持
    2. 市场需要
    3. 天然跨平台

  • 由万维网联盟管理，执行 W3C 标准

    • W3C标准 包括：结构化标准（HTML，XML）、表现化标准（CSS）、行为化标准（DOM，ECMAScript）

  • HTML 常见的 IDE：IDEA

2. HTML基本结构

  • 标签是什么？

    • HTML 标签是由一对尖括号包裹的单词构成，例如: <html>
    • 标签分为两部分: 开始标签 <a> 和 结束标签 </a>， 两个标签之间的部分，叫做标签体

  • 标签规范：

    1. 所有标签中的单词不可能以数字开头
    2. 标签不区分大小写 <html> 和 <HTML> ，一般使用小写
    3. 标签可以嵌套。但是不能交叉嵌套。 <a><b></a></b>

  • 基本结构：

    标签 描述
    <head> html 的头部
    <body> html 的主体
    <body></body> 类似成对存在的标签分别叫开放标签和闭合标签
    <br/> 只有一个标签的称为自闭合标签，"/" 是因为习惯而添加的

  • 看一段代码：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="kegwords" content="生命之源"/>
        <title>我的第一个网页</title>
    </head>
    <body>
        Hallo World
    </body>
</html>

  • 实例解析：
    image-20220818152229683

    • DOCTYPE：Docment Type(文档类型)告诉浏览器我们要使用什么规范，去掉也可以，默认html
    • html：总标签，内容在这里面写才会显示
    • head：网页头部
    • meta：描述性标签，一般用来描述我们网站的一些基本信息，一般用来做SEO
    • title：网页标题
    • body：网页主体

  • 在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签

  • 可视化 HTML 页面结构：
    image-20220818152716202

    • 只有 <body> 区域(白色部分)才会在浏览器中显示

3 标签

3.1 网页基本标签

  • 标题：通过<h1> ~ <h6> 标签来定义

    <h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>

  • 段落：通过 <p> 标签来定义

    <p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>
    • 可用快捷键 p+ctrl 创建

  • 换行：通过<br/> 标签来定义

    这是第一段 <br/>
这是第二段 <br/>

  • 水平线：通过<hr/> 标签来定义

    <hr/>

  • 字体样式：

    1. 粗体：通过<strong> 标签来定义

      粗体:<strong>这是粗体</stong>

    2. 斜体：通过<em> 标签来定义

      斜体: <em>这是斜体</em>

  • 注释和特殊符号

    <!--特殊符号记忆方式:不需要完全记,下面记住常用的就行,需要其他特殊字符可以百度-->
空格:&nbsp; <br/>
大于符号:&gt; <br/>
小于符号:&it; <br/>
版权所有:&copy;
    • 注释符可用 ctrl+/ 调出

3.2 图像标签

  • 常见的图像格式：JPG，GIF，PNG，BMP

  • 在 HTML 里面图像标签是 <img>

    <img src="" alt="" title="" width="" hegth="">

    src：图片地址
    alt：图像替代文字。当图像未加载出来的提示文字
    title：鼠标悬停时文字
    width：图像宽度
    height：图像高度

  • 图像地址分为绝对路径和相对路径

    • 绝对路径：一般从盘符开始的路径为绝对路径（不推荐）
    • 相对路径：用../这样的路径（推荐）

3.3 链接标签

  • 链接标签：a 标签

    <a href="path" target="目标窗口位置">链接文本或图像</a>

    href：要跳转的页面
    target：表示窗口在哪里打开。参数：_blank：在新窗口打开；_self：在本网页打开

    • 文字链接标签示例：

      <a href="https://www.baidu.com/" target="_blank">这个是百度</a>

    • 图像链接标签示例：

      <a href="https://www.baidu.com/" target="_blank">
    <img src="<!--这里面是图像地址-->" alt="<!--这里是鼠标提示文字-->">
</a>

  • 锚标签

    • 用于使用户跳到文档的某个部分

    • 使用：先定义一个标记：使用 name 参数用于创建锚标签，再使用 <a> 标签实现效果（需要一个＃号）

      <a name="top">顶部</a>
<a href="#top">点击回到顶部</a>              <!--页面内跳转-->
<a href="https://www.baidu.com/#top">点击转到百度</a>   <!--页面外跳转-->

  • 邮箱链接

    • 在 href 里面输入 mailto：XXXX（邮箱地址）点击链接后跳转到邮箱

      <!--在mailto后跟上邮箱即可建立邮箱链接-->
<a href="mailto:289582531@qq.com">点击跳转到邮件</a>

    • QQ 邮箱链接：进入 qq 推广\(\longrightarrow\)推广工具

3.4 列表

  • 有序列表

    • 由 <ol>（ordered list）和 <li> 标签构成

      <ol>
    <li>生</li>
    <li>命</li>
    <li>之</li>
    <li>源</li>
</ol>

    • 应用范围：试卷、问卷

  • 无序列表

    • 由<ul>（unordered list）和<li> 标签构成

      <ul>
    <li>生</li>
    <li>命</li>
    <li>之</li>
    <li>源</li>
</ul>

    • 应用范围：导航、侧边栏

  • 自定义列表

    • 由 <dl>（dir list）、<dt>（dir title）和 <dd> 标签构成

      <dl>
    <dt>年龄
    <dd>18</dd>
    </dt>
</dl>

      dl 标签：表示创建自定义列表

      dt 标签：表示列表名称

      dd 标签：表示列表内部

    • 应用范围：网页底部

3.5 表格

  • 表格的优点：简单通用、结构稳定

  • 基本结构：单元格，行，列，跨行，跨列

  • 使用的标签：<table>、<tr>、<td>

    • table 标签：创建一个表格
      • 常用参数：
        1. border：表格加边框
    • tr：行标签
    • td：列标签
      • 常用参数：
        1. colspan：跨列标签。不能与跨行同用
        2. rowspan：跨行标签。不能与跨列同用

  • 示例：

    <table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td colspan="3">1-3</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-6</td>
    </tr>
    <tr>
      <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
      <td>3-5</td>
      </tr>
</table>
    • 示例结果：
      image-20220818161241607

3.6 视频，音频

  • 视频：使用 <video> 标签进行实现

    <video src="" controls="" autoplay=""></video>

    src：链接地址

    controls：控制条
    autoplay：自动播放

  • 音频：使用 <audio> 标签进行实现

    <audio src="" ></audio>

  • 示例：

    <!--视频标签-->
<video src="链接名" controls autoplay></video>
<!--音频标签-->
<audio src="" controls autoplay></audio>

3.7 iframe 内联框架

  • 内联框架指：将另一个 HTML 页面嵌入到当前页中

  • 主要用于多个网页的共有部分，如导航栏、广告栏等

    <iframe src="打开的路径" frameborder="0"></iframe>

    src：地址
    frameboder：是否显示 <iframe> 周围的边框。参数 0 和 1

  • 示例：

    <iframe src="//www.w3cschool.cn"></iframe>

3.8 表单

  • 表单最重要的表现是在客户端接收用户的信息，然后将数据递交给后台的程序来操控这些数据，从技术的概念上说，表单就是用来操作 form 对象

    • 对象可以是网站、请求处理的地址等

  • 通过 form 标签来实现

    • 属性有：action、method 等
      • action：表示向何处发送表单数据
      • method：规定如何发送表单数据。提交方式常用值 get 和 post
        • get：可以在url看见我们提交的信息，不安全，高效
        • post：不可在url看见我们提交的信息，较安全

  • 表单域：用户输入数据的地方

    • 表单域可以分为 input、textarea、select 3 个对象

      • 其中大部分表单通过 input 属性来实现，textarea 和 select 创建一种控制类型

    • input 对象下的多种表单表现形式：

      <input name="" type="" value="" size="" maxlength="" checked="">

      name：指定表单元素名称，Java读取需要读取

      type：指定元素类型。可选项：text；password；checkbox（多选框）；radio（单选框）；submit（提交按钮）；reset（重置按钮）；file（文件域；hidden（隐藏域：不可被浏览用户修改的数据），image（图片按钮）和 botton（普通按钮）。默认 text 类型

      value：初始值，type 为 radio 时必须指定

      size：初始宽度，当 type 为 text 或 password 时，表单元素大小以字符为单位，对于其他类型，宽度以像素为单位（一般不用）

      maxlength：type 为 password 或 text 时，输入的最大字符数

      checked：type 为 radio 或 checkbox 时，指定按钮是否被选中，也就是默认选择

      • 示例：

        <form action="1.我的第一个网页.html" method="post">
    <h1>注册</h1>
    <p>账号：
        <input type="text" name="username">
    </p>
    <p>密码：
        <input type="password" name="pwd">
    </p>
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <p>
        <input type="checkbox" name="aihao" value="sleep"/>睡觉
        <input type="checkbox" name="aihao" value="study"/>学习
    </p>
    <p>
        <input type="button" value="这是按钮"/>
    </p>
    <p>
        <input type="image"/>
    </p>
    <p>
        <input type="submit"/>
        <input type="reset"/>
    </p>
    <p>
        <input type="email" name="Email"/>
    </p>
    <p>
        <input type="url" name="url"/>
    </p>
    <p>
        <input type="number" min="0" max="100" step="10">
    </p>
    <p>滑块
        <input type="range"/>
    </p>
    <p>
        <input type="search">
    </p>
    <p>
        <input type="file" name="file">
    </p>
</form>

    • textarea：文本域。一般文本内容写中文，容易“乱码”

      <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>

    • select：下拉框标签

      <ifame>
    <select name="列表名称" >
        <option value="选项的值">中国</option>
        <option value="选项的值" selected>瑞士</option>
    </select>
</ifame>

      子标签：option

      默认值：selected

  • 完整示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9.表单语法</title>
</head>
<body>
<form action="1.我的第一个网页.html" method="post">
    <h1>注册</h1>
   <p>账号：<!--文本输入框：text，同时习惯在后面加上name-->
       <input type="text" name="username">
   </p>
    <p>密码：<!--密码输入框：password-->
        <input type="password" name="pwd">
    </p>
    <p>性别：<!--单选框：radio-->
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <p>	<!--多选框：checkbox-->
        <input type="checkbox" name="aihao" value="sleep"/>睡觉
        <input type="checkbox" name="aihao" value="study"/>学习
    </p>
    <p>	 <!--按钮：butten-->
        <input type="button" value="这是按钮"/>
    </p>
    <p> <!--图片按钮：image-->
        <input type="image"/>
    </p>
    <p> <!--提交：submit-->
        <input type="submit"/>
        <!--重置：reset-->
        <input type="reset"/>
    </p>
    <p> <!--邮件验证：email-->
    <input type="email" name="Email"/>
    </p>
    <p> <!--URL:url-->
        <input type="url" name="url"/>
    </p>
    <p> <!--数字：number;步长：step-->
        <input type="number" min="0" max="100" step="10">
    </p> 
    <p>滑块 <!--滑块:range-->
        <input type="range"/>
    </p>
    <p> <!--搜素框：search-->
        <input type="search">
    </p>
    <p> <!--文件域：file--->
        <input type="file" name="file">
    </p>
    <p> <!--文本域：textarea-->
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
    </p>
    <p>下拉框: <!--下拉框：select-->
    <select name="列表名称" >
        <option value="选项的值">中国</option>
        <option value="选项的值" selected>瑞士</option>
    </select>
    </p>
</form>
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.表单应用</title>
</head>
<body>
<form action="1.我的第一个网页.html">
    <p>邮箱：<!--隐藏域：hldden-->
    <input type="email" name="email" hidden>
    </p>
    <p>搜索框：<!--只读：readonly-->
        <input type="search" readonly>
    </p>
    <p>图片按钮：<!--禁用：disabled-->
        <input type="image" disabled>
    </p>
</form>
</body>
</html>

  • 表单应用：

    • 增强鼠标可用性：让文本框前面的字也可点击

      <!--增强鼠标可用性：label-->
<label for="110">点击</label>
<p>邮箱：
    <input type="email" name="email"   id="110">
</p>

    • 表单初级验证

      • 为什么要进行表单验证—>减轻压力

      • 常用方法：placeholder（提示信息）、required（非空判断）、pattern：正则表达式

4 行内元素和块元素

  • 块元素:无论内容多少，该元素占一行，如：p、h1-h6……

  • 行内元素：内容撑开宽度，左右都是行内元素，可以排在一行，如：a、strong、em……

  • 简单分辨：输入标签后，不会换行就是行内元素，会换行就是块元素

5 页面结构分析

  • 这些元素只是为了语言规范，认识 header、footer、nav 即可
元素名 描述
header 标题头部局部的内容（用于页面或页面中的一块区域）
footer 标题脚部局部的内容（用于整页面，或页面的一块区域）
section web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容

6 完

posted @ 2021-07-19 11:19  你是我的生命之源  阅读(265)  评论(0)    收藏  举报
页脚