看10遍教程不如写一遍代码--HTML入门demo小结
<!-- doctype用来声明当前的网页的版本 --> <!doctype html> <html> <head> <!-- meta是一个自结束标签 --> <meta charset="utf-8" /> <title>这是一个网页</title> </head> <body> <h1>这是一个非常漂亮的网页</h1> </body> </html>
<!-- 文档声明，声明html页面的版本的，该声明表示文档是一个h5的页面 --> <!doctype html> <!-- html是网页的根标签，网页中所有内容都要写到html标签中，一个页面中只能有一个html标签 --> <html> <!-- head中的内容不会在页面中显示，它用来告诉浏览器如何解析网页 --> <head> <!-- title用来设置整个网页的标题（主要内容） 搜索引擎在检索一个网页时，将会最先检索title中的内容，注意title中的内容不要太长，尽量在25个文字左右 --> <title>这是一个网页</title> <!-- 这个标签用来设置页面的编码字符集 --> <meta charset="utf-8" /> </head> <!-- body是网页的主体，网页中所有可见的内容都要编写到body中 --> <!-- 即使网页编写的不符合规范，浏览器也会尽最大的努力正确的解析页面 --> <body> <!-- 常用的标签 --> <!-- 标题标签 --> <!-- 在html中一共有六级标题标签，h1~h6 h1最大，h6最小 ，但是我们并不关心它的显示大小 h1~h6叫语义化标签，h1表示一级标题，它的重要性仅次于title，对于搜索引擎检索是很重要 注意，一般情况下一个页面中只能有一个h1 h1以后的标题标签重要性越来越低，一般我们使用标题就到h3 h3以后的很少用 --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>二级标题</h3> <h4>二级标题</h4> <h5>二级标题</h5> <h6>二级标题</h6> <!-- 段落标签 p标签标示的是一个段落，它里面的内容，会单独占一行 并且它会默认在段落的前后各加一个换行 --> <p>今天天气好晴朗，处处好风光！</p> <p>解放东京，活捉苍井空</p> <p>解放台湾，活捉林志玲</p> <!-- 在HTML中，多个连续的空格或者是换行，浏览器只会解析成一个空格 换行时需要使用标签来操作 --> 锄禾日当午，<br /><br /> 汗滴禾下土，<br /><br /> 谁知盘中餐，<br /><br /> 粒粒皆辛苦。 <!-- 水平线 hr标签可以在页面中的指定位置，输出一条水平线 --> <hr /> <!-- 在HTML中一些特殊符号是不能直接编写的比如小于号 大于号不能和字母一块 我们需要使用转义字符（实体）来表示这些特殊符号 实体的语法： &实体的名字; 小于号： < 大于号: > 空格： 版权声明： © --> a<b>c <hr /> 粒粒 皆辛苦 <hr /> 版权声明：© <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html>
<!doctype html> <html> <head> <title>我的测试页</title> <!-- meta用来设置网页的元数据，比如可以用来设置网页的编码 --> <meta charset="utf-8" /> <!-- 我们还可以使用meta来设置网页的关键字 --> <!-- name属性用来设置，属性的名字。 content用来设置属性的值 --> <!-- 我们可以同时为一个网站设置多个关键字，多个关键字之间使用,隔开 --> <meta name="keywords" content="美女,帅哥,HTML5,Java" /> <!-- meta还可以用来设置网页的描述（简介） --> <!-- 搜索引擎在检索页面时，会检索keywords和description中的内容 但是这些内容不会影响网站在搜索引擎中的排名 --> <meta name="description" content="专注于搜集各种美女帅哥的图片" /> <!-- meta还可以用来做请求的重定向 --> <!-- http-equiv="refresh" 固定值 content="秒数;url=目标地址" --> <meta http-equiv="refresh" content="5;url=demo8.html" /> </head> <body> <h1>5秒后跳转页面</h1> </body> </html>
<!doctype html> <html> <head> <title>基本的语法</title> <meta charset="utf-8" /> </head> <body> <h1>我是DEMO2</h1> <!-- HTML的注释不能嵌套 所有语言的注释都不能嵌套 --> <!-- <!-- 我是HTML中的注释 --> --> <hr /> <!-- 标签必须正确结束 --> <!-- 要么成对出现 --> <p>我是一个段落</p> <hr /> <!-- 要么你就是一个自结束标签 --> a<br />b <hr /> a<br/>b <hr /> <!-- 属性必须有值，且值必须加引号 --> <p>我是<font color="red">一个</font>段落</p> <p>我是<font color>一个</font>段落</p> <p>我是<font color='blue'>一个</font>段落</p> <!-- html中不区分大小写 , 但是所有的规范里都推荐我们使用小写 --> <hr /> <!-- 标签可以嵌套，但是不能交叉嵌套 --> <p>我是<font color="red">一个</font>段落</p> <p>我是<font color="red">一个段落</p></font> </body> </html>
<!doctype html> <html> <head> <title>内联框架</title> <meta charset="utf-8" /> </head> <body> <h1>我是DEMO3</h1> <!-- 内联框架用于向一个网页中引入另一个页面 实际开发中我们不建议使用内联框架，因为内联框架中的内容不会被搜索引擎检索 属性： src:用来指定一个外部网页的地址，同样使用相对路径 width:指定宽度 height:指定高度 name: 可以使用name属性为内联框架设置一个名字--> <iframe src="https://www.baidu.com" width="500px" height="500px" name="ifra1" ></iframe> </body> </html>
<!doctype html> <html> <head> <title>超链接</title> <meta charset="utf-8" /> </head> <body> <!-- 超链接可以使浏览器跳转到其他页面 使用a标签来创建一个超链接 属性： href：指定一个目标地址 --> <!-- 跳转外部网页 --> <a href="http://www.baidu.com">跳转到Baidu</a> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a href="demo3.html">去demo3</a> <br /> <br /> <br /> <!-- 可以通过target属性来设置在哪里打开目标页面 _self 表示在当前页面打开链接 _blank 表示在一个新的窗口中打开 - 我们还可以将target的值设置为一个内联框架的名字 这时它会在指定的内联框架中打开新的页面 --> <a href="demo3.html" target="ifra1">去demo3</a> <hr /> <iframe src="demo2.html" width="500px" height="500px" name="ifra1" ></iframe> </body> </html>
<!doctype html> <html> <head> <title>练习</title> <meta charset="utf-8" /> </head> <body> <!-- 可以使用center标签来使元素居中，可以将希望居中的元素放到center标签中 --> <center> <!-- a的href属性可以设置为一个 #id属性值 这样点击超链接以后，网页会自动定位到该id对应的元素的位置 --> <a href="#bottom">去底部</a> <a href="#img1">去图片</a> <h1>这是我的个人博客</h1> <hr /> <h2>东风破</h2> <!-- href设置为#，当点击超链接时不会跳转页面，而是回到当前页 --> <a href="#">周杰伦</a> <p> 一盏离愁 孤单伫立在窗口 <br /> 我在门后 假装你人还没走 <br /> 旧地如重游 月圆更寂寞<br /> 夜半清醒的烛火 不忍苛责我<br /> 一壶漂泊 浪迹天涯难入喉<br /> 你走之后 酒暖回忆思念瘦<br /> 水向东流 时间怎么偷<br /> 花开就一次成熟 我却错过<br /> 谁在用琵琶弹奏 一曲东风破<br /> 岁月在墙上剥落 看见小时候<br /> 犹记得那年我们都还很年幼<br /> 而如今琴声幽幽 我的等候你没听过<br /> 谁在用琵琶弹奏 一曲东风破<br /> <img id="img1" src="1.jpg" alt="周杰伦" width="300px" /><br /> 枫叶将故事染色 结局我看透<br /> 篱笆外的古道我牵着你走过<br /> 荒烟漫草的年头 就连分手都很沉默<br /> 一壶漂泊 浪迹天涯难入喉<br /> 你走之后 酒暖回忆思念瘦<br /> 水向东流 时间怎么偷<br /> 花开就一次成熟 我却错过<br /> 谁在用琵琶弹奏 一曲东风破<br /> 岁月在墙上剥落 看见小时候<br /> 犹记得那年我们都还很年幼<br /> 而如今琴声幽幽 我的等候你没听过<br /> 谁在用琵琶弹奏 一曲东风破<br /> 枫叶将故事染色 结局我看透<br /> 篱笆外的古道我牵着你走过<br /> 荒烟漫草的年头 就连分手都很沉默<br /> <img src="2.jpg" alt="东风破" width="300px" /><br /> 谁在用琵琶弹奏 一曲东风破<br /> 岁月在墙上剥落 看见小时候<br /> 犹记得那年我们都还很年幼<br /> 而如今琴声幽幽 我的等候你没听过<br /> 谁在用琵琶弹奏 一曲东风破<br /> 枫叶将故事染色 结局我看透<br /> 篱笆外的古道我牵着你走过<br /> 荒烟漫草的年头 就连分手都很沉默<br /> </p> <hr /> <!-- 在每一个元素中都可以设置一个id属性，id是标签的唯一标识，在同一个页面中不能出现相同的id属性值 --> 友情链接:<a id="bottom" href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br /> <!-- 我们如果将超链接的href设置#，则超链接点击后会自动的回调当前页面最上边 --> <a href="#">回到顶部</a> | <!-- 这种联系我们的连接，应该是点击链接以后，自动打开邮件客户端，并向指定的地址发送邮件 这种发送邮件的连接，href应该以mailto:开头，后边跟着一个电子邮件地址，这样点击以后将会打开系统中默认的邮件客户端向目标地址发送邮件 --> <a href="mailto:abc@atguigu.com">联系我们</a> </center> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 元素之间的关系 父元素 - 直接包含子元素的元素我们称为父元素 子元素 - 直接被父元素包含的元素我们称为子元素 祖先元素 - 直接或间接包含后代元素的元素我们称为祖先元素（父元素也是祖先元素） 后代元素 - 直接或间接被祖先元素包含的元素我们称为后代元素（子元素也是后代元素） 兄弟元素 - 拥有相同的父元素的元素我们称为兄弟元素 --> <div> <span>我是div的子元素span</span> <p> <span>我是p的子元素span</span> </p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 元素之间的关系 父元素 - 直接包含子元素的元素我们称为父元素 子元素 - 直接被父元素包含的元素我们称为子元素 祖先元素 - 直接或间接包含后代元素的元素我们称为祖先元素（父元素也是祖先元素） 后代元素 - 直接或间接被祖先元素包含的元素我们称为后代元素（子元素也是后代元素） 兄弟元素 - 拥有相同的父元素的元素我们称为兄弟元素 --> <div> <span>我是div的子元素span</span> <p> <span>我是p的子元素span</span> </p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*为span设置一个字体颜色为红色*/ span{ color: red; } /*设置div中的span的字体大小30px*/ /* * 后代元素选择器 * 作用：选择指定元素的后代元素 * 语法：祖先 后代{} */ div span { font-size: 30px; } /*设置p元素中的span，一个背景颜色为黄色*/ p span{ background-color: yellow; } /*设置div的子元素span的背景颜色为绿色*/ /* * 子元素选择器 * 作用：选择指定的元素的指定子元素 * 语法：父元素 > 子元素{} * 注意：子元素选择器在IE6中是不支持的，所以如果你的页面需要兼容IE6，就不要使用这种选择器 */ div > span{ background-color: green; } </style> </head> <body> <div> <span>我是div的子元素span</span> <p> <span>我是p的子元素span</span> </p> </div> <span>我是div的兄弟元素span</span> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> /*设置用户访问过的链接为红色 * 用户有没有访问过指定连接，我们是通过用户的历史记录识别的 */ /*a:link表示的是正常的连接*/ a:link{ color: yellow; } /*设置已访问过的连接的颜色为红色 a:visited表示已访问过的连接 该伪类值能为字体设置颜色，不能设置其他样式 * */ a:visited{ color: red; } /*当鼠标移入到超链接上时，超链接的文字变成橘红色 a:hover 表示超链接鼠标移入时的状态 * */ a:hover{ color: yellowgreen; } /* * 当鼠标点击超链接时，超链接的文本变成黑色 * a:active 表示超链接被点击的状态 */ a:active{ color: black; } </style> </head> <body> <a href="index.html">已经访问过的链接</a> <br /><br /> <a href="http://www.nihao.com">没有访问过的链接</a> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- id和class id和class属性值必须以字母开头 id选择器 #id class选择器 .class 在前端开发中，编写css时，一般我们选择使用 class选择器，尽量避免使用id选择器。 --> <!-- id是一个元素的唯一标识，在同一个页面中不能出现重复的id属性值 --> <div id="box1"></div> <!-- class属性用来为一个元素分组，页面中相同的class属性值可以出现多个，并且一个元素可以拥有多个class --> <div class="hello"></div> <!-- 标签中还支持一个属性，叫做title 一个元素设置了title属性以后，当鼠标引入到元素上边时，title中的文字会显示出来 --> <p title="你好我是p标签的title属性值">我是一个段落</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* :first-letter表示第一个字母 * */ p:first-letter{ color: red; font-size: 30px; } /* * :first-line表示的是第一行 */ .p2:first-line{ background-color: yellow; } </style> </head> <body> <p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。</p> <p class="p2"> 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 </p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- id和class id和class属性值必须以字母开头 id选择器 #id class选择器 .class 在前端开发中，编写css时，一般我们选择使用 class选择器，尽量避免使用id选择器。 --> <!-- id是一个元素的唯一标识，在同一个页面中不能出现重复的id属性值 --> <div id="box1"></div> <!-- class属性用来为一个元素分组，页面中相同的class属性值可以出现多个，并且一个元素可以拥有多个class --> <div class="hello"></div> <!-- 标签中还支持一个属性，叫做title 一个元素设置了title属性以后，当鼠标引入到元素上边时，title中的文字会显示出来 --> <p title="你好我是p标签的title属性值">我是一个段落</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*为有title属性的p元素设置一个背景颜色 [属性名] 会选中含有指定属性的元素 * */ /*p[title]{ background-color: yellow; }*/ /* * 为title属性值等于abc的元素设置一个背景颜色 * [属性名=属性值] 会选中属性名等于指定属性值的元素 */ /*p[title=abc]{ background-color: yellow; }*/ /* * 为title属性值以he开头的元素设置一个背景颜色 * [属性名^=属性值] 找到属性值以指定内容开头的元素 */ /*p[title^=he]{ background-color: yellow; }*/ /* * 为title属性值以bc结尾的元素设置一个背景颜色 * [属性$=属性值] 找到属性值以指定内容结尾的元素 */ /*p[title$=bc]{ background-color: green; }*/ /* * 为title属性值中函数bc的元素设置一个背景颜色 * [属性*=属性值] 找到属性值中包含指定内容的元素 */ p[title*=bc]{ background-color: yellowgreen; } </style> </head> <body> <p>我是一个段落</p> <p title="hebcllo">我是一个段落</p> <p title="abc">我是一个段落</p> <p title="heabc">我是一个段落</p> <p>我是一个段落</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * :first-child选中第一个子元素 * first-child是在所有的子元素中进行排序 */ /*p:first-child { background-color: yellowgreen; }*/ /* * :last-child可以选中页面中的最后一个子元素 */ /*p:last-child{ background-color: royalblue; }*/ /* * :nth-child(位置) * 可以找到指定位置的子元素，需要一个子元素的位置 * 如果位置写一个odd，则表示选中奇数行 * 如果写一个even，则表示选中偶数行 */ /*p:nth-child(even){ background-color: red; }*/ /* * 找到p元素，且该p元素是其父元素的第一个子元素 */ p:first-child{ background-color: yellow; } /* * 找到p元素，且该元素是其父元素的最后一个子元素 */ p:last-child{ background-color: green; } </style> </head> <body> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div> <p>我是div里的p元素</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * :first-of-type 在指定类型元素中找到第一个子元素 */ p:first-of-type{ background-color: yellowgreen; } p:last-of-type{ background-color: yellow; } p:nth-of-type(2){ background-color: green; } </style> </head> <body> <span>我是span，我是老大</span> <span>我是span，我是老大</span> <span>我是span，我是老大</span> <span>我是span，我是老大</span> <span>我是span，我是老大</span> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <span>我是span，我是老末</span> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 兄弟元素选择器： * 语法：前一个元素 + 后一个元素 * 选择元素的后一个兄弟元素 */ /*span + p{ background-color: yellow; }*/ /* * 选择指定元素后边的所有兄弟元素 * 语法：前一个 ~ 后边所有 */ span ~ p{ background-color: yellow; } </style> </head> <body> <p>我是一个段落</p> <p>我是一个段落</p> <span>我是span</span> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:not(.p1){ background-color: yellow; } </style> </head> <body> <p>我是一个段落</p> <p>我是一个段落</p> <p class="p1">我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 实际所有的这些选择器我们都可以去组合使用, * 但是要注意的是，我们在使用选择器越简单越好！ * 浏览器在解析CSS选择器时，它是按照从右向左的顺序去解析的 * 然后还要注意的是尽量避免使用 * */ /*body .hello > div + div p[title=abc]{ } */ /**:first-child{ }*/ /* * CSS的样式设置具有继承性 * 祖先元素上的样式会自动应用到他的后代元素中 * 但是并不是所有的样式都有继承性 * 比如：背景颜色就不能继承 * * 特殊情况： * 如果给body设置背景颜色，它会默认将背景颜色应用到其父元素上<html> */ /*p{ font-size: 60px; background-color: yellow; }*/ body{ background-color: yellow; } </style> </head> <body> <p>我是一个p元素<span>我是p元素中的span</span></p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 选择器的优先级（权重） * 当我们使用不同的选择器，为同一个元素设置同一个样式时，到底要应用哪个选择器设置的样式呢？ * 这个是由选择器的优先级（权重）来决定 * * 注意当一个元素上有相同的样式产生冲突时，会根据选择器的优先级来决定显示那个样式，优先级高的优先显示 * 优先级的计算，需要将所有的选择器相加来计算，如果优先级一样，则谁在下边用谁 * 优先级的累加，不能超过选择器的最高数量级 * * * 内联样式： * 内联样式的优先级最大，内联样式会优先于所有的选择器显示 * 优先级是 1000 * ID选择器： * 优先级是 100 * 类和伪类选择器： * 优先级是 10 * 元素选择器： * 优先级是 1 * 通配选择器（*）： * 优先级是 0 * 继承来的样式： * 没有优先级 * * 我们可以在一个样式的后边添加一个 !important 来将该样式设置为优先级最高的样式，这样他会优先于所有的样式显示 * 但是在开发中和内联样式一样，尽量避免使用!important */ .box2{ background-color: blue; } .box2{ width: 100px; height: 100px; background-color: red !important; } *{ font-size: 100px; } p{ font-size: 20px; } </style> </head> <body> <div id="box1" class="box2" style="background: yellowgreen;"></div> <p>我是一个p元素<span>我是一个span</span></p> </body> </html>
<!doctype html>
<html>
<head>
<title>基本的语法</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是DEMO2</h1>
<!-- HTML的注释不能嵌套
所有语言的注释都不能嵌套
-->
<!--
<!-- 我是HTML中的注释 -->
-->
<hr />
<!-- 标签必须正确结束 -->
<!-- 要么成对出现 -->
<p>我是一个段落</p>
<hr />
<!-- 要么你就是一个自结束标签 -->
a<br />b
<hr />
a<br/>b
<hr />
<!-- 属性必须有值，且值必须加引号 -->
<p>我是<font color="red">一个</font>段落</p>
<p>我是<font color>一个</font>段落</p>
<p>我是<font color='blue'>一个</font>段落</p>
<!-- html中不区分大小写 , 但是所有的规范里都推荐我们使用小写 -->
<hr />
<!-- 标签可以嵌套，但是不能交叉嵌套 -->
<p>我是<font color="red">一个</font>段落</p>
<p>我是<font color="red">一个段落</p></font>
</body>
</html>
浙公网安备 33010602011771号