前端HTNL+CSS

前端开发网页小程序数据可视化网页基础HTNL,CSS一、HTML51 简述HTML 用于描述页面的结构骨头看不见CSS用于控制页面中元素的样式皮肤外在表现JavaScript 用于响应用户操作动起来HTML超文本标记语言使用标签的形式来标识网页中的不同组成部分。超文本指超链接 可以让我们从一个页面跳转到另一个页面。HTML标签标签又称元素是HTML的基本组成单位。标签分为双标签与单标签绝大多数都是双标签。标签名不区分大小写但推荐小写因为小写更规范。双标签标签名标签体/标签名单标签标签名/ !--/ 可以省略--标签之间的关系并列、嵌套marquee DJ说我来学前端了 input /marquee inputHTML标签属性用于给标签提供附加信息。可以写在起始标签或单标签中形式如下标签名 属性名属性值 属性名属性值/标签名 marquee loop1 bgcolororangeDJ说加油吧/marquee input typepassword有些特殊的属性没有属性名只有属性值input disabled注意不同的标签有不同的属性也有一些通用属性在任何标签内都能写后面会详细总结。属性名、属性值不能乱写都是W3C规定好的。属性名、属性值都不区分大小写但推荐小写。双引号也可以写成单引号甚至不写都行但还是推荐写双引号。标签中不要出现同名属性否则后写的会失效例如input typetext typepasswordHTML基本结构想要呈现在网页中的内容写在 body 标签中。head 标签中的内容不会出现在网页中。head 标签中的 title 标签可以指定网页的标题。html head title.../title /head body content /body /htmlsuch as:!DOCTYPE html html langen head meta charsetUTF-8 titleDJ/title /head body 加油哦 /body /htmlHTMl注释注释的内容会被浏览器忽略不会呈现在页面中注释是对源代码的说明语法!--我是注释--注释不能嵌套设置编码设置字符编码head meta charsetUTF-8 /head!doctype html html langzh-CN head meta charsetUTF-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title卡牌排序/title link relstylesheet hrefstyle.css style /main { text-align: center; /* 整体居中 */ } h2 { color: darkblue; text-align: center; } h3 { color: grey; text-align: center; } img { width: 100px; height: 150px; } .card-group{ text-align:center; margin-bottom:20px; } span{ display: inline-block; }*这里修改样式*/ /style /head body main !-- 梅花 -- h2梅花/h2 h32~4/h3 div classcard-group spanimg srcimages/C2.png alt梅花2/span spanimg srcimages/C3.png alt梅花3/span spanimg srcimages/C4.png alt梅花4/span /div !-- 方片 -- h2方片/h2 h35~7/h3 div classcard-group spanimg srcimages/D5.png alt方片5/span spanimg srcimages/D6.png alt方片6/span spanimg srcimages/D7.png alt方片7/span /div !-- 红桃 -- h2红桃/h2 h38~10/h3 div classcard-group spanimg srcimages/H8.png alt红桃8/span spanimg srcimages/H9.png alt红桃9/span spanimg srcimages/H10.png alt红桃10/span /div !-- 黑桃 -- h2黑桃/h2 h3J~A/h3 div classcard-group spanimg srcimages/SJ.png alt黑桃J/span spanimg srcimages/SQ.png alt黑桃Q/span spanimg srcimages/SK.png alt黑桃K/span spanimg srcimages/SA.png alt黑桃A/span /div /main /body /html