【HTML5-语法】

HTML5语法■ HTML学习网站■ HTML原理■ HTML编辑器■ HTML 网页结构■ HTML 页面■ HTML标签■ HTML 速查列表■ 基本文档■ 基本标签Basic Tags)■ 链接Links■ 图片Images■ 样式/区块Styles/Sections■ 无序、有序、定义列表■ 文本格式化Formatting■ 表格Tables■ 框架Iframe■ 表单Forms■ 实体Entities■ HTML 标签简写及全称■ VScode■ 01 安装Live Server插件■ 02■ 03■ 04■ HTML学习网站学习网站■ HTML原理■ HTML编辑器W3Schools 在线HTML编辑器这是一个免费的在线工具允许您创建HTML模板并实时查看结果。CodePen这是一个供前端开发人员使用的社交开发环境。您可以创建HTML模板并与他人共享。Bootstrap Studio这是一个强大的桌面应用程序允许您使用Bootstrap创建响应式网站。Dreamweaver这是Adobe的一个Web开发工具允许您使用可视化界面创建HTML模板。Sublime Text这是一个流行的代码编辑器支持HTML语法高亮和其他有用的Web开发功能。■ HTML 网页结构■ HTML 页面!DOCTYPE htmlhtmlheadmeta charsetutf-8title文档标题/title/headbodyh1我的第一个HTML页面/h1p我的第一个段落。/p/body/html声明为 HTML5 文档 元素是 HTML 页面的根元素 元素包含了文档的元meta数据如 定义网页编码格式为 utf-8。元素描述了文档的标题 元素包含了可见的页面内容 h1 元素定义一个大标题 p 元素定义一个段落  /p/h1!DOCTYPE htmlhtmlheadmeta charsetUTF-8titleSimple HTML Template/title!--Add some style to the page--stylebody{background-color:lightblue;}h1{color:white;text-align:center;}/style/headbodyh1This is a simple HTML template/h1pHeres some text to fill the page./p!--Add some functionality to the page with JavaScript--script// Create a variable to store the button elementvar buttondocument.createElement(button);// Set the text of the buttonbutton.innerHTMLClick me;// Add an event listener to the buttonbutton.addEventListener(click,function(){alert(You clicked the button!);});// Append the button to the body of the pagedocument.body.appendChild(button);/script/body/html这只是一个简单的示例但希望它能够让您了解 HTML、CSS 和 JavaScript 如何协同工作创建动态和交互式的网页。■ HTML标签■ HTML 速查列表■ 基本文档!DOCTYPE htmlhtmlheadtitle文档标题/title/headbody可见文本.../body/html■ 基本标签Basic Tags)h1最大的标题/h1h2.../h2h3.../h3h4.../h4h5.../h5h6最小的标题/h6p这是一个段落。/pbr换行hr水平线!--这是注释--■ 链接Links普通的链接a hrefhttp://www.example.com/链接文本/a图像链接a hrefhttp://www.example.com/img srcURLalt替换文本/a邮件链接a hrefmailto:webmasterexample.com发送e-mail/a书签a idtips提示部分/aa href#tips跳到提示部分/a■ 图片Imagesimg srcURLalt替换文本height42width42■ 样式/区块Styles/Sectionsstyle typetext/cssh1{color:red;}p{color:blue;}/stylediv文档中的块级元素/divspan文档中的内联元素/span■ 无序、有序、定义列表无序列表ulli项目/lili项目/li/ul有序列表olli第一项/lili第二项/li/ol定义列表dldt项目1/dtdd描述项目1/dddt项目2/dtdd描述项目2/dd/dl■ 文本格式化Formattingb粗体文本/bcode计算机代码/codeem强调文本/emi斜体文本/ikbd键盘输入/kbdpre预格式化文本/presmall更小的文本/smallstrong重要的文本/strongabbr缩写address联系信息bdo文字方向blockquote从另一个源引用的部分cite工作的名称del删除的文本ins插入的文本sub下标文本sup上标文本文本加粗、斜体、下标、上标■ 表格Tablestable border1trth表格标题/thth表格标题/th/trtrtd表格数据/tdtd表格数据/td/tr/table■ 框架Iframeiframe srcdemo_iframe.htm/iframe■ 表单Formsform actiondemo_form.phpmethodpost/getinput typetextnameemailsize40maxlength50input typepasswordinput typecheckboxcheckedcheckedinput typeradiocheckedcheckedinput typesubmitvalueSendinput typeresetinput typehiddenselectoption苹果/optionoption selectedselected香蕉/optionoption樱桃/option/selecttextarea namecommentrows60cols20/textarea/form■ 实体Entitieslt;等同于gt;等同于#169;等同于 ©■ HTML 标签简写及全称标签英文全称中文说明aAnchor锚abbrAbbreviation缩写词acronymAcronym取首字母的缩写词addressAddress地址altalter替用(一般是图片显示不出的提示)bBold粗体文本bdoBi-Directional Override文本显示方向bigBig变大文本blockquoteBlock Quotation区块引用语brBreak换行cellcell巢cellpaddingcellpadding巢补白cellspacingcellspacing巢空间centerCentered居中文本citeCitation引用codeCode源代码文本ddDefinition Description定义描述delDeleted删除的文本dfnDefines a Definition Term定义定义条目divDivision分隔dlDefinition List定义列表dtDefinition Term定义术语emEmphasized加重文本fontFont字体h1~h6Header 1 to Header 6标题1到标题6hrHorizontal Rule水平尺hrefhypertext reference超文本引用iItalic斜体文本iframeInline frame定义内联框架insInserted 插入的文本kbdKeyboard 键盘文本liList Item列表项目nlnavigation lists导航列表olOrdered List排序列表optgroupOption group定义选项组pParagraph段落prePreformatted预定义格式文本 qQuotation引用语relReload加载s/ strikeStrikethrough删除线sampSample示例文本smallSmall变小文本spanSpan范围srcSource源文件链接strongStrong加重文本subSubscripted下标文本supSuperscripted上标文本tdtable data cell表格中的一个单元格thtable header cell表格中的表头trtable row表格中的一行ttTeletype打印机文本uUnderlined下划线文本ulUnordered List不排序列表varVariable变量文本■ VScode■ 01 安装Live Server插件■ 02■ 03■ 04