漯河网上商城网站建设,品牌网站部门建设方案,传奇手游盒子app平台排行榜,自己做网站 微信
一、什么是HTML
HTML是hypertext markup language#xff08;超文本标记语言#xff09;的缩写。HTML文件本质上是文本文件#xff0c;普通的文本文件只能显示字符#xff0c;而HTML文件可以在浏览器上显示更丰富的信息#xff08;如图片等#xff09;。
超文本超文本标记语言的缩写。HTML文件本质上是文本文件普通的文本文件只能显示字符而HTML文件可以在浏览器上显示更丰富的信息如图片等。
超文本本身是文本但呈现的内容超越了文本。标记语言指HTML语言是由一系列标签组成的没有变量、流程控制等编程语言的特性。标签在HTML语言中标签是由一对尖括号标签名的方式来定义的并且标签名不能自定义. 双标签双标签形式如下 TagName称为开始标签/TagName称为结束标签content被称为文本标签体也简称标签体。TagNamecontent/TagName单标签单标签形式如下单标签的结尾要加上 / 。 input typetext nameusername /属性在如上单标签中typetext就是一个属性type称为属性名text称为属性值。属性一般在开始标签中用于定义标签的一些特征。文本双标签中间的文字包含空格换行等结构。元素每一个完整标签标签属性文本称为一个元素。
二、HTML基础结构
文档声明用于告诉浏览器当前HTML文档的基本信息。 HTML4版本的文档声明是!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtdHTML5版本的文档声明是 !DOCTYPE html。现在主流都是用HTML5. 根标签html标签是整个文档的根标签所有其他标签都必须放在html标签里面。形式如下htmlcontent/html头部元素head标签用于定义文档的头部其他头部元素都放在head标签内。头部元素包括title标签、script标签、style标签等。一些重要的但不在浏览器窗口中显示的内容定义在头部标签中。形式如下headcontent/head主体元素body标签用于定义网页的主体内容在浏览器窗口显示的内容都定义在body标签内。形式如下bodycontent/body注释!-- content --
三、第一个HTML程序
HTML文件本质上是一个文本文件所以在使用开发软件之前可以使用记事本来编写一个简单的HTML程序。
新建一个文本文件并更改后缀名为html接着在记事本中编写代码并保存。使用浏览器打开html文件看看显示的内容。
!-- 这是第一个HTML程序 --!-- 文档声明 --
!DOCTYPE html!-- 根标签 --
!-- 在根标签html后可以加上属性 langen作用是告诉浏览器这个文档是英文的不论文档中是什么语言都会当作英文这时如果浏览器的默认语言不是英文就会提示是否翻译网页 --
html!-- head标签定义头部元素 --head!-- meta标签可以用于指定浏览器解析文件的字符集注意如果html文件和指定浏览器使用的字符集不同就会产生乱码 --meta charsetutf-8 /!-- title用于定义文档的标题会显示在浏览器上 --title第一个HTML程序/title/head!-- body标签定义在浏览器中显示的主体内容 --body!-- h1/h1表示一级标题 --h1Hello HTML!/h1h1你好HTML!/h1/body
html如果将字符集改为gbk那么网页会出现乱码。
四、HTML语法规则
根标签只能有一个双标签或是单标签都需要正确关闭双标签使用结束标签关闭单标签使用 /。标签可以嵌套但不能交叉嵌套正确写法htmlhead/head/html错误写法htmlhead/html/head注释不能嵌套属性必须有值值必须加引号。H5中如果属性值与属性名一致可以不写属性值。HTML中不严格区分字符串使用双引号或是单引号。如果在字符串中嵌套字符串那么内层字符串应该和外层字符串使用不同的引号。HTML标签不严格区分大小写但是不能大小写混用如html/HTML hTml/HTmlHTML不允许自定义标签名自定义的标签名无效。
五、安装VsCode
傻瓜式安装安装成功后下载下图中的插件即可。 在HTML文件中输入 ! 并回车可快速打出HTML文件的基本结构。 当编写好HTML文件后点击右下角的Go Live会启动小型服务器并打开浏览器访问当前资源。 在设置中搜索auto save然后选择after delay可以自动保存编辑后的文件并且当该文件在浏览器打开时会自动在浏览器中更新改动。 在设置中搜索mouse wheel zoom勾选后可以使用ctrl滚轮调整字体大小。
六、HTML常见标签
1.标题标签
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleTitle Tag/title/headbodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6!-- 自定义标签无效所以下面的内容等同于直接写 七级标题--h7七级标题/h7/body/html2.段落标签
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleParaGraph Tag/title/headbody!-- 如果在body中出现大量文本默认情况下它们会紧密排列在一起使用换行标签也达不到分段的效果。如果要对文本进行分段就要用到分段标签 --恒星是由发光等离子体——主要是氢、氦和微量的较重元素——构成的巨型球体。天气晴好的晚上夜幕中总镶嵌着无数的光点这其中除了少数行星其它的绝大多数都是恒星。太阳是离地球最近的恒星而夜晚能看到的恒星几乎都处于银河系内。 [1] 而银河系统共约3000亿颗恒星中人类只能观测到一小部分。 [2] 人类观测恒星历史已久观测方法很多。那些比较明亮的恒星被分成一个个的星座和星群有些恒星有专有的名称。恒星的亮度被称为星等星越亮星等越低。天文学家还汇编了星表以方便进行研究。恒星会在核心进行核聚变以产生能量并向外传输然后从表面辐射到外层空间。一旦核心的核反应殆尽恒星的生命就即将结束。在生命的尽头恒星也会包含简并物质。恒星大小与质量的不同会导致其不同的结局白矮星、中子星、黑洞。两颗或更多受到引力束缚的恒星可以形成双星或聚星当这样的恒星在相对较近的轨道上时其间的物质交流可以对它们的演化产生重大的影响。2023年天文学研究指出位于贫金属恒星宜居带的行星可能是搜寻潜在生命的最佳地点。p恒星是由发光等离子体——主要是氢、氦和微量的较重元素——构成的巨型球体。天气晴好的晚上夜幕中总镶嵌着无数的光点这其中除了少数行星其它的绝大多数都是恒星。太阳是离地球最近的恒星而夜晚能看到的恒星几乎都处于银河系内。 [1] 而银河系统共约3000亿颗恒星中人类只能观测到一小部分。 [2] 人类观测恒星历史已久观测方法很多。那些比较明亮的恒星被分成一个个的星座和星群有些恒星有专有的名称。恒星的亮度被称为星等星越亮星等越低。天文学家还汇编了星表以方便进行研究。/pp恒星会在核心进行核聚变以产生能量并向外传输然后从表面辐射到外层空间。一旦核心的核反应殆尽恒星的生命就即将结束。在生命的尽头恒星也会包含简并物质。恒星大小与质量的不同会导致其不同的结局白矮星、中子星、黑洞。/pp两颗或更多受到引力束缚的恒星可以形成双星或聚星当这样的恒星在相对较近的轨道上时其间的物质交流可以对它们的演化产生重大的影响。/pp2023年天文学研究指出位于贫金属恒星宜居带的行星可能是搜寻潜在生命的最佳地点。/p/body
/html3.换行标签
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleNewLine Tag/title/headbody!-- br为普通换行 hr会在换行后加上一条横线用来分隔 --这是第一行br这是第二行hr这是第三行/body
/html4.列表标签
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleList Tag/title/headbody!-- 无序列表 --ulli第一条/lili第二条/lili第三条/lili第四条/li/ul!-- 有序列表 --ollifirst/lilisecond/lilithird/liliforth/li/ol!-- 嵌套标签 --olli标题ulli1.1/lili1.2/lili1.3/li/ul/lili标题/lili标题/li/ol/body
/html5.超链接标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!--点击后可以跳转到指定链接的标签称为超链接标签也称为a标签。a标签中的href属性用于定义链接1.可以使用绝对路径以/开头以文件所在的根目录为出发点2.可以使用相对路径以当前文件所在路径为起点3.可以使用完整的urltarget属性用于定义打开的方式1._blank表示在新窗口中打开2._self表示在当前窗口打开--a href/常用标签/01TitleTag.html target_blank绝对路径链接本地资源并在新窗口打开/abra href/常用标签/01TitleTag.html target_self绝对路径链接本地资源并在当前窗口打开/abra href02ParagraphTag.html target_blank相对路径打开本地资源并在新窗口打开/abra href02ParagraphTag.html target_self相对路径打开本地资源并在当前窗口打开/abra hrefhttps://www.baidu.com target_blank使用url在新窗口打开网站/abra hrefhttps://www.baidu.com target_self使用url在当前窗口打开网站/abr/body
/html6.多媒体标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!--多媒体标签img用于引入图片1.src图片路径路径可以是绝对路径或是相对路径2.title鼠标悬停时显示的文字3.alt图片加载失败时显示的文字--img src/常用标签/img/桌面.jpg title这是一张图片 alt图片加载失败!--audio用于引入声音1.src音频路径2.autoplay打开页面时是否自动播放3.controls是否展示控制面板4.loop是否循环播放video用于引入时频video属性与audio类似这里不再展示audio与video的用法与img类似--
/body
/html7.表格标签重点
7.1简单表格
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh3 styletext-align: center;学生成绩表/h3!--table标签表示表格thead标签表示表头表示表中呈现内容的行就叫表头可以省略不写tbody标签表示表体除去表头和表尾的部分可以省略tfoot标签表示表尾总结表中内容的行称为表尾可以省略tr标签表示一行td标签表示行内的一格th标签自带加粗和居中效果的td--!--table的属性在后面会有说明这里先使用--table border1px stylewidth:400px; margin: 0px auto;trth排名/thth姓名/thth成绩/th/trtrtd1/tdtdA/tdtd100/td/trtrtd2/tdtdB/tdtd92/td/trtrtd3/tdtdC/tdtd87/td/tr/table
/body
/html7.2单元格跨行
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh3 styletext-align: center;学生成绩表/h3!--使用td中的rowspan属性实现上下跨行注意在设置rowspan属性后要删除下面行多余的td标签否则下面行原本的方格会被挤到别的地方--table border1px stylewidth:400px; margin: 0px auto;trth排名/thth姓名/thth成绩/thth备注/th/trtrtd1/tdtdA/tdtd100/tdtd rowspan3这是备注/td/trtrtd2/tdtdB/tdtd92/td!--td/td--/trtrtd3/tdtdC/tdtd87/td!--td/td--/tr/table
/body
/html7.3单元格跨列
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh3 styletext-align: center;学生成绩表/h3!--使用td中的colspan属性实现跨列注意在设置colspan属性后要删除右面列多余的td标签否则右面列原本的方格会被挤到别的地方--table border1px stylewidth:400px; margin: 0px auto;trth排名/thth姓名/thth成绩/thth备注/th/trtrtd1/tdtdA/tdtd100/tdtd rowspan6这是备注/td/trtrtd2/tdtdB/tdtd92/td!--td/td--/trtrtd3/tdtdC/tdtd87/td!--td/td--/trtrtd总人数/tdtd colspan240/td/trtrtd平均分/tdtd colspan293/td/trtrtd及格率/tdtd colspan2100%/td/tr/table
/body
/html8.表单标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!--form标签表单标签action属性用于定义表单提交的服务器地址method属性定义信息提交的方式如get、postget方式提交的数据会明文加在url后post方式数据会放在请求体中input标签表单项标签用于定义表单项name属性用于定义提交的参数名type属性用于定义表单项类型text 文本框password 密码框submit 提交按钮reset 重置按钮--form action/常用标签/01TitleTag.html methodget用户名input typetext nameusername /br密码框input typepassword namepassword /brinput typesubmit value提交 /input typereset value重置 //form
/body
/html9.表单项标签重点
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform action/HelloHtml.html!--单行文本框--单行文本框input typetext nametxt /br!--密码框--密码框input typepassword namepwd /br!--typeradio表示单选框相同的name属性的radio为一组组内互斥在提交表单时name和value组成键值对发送给服务器checked表示默认选择多个checked只会生效最后一个当属性值与属性名相同时可以省略属性值--input typeradio namesex valuemale /男input typeradio namesex valuefemale checkedchecked /女br!--复选框在复选框中也可以使用checked指定默认选项--你喜欢的水果有input typecheckbox namefruit valueapple /苹果input typecheckbox namefruit valuecherry /樱桃input typecheckbox namefruit valuebanana /香蕉input typecheckbox namefruit valuepear /梨input typecheckbox namefruit valuepeach /桃子br!--下拉框使用select定义下拉框option标签设置列表项select的name属性和option的value属性组成键值对发送给服务器通过在option中设置selectedselected设置默认选项--你最喜欢的水果是select namefavoratefruitoption valueapple苹果/optionoption valuebanana香蕉/optionoption valuecherry樱桃/optionoption valuedefault selected--请选择--/option/selectbr!--按钮可以使用input标签或者button标签普通按钮单机无效果需要通过js绑定响应函数提交按钮点击后提交表单重置按钮点击后将所有表单都重置为默认值--input typebutton value普通按钮 /button typesubmit提交按钮/buttonbutton typereset重置按钮/button!--隐藏域通过表单隐藏域设置的表单项不会显示在页面上但是提交表单的时候会被一起提交。用来设置一些需要和表单一起提交但不希望被用户看见的内容--input typehidden nameuserId value10023 /br!--多行文本框可以在文本标签体中写默认内容--自我介绍textarea nameintro这是多行文本框/textareabr!--文件标签--input typefile namefile /br/form
/body
/html10.布局相关标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleLayoutTag/title
/head
body!--div标签俗称块用于划分页面结构独占占一行span标签俗称层用于划分元素范围配合css对页面元素样式进行修饰是行内元素--!--下面演示会使用到css--div stylewidth: 600px; height: 700px; background-color: antiquewhite;div stylewidth: 600px; height: 200px; background-color: aqua; margin: auto;span stylecolor: black;First/span/divdiv stylewidth: 600px; height: 200px; background-color: azure; margin: auto;span stylecolor: black;Second/span/divdiv stylewidth: 600px; height: 200px; background-color: bisque; margin: auto;span stylecolor: black;Third/span/div/div
/body
/html11.特殊字符
Java中存在一些特殊字符例如双引号表示字符串那么如果要在字符串中间加入双引号这个字符不使用转义字符就会造成字符串的截断。在HTML中也存在这种特殊字符例如尖括号。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1标题/h1lt;h1gt;标题lt;/h1gt;
/body
/html
