HTML5初识

小蓝的江湖

2024-04-10 帮助1人

初识HTML

HTML（Hyper Text Markup Language）俗称超文本标记语言
HTML发展史：目前已经发展到HTML5版本

HTML5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素，特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形，图表，图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括
- 结构化标准语言（HTML,XML）
- 表现标准语言（CSS）
- 行为标准（DOM，ECMAScript,ECMAScript是JavaScript遵循的标准规范）
常见的IDE
- 记事本
- Dreamweaver
- IDEA(官网地址:下载地址)
- WebStorm
- …
网页基本结构

html中标签一般都是成对出现,分别叫开放标签和闭合标签，单独呈现的标签（空元素），用/来关闭空元素
在IDE中编写html时写标签名，按住快捷键Tab键即可自动补全

网页基本信息

DOCTYPE声明
注释（采用<！---->，快捷键Ctrl /）
title标签（网页标题，网页地址栏显示的信息）
meta标签（描述网页的基本信息）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><!--为了防止中文乱码，一般采用UTF-8编码-->
    <meta  name="keyws" content="小蓝稳住">
    <title>html5学习</title>
</head>

网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
特殊符号

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--水平线标签-->
<hr>
<!--字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--换行标签-->
<br>
<!--段落标签-->
<p>
第一个网页
</p>
<!--特殊符号标签-->
&nbsp; 空格
&gt >
&lt <
&copy;版权所有小蓝

图像标签

<img border="0" src="http://wpa.qq.com/pa?p=2:2816113455:53" alt="加我，领取小电影" title="加我，领取小电影"/>
<!--alt属性表示图片加载不出时显示的文字，title属性表示鼠标放上去时显示的文字，还可以设置其他属性，如高度宽度-->

超链接及应用

文本超链接
图像超链接

<!--文本超链接-->
<a href="mailto:2717110178@qq.com" >点击联系我</a>

<!--图像超链接 target="_blank表示在当前页面打开新页面而不是另打开一个网页-->
<a href="https://www.百度.com"  target="_blank"><img src="\resources\image\1.jpg" alt="图片加载不出时候显示文字" title="鼠标放上去时显示文字"   >
</a>

<!--功能性链接（如QQ)在qq推广官方-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2816113455&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2816113455:53" alt="加我，领取小电影" title="加我，领取小电影"/>
</a>

块元素和行内元素

块元素
- 无论内容多少，该元素独占一行
- 如标签p,h1-h6,form…
行内元素
- 内容确定宽度，就是内容有多少宽度就有多少，左右都是行内元素的可以排在一行
- 如标签a,strong,em…

列表标签

有序列表
无序列表
自定义列表

<!--有序列表-->
<ol>
    <li>java</li>
    <li>前端</li>
    <li>运维</li>
    <li>python</li>
</ol>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>前端</li>
    <li>运维</li>
    <li>python</li>
</ul>
<hr>
<!--自定义列表-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>数据库</dd>
    <dd>linux</dd>
</dl>

表格标签

table标签（表格）
tr标签（行）
td标签（列）

<!--表格标签-->
<table border="1px">
    <tr >
        <td aria-colspan="4">学生成绩</td>
    </tr>
    <tr>
        <td>java</td>
        <td>数据库</td>
        <td>linux</td>
        <td>web开发</td>
</table>

媒体标签

video标签（视频）
audio标签（音乐）

<!--视频-->
<video src="..\resources\video\2.mp4" controls autoplay></video>

<!--音乐-->
<audio src="..\resources\audio\3.mp3"  controls autoplay ></audio>

<!--controls表示有进度条控制，autoplay表示网页打开时自动播放-->

相对路径（最前面用两个点代替，表示先回到上一级目录,如…\resources\video\2.mp4，前提是把文件导入项目中）
绝对路径（把路径写死，如C\Destop\HTML5\resources\audio\3.mp3）

页面结构分析

学新通

iframe内联框架

iframe标签（在一个网页中嵌套另一个网页）

<!--比如嵌套bilibili(可以从其网站的嵌入代码导入)-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

<!--比如嵌套淘宝网站-->
<iframe src="https://www.taobao.com"   name="hello" frameborder="0"  width="1000px" height="800px"></iframe>

表单post和get提交

post提交（比较安全，比较适合传输大文件）
get提交（我们可以在url中看到我们提交的信息，不安全，但是高效）

更加详细的post和get区别：博客园

<form action="https://www.taobao.com"  method="post">
    <p>用户名: <input type="text"  name="username" placeholder="请输入用户名"  required>  </p>
    <p>密码: <input type="password"  name="pwd"> </p>
    
<!--提交和重置-->  
    <p>
     <input type="submit" />
        <input type="reset"/>
        </p>
</form>
<!--action属性表示提交后要跳转到的网页，method属性分为post和get提交，name属性表示标识必须有才能提交，placeholder属性表示提示， required属性表示必填-->

表单格式

文本框和单选框
按钮和多选框
列表框文本域和文件域
搜索框滑块和简单验证

<form action="https://www.taobao.com"  method="post">

<!--单选框 name属性值相同则同为一个组，单选的时候只能二选一，value属性表示勾选时取得值-->
    <input type="radio" value="boy"  name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
    </p>
    
 <!--多选框-->  
    <p>爱好:
        <input type="checkbox" value="sleep"  name="hoppy"/>睡觉
        <input type="checkbox" value="code"  name="hoppy"/>敲代码
        <input type="checkbox" value="game"  name="hoppy"/>游戏
    </p>
    
  <!--列表框-->  
    <p>国家:
        <select name="列表名称" >
            <option value="china">中国</option>
            <option value="ee">俄罗斯</option>
            <option value="cc">塞尔维亚</option>
            <option value="rr">巴基斯坦</option>
        </select>
    </p>
    
  <!--文本域-->  
    <p>反馈:
        <textarea name="textarea" cols="30" rows="10"></textarea>
    </p>
    
   <!--文件域-->  
    <p>文件
        <input type="file" name="files">
    </p>
    
   <!--滑块和搜索框-->  
    <p>音量:
        <input type="range" name="voice">
    </p>
    <p>搜索:
        <input type="search" name="search">
    </p>
    </p>
</form>

表单初级验证

表单初级验证表示在前端做一些简单的验证，省去一些后端的工作量。

邮箱验证
url验证

自定义表单验证

<form action="https://www.taobao.com"  method="post">
<p>邮箱验证:
    <input type="email" name="email">
</p>
<p>url验证:
    <input type="url" name="url">
</p>
<p>自定义表单验证:
    <input type="text" name="dyemail"  value="上网搜索相应的邮箱正则表达式" pattern="">
</p>
</form>

这篇好文章是转载于：学新通技术网

HTML5初识

初识HTML

网页基本信息

网页基本标签

图像标签

超链接及应用

块元素和行内元素

列表标签

表格标签

媒体标签

页面结构分析

iframe内联框架

表单post和get提交

表单格式

表单初级验证

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐