wordpress 软件站主题,营销型企业、公司网站案例,西安搬家公司收费标准,仿网站ppt怎么做HTML
什么是HTML#xff1a;
作为前端三件套之一#xff0c;HTML的全称是超文本标记语言#xff08;Hypertext Markup Language#xff09;。HTML是一种标记语言#xff0c;用于创建网页。它由一系列标签组成#xff0c;这些标签用于定义网页的结构和内容。HTML标签告诉…HTML
什么是HTML
作为前端三件套之一HTML的全称是超文本标记语言Hypertext Markup Language。HTML是一种标记语言用于创建网页。它由一系列标签组成这些标签用于定义网页的结构和内容。HTML标签告诉浏览器如何显示网页的内容包括文本、图像、链接等。HTML是网页开发的基础它与CSS和JavaScript一起构成了网页的核心技术。
下面来看看html的发展历史
HTML
什么是HTML
作为前端三件套之一HTML的全称是超文本标记语言Hypertext Markup Language。HTML是一种标记语言用于创建网页。它由一系列标签组成这些标签用于定义网页的结构和内容。HTML标签告诉浏览器如何显示网页的内容包括文本、图像、链接等。HTML是网页开发的基础它与CSS和JavaScript一起构成了网页的核心技术。
下面来看看html的发展历史 html5较之其他更具有优越性所以本文主要介绍html5的学习。
下面开始我们的学习先看一看基本结构 当我们创建好一个新文件我们可以看到
右边为浏览器的快捷打开 下面来看看具体解释
pshtml的注释格式为!-- --
!DOCTYPE html !--告诉浏览器我们的使用规范。--
html langen!--总标签--
head!--网页头部--!--meta描述性标签描述网页关键词--meta charsetUTF-8!--它指定了网页的字符编码方式为UTF-8。UTF-8是一种通用的字符编码方式可以用来表示世界上几乎所有的文字。--meta namekeywords contentSTUDENT!--可以描述关键词--meta namedescription contentHELLO!--这段代码是HTML中的meta标签用于描述网页的关键词和描述信息。其中name属性为keywords表示关键词content属性为STUDENT表示关键词为STUDENTname属性为description表示描述信息content属性为HELLO表示描述为HELLO。这些信息有助于搜索引擎了解网页内容并在搜索结果中显示相关信息。--titleTitle/title!--网页标题--
/head
body!--网页主体--
/body
/html一网页的基本标签
1标题标签
body
!--标题标签--
h1一级标签/h1
h2二级标签/h2
h3三级标签/h3
h4四级标签/h4
h5五级标签/h5
h6六级标签/h6
/body效果预览 2段落标签
如果没有段落和换行标签即使加入了换行符网页的文字也还会是一行。
!--段落标签--
p两只老虎两只老虎/p
p跑得快跑得快/p
p一只没有耳朵/p
p一只没有尾巴/p
p真奇怪真奇怪/p3换行标签
!--换行标签--
两只老虎两只老虎br//可不用闭合也可闭合
跑得快跑得快br
一只没有耳朵br
一只没有尾巴br
真奇怪真奇怪br4水平线标签
!--水平线标签--
hr/5字体样式标签
strongI love you/strong!--粗体--
hr/
emI love you too/em!--斜体--效果预览 6注释与特殊符号
空 格!--再多空格也默认一个--
空nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;格!--有几个空几个--
gt;大于
lt;小于
copy;版权符号二图像标签 相对路径是相对于当前文件所在位置的路径而绝对路径是从文件系统的根目录开始的完整路径在html中我们一般选择相对路径。
body!--网页主体--
!--img学习
src图片地址
相对地址推荐绝对地址
../ --上一级目录
alt 获取失败显示
title 悬停文字
width 宽度
height 高度
--
注意所选用的image要放在与html文件同一个文件夹里这样就只用…\图片名就行。
效果展示 三超链接标签 !--用name作为标记--
a nametop顶部/a
!--a超链接标签
href表示要跳转到哪个页面
target表示窗口在哪里打开
_blank 在新页面中打开
_self 在自己的页面中打开默认
--
a hrefhttps://baike.baidu.com/item/%E5%8E%9F%E7%A5%9E/23583622?frge_ala target_blank点击此处跳转/a
a hrefhttps://www.baidu.com/点击此处跳转 /a
a hrefhttps://baike.baidu.com/item/%E5%B8%83%E8%BE%BE%E6%8B%89%E5%AE%AB/113399img src..\1.jpg alt布达拉宫 title布达拉宫 width800 height600
/a
!--锚链接
实现页面间的跳转
1.需要一个锚标记
2.跳转到标记--
a href#top回到顶部/a除此之外锚链接还可以实现页面之间的跳转我们在其中一个html文件中加入
a namedown底部/a在另外一个html文件中加入
a hreffirst.html#down跳转/a即可跳转注意不要忘记跳转两字否则不显示。
!--功能性链接
邮箱链接mailto
qq链接:在qq推广中腾讯官方会自动生成代码在线咨询--
a hrefmailto:40505282qq.com点击联系我/a四行内元素与块元素 五列表标签
在HTML中列表是一种用于展示项目的结构。HTML提供了三种类型的列表无序列表 ul 、有序列表 ol 和定义列表 dl 。
无序列表用于显示项目之间没有特定顺序的项目通常用圆点、方块或其他符号来标记项目。
有序列表用于显示按照特定顺序排列的项目通常使用数字或字母来标记项目。
定义列表用于显示项目及其定义通常使用术语和描述来表示项目。
在HTML中列表可以包含多个列表项 li 来表示每个项目。列表是HTML中常见的用于组织和展示信息的元素。
代码如下
!--有序列表--
olliC/C/liliPython/liliGo/liliJava/li
/olhr/!--无序列表--
ulliC/C/liliPython/liliGo/liliJava/li
/ulhr/!--自定义列表
dl 标签
dt 列表名称
dd 列表选项
--
dldt学科/dtddC/C/ddddPython/ddddGo/ddddJava/dddtSTL/dtddstack/ddddqueue/dddddeque/dd
/dl效果预览 六表格标签
HTML表格标签是用于创建表格的一组HTML元素。使用这些标签可以创建各种类型的表格包括简单的数据表格和复杂的布局表格。表格标签还支持一些属性可以用来设置表格的样式、大小、边框等。在HTML中表格标签是用于展示和组织数据的重要元素之一。
代码如下
!--
表格table
行 tr
列 td
--
table borden1pxtr!--colspan 跨列--td colspan41-1/tdtd1-2/tdtd1-3/tdtd1-4/td/trtr!--跨行 rowspan--td rowspan42-1/tdtd2-2/tdtd2-3/tdtd2-4/td/trtrtd3-1/tdtd3-2/tdtd3-3/tdtd3-4/td/tr
/table效果预览 注意跨行如果是最后一行则效果不明显。
七视频与音频
代码如下
!--
src 路径
controls 控制开关
autoplay 自动播放
--
video src../v1.mp4 controls autoplayautoplay/video
audio src controls /audio注意没有控制开关什么也看不见其次不同的浏览器可能对自动播放有不同的要求。
预览如下 八页面结构分析 比如以下代码
!-- 头部区域 --
headerh1头部/h1
/header
!-- 导航区域 --
navullia href#首页/a/lilia href#关于/a/lilia href#服务/a/lilia href#联系我们/a/li/ul
/nav
!-- 主要内容区域 --
mainsectionh2部分1/h2p这是部分1的内容。/p/sectionsectionh2部分2/h2p这是部分2的内容。/p/section
/main!-- 侧边栏区域 --
asideh3侧边栏/h3p这是侧边栏的内容。/p
/aside!-- 底部区域 --
footerp底部/p
/footerheader这个部分定义了页面的头部通常包括网站的标题或标志。nav这个部分定义了页面的导航区域包含了一个无序列表ul其中每个列表项li是一个导航链接a用户可以通过这些链接导航到网站的不同部分。main这个部分定义了页面的主要内容区域包含了两个section每个section包含一个标题h2和一段内容p。这里存放着页面的主要信息和内容。aside这个部分定义了页面的侧边栏区域包含了一个标题h3和一段内容p。通常用于显示与主要内容相关的附加信息或导航链接。footer这个部分定义了页面的底部区域通常包括版权信息、联系方式等内容。
这些HTML标签的使用有助于提高页面的结构化和语义化同时也有利于搜索引擎的理解和页面的可访问性。
预览如下 九iframe内联框架 !--iframe
src :地址
w-h 宽度高度
frameborder是HTML中的一个属性用于设置iframe元素的边框是否显示。如果设置为0则不显示边框如果设置为1则显示边框。--
iframe srchttps://www.baidu.com frameborder0 width300px height300px /iframeiframe与超链接的区别是超链接一般用于跳转到另一个页面而iframe用于在当前页面中嵌入其他页面的内容。而两者也可以嵌套使用
iframe src namehello frameborder0 width300px height300px /iframe
a hreffirst.html targethello点击跳转/a在这个例子中hello是iframe的name属性用于给iframe元素命名以便在超链接或JavaScript中引用它。而当前页面就是包含iframe和超链接的页面。当用户在当前页面点击超链接时目标页面first.html会在名为hello的iframe中加载显示而当前页面不会发生跳转或刷新。所以用户仍然可以在当前页面中看到iframe以及其他内容同时在iframe中显示first.html的内容。
效果预览 十表单
表单Form是HTML中一种重要的交互元素它用于向服务器提交数据。表单通常包含一个或多个表单元素如文本框、下拉列表、单选框、复选框、按钮等用于收集用户输入的数据。当用户提交表单时表单数据会被发送到服务器服务器可以根据表单数据进行相应的处理例如保存数据到数据库、发送电子邮件等。 !--表单form
action: 表单提交的位置,可以是网站也可以是一个请求处理地址
method: post ,get 提交方式get:我们可以在url中看到我们提交的信息不安全高效post: 安全传输大文件--
h1注册/h1
form actionfirst.html methodget
!--文本输入框input typetext--
p名字input typetext nameusername /p
!--密码框--
p密码input typepassword namepwd /p
pinput typesubmitinput typereset
/p
/form效果预览 例如用get输入我们可以在first.html中看到密码 下面我们用post试试
!--表单form
action: 表单提交的位置,可以是网站也可以是一个请求处理地址
method: post ,get 提交方式get:我们可以在url中看到我们提交的信息不安全高效post: 安全传输大文件--
h1注册/h1
form action测试.html methodpost
!--文本输入框input typetext--
p名字input typetext nameusername /p
!--密码框--
p密码input typepassword namepwd /p
pinput typesubmitinput typereset
/p
/form在我们点击提交之前我们可以打开网页检查再点击network此时未检测到提交数据。 当我们点击提交后网页跳转到测试.html在通过点击负载我们可以看到输入的账号密码。
注意不同的浏览器在不同的位置进行查看。 当然我们之后也可以通过一些加密的方式使它保密性更高。
当然上面这种两个html文件之间相互的跳转之类与上面的图片视频一样需要将它们放在同一个项目里。否则会出现404 Not Found提示。
十一文本框与单选框
文本框Text Box是HTML表单元素之一用于允许用户输入文本。文本框通常以一个矩形框的形式呈现用户可以在文本框中输入任意文本。文本框使用input标签其中type属性设置为text来创建。
单选框Radio Button是HTML表单元素允许用户从多个选项中选择一个选项。单选框通常以圆形按钮的形式呈现用户可以通过点击单选框来选择某个选项。单选框使用input标签其中type属性设置为radio来创建。单选框通常以一组的形式出现用户只能从该组选项中选择一个。
文本框和单选框都是表单中常用的交互元素文本框用于允许用户输入任意文本而单选框用于允许用户从多个选项中选择一个。 h1注册/h1
form action测试.html methodpost
!--文本输入框input typetext
value请输入初始值
maxlength8最多可输入
size30文本框的长度--
p名字input typetext nameusername /p
!--密码框--
p密码input typepassword namepwd /p
p性别:!--radio :单选框value:值name:表示组--input typeradio valueboy namesex/男input typeradio valuegril namesex/女
/p
pinput typesubmitinput typereset
/p
/form有几点需要我们注意
1.radio必须要对它进行赋值。
2.相同的一组必须要赋予相同的name不然会出现同时可以选择两个选项的情况。
预览如下 十二按钮和多选框
按钮Button是HTML表单元素之一用于在表单中创建可点击的按钮。按钮元素通常用于触发JavaScript函数或提交表单数据。在HTML中按钮可以使用button标签或input标签来创建分别对应着和。按钮可以包含文本、图像或两者兼有用户点击按钮时可以触发相应的事件或行为。
多选框Checkbox是HTML表单元素允许用户从多个选项中选择多个选项。多选框通常以方框的形式呈现用户可以通过点击多选框来选择或取消选择某个选项。多选框使用input标签其中type属性设置为checkbox来创建。多选框可以单独使用也可以以一个或多个的形式组合在一起用户可以同时选择多个选项。
按钮和多选框都是表单中常用的交互元素按钮用于触发特定的行为或事件而多选框用于允许用户从多个选项中进行多选。
代码如下
!--多选框checkbox--p爱好input typecheckbox valuesleep namehobby睡觉input typecheckbox valuechat namehobby聊天input typecheckbox valuecode namehobby敲代码input typecheckbox valuegame namehobby游戏/p!--按钮button 普通按钮image 图像按钮submit 提交按钮reset 重置--pinput typebutton namebtn1 value点击变帅input typeimage src1.jpg width300px height300px/p
pinput typesubmitinput typereset value清空
/p预览如下 十三列表文本域与文件域
列表文本域List Box是HTML表单元素之一它允许用户从预定义的选项列表中进行选择。列表文本域通常以下拉列表的形式呈现用户可以点击下拉箭头并从列表中选择一个或多个选项。列表文本域使用select和option标签来创建其中select标签定义了列表文本域而option标签定义了列表中的每个选项。
文件域File Input是HTML表单元素用于允许用户选择并上传文件。文件域通常以一个按钮和一个文本框的形式呈现用户可以点击按钮浏览文件并选择要上传的文件文件路径将会显示在文本框中。文件域使用input标签其中type属性设置为file来创建。
这两种表单元素都是用于收集用户输入数据的列表文本域用于提供预定义的选项供用户选择而文件域用于允许用户选择并上传文件。
代码如下 !--下拉框列表框--p国家:select name列表名称option valueChina selected中国/optionoption valueUSA美国/optionoption valueUS英国/optionoption valueFrance法国/option/select/p!--文本域--反馈:ptextarea nametextarea cols50 rows5文本内容/textarea/p!--文件域--
pinput typefile namefilesinput typebutton value上传 nameupload
/p注意一般情况下input都要用name标签这是一个良好的习惯。
效果展示 注意在下拉框中输入selected表示预选而在单选框与多选框中输入checked表示预选。
十四搜索框滑块和简单验证
搜索框搜索框是一个用于接收用户输入的文本框。用户可以在搜索框中输入关键词、短语或问题然后提交给服务器进行搜索或其他处理。搜索框通常用于网页搜索、站点内搜索、登录页面等。滑块滑块是一个可拖动的控件用于调整某个值。例如音量滑块可以用来调节音频的音量大小。滑块通常有最小值、最大值和步长增长的最小单元。用户可以通过拖动滑块来选择所需的值。简单验证在表单中简单验证是一种基本的输入检查机制。例如您可以验证用户输入的邮箱地址是否符合邮箱格式或者验证输入的数字是否在指定范围内。这有助于确保用户输入的数据有效和合法。、
代码如下 !--验证--p邮箱input typeemail nameemailppurlinput typeurl nameurlpp数值input typenumber max100 min-100 step10/p
!--滑块--pinput typerange min0 max100 namevoice step10/p
!--搜索框--Pinput typesearch namesearch/P样式预览 十五表单的运用
只读
在部分语句中加入readonly就变成了只读模式不能更改
p名字input typetext nameusername valueshelly readonly /p禁用
在部分语句中加入disabled就变成了禁用模式不能更改
input typeradio valuegril namesex disabled/女隐藏
在部分语句中加入hidden就变成了隐藏模式不能被看见实际上还是存在
p名字input typetext nameusername valueshelly hidden /p我们可以通过这些方法使表单具有一些默认隐藏值且无法被改变。
plabel formark点击/labelinput typetext idmark
/p我们还可以通过这种办法增强鼠标的实用性点击指定位置文本框即会出现光标。
十六表单初级验证
对表单进行验证的原因是为了确保用户输入的数据符合预期的格式和要求以及防止恶意输入和错误数据的提交。验证可以帮助确保数据的准确性和完整性提高系统的安全性和稳定性同时也可以提升用户体验。通过验证可以避免因为错误或恶意输入而导致的系统崩溃、数据损坏或安全漏洞。同时也可以提高效率即省去对错误输入的处理。
1.placeholderPlaceholder是HTML5中的一个属性用于在表单元素中显示提示文本以便用户更好地理解该元素的预期输入值。当用户在输入框中输入内容时提示文本会自动消失以便用户更清晰地看到他们正在输入的内容。
p名字input typetext nameusername placeholder请输入用户名 /p2.required在HTML中required是一个表单元素属性用于指示某个输入字段必须填写才能提交表单。当将required属性添加到表单元素中时用户在提交表单时将无法绕过该字段的填写要求。类似于一些必填项。
p名字input typetext nameusername placeholder请输入用户名 required /p3.pattern在HTML中pattern属性用于指定输入字段的正则表达式模式以确保用户输入的内容符合特定的格式要求。当用户在输入字段中输入内容并尝试提交表单时浏览器会验证输入内容是否符合指定的正则表达式模式。
例如如果您希望用户在输入字段中只能输入特定格式的电话号码您可以使用pattern属性来指定电话号码的正则表达式模式。如果用户输入的内容不符合指定的模式浏览器将显示一个错误消息提示用户输入内容不符合要求。
以下是一个示例演示了如何在HTML中使用pattern属性来指定输入字段的正则表达式模式
formlabel forphone请输入电话号码格式xxx-xxxxxxx/labelinput typetext idphone namephone pattern[0-9]{3}-[0-9]{7} title请输入正确格式的电话号码例如123-4567890 requiredinput typesubmit value提交
/form在上面的示例中pattern[0-9]{3}-[0-9]{7}指定了电话号码的正则表达式模式要求用户输入三位数字、一个连字符、然后再输入七位数字的格式。如果用户输入的内容不符合这个模式浏览器将显示title属性中指定的错误消息。
使用pattern属性可以帮助确保用户输入的内容符合特定的格式要求提高表单数据的准确性和完整性。
注本文的学习资料和部分图片来自哔哩哔哩----秦疆老师JavaWeb课程之HTML .如果想有更详细的学习可以去看看他更详细的视频。
以上就是一些关于html基础性的知识分享感谢您的阅读。
