前端知识-HTML基础

Html简介HTML的全称为超文本标记语言是一种标记语言。它包括一系列标签通过这些标签可以将网络上的文档格式统一使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本HTML命令可以说明文字图形、动画、声音、表格、链接等。Html基本结构!DOCTYPE html html langen head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title标题/title /head body /body /htmlHtml超链接基础语法a hrefURL链接文本/aa 标签定义了一个超链接anchor。它是 HTML 中用来创建可点击链接的主要标签。href 属性指定目标 URL当点击链接时浏览器将导航到此 URL。Html链接属性href定义链接目标。这是超链接最重要的属性用来指定链接的目的地可以是另一个网页、文件、邮件、电话号码或 JavaScript。target定义链接的打开方式_blank: 在新窗口或新标签页中打开链接。_self: 在当前窗口或标签页中打开链接默认。_parent: 在父框架中打开链接。_top: 在整个窗口中打开链接取消任何框架。rel定义链接与目标页面的关系nofollow: 表示搜索引擎不应跟踪该链接常用于外部链接。noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题尤其是使用 target“_blank” 时。noopener: 防止新的浏览上下文页面访问window.opener属性和open方法。noreferrer: 不发送referer header即不告诉目标网站你从哪里来的。noopener noreferrer: 同时使用noopener和noreferrer。例子: 安全链接download提示浏览器下载链接目标而不是导航到该目标。如果指定了文件名浏览器会提示下载并保存为指定文件名。实例 a hreffile.pdf downloadexample.pdf下载文件/atitle定义链接的额外信息当鼠标悬停在链接上时显示的工具提示。实例 a hrefhttps://www.example.com title访问 Example 网站访问 Example/aid用于链接锚点通常在同一页面中跳转到某个特定位置。实例!-- 链接到页面中的某个部分 -- a href#section1跳转到第1部分/a div idsection1这是第1部分/divhreflang: 指定链接的目标URL的语言实例 a hrefhttps://www.example.com/es hreflanges访问西班牙语网站/atype: 指定链接资源的MIME类型实例 a hrefstyle.css typetext/css样式表/aclass: 用于指定元素的类名CSS中定义实例 a hrefhttps://www.example.com classexternal-link外部链接/astyle: 直接在元素上定义CSS样式实例 a hrefhttps://www.example.com stylecolor: red;红色链接/aHtml表格HTML 表格由标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。trtr 是 table row 的缩写表示表格的一行。tdtd 是 table data 的缩写表示表格的数据单元格。thth 是 table header的缩写表示表格的表头单元格。简单表格table thead tr th列标题1/th th列标题2/th th列标题3/th /tr /thead tbody tr td行1列1/td td行1列2/td td行1列3/td /tr tr td行2列1/td td行2列2/td td行2列3/td /tr /tbody /tableHTML 表格和边框属性table border1 tr tdRow 1, cell 1/td tdRow 1, cell 2/td /tr /tableHTML 表格表头表格的表头使用 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本实例table border1 tr thHeader 1/th thHeader 2/th /tr tr tdrow 1, cell 1/td tdrow 1, cell 2/td /tr tr tdrow 2, cell 1/td tdrow 2, cell 2/td /tr /tableHTML列表ul : 无序列表ul liCoffee/li liMilk/li /ulol : 有序列表ol liCoffee/li liMilk/li /olHTML div 和 spanHTML 区块元素大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时通常会以新行来开始和结束。实例: h1, p, ul, tableHTML 内联元素内联元素在显示时通常不会以新行开始。实例: b, td, a, imgHTML div 元素HTML div 元素是块级元素它可用于组合其他 HTML 元素的容器。div 元素没有特定的含义。除此之外由于它属于块级元素浏览器会在其前后显示折行。如果与 CSS 一同使用元素可用于对大的内容块设置样式属性。div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。HTML span 元素HTML span 元素是内联元素可用作文本的容器span 元素也没有特定的含义。当与 CSS 一同使用时span 元素可用于为部分文本设置样式属性。HTML 表单HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域此区域包含交互控件将用户收集到的信息发送到 Web 服务器。form 元素用于创建表单action 属性定义了表单数据提交的目标 URLmethod 属性定义了提交数据的 HTTP 方法这里使用的是 “post”。label 元素用于为表单元素添加标签提高可访问性。input 元素是最常用的表单元素之一它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型id 属性用于关联元素name 属性用于标识表单字段。select 元素用于创建下拉列表而 option 元素用于定义下拉列表中的选项。HTML 表单 - 输入元素文本框form First name: input typetext namefirstnamebr Last name: input typetext namelastname /form密码字段form Password: input typepassword namepwd /form单选按钮form action input typeradio namesex valuemale男br input typeradio namesex valuefemale女 /form复选框form input typecheckbox namevehicle[] valueBike我喜欢自行车br input typecheckbox namevehicle[] valueCar我喜欢小汽车 /form提交按钮form nameinput actionhtml_form_action.php methodget Username: input typetext nameuser input typesubmit valueSubmit /form文本域textarea rows10 cols30 我是一个文本框。 /textareaHTML 框架基础语法iframe srcURL/iframeiframe - 设置高度与宽度height 和 width 属性用来定义iframe标签的高度与宽度。iframe srcdemo_iframe.htm width200 height200/iframeiframe - 移除边框frameborder 属性用于定义iframe表示是否显示边框。iframe srcdemo_iframe.htm frameborder0/iframe使用 iframe 来显示目标链接页面iframe srcdemo_iframe.htm nameiframe_a/iframe pa hrefhttps://www.runoob.com targetiframe_a relnoopenerRUNOOB.COM/a/pHTML字符实体Html标签标签描述基础!DOCTYPE定义文档类型。html定义一个 HTML 文档title为文档定义一个标题body定义文档的主体h1 to h6定义 HTML 标题p定义一个段落br定义简单的折行。hr定义水平线。!–…–定义一个注释格式acronymHTML5不再支持。 定义只取首字母的缩写。abbr定义一个缩写。address定义文档作者或拥有者的联系信息。b 定义粗体文本。bdi允许您设置一段文本使其脱离其父元素的文本方向设置。bdo定义文本的方向。blockquote定义块引用。cite定义引用(citation)。code定义计算机代码文本。del定义被删除文本。dfn定义定义项目。em定义强调文本。i定义斜体文本。ins定义被插入文本。kbd定义键盘文本。mark定义带有记号的文本。meter定义度量衡。仅用于已知最大和最小值的度量。pre定义预格式文本progress定义运行中的任务进度进程。q定义短的引用。rp定义不支持 ruby 元素的浏览器所显示的内容。rt定义字符中文注音或字符的解释或发音。ruby定义 ruby 注释中文注音或字符。s定义加删除线的文本。samp定义计算机代码样本。small定义小号文本。strong定义语气更为强烈的强调文本。sub定义下标文本。sup定义上标文本。time定义一个日期/时间u定义下划线文本。var定义文本的变量部分。wbr规定在文本中的何处适合添加换行符。表单form定义一个 HTML 表单用于用户输入。input定义一个输入控件textarea定义多行的文本输入控件。button定义按钮。select定义选择列表下拉列表。optgroup定义选择列表中相关选项的组合。option定义选择列表中的选项。label定义 input 元素的标注。fieldset定义围绕表单中元素的边框。legend定义 fieldset 元素的标题。datalist规定了 input 元素可能的选项列表。keygen规定用于表单的密钥对生成器字段。output定义一个计算的结果框架iframe定义内联框架。图像img定义图像。map定义图像映射。area定义图像地图内部的区域。canvas通过脚本通常是 JavaScript来绘制图形比如图表和其他图像。figcaption定义一个 caption for a figure elementfigurefigure 标签用于对元素进行组合。Audio/Videoaudio定义声音比如音乐或其他音频流。source定义media元素 (video 和 audio)的媒体资源。mediatrack为媒体(video 和 audio)元素定义外部文本轨道。video定义一个音频或者视频链接a定义一个链接link定义文档与外部资源的关系。main定义文档的主体部分。nav定义导航链接列表ul定义一个无序列表ol定义一个有序列表li定义一个列表项dirHTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。dl定义一个定义列表dt定义一个定义定义列表中的项目。dd定义定义列表中项目的描述。menu定义菜单列表。command定义用户可能调用的命令比如单选按钮、复选框或按钮。表格table定义一个表格caption定义表格标题。th定义表格中的表头单元格。tr定义表格中的行。td定义表格中的单元。thead定义表格中的表头内容。tbody定义表格中的主体内容。tfoot定义表格中的表注内容脚注。col定义表格中一个或多个列的属性值。colgroup定义表格中供格式化的列组。样式/节style定义文档的样式信息。div定义文档中的节。span定义文档中的节。header定义一个文档头部部分footer定义一个文档底部section定义了文档的某个区域article定义一个文章内容aside定义其所处内容之外的内容。details定义了用户可见的或者隐藏的需求的补充细节。dialog定义一个对话框或者窗口summary定义一个可见的标题。 当用户点击标题时会显示出详细信息。元信息head定义关于文档的信息meta定义关于 HTML 文档的元信息。base定义页面中所有链接的默认地址或默认目标。程序script定义客户端脚本。noscript定义针对不支持客户端脚本的用户的替代内容。embed定义了一个容器用来嵌入外部应用或者互动程序插件。object定义嵌入的对象。param定义对象的参数。特殊效果滚动元素marquee.../marquee鼠标悬停事件onmouseover: 表示当鼠标悬停时onmouseout : 表示当鼠标离开时“this.stop()” : 表示执行停止方法“this.start()” : 表示执行开始方法οnmοuseοver“this.stop()”οnmοuseοut“this.start()”图像的立体效果翻转效果head style img{-webkit-transition: -webkit-transform 1s,height 1s,width 1s;} img:hover{-webkit-transform: rotateY(-360deg);} /style /head抖动效果img:hover{ /*设置相对定位*/ position: relative; /*设置偏移量*/ right: -20px; top : -20px; }滚动效果marquee behavioralternate scrollamount20 directionright img src... .../ /marqueescrollamount: 设置滚动速度默认值“6”direction : 设置滚动方向默认值“left”direction“up/down/left/right”behavior“alternate” : 设置左右来回滚动完整代码!DOCTYPE html html head meta charsetUTF-8 title特殊效果/title style img { -webkit-transition: -webkit-transform 1s,height 1s,width 1s; } img:hover { -webkit-transform: rotateY(-360deg); position: relative; right: -20px; top: -20px; } /style /head body marquee behavioralternate scrollamount20 directionright onmouseoverthis.stop() onmouseoutthis.start() img srchttps://img0.baidu.com/it/u250042663,491684044fm253fmtautoapp138fJPEG?w515h500/ /marquee /body /html