ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML

2022-09-04 01:00:40  阅读:179  来源: 互联网

标签:标记 标签 元素 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,链接,页面
来源: https://www.cnblogs.com/ChenAiNan/p/16654105.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有