首页 > 其他分享 >HTML

HTML

时间:2022-09-04 00:55:14浏览次数:82  
标签:标记 标签 元素 HTML 链接 页面

HTML

一、初始HTML

1、Hyper Text Markup Language 超文本标记语言
超文本包括文字、视频、图像、音频、动画等

2、W3C标准
World Wide Web Consortium 万维网联盟 国际中立性技术标准机构
包括:
结构化标准语言:HTML、XML
表现标准语言:CSS
行为标准:DOM、ECMAScript

3、开发工具
记事本、Dreamweaver、IDEA、WebStorm、VScode

二、网页基本信息

1、注释

两个横杠中间写注释内容

2、网页基本结构

网页基本结构
网页基本结构1

三、网页基本标签

标题标签是从h1到h6
网页基本标签

四、图像标签

1、常见的图形格式:
JPG、GIF、PNG、BMP

2、HTML中应该另外建立一个目录存放照片、视频等
图像标签

3、加图像的快捷方式为img+tab键,其中图片地址和名字必填,其他选填
图像标签1
图像标签2

五、链接标签

链接标签

参考文章

1、页面链接

从一个页面到另一个页面,可以用文字或者图像做链接,把文字或者图像标签放在a标签里
页面链接

2、锚链接

点击设定的链接,可以快速的定位到同一个页面或者不同页面中的某个位置。需要一个锚标记跳转到标记,锚标记中要有#
比如先做一个标记:使用name作为标记
标记

通过点击锚标记跳转
锚标记

也可以通过页面链接设置锚链接如下(记得在另一个页面设置标记)
页面链接锚标记

3、功能性链接

邮件链接

邮件链接

QQ链接

比如QQ推广中输入提示语可以自动生成代码,将代码复制到网页里最后就可以生成一个QQ在线聊天的图标
QQ推广

QQ推广图标

六、行内元素与块元素

行内元素:内容撑开宽度,左右都是行内元素的可以排在一行(a,strong,em)
块元素:无论内容多少,该元素独占一行(p,h1-h6)

七、列表标签

网站最底下的文字

无序列表

有序列表

定义列表

有序和无序列表

定义列表

八、表格标签

表格

九、媒体元素

视频元素:video
音频元素:audio
媒体元素

十、页面结构分析

页面结构

一个网站里面嵌套另一个网站
内联框架1

在这个页面会直接出现一个百度的页面,自己设置长宽
内联框架2

内联框架名字为hello,然后在超链接里跳转到目标网站
内联框架3

十二、表单post和get提交(重点)

1、文本框

表单1

name属性必须写
表单元素格式

表单就比如网站里的登录页面
input标签可以是一个文本输入框,尽量给文本输入框命一个名字
提交之后就会直接跳到action中的地址
表单

2、单选框

单选框radio
name属性表示一个组,在同一个组内只能选一个,不同的组可以多选
单选框

3、多选框

多选框checkbox;默认选中的checked,格式类似列表框
name也一定要写,要写一样的名字,是可以多选的
多选框

4、按钮

按钮button
可以用value设一个按钮上的初始值
按钮

5、列表框(下拉框)

selected表示默认选择这个
列表框

6、文本域和文件域

要注意一下文本域是textarea
文件域就是指日常选择文件,上传文件
文本域和文件域

文本域和文件域1

7、搜索框滑块和简单验证

滑块的话可以用在音量调节上
滑块与简单验证

滑块与简单验证1

十三、表单的应用

只读:readonly(不能修改)
禁用:disabled
隐藏:hidden(如下可以隐藏密码文本框,默认密码为123456)
表单应用

应用2

增强鼠标可用性:可以通过直接点击文字,跳到input文本框里,for表示要跳到的地方
应用3

十四、表单初级验证

placeholder:提示信息
验证1

验证2

required:表示不能为空
验证3

pattern:正则表达式
正则表达式速查表:https://www.jb51.net/tools/regexsc.htm
验证4

标签:标记,标签,元素,HTML,链接,页面
From: https://www.cnblogs.com/ChenAiNan/p/16654105.html

相关文章

  • Jenkins中HTML报告无法正常显示问题解决
    自动化结果生成了HTML报告,但是在Jenkins中打开报告却显示空白,打开控制台,可以看到该报错参考https://www.jenkins.io/doc/book/security/configuring-content-security-po......
  • HTML、CSS 和 JavaScript 格式的 3D 玻璃天气图标
    HTML、CSS和JavaScript格式的3D玻璃天气图标3D玻璃天气图标免费下载****在HTML、CSS和JavaScript中HTML:<divclass="weatherweather--sun"><divclass......
  • 使用JavaScript对HTML实体字符进行转义与反转义处理
    原文地址:https://www.yerenwz.com/6567.html在这篇《短代码与代码高亮功能结合,终于可以随意的来回切换可视化/文本模式进行编辑代码了》文章中有提到在折腾WordPress自......
  • HTML——hr标签&注释
    hr标签:添加水平线<html><body><p>hr标签定义水平线:</p><hr/><p>这是段落。</p><hr/><p>这是段落。</p><hr/><p>这是段落。</p></body></html>注释:可......
  • HTML——br标签
    <br/>标签:如果您希望在不产生一个新段落的情况下进行换行(新行),请使用<br/>标签:<br>还是<br/>您也许发现<br>与<br/>很相似。在XHTML、XML以及未来的HTML......
  • 为 html 设置 Tailwindcss CLI
    为html设置TailwindcssCLI以下是我用来创建基本Tailwaind设置的步骤:在VSCode中打开一个新终端并导航到您要在计算机上创建项目的任何位置(这里是终端命令的一个......
  • HTML、CSS 和 JavaScript 中的所有唯一字符挑战
    HTML、CSS和JavaScript中的所有唯一字符挑战HTML:<divclass="wrapper"><h1>所有独特的字符</h1><br><p>来自<ahref="https://buttondown.email/cassidoo/ar......
  • 如何使用 CSS 和 HTML 创建 Glassmorphism 效果
    如何使用CSS和HTML创建Glassmorphism效果Glassmorphism效果在现代网页设计中越来越流行Glasmorphism是一个有点新的功能,它一直在流行,并且经常在新设计的网站上受......
  • HTML标签
    一、HTML概述HTML:HyperTextMarkupLanguage,超文本标记语言。是用来帮助我们构建网页的。【超文本】:网页本身是一个文本文件,而超文本指的是这种文件中既可以包含文本信......
  • XML与HTML的区别
    前言:最近课上讲到webservice的接口,有接触到XML格式的参数,加上同学们有接触过HTML,感觉这两者很相似,多次问到这两者有什么区别,所以特此写一篇文章来阐述一下。一、认识XML1......