HTML5基础部分

HTML5基础

一、初始HTML

1、现在普遍使用的是HTML5

  • 世界知名浏览器厂商对HTML5的支持
  • 市场需求
  • 可以跨平台

2、W3C标准

  • 万维网联盟
  • W3C标准包括:
    • 结构化标准语言(HTML,XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)

3、开发软件

  • 记事本
  • Dreamweaver
  • IDEA
  • VScode

二、网页基本信息

  • html超文本标记语言
  • 标签有成对标签和自结束标签(不用成对出现)
<!--注释
 DOCTYPE:告诉浏览器,我们要使用什么规范
 <head>     网页头部</head>
 <body>  网页主体</body>

 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网站</title>
</head>
<body>
hello,world
</body>
</html>
  • 标签

标题标签

段落标签

换行标签

  • 特殊符号: &nbsp;表示空格 &gt; 表示大于号 &lt;表示小于号 &copy(版权符号)

  • 语义化标签:目的不是用户看到的形式而是让网站知道你要表达什么,比如一级标题二级标题,虽然样式有加粗但这不是关键,真正含义是一级标签内的内容更重要。关注的不是样式,而是语义。

  • 在页面中独占一行的元素叫块元素(block element),不会独占一行的叫做行内元素。

  • 粗体:

  • 斜体:

三、列表

  • 列表: 是信息资源的一种展示形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息
<!--无序列表  用点标记的-->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>梨子</li>
    <li>橙子</li>
</ul>

<!--有序列表 按1234排序-->
<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>梨子</li>
    <li>橙子</li>
</ol>

<!--自定义类别
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>长安忆(内容)</dt>
    <dd>忆长安(注释)</dd>
</dl>
  • 列表之间可以相互嵌套

四、图像标签

1、img标签

<!--
src:图片地址(必填)
相对地址,绝对地址
../ 上一级目录
title:悬停文字
可以设置大小
alt(必填)
-->
<img src="../resources/image/1.jpeg" alt="plmm"title="美女"width="300"height="300">

2、图片种类:

  • jpg:颜色比较丰富,不支持透明,一般用来显示照片
  • gif:支持颜色单一,简单透明,动图
  • png:颜色丰富,复杂透明
  • webp:表示网页中的图片的一种格式(具备上面三个的所有优点,但是兼容性不好)
  • base64:将图片使用base64编码,将图片转换为字符

五、超链接标签

<!--
href:必填,表示要跳转的网页
target:表示窗口可以在哪里打开
        _blank:在新标签中打开
        _self:在自己的网页中打开
-->
<a href="4.图像标签.html"target="_blank">点击我看图片</a><br>
<a href="https://www.baidu.com">点击我去百度</a>

1、超链接应用

  • 回到顶部:herf=“#”
  • 回到底部:在元素前加id,然后herf=“#id”有了id后,可以跳转到页面的指定位置,只需将herf属性设置#目标元素的id,是不能重复的,唯一标识。
<a href="" id="顶部">顶部</a>
<a href="#顶部">回到顶部</a>
  • 路径:
    • 绝对路径:像某网站的固定网址一样就是绝对路径
    • 相对路径:跳转到服务器内部的页面,用相对路径./文件名(同一目录下)…/文件名(当前文件所在目录的上一级目录里)既向上退一层,以此类推,…/,…/等

2、功能性链接

邮件链接:mailto

六、 块元素和行内元素

1、块元素:

  • 无论内容多少,该元素独占一行
  • (p、h1-h6)

2、行内元素

  • 内容撑开宽度,左右都是行内元素的可以排在一行
  • (a,strong,em)

七、表格标签

1、简单通用,结构稳定

2、基本结构:

  • 单元格
  • 跨行
  • 跨列
<body>
<!--
表格table
行 tr
列 td

-->
<table border="1px">
  <tr>
<!--      colspan:跨列-->
      <td colspan="4">1-1</td>

  </tr>
    <tr >
<!--        rowspan:跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>

    </tr>
</table>
</body>

八、视频和音频

<!--
src:资源路径
controls:控制条
autoplay:自动播放
audio 音频
video 视频


-->
<audio src="../resources/MP3/纯纯的夏天.mp3"controls autoplay></audio>
  • autoplay:是否自动播放 loop 循环播放

九、页面结构分析

  • 布局标签:

    header 网页头部,标题头部区域

    main网页主体

    section:Web页面中的一块独立区域

    footer 网页底部

    nav 网页中的导航

    aside 侧边栏(和主体相关的其他内容)

    article 文章

    span 也是内容

十、内联框架

  • 内联框架:用于向当前网页引入一个其他网页

十一、表单

1、表单网页中的表单用于将本地的数据提交给远程的服务器

2、form标签来创建:

  • type:指定元素的类型:text、password、checkbox、radio、submit、reset、file、hidden、image、button,默认为text
  • name:指定表单元素的名称
  • value:元素的初始值,type为radio(单选框)时必须指定的一个值
  • size:指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位,对于其他类型,宽度以像素为单位
  • maxlength:type为text或password时,输入的最大字符数
  • checked:type为radio或checkbox时,指定按钮是否是被选中。(默认选项)

3、一些属性和操作

  • 表单form

  • action:表单提交的位置,可以是网站,也可以是一个请求处理地址

  • method:post,get提交方式

    • get方式提交:我们可以在url中看到我们提交的信息,不安全,但是高效。不能传输大文件
    • post提交:比较安全,可以传输大文件
  • 文本输入框:input type = “text”

  • 密码框:input type = “password”

  • maxlength=“8”:最长能写几个字符 value=“开学”:初始值

  • input type=“radio” :单选框 必须写value,name一样就是一个组

 <p>性别:
        <input type="radio"value="boy"name="sex"/><input type="radio"value="girl"name="sex"/>
  • input type=“checkbox”:多选框
<p>爱好
        <input type="checkbox"value="sleep"name="hobby">睡觉
        <input type="checkbox"value="code"name="hobby">敲代码
        <input type="checkbox"value="chat"name="hobby">聊天
        <input type="checkbox"value="play"name="hobby">玩耍
    </p>
  • input type=“button”:按钮

  • image:图片按钮

  • reset:重置按钮

  • submit:提交按钮 用value可以修改按钮名称

  • 下拉框,列表框

    • 下拉框,select name=“列表名称”

      <p>国家
              <select name="类表名称" >
                  <option value="cha">中国</option>
                  <option value="us">美国</option>
                  <option value="eng">英国</option>
                  <option value="rus">俄国</option>
              </select>
      
      
          </p>
      
  • 文本域 textarea

<!--文本域-->
    <p>反馈:
        <textarea name="textarea"  cols="10" rows="50">文本内容</textarea>

    </p>
  • 文件域 file
<!--    文件域
input type="file"-->
    <p>
        <input type="file"name="files">
        <input type="button"value="上传"name="upload">
    </p>
  • 搜索框
<!--    搜索框-->
    <p>搜索框
        <input type="search"name="search">
    </p>
  • 增强鼠标可用性
<!--    增强鼠标可用性-->
   <p> <lablel for="mark">你点我试试</lablel>
       <input type="text"id="mark"></p>

4、表单的应用

属性:

  • readonly:只读,不能做修改
  • disable:禁用
  • hidden:隐藏

5、验证格式

<!--验证格式-->
<!--    邮箱验证-->
    <p>邮箱:
        <input type="email"name="emil">
        <input type="submit">


    </p>

<!--    URL验证-->
    <p>URL:
        <input type="url"name="url">

    </p>
<!--    数字验证-->
    <p>数字
        <input type="number"name="num"max="100"min="0"step="10">
    </p>

<!--    滑块-->
    <p>滑块
        <input type="range"name="voice"min="0"max="100"step="10">
    </p>

6、表单初级验证

  • 保护数据安全性,减轻压力
  • 常用方式(属性)
    • placeholder:默认提示信息
    • required:元素不能为空,必须要填
    • pattern:正则表达式
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zero摄氏度

感谢鼓励!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值