正文

01-HTML基础

IP云
IP云V管理员/3 阅读
11/12
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

HTML基础

1、HTML的概念和作用

  • 概念
    • HTML（Hyper Text Markup Language）：超文本标记语言
      • 超文本：不仅包含普通文本，还可以包含图片、视频、音频、超链接、表格等内容
      • 标记语言：由标签构成的语言
  • HTML的作用
    • 编写网页

2、W3C标准

  • 网页主要由三部分组成
    • HTML：用于制作网页基础内容和基本结构
    • CSS：用于网页样式美化效果
    • JavaScript：用来制作数据验证、交互行为效果，可以动态 操作网页的元素增删改查

3、HTML的组成

  • 标签
    • 标签可以用于设置文本样式、图片样式、超链接样式等等。用<>表示
    • 例如：<h1>标签，代表一级标签。我们可以使用开始标签和结束标签包围文字，这些文字就以标题形式显示
  • 属性
    • 标签中还可以拥有属性，属性可以位标签提供更多的信息
    • 属性只能添加到开始标签中。格式为：属性名=属性值
    • 例如：align属性，表示对齐方式。我们可以在开始标签中添加该属性，就能让内容显示在不同位置
    • eg

4、初始HTML页面属性说明

  • <!DOCTYPE.html>：HTML的文档声明
  • <html lang="en">: 根标签，一个文件中只能有一个根标签，lang属性表示网页使用的语言，默认是en，可以修改成zh
  • <head>：头部标签
  • <meta charset="UTF-8">：设置字符集，建议使用UTF-8
  • <title>：文档标题，显示在浏览器标签上
  • <body>：身体标签，包含所有的文档内容

5、HTML基础语法

5.1、文本标签

  • h1~h6
    • 用于文章标题，一共有6级
    • 1级最大，6级最小
    • 这是块级标签，自带换行的功能
    • 常用属性
      • align：标签对齐的方式
      • center居中、right右对齐、left左对齐
  • hr
    • 水平线，即可在此画一条水平线
    • <hr width="400" color="red" size="5">
    • 常用属性
      • width：设置水平线的宽度（长度）
      • size：大小（粗细）
      • color：线的颜色
  • font
    • 设置字体、颜色、字号等
    • PS
      • 在HTML5中已经不推荐使用
    • 内联标签，没有换行功能
    • 常用属性
      • color：字体颜色
      • size：字体大小
      • face：字体，如：宋体
  • b
    • bold加粗，与strong功能一样
  • i
    • italic斜体
  • br
    • 换行
  • p
    • 每个p标签代表一个自然段
    • paragraph，前后有一定间隔，首行没有缩进
    • 常用属性
      • title：用于鼠标移上去显示提示文字信息

5.2、有序列表和无序列表

  • ol-li（有序列表）
    • type属性
      • 1：数字列表，默认值
      • a，A：字母列表，包含大小写
      • i，I：罗马数字编号
  • ul-li（无序列表）
    • type属性
      • disc：黑心圆，默认样式
      • circle：空白圆
      • square：黑色正方体

5.3、特殊字符

  • 什么是特殊字符
    • 在HTML中，像<> “ ’ 空格 & 都是特殊字符，它们是语法本身的一部分。
  • 常用特殊字符
  • 特殊字符格式
    • 以&开头，以分号结尾，如&nbsp;表示空格

5.4、div和span

  • 标签 作用 特点
    span 容器，可以包裹其他内容 是内联标签，不带换行功能，用于小范围的内容划分
    div 容器，可以包裹其他内容 是块标签，不带换行功能，用于小范围的内容的划分，通常网页布局使用div将网页分成不同块

5.5、HTML案例-公司介绍

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公司简介</title>
</head>
<body>
<!--
    需求分析：
    - 1.将文本素材内容放入其中
    - 2.使用<h1>标签设置标题，修饰“公司介绍”
    - 3.使用<hr>标签加入水平线
    - 4.使用4个<p>标签加入水平线
    - 5.使用&nbsp;设置第一个段落首行文本缩进6个空格
    - 6.使用<font>标签，设置第一段“黑马程序员”字体颜色为红色
    - 7.使用<i> <b>标签，设置第一段“传智教育“斜体与加粗
    - 8.使用<span>标签，设置其他段”黑马程序员“字体颜色为红色
    - 9.价格部分使用无序列表：ul-li
    - 10.使用<br>标签实现换行，在最后一段公司与版权中间实现
    - 11.设置最后一段样式：文本居中，字体大小14px，颜色gray
    - 12.使用版权特殊字符实现©显示
-->
<div>
    <h1>公司介绍</h1>
    <hr color="red" size="5"/>
    <p>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <font color="red">黑马程序员</font>
        是<i><b>传智教育旗</b></i>
        下的高端IT教育品牌，现已开设JavaEE、产品经理、HTML&JS+前端、C/C++、
        新媒体+短视频直播运营、Python+人工智能、大数据、UI/UE设计、软件测试、Linux云计算+运维开发、
        拍摄剪辑+短视频制作、智能机器人软件开发、电商视觉运营设计等培训学科，直营分校遍布北京、
        上海、广州、深圳、武汉、郑州、西安、长沙、济南、重庆、南京、杭州、成都、石家庄、合肥、
        太原、厦门、沈阳、天津等城市。
    </p>

    <p>
        <span style="color: red">黑马程序员</span>
        是传智教育旗下高端IT教育品牌，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。我们的价值观:
        <ul>
            <li>责任，对教学质量精益求精全心全意教授好每一位学生。</li>
            <li>务实，诚信待人，高效做事，不弄虚作假脚踏实地做好本职工作。</li>
            <li>创新，勇于创新，在工作中不断突破，为学生提供更优质的教学资源与服务。</li>
            <li>育人，在传授学生知识和技能的同时，言传身教，正面引导学生实现人生应有的价值追求。</li>
        </ul>
    </p>

    <p><span style="color: red">黑马程序员</span>
        不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，
        确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
    </p>
    <hr/>
    <center><font size="2" color="gray">江苏传智播客教育科技股份有限公司版权所有Copyright&copy;2006-至今, All Rights
        Reserved 苏ICP备
    </font></center>
</div>
</body>
</html>

5.6、图像标签

  • img标签的作用

    • 在网页中显示图片

  • img标签格式

    • <img src="图片文件路径"/>

  • 常用属性

    • img标签显示图片 作用
      src 图片地址
      width 宽度，如果只指定宽度，高度会按等比例缩放
      height 高度
      alt 如果图片丢失，出现的替代文字

    • PS：src不能写绝对路径

    • audio：定义音频。（MP3、WAV、OGG）

      • src：规定音频的URL
      • controls：显示播放控件

    • video：定义音频格式：如MP4、WebM、OGG

      • src：规定视频的URL
      • controls：显示播放控件

5.7、链接标签

  • 链接标签的作用

    • 跳转到其他页面

  • 链接标签的格式

    • <a href="跳转的目的地">内容</a>
  • 标签名 作用 备注
    a 超链接跳转页面功能 1.href属性，表示超链接跳转指向的url地址；2.target属性，页面打开方式，_self表示当前页，_blank表示新标签页

  • 小结

    • 超链接标签跳转页面的功能
      • <a href="跳转页面地址">...</a>
    • 超链接属性target的含义
      • 表示设置跳转页面的打开方式
      • target="_self"表示在当前页面跳转
      • target="_blank"表示在新建标签页跳转

5.8、表格标签

  • 表格标签的作用

    • 用来显示多条数据
    • 用于一些页面的布局，后期会使用div布局

  • 表格布局其他标签与属性

    • 标签名 作用
      table 表格容器，包含其他元素
      tr 表示一行， table row
      th 列标题，加粗，居中，table head
      td 普通单元格
      caption 表格的标题
      thead 在逻辑上将表格层分为三个部分：表格头部
      tbody 在逻辑上将表格层分为三个部分：表格的主题（PS：如果没有写tbody，浏览器运行时会自动加上tbody）
      tfoot 在逻辑上将表格层分为三个部分：表格尾部
    • 属性名 作用
      width 表格宽度
      border 外边框的粗细
      align 对齐方式：用在table标签上是表示整个表格在父容器标签中居中；用在tr标签上表示表格这一行内容居中；用在td标签上表示这个单元格内容居中
      rowspan 跨几行（将某几行融合为一行）
      colspan 跨几列（将某几列融合为一列）
      cellspacing 单元格之间的间距
      cellpadding 单元格边框与内容之间的间距

5.9、表单标签

  • 表单的作用

    • 接收用户输入数据，并提交数据给服务器

  • form表单格式

    • <form method="提交数据的方式" action="数据提交的目的地">
  手机数据标签
</form>

  • 常用属性

    • form常用属性 作用
      action 提交给服务器的地址
      method 提交的方式

  • 提交方法

    • 提交方法 特点
      GET 默认值，参数在地址栏显示
      POST 参数不会显示，更加安全

  • 注意事项

    • action
      • 规定当提交表单的时候向何处发送表单数据， URL
    • method：规定用于发送表单数据的方式
      • GET：浏览器会将数据直接附在表单的action URL 之后。大小有限制
      • POST：浏览器会将数据放到http请求消息体中，大小没有限制。
    • 表单数据要想提交必须满足两个要求
      • 1.必须使用form标签将表单项标签包起来
      • 2.表单项标签必须要有name属性

6、用户注册案例

  • 用户注册案例显示效果
  • 实现细节