HTML: H yper T ext M arkup L anguage（超文本 标记语言） 超文本包括：文字、图片、音频、视频、动画等
世界知名浏览器厂商对HTML5的支持：微软、Google、苹果、Opera、Mozilla。 市场的需求 跨平台 W3C
World Wide Web Consortium (万维网联盟 ) 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 http://www.w3.org/ http://www.chinaw3c.org/ W3C标准包括
结构 化标准语言(HTML、XML)表现 标准语言(CSS)行为 标准(DOM、ECMAScript ) <body>、</body>等成对的标签，分别叫开放标签 和闭合标签 单独呈现的标签(空元素)，如<hr/>；意为用/来关闭空元素。
DOCTYPE声明 <title>标签 <meta>标签 注释：<!-- xxx -->
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " keywords" content = " cwlin" > < metaname = " description" content = " 来这里可以学Java" > < title> </ title> </ head> < body> </ body> </ html> 标题标签 段落标签 换行标签 水平线标签 字体样式标签 注释和特殊符号 <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < h1> </ h1> < h2> </ h2> < h3> </ h3> < h4> </ h4> < h5> </ h5> < h6> </ h6> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < hr/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < br/> < h1> </ h1> < strong> </ strong> < em> </ em> < br/> 格
< br/> >
< br/> <
< br/> © 版权所有cwlin
</ body> </ html>
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > < ahref = " 4、链接标签.html#down" > </ a> </ body> </ html>
页面间链接：从一个页面链接到另一个页面 锚链接 功能性链接 <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < aname = " top" > </ a> < ahref = " 1、我的第一个网页.html" target = " _blank" > </ a> < ahref = " https://www.baidu.com/" target = " _self" > </ a> < br/> < ahref = " 1、我的第一个网页.html" > < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > </ a> < br/> < p> < ahref = " 1、我的第一个网页.html" > < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > </ a> </ p> < p> < ahref = " 1、我的第一个网页.html" > < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > </ a> </ p> < p> < ahref = " 1、我的第一个网页.html" > < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > </ a> </ p> < p> < ahref = " 1、我的第一个网页.html" > < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > </ a> </ p> < p> < ahref = " 1、我的第一个网页.html" > < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > </ a> </ p> < p> < ahref = " 1、我的第一个网页.html" > < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > </ a> </ p> < p> < ahref = " 1、我的第一个网页.html" > < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > </ a> </ p> < p> < ahref = " 1、我的第一个网页.html" > < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > </ a> </ p> < p> < ahref = " 1、我的第一个网页.html" > < imgsrc = " ../resources/image/qq头像.jpg" alt = " cwlin的头像" title = " 悬停文字" width = " 640" height = " 640" > </ a> </ p> < ahref = " #top" > </ a> < aname = " down" > </ a> < ahref = " mailto:1234567890@qq.com" > </ a> </ body> </ html> 块元素
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行 (a、strong、em…) 什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。 列表的分类
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < ol> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ol> < hr/> < ul> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < hr/> < dl> < dt> </ dt> < dd> </ dd> < dd> </ dd> < dd> </ dd> < dd> </ dd> < dt> </ dt> < dd> </ dd> < dd> </ dd> < dd> </ dd> </ dl> </ body> </ html> 表格的好处：简单通用、结构稳定 基本结构：单元格、行、列、跨行、跨列 <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < tableborder = " 1px" style =" text-align : center" > < tr> < tdcolspan = " 4" > </ td> </ tr> < tr> < tdrowspan = " 2" > </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> </ tr> </ table> </ body> </ html> <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < audiosrc = " ../resources/audio/Beyond%20-%20海阔天空.mp3" controls autoplay > </ audio> < br> < videosrc = " ../resources/video/黑暗料理.mp4" controls autoplay > </ video> </ body> </ html> 元素名 描述 header 标题头部区域的内容(用于页面或页面中的一块区域) footer 标记脚部区域的内容(用于整个页面或页面的一块区域) section Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用(常用于侧边栏) nav 导航类辅助内容
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < header> < h2> </ h2> </ header> < section> < h2> </ h2> </ section> < footer> < h2> </ h2> </ footer> </ body> </ html>
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < iframesrc = " https://www.baidu.com/" name = " hello" frameborder = " 0" width = " 1000px" height = " 700px" > </ iframe> < ahref = " https://blog.csdn.net/coder_lcw/article/details/114287585" target = " hello" > </ a> </ body> </ html>
属性 说明 type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为text。 name 指定表单元素的名称。 value 元素的初始值。type 为radio时必须指定一个值。 size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。 maxlength type为text或password时，输入的最大字符数。 checked type为radio或checkbox时，指定按钮是否是被选中。
隐藏：
hidden （占有原来的位置）dispaley（不占有原来的位置） 只读：readonly 禁用：disabled 增强鼠标可用性：<label for=“mark”></label> 和 id=“mark” 搭配使用 <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < h1> </ h1> < formaction = " 1、我的第一个网页.html" method = " get" > < p> < inputtype = " text" name = " username" placeholder = " 请输入用户名" required > </ p> < p> < inputtype = " password" name = " pwd" value = " 123456" hidden > </ p> < p> < inputtype = " radio" value = " boy" name = " sex" checked disabled /> < inputtype = " radio" value = " girl" name = " sex" /> </ p> < p> < inputtype = " checkbox" value = " sleep" name = " hobby" > < inputtype = " checkbox" value = " code" name = " hobby" checked > < inputtype = " checkbox" value = " chat" name = " hobby" > < inputtype = " checkbox" value = " game" name = " hobby" > < inputtype = " checkbox" value = " music" name = " hobby" > </ p> < p> < inputtype = " button" name = " btn1" value = " 点击变长" > </ p> < p> < selectname = " 列表名称" > < optionvalue = " China" > </ option> < optionvalue = " US" > </ option> < optionvalue = " UK" selected > </ option> < optionvalue = " SUI" > </ option> </ select> </ p> < p> < textareaname = " textarea" cols = " 50" rows = " 10" > </ textarea> </ p> < p> < inputtype = " file" name = " files" > < inputtype = " button" value = " 上传" name = " upload" > </ p> < p> < inputtype = " email" name = " email" required > </ p> < p> < inputtype = " url" name = " url" required > </ p> < p> < inputtype = " number" name = " number" max = " 100" min = " 0" step = " 5" required > </ p> < p> < inputtype = " range" name = " voice" min = " 0" max = " 100" step = " 2" > </ p> < p> < inputtype = " search" name = " search" > </ p> < p> < labelfor = " mark" > </ label> < inputtype = " text" id = " mark" > </ p> < p> < inputtype = " text" name = " diymail" pattern = " ^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$" > </ p> < p> < inputtype = " submit" > < inputtype = " reset" value = " 清空表单" > </ p> </ form> </ body> </ html>
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
