自己做网站到哪里去接广告,双城网站建设公司,网站流量分析的指标有哪些,南通网站怎么推广目录
一、html文件结构
二、文本标签
三、图片
四、音频和视频
五、超链接
六、表单
七、列表
八、表格
九、语义标签
十、特殊符号 一、html文件结构 html标签#xff1a;表示一个 HTML 文档的根#xff08;顶级元素#xff09;#xff0c;所以它也被…目录
一、html文件结构
二、文本标签
三、图片
四、音频和视频
五、超链接
六、表单
七、列表
八、表格
九、语义标签
十、特殊符号 一、html文件结构 html标签表示一个 HTML 文档的根顶级元素所以它也被称为根元素。所有其他元素必须是此元素的后代。head标签规定文档相关的配置信息元数据包括文档的标题引用的文档样式和脚本等。body标签表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。title标签定义文档的标题显示在浏览器的标题栏或标签页上。它只应该包含文本若是包含有标签则它包含的任何标签都将被忽略。meta表示那些不能由其它 HTML 元相关meta-related元素(base、link, script、style 或 title之一表示的任何元数据信息。 html的所有标签为树形结构例如
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleWeb应用课/title
/head
bodyh1第一讲/h1
/body
/html
运行结果如下 二、文本标签 文本标签虽然很多但大部分可看成是预定好样式的div和span。 div标签是一个通用型的流内容容器在不使用CSS的情况下其对内容或布局没有任何影响。例如h1, p, pre, ul, ol, tablespan标签可以使用它来编组元素以达到某种样式意图通过使用类或者 Id 属性或者这些元素有着共同的属性比如lang。span 与 div 元素很相似但 div 是一个块元素 而 span 则是行内元素。例如i, b, del, ins, td, ah1 - h6标签呈现了六个不同的级别的标题h1 级别最高而 h6 级别最低。p标签表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本或以垂直的空白隔离或以首行缩进。pre标签预定义格式文本。在该元素中的文本通常按照原文件中的编排以等宽字体的形式展现出来文本中的空白符比如空格和换行符都会显示出来。(紧跟在 pre 开始标签后的换行符也会被省略)br标签在文本中生成一个换行回车符号。此元素在写诗和地址时很有用这些地方的换行都非常重要。hr标签水平线表示段落级元素之间的主题转换。i标签用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等它的内容通常以斜体显示。b标签用于吸引读者的注意到该元素的内容上如果没有另加特别强调。这个元素过去被认为是粗体Boldface元素并且大多数浏览器仍然将文字显示为粗体。del标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。ins标签的作用恰恰于此相反表示文档中添加的内容。ins标签定义已经被插入文档中的文本。 !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/html运行结果如下 三、图片 src属性是必须具有的它包含了你想嵌入的图片的文件路径。alt属性包含一条对图像的文本描述这不是强制性的但对可访问性而言它难以置信地有用。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听让他们知道图像的含义如果由于某种原因无法加载图像普通浏览器也会在页面上显示alt 属性中的备用文本例如网络错误、内容被屏蔽或链接过期时。height属性图像的高度在 HTML5 中的单位是 CSS 像素在 HTML 4 中既可以是像素也可以是百分比。可以只指定 width 和 height 中的一个值浏览器会根据原始图像进行缩放。width属性图像的宽度在 HTML5 中单位是 CSS 像素 在 HTML 4 中可以是像素也可以是百分比。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyimg width600 src/images/mountain.png alt山
/body/html
运行结果如下 四、音频和视频 audio标签用于在文档中嵌入音频内容。 audio 元素可以包含一个或多个音频资源 这些音频资源可以使用 src 属性或者source 元素来进行描述浏览器将会选择最合适的一个来使用。
1、audio 单个音频播放
audio controls src/audios/bgm.mp3/audio2、audio 与多个 source 元素
如果能够播放的话浏览器就会试图去加载第一个 source 元素
如果不行那就退而求其次去加载第二个。audio controlssource src/audios/sound1 typeaudio/mpeg/source src/audios/sound2 typeaudio/mpeg/
/audio video标签用于在 HTML 或者 XHTML 文档中嵌入媒体播放器用于支持文档内的视频播放。你也可以将 video 标签用于音频内容但是 audio 元素可能在用户体验上更合适。 示例video controls width800source src/videos/video1.mp4typevideo/mp4source src/videos/video2.mp4typevideo/mp4Sorry, your browser doesnt support embedded videos.
/video !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyaudio controls src/audios/bgm.mp3/audiovideo width600 controls src/videos/video2.mp4/video
/body/html
运行结果如下 五、超链接 HTML a 元素或称锚元素可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。a 中的内容应该指明链接的意图。 常用选项点击链接打开新标签页面时加入属性target_blank !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya href/about.htmlAbout/aa hrefhttps://www.acwing.com target_blankimg width300 src/images/icon.png altlogo/a
/body/html 运行结果如下 六、表单 form标签表示文档中的一个区域此区域包含交互控件用于向 Web 服务器提交信息。input标签用来填写内容常见类型有 input typetext创建基础的单行文本框。input typenumber用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。input typeemail用户输入或编辑一个电子邮箱地址输入框还会自动验证输入值是否是一个或多个合法的电子邮箱地址 。input typepasswordinput 元素 里有一种叫做 “password” 的值给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的其中文本被遮蔽以致于无法读取通常通过用诸如星号“*”或点“•”等符号替换每个字符来实现。input typeradioinput 的 radio 类型元素默认渲染为小型圆圈图表填充即为激活类似于之前描述额复选框checkbox类型。单选按钮允许你选择单一的值来提交表单。 常用属性有name: 名称
id: 唯一ID
maxlength最大长度
minlength最小长度
required是否必填
placeholder当表单控件为空时控件中显示的内容 textarea表示一个多行纯文本编辑控件当你希望用户输入一段相当长的、不限格式的文本例如评论或反馈表单中的一段意见时这很有用。button标签表示一个可点击的按钮可以用在表单或文档其它需要使用简单标准按钮的地方。 select与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
/select !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyform action/login.htmllabel forusername用户名/labelinput typetext nameusername idusername required minlength3 maxlength15 placeholder用户名brlabel forage年龄/labelinput typenumber nameage idage required placeholder年龄brlabel foremail邮箱/labelinput typeemail nameemail idemail required placeholder邮箱brlabel forpassword密码/labelinput typepassword namepassword idpassword required placeholder密码brlabel forresume/labeltextarea nameresume idresume cols30 rows10 placeholder个人简介/textareabrlabel forlang语言/labelselect namelang idlangoption valueCppCpp/optionoption valueJavaJava/optionoption valuePythonPython/option/selectbrbutton typesubmit提交/button/form
/body/html
运行结果如下 七、列表 ul与li标签表示一个内可含多个元素的无序列表或项目符号列表。 ullifirst item/lilisecond item/lilithird item/li
/ul ol与li标签表示有序列表通常渲染为一个带编号的列表。 olliFee/liliFi/liliFo/liliFum/li
/ol dl、dt与dd标签是一个包含术语定义以及描述的列表通常用于展示词汇表或者元数据 (键 - 值对列表)。 dldtName/dtddGodzilla/dddtBorn/dtdd1952/dddtBirthplace/dtddJapan/dddtColor/dtddGreen/ddddOrange/dd
/dl !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyolli第一讲/lili第二讲ulli第一小节/lili第二小节/lili第三小节/li/ul/lili第三讲olli第一小节/lili第二小节/lili第三小节/li/ol/li/ol
/body/html
运行结果如下 八、表格 table标签表示表格数据 — 即通过二维数据表表示的信息。 thead标签定义了一组定义表格的列头的行。 tbody标签定义一组数据行。 tr标签定义表格中的行。 同一行可同时出现td 和th 元素。 th标签定义表格内的表头单元格。 td标签定义了一个包含数据的表格单元格。 caption标签展示一个表格的标题 它常常作为 table 的第一个子元素出现同时显示在表格内容的最前面。 示例
tablecaptionMy Table/captiontheadtrth colspan2The table header/th/tr/theadtbodytrtdThe table body/tdtdwith two columns/td/tr/tbody
/table !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/html
运行结果如下 九、语义标签 header用于展示介绍性内容通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素但也可能包含其他元素比如 Logo、搜索框、作者名称等等。nav表示页面的一部分其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单目录和索引。section表示一个包含在 HTML 文档中的独立部分它没有更具体的语义元素来表示一般来说会有包含一个标题。figure代表一段独立的内容经常与说明captionfigcaption 配合使用并且作为一个独立的引用单元。当它属于主内容流main flow时它的位置独立于主体。这个标签经常是在主文中引用的图片插图表格代码段等等。figcaption是与其相关联的图片的说明/标题用于描述其父节点 figure 元素里的其他数据。这意味着 figcaption 在figure 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的如果没有该元素这个父节点的图片只是会没有说明/标题。article表示文档、页面、应用或网站中的独立结构其意在成为可独立分配的或可复用的结构如在发布中它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件或者其他独立的内容项目。aside表示一个和其余页面内容几乎无关的部分被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。footer表示最近一个章节内容或者根节点sectioning root 元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyheaderh3我的收藏夹/h3/headersectionh4图片/h4figureimg width100 src/images/icon.png altlogofigcaptionlogo/figcaption/figurefigureimg width100 src/images/mountain.png alt山figcaption山/figcaption/figure/sectionsectionh4古诗/h4articleh5春晓/h5p春眠不觉晓处处闻啼鸟。夜来风雨声花落知多少。/p/articlearticleh5咏柳/h5p碧玉妆成一树高万条垂下绿丝绦。不知细叶谁裁出二月春风似剪刀。/p/article/sectionfootercopy;2018-2022 Me 版权所有/footer
/body/html
运行代码如下 十、特殊符号 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodycopy;lt;Webgt;版权所有
/body/html
运行结果如下
