如何选择武进网站建设,网页qq登录不了怎么回事,建设个人网站刷,网站制作建设公司HTML基础知识
1. VSCode的安装与配置
下载地址
https://code.visualstudio.com/
安装插件
Live Server Auto Rename Tag 自动格式化
点击 settings#xff0c;然后输入format#xff0c;然后勾选上 Format On Save。 2. HTML 基础标签
2.1 文件结构
快捷键#xff1…HTML基础知识
1. VSCode的安装与配置
下载地址
https://code.visualstudio.com/
安装插件
Live Server Auto Rename Tag 自动格式化
点击 settings然后输入format然后勾选上 Format On Save。 2. HTML 基础标签
2.1 文件结构
快捷键快速打开 vscode 中 web 的编辑界面 ! tab
audios存放音频
videos存放视频
images存放图片
文档结构
html 的所有标签为树形结构例如
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleWebClass/title
/head
bodyh1Hello World/h1
/body
/html标签
html
HTML html 元素 表示一个 HTML 文档的根顶级元素所以它也被称为根元素。所有其他元素必须是此元素的后代。
head
HTML head 元素 规定文档相关的配置信息元数据包括文档的标题引用的文档样式和脚本等。
body
HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。
title
HTML title 元素 定义文档的标题显示在浏览器的标题栏或标签页上。它只应该包含文本若是包含有标签则它包含的任何标签都将被忽略。
meta
HTML meta 元素表示那些不能由其它 HTML 元相关meta-related元素(base、link, script、style 或 title之一表示的任何元数据信息。
常见属性 charset这个属性声明了文档的字符编码。如果使用了这个属性其值必须是与 ASCII 大小写无关ASCII case-insensitive的”utf-8”。namename 和 content 属性可以一起使用以名 - 值对的方式给文档提供元数据其中 name 作为元数据的名称content 作为元数据的值。
icon
link relicon hrefimages/icon.png!-- 多行注释 --
快捷键 ctrl / 2.2 文本标签
文本标签虽然很多但大部分可看成是预定好样式的 div 和 span。
标签
div
HTML div 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器在不使用CSS的情况下其对内容或布局没有任何影响。 其他块级标签例如h1, p, pre, ul, ol, table。
h1 - h6
HTML h1–h6 标题 (Heading) 元素呈现了六个不同的级别的标题h1 级别最高而 h6 级别最低。
p
HTML p元素或者说 HTML 段落元素表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本或以垂直的空白隔离或以首行缩进。另外p 是块级元素。
pre
HTML pre 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排以等宽字体的形式展现出来文本中的空白符比如空格和换行符都会显示出来。(紧跟在 pre 开始标签后的换行符也会被省略)
br
HTML br 元素在文本中生成一个换行回车符号。此元素在写诗和地址时很有用这些地方的换行都非常重要。
hr
HTML hr 元素表示段落级元素之间的主题转换例如一个故事中的场景的改变或一个章节的主题的改变。
在 HTML 的早期版本中它是一个水平线。现在它仍能在可视化浏览器中表现为水平线但目前被定义为语义上的而不是表现层面上。所以如果想画一条横线请使用适当的 css 样式来修饰。
i
HTML 元素 i 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等它的内容通常以斜体显示。
b
HTML 提醒注意Bring Attention To元素b用于吸引读者的注意到该元素的内容上如果没有另加特别强调。这个元素过去被认为是粗体Boldface元素并且大多数浏览器仍然将文字显示为粗体。尽管如此你不应将 b 元素用于显示粗体文字替代方案是使用 CSS font-weight 属性来创建粗体文字。
del
HTML 的 del 标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。ins 标签的作用恰恰于此相反表示文档中添加的内容。
ins
HTML ins 元素定义已经被插入文档中的文本。 2.3 图片
标签
HTML img 元素将一份图像嵌入文档。默认为行内元素即 display: inline。
src 属性 该属性是必须的它包含了你想嵌入的图片的文件路径。
alt 属性 该属性包含一条对图像的文本描述这不是强制性的但对可访问性而言它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听让他们知道图像的含义。如果由于某种原因无法加载图像普通浏览器也会在页面上显示alt 属性中的备用文本例如网络错误、内容被屏蔽或链接过期时。
height 属性 图像的高度在 HTML5 中的单位是 CSS 像素在 HTML 4 中既可以是像素也可以是百分比。可以只指定 width 和 height 中的一个值浏览器会根据原始图像进行缩放。
width 属性 图像的宽度在 HTML5 中单位是 CSS 像素 在 HTML 4 中可以是像素也可以是百分比。
格式
img src/images/mountain.jpg alt这是一座大山的图片2.4 音频、视频
标签
audio
HTML audio 元素用于在文档中嵌入音频内容。 audio 元素可以包含一个或多个音频资源 这些音频资源可以使用 src 属性或者 source 元素来进行描述浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。 使用 src 属性播放 bodyh2Audios/h2audio controls src/audios/bgm.mp3无法播放/audio
/bodyaudio 与多个 source 元素 这个例子包含了多个 source 元素。如果能够播放的话浏览器就会试图去加载第一个 source 元素如果不行那就退而求其次去加载第二个。 写若干个 audio 的文件第一个不行就播放第二个加上 controls 才会播放。 bodyh2Audios/h2audio controlssource src/audios/sound1.mp3 , typeaudio/mpegsource src/audios/sound2.mp3 , typeaudio/mpeg/audio
/bodyvideo
HTML video 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器用于支持文档内的视频播放。你也可以将 video 标签用于音频内容但是 audio 元素可能在用户体验上更合适。 video controls width800 src/videos/video1.mp4/videovideo controls width800source src/videos/video2.mp4 typevideo/mp4source src/videos/video1.mp4 typevideo/mp4/video2.5 超链接
标签
HTML a 元素或称锚元素可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。a 中的内容应该指明链接的意图。如果存在 href 属性当 a 元素聚焦时按下回车键就会激活它。
点击链接打开新标签页面时加入属性target_blank
a hrefhttps://www.acwing.com/problem/ target_blank ACWing-官网/a2.6 表单
标签
form
HTML form 元素表示文档中的一个区域此区域包含交互控件用于向 Web 服务器提交信息。
input
HTML input 用来填写内容常见类型有
input typetext创建基础的单行文本框。input typenumber用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头让用户可以使用鼠标增加和减少输入的值或者只需用指尖敲击即可。input typeemail带有 “email” (电子邮箱) 类型标记的输入框元素 (input) 能够让用户输入或编辑一个电子邮箱地址此外如果指定了multiple属性用户还可以输入多个电子邮箱地址。在表单提交前输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式). CSS 伪标签 :valid 和 :invalid 能够在校验后自动应用。input typepasswordinput 元素 里有一种叫做 “password” 的值给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的其中文本被遮蔽以致于无法读取通常通过用诸如星号“*”或点“•”等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。input typeradioinput 的 radio 类型元素默认渲染为小型圆圈图表填充即为激活类似于之前描述额复选框checkbox类型。单选按钮允许你选择单一的值来提交表单。
label 和 input 绑定在一起通过 label 中的 for 和 input 中的 id
点击提交后 text 文本框中的内容发送到后端的 id 位 input 中的 name 属性 formlabel forusername用户名/labelinput typetext nameusername idusernamebrlabel forage年龄/labelinput typenumber nameage idagebrlabel foremail邮箱/labelinput typeemail nameemail idemailbrlabel forpassword密码/labelinput typepassword namepassword idpasswordbrlabel forlangcpp/labelinput typeradio namelang valuecpp idcppbrlabel forlangjava/labelinput typeradio namelang valuejava idjavabrlabel forlangpython/labelinput typeradio namelang valuepython idpythonbrbutton typesubmit提交/button/form常用属性有
name: 名称id: 唯一IDmaxlength最大长度minlength最小长度required是否必填placeholder当表单控件为空时控件中显示的内容
textarea
HTML textarea 元素表示一个多行纯文本编辑控件当你希望用户输入一段相当长的、不限格式的文本例如评论或反馈表单中的一段意见时这很有用。
textarea nameresume idresume cols30 rows10/textareaselect 与 option
HTML select 元素表示一个提供选项菜单的控件。表单
label forpet-selectChoose a pet:/labelselect namepets idpet-selectoption value--Please choose an option--/optionoption valuedogDog/optionoption valuecatCat/optionoption valuehamsterHamster/optionoption valueparrotParrot/optionoption valuespiderSpider/optionoption valuegoldfishGoldfish/option
/selectbutton
HTML button 元素表示一个可点击的按钮可以用在表单或文档其它需要使用简单标准按钮的地方。 默认情况下HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台用户操作系统的按钮 但你可以使用 CSS 来改变按钮的样貌。
button按钮/button2.7 列表
标签
ul 和 li
HTML ul 元素或称 HTML 无序列表元素表示一个内可含多个元素的无序列表或项目符号列表。
ullifirst item/lilisecond item/lilithird item/li
/ulol 和 li
HTML ol 元素表示有序列表通常渲染为一个带编号的列表。
olliFee/liliFi/liliFo/liliFum/li
/oldl 、dt和 dt
HTML dl 元素 或 HTML 描述列表元素是一个包含术语定义以及描述的列表通常用于展示词汇表或者元数据 (键 - 值对列表)。
dldtName/dtddGodzilla/dddtBorn/dtdd1952/dddtBirthplace/dtddJapan/dddtColor/dtddGreen/ddddOrange/dd
/dl2.8 表格
标签
table
HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。
thead
HTML的 thead元素定义了一组定义表格的列头的行。
tbody
HTML的 tbody 元素定义一组数据行。
tr
HTML tr 元素定义表格中的行。 同一行可同时出现 td 和 th 元素。
th
HTML th元素定义表格内的表头单元格。
td
HTML td 元素 定义了一个包含数据的表格单元格。
caption
HTML caption 元素 (or HTML 表格标题元素) 展示一个表格的标题 它常常作为 table 的第一个子元素出现同时显示在表格内容的最前面但是它同样可以被 CSS 样式化所以它同样可以出现在相对于表格的任意位置。
bodytablecaption成绩单/captiontheadtrth姓名/thth数学/thth语文/thth应用/th/tr/theadtbodytrtdsyy/tdtd100/tdtd100/tdtd100/td/trtrtdyxc/tdtd100/tdtd100/tdtd95/td/tr/tbody/table
/body2.9 语义标签
替代 div 标签把不同的 div 区域抽象成不同的区域。更加简洁、更加具有实际的含义。 标签
header
HTML header 元素用于展示介绍性内容通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素但也可能包含其他元素比如 Logo、搜索框、作者名称等等。
nav
HTML nav 元素表示页面的一部分其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单目录和索引。
section
HTML section 元素表示一个包含在 HTML 文档中的独立部分它没有更具体的语义元素来表示一般来说会有包含一个标题。
figure
HTML figure 元素代表一段独立的内容经常与说明captionfigcaption 配合使用并且作为一个独立的引用单元。当它属于主内容流main flow时它的位置独立于主体。这个标签经常是在主文中引用的图片插图表格代码段等等当这部分转移到附录中或者其他页面时不会影响到主体。
figcaption
HTML figcaption 元素 是与其相关联的图片的说明/标题用于描述其父节点 figure 元素里的其他数据。这意味着 figcaption 在figure 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的如果没有该元素这个父节点的图片只是会没有说明/标题。
article
HTML article元素表示文档、页面、应用或网站中的独立结构其意在成为可独立分配的或可复用的结构如在发布中它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件或者其他独立的内容项目。
aside
HTML aside 元素表示一个和其余页面内容几乎无关的部分被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框call-out boxes。
footer
HTML footer 元素表示最近一个章节内容或者根节点sectioning root 元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
bodyheaderh3我的收藏/h3navullia href/edit.html编辑/a/lilia href/contace.html联系我/a/lilia href/about.html关于我/a/li/ul/nav/headerhrsectionh4图片/h4figureimg width100 srcimages/logo.png altfigcaptionlogo/figcaption/figurefigureimg width100 src/images/logo.png altfigcaptionmoutain/figcaption/figure/sectionhrsectionh4文章区/h4articleh5背影/h5p背影背影背影背影背影背影背影背影/pp背影背影背影背影背影背影背影背影/p/articlearticleh5春/h5p春天到了/pp春天到了/pp春天到了/p/article/sectionhrfootercopy;2018 - 2022 syy 版权所有/footer
/body2.10 特殊符号
HTML源代码显示结果描述lt;小于号或显示标记gt;大于号或显示标记amp可用于显示其它特殊字符quot;引号reg;®已注册copy;©版权trade;™商标nbsp;不断行的空白 3. HTML 课后作业
1. 编写一个完整的 HTML 页面。
要求
页面标签的标题为Web应用课作业charset 为UTF-8keywords 为acwing,web,htmldescription为本课程为AcWing工程课系列——Level-3 第一篇《Web应用课》讲解Web相关知识。icon设置为/images/logo.png
我的答案
!DOCTYPE html
html langen
headmeta charsetUTF-8meta namekeywords contentacwing,web,htmlmeta namedescription content本课程为【AcWing工程课系列——Level-3 第一篇】《Web应用课》讲解Web相关知识。titleWeb应用课作业/titlelink relicon href/images/logo.png
/head
/html2. 编写一个完整的HTML页面。
要求
页面从上到下的内容依次为 h2标题内容为春江花月夜。 h5标题内容为张若虚。 编写一个段落内容为注意标点和行末回车 春江潮水连海平海上明月共潮生。
滟滟随波千万里何处春江无月明
江流宛转绕芳甸月照花林皆似霰
空里流霜不觉飞汀上白沙看不见。
江天一色无纤尘皎皎空中孤月轮。
江畔何人初见月江月何年初照人
人生代代无穷已江月年年望相似。一个水平线 一段代码需要用预定义格式文本内容为 int main()
{int a, b;scanf(%d%d, a, b);printf(%d %d\n, a, b);return 0;
}编写一个段落内容为春眠不觉晓处处闻啼鸟。夜来风雨声花落知多少。第一句话用斜体包括句末标点第二句话加粗包括句末标点第三句话加删除线包括句末标点第四句话加下划线包括句末标点。
我的答案
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh2春江花月夜/h2h5张若虚/h5p春江潮水连海平海上明月共潮生。br滟滟随波千万里何处春江无月明br江流宛转绕芳甸月照花林皆似霰br空里流霜不觉飞汀上白沙看不见。br江天一色无纤尘皎皎空中孤月轮。br江畔何人初见月江月何年初照人br人生代代无穷已江月年年望相似。/phrpre
int main()
{int a, b;scanf(%d%d, a, b);printf(%d %d\n, a, b);return 0;
}/prepi春眠不觉晓/ib处处闻啼鸟。/bdel夜来风雨声/delins花落知多少。/ins/p
/body
/html3. 编写一个完整的 HTML 页面。
要求
页面里包含一张图片各个属性值为
src 为/images/mountain.jpg。alt 为山。width 为600
我的答案
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg width600px src/images/mountain.jpg alt山
/body
/html 4. 编写一个完整的 HTML 页面。
页面中包含一个音频和一个视频。
音频格式
具有属性 controls。src 为/audios/bgm.mp3。
视频格式
具有属性 controls。src 为/videos/video2.mp4。width 为600。
我的答案
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyaudio controls src/audios/bgm.mp3/audiovideo controls width600px src/videos/video2.mp4/video
/body
/html5. 编写一个完整的 HTML 页面。
页面从上到下的内容依次为
一个超链接内容为About跳转到 /about.html在当前页面中加载。一个超链接内容为一张图片图片地址/images/logo.png宽度为50pxalt 为 logo跳转到https://www.acwing.com在新窗口中打开。
我的答案
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya href/about.htmlAbout/aa hrefhttps://www.acwing.com target_blankimg width50px src/images/logo.png altlogo/a
/body
/html 6. 编写一个完整的 HTML 页面。
页面中包含一个表单表单的action为/login.html表单中的内容从前到后依次为
一个text类型的 input 标签。 name为usernameid为username具有 required属性minlength为3maxlength为15placeholder为用户名label的文本为用户名 一个number类型的input标签。 name为ageid为age具有required属性placeholder为年龄label的文本为年龄 一个email类型的input标签 name为emailid为email具有required属性placeholder为邮箱label的文本为邮箱 一个password类型的input标签 name为passwordid为password具有required属性placeholder为密码label的文本为密码 一个textarea标签 name为resumeid为resume没有required标签placeholder为个人简介label的文本为个人简介 一个select标签 name为langid为langlabel的文本为语言第一个optionvalue为Cpp文本为Cpp第二个optionvalue为Java文本为Java第三个optionvalue为Python文本为Python 一个按钮 type为submit文本为提交
我的答案
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAcwing WebClass/titlelink relstylesheet href/images/logo.png
/headbodyform action/login.htmllabel forusername用户名/labelinput maxlength15 minlength3 required typetext nameusername idusername placeholder用户名label forage年龄/labelinput required typenumber nameage idage placeholder年龄label foremail邮箱/labelinput required typeemail nameemail idemail placeholder邮箱label forpassword密码/labelinput required typepassword namepassword idpassword placeholder密码label forresume个人简介/labeltextarea nameresume idresume cols30 rows10 placeholder个人简介/textarealabel forlang语言/labelselect namelang idlangoption valueCppCpp/optionoption valueJavaJava/optionoption valuePythonPython/option/selectbutton typesubmit提交/button/form
/body/html7. 编写一个完整的 HTML 页面。
页面中包含一个有序列表
列表第一项只包含一个文本内容为第一讲列表第二项包含 一个文本内容为第二讲一个无序列表包含3项均为文本内容分别为第一小节、第二小节、第三小节。 列表第三项包含 一个文本内容为第三讲一个有序列表包含3项均为文本内容分别为第一小节、第二小节、第三小节。
我的答案
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyolli第一讲/lili第二讲ulli第一小节/lili第二小节/lili第三小节/li/ul/lili第三讲olli第一小节/lili第二小节/lili第三小节/li/ol/li/ol
/body
/html 8. 编写一个完整的 HTML 页面。
页面中包含一个表格要求 表格的标题为成绩单 表格的内容为 姓名数学语文英语Alice1009998Bob999897Tom989796
我的答案
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytablecaption成绩单/captiontheadtrth姓名/thth数学/thth语文/thth英语/th/tr/theadtbodytrtdAlice/tdtd100/tdtd99/tdtd98/td/trtrtdBob/tdtd99/tdtd98/tdtd97/td/trtrtdTom/tdtd98/tdtd97/tdtd96/td/tr/tbody/table
/body
/html9. 编写一个完整的 HTML 页面。
内容包括四个部分 header区 包含 h3标题内容为我的收藏夹 section区从上到下依次为 包含h4标题内容为图片第一个figure包含一个imgsrc为/images/logo.png宽度为100pxfigcaption的文本为logo第二个figure包含一个imgsrc为/images/mountain.jpg宽度为100pxfigcaption的文本为山 section区从上到下依次为 包含h4标题内容为古诗 第一个article包含一个h5标题内容为春晓之后包含一个段落内容为春眠不觉晓处处闻啼鸟。夜来风雨声花落知多少。 第二个 article包含一个h5标题内容为咏柳之后包含一个段落内容为碧玉妆成一树高万条垂下绿丝绦。不知细叶谁裁出二月春风似剪刀。 footer区 包含一行文本©2018-2022 Me 版权所有
我的答案
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyheaderh3我的收藏夹/h3/headersectionh4图片/h4figurefigcaptionlogo/figcaptionimg src/images/logo.png alt width100px/figurefigurefigcaption山/figcaptionimg src/images/mountain.jpg alt width100px/figure/sectionsectionh4古诗/h4articleh5春晓/h5p春眠不觉晓处处闻啼鸟。夜来风雨声花落知多少。/p/articlearticleh5咏柳/h5p碧玉妆成一树高万条垂下绿丝绦。不知细叶谁裁出二月春风似剪刀。/p/article/sectionfootercopy;2018-2022 Me 版权所有/footer
/body
/html10. 编写一个完整的 HTML 页面。
页面中包含一行如下内容
©Web版权所有我的答案
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycopy;lt;Webgt;版权所有
/body
/html
