HTML 1—基本操作
常用标签、实体和xhtml的编码规范（demo.html）
<!-- html5标准网页声明 --> <!doctype html> <!-- html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中 --> <html> <!-- head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的 --> <head> <!-- 需要来告诉浏览器，网页所采用的编码字符集 meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介 meta是一个自结束标签 --> <meta charset="utf-8" /> <!-- title网页的标题标签，默认会显示在浏览器的标题栏中 搜索引擎在检索页面时，会首先检索title标签中的内容 它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名 --> <title>实体</title> </head> <!-- body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写 --> <body> <!-- 在这个结构中，可以来编写HTML的注释 注释中的内容，不会在页面中显示，但是可以在源码中查看 我们可以通过编写注释来对代码进行描述，从而帮助其他的开发人员工作 一定要养成良好的编写注释的习惯，但是注释一定要简单明了 --> <!-- 属性: 可以通过属性来设置标签如果处理标签中的内容 可以在开始标签中添加属性 属性需要些在开始标签中，实际上就是一个“名值对”的结构 属性明="属性值" --> <h1>这是我的<font color="red">第二个</font>网页</h1> <!-- 在HTML中，一些如<、>这种特殊字符是不能直接使用， 需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体(转义字符串) 浏览器解析到实体时，会自动将实体转换为其对应的字符 实体的语法: &实体的名字; < < > > 空格 版权符号 © --> a<b>c <p> ©今天天气 好晴朗，处处好风光</p> <!--xHtml的编码规范--> <!-- 1.HTML中不区分大小写，但是我们一般都使用小写 2.HTML中的注释不能嵌套 --> <!-- 这是一个注释 <!-- 这是注释中的注释 --> <!-- 3. HTML标签必须结构完整，要么成对出现，要么自结束标签 --> <!--正确--> <p>我是一个p标签</p> <!--错误--> <p>我是一个p标签 <!-- 浏览器尽最大的努力正确的解析页面，你所有的不符合语法规范的内容, 浏览器都会为你自动修正，但是有些情况会修正错误 --> <!--自结束标签--> abc <br /> bcd <br> efg <!-- 4. HTML标签可以嵌套，但是不能交叉嵌套 ---> <p>今天天气<font color="red">真不错</font> <p> <p>今天天气<font color="red">真不错<p> </font> <hr /> <!-- 5. HTML标签中的属性必须有值，且值必须加引号(双引号单引号都行) --> <p>今天天气<font color>真不错</font> <p></p> <p>今天天气<font color=red>真不错</font> <p></p> </body> </html>
图片(demo01.html)
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>图片标签</title> </head> <body> <!-- 使用img标签来向网页中引入一个外部图片， img标签也是一个自结束标签 属性: src:设置一个外部图片的路径 src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径。 相对路径: 相对路径指相对于当前资源所在目录的位置 <img src="abc/bcd/2.gif" alt="这是一个大松鼠"/> 可以使用../来返回一级目录,返回几级目录就写几个../ <img src="../../img/2.gif" alt="这是一个大松鼠"/> alt:可以用来设置图片不能显示时，对图片的描述 搜索引擎可以通过alt属性来识别不同的图片 如果不写alt属性，则搜索引擎不会对img中的图片进行收录 width:可以用来修改图片的宽度 height:可以用来修改图片的高度 宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小 如果两个值同时指定则按照你指定的值来设置 一般开发中除了自适应的页面，不建议设置width和height --> <img src="走前门 (4).png" alt="校服设计" width="200px" /> <!-- 图片的格式 JPEG (JPG) - JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明 一般使用JPEG来保存照片等颜色丰富的图片 GIF - GIF支持的颜色少，只支持简单的透明，支持动态图 图片颜色单一或者是动态图时可以使用gif PNG - PNG支持的颜色多，并且支持复杂的透明 可以用来显示颜色复杂的透明的图片 图片的使用原则: 效果不一致，使用效果好的 效果一致，使用小的 --> </body> </html>
IE6png修复
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1 { width: 200px; height: 200px; background-image: url(); background-repeat: no-repeat; } .box2 { width: 200px; height: 200px; background-image: url(); background-repeat: no-repeat; } </style> </head> <body style="height: 10000px;"> <!-- 在IE6中对图片格式png24支持度不高， 如果使用的图片格式是png24，则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24，即可解决问题， 但是使用png8代替png24以后，图片的清晰图会有所下降 2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件 然后在写一下简单的JS代码，来处理该问题 --> <div class="box1"></div> <div class="box2"></div> <img src=" img/3. png" /> <!-- 在body标签的最后引入外部的JS文件--> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8p-min.js"></script> <!--再创建一个新的script标签，并且编写一些js代码--> <script type="text/javascript"> DD_belatedPNG.fix("div,img"); </script> </body> </html>
meta用法(demo02.html)
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>meta用法</title> <!-- 使用meta标签还可以用来设置网页的关键字 --> <meta name="keywords" content=" HTML5 , JavaScript , 前端 , Java" /> <!-- 还可以用来指定网页的描述 搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名 --> <meta name="description" content=" 发布h5、js等前端相关的信息" /> <!-- 使用meta可以用来做请求的重定向 --> <meta http-equiv="refresh" content="5;url=http://www.baidu.com"> </head> <body> <h1>5秒以后跳转页面</h1> </body> </html>
内联框架（demo03.html）
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>内联框架</title> </head> <body> <h1>我是demo03</h1>> <!-- 使用内联框架可以引入一个外部的页面 使用iframe来创建一个内联框架 属性 scr：指向一个外部页面的路径，可以使用相对路径 width： height： name：可以为内联框架指定一个name属性 在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索 --> <iframe src="demo.html"></iframe>> </body> </html>
框架集
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> </style> </head> <!-- 框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面， 框架集可以同时引入多个页面，而内联框架只能引入一个， 在h5标准中，推荐使用框架集，而不使用内联框架 使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中 所以要使用框架集，页面中就不可以使用body标签 属性: rows，指定框架集中的所有的框架，一行一行的排列 cols，指定框架集中的所有的页面，一列一列的排列 这两个属性frameset必须选择一，并且需要在属性中指定每一部分所占的大小 frameset中也可以再嵌套frameset frameset和iframe一样， 它里边的内容都不会被搜索引擎所检索， 所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的 使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面 浏览器都需要重新发送一次请求， 引入几个页面就需要发送几次请求 --> <frameset rows="50% ,*,30%"> <!-- 在frameset中使用frame子标签来指定要引入的页面 引入几个页面就写几个frame --> <frame src="" /> <frame src="" /> <!-- 嵌套一个frameset --> <frameset rows="30% , 50%, *"> <frame src="" /> <frame src="" /> </frameset> </frameset> </html>
超链接（demo04.html）
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <h1>我是demo04</h1> <!-- 使用超链接可以让我们从一个页面跳转到另一个页面 使用a标签来创建一个超链接 属性: href:指向链接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址 --> <a href="http://www.baidu.com">我是一个超链接</a> <br /><br /> <a href="http://www.baidu1234567.com">我是一个超链接</a> <br /><br /> <!-- a标签中的target属性可以用来指定打开链接的位置 可选值: _self，表示在当前窗口中打开(默认值) _blank，在新的窗口中打开链接 可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开 --> <a href="demo03.html" target="tom">我是一个超链接</a> <br /> <br /> <iframe src="demo02.html" name="tom"></iframe> </body> </html>
块和内联（demo05.html）
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>块和内联</title> </head> <body> <!-- 块元素和内联元素 div就是一个块元素， 所谓的块元素就是会独占一行的的元素，无论他的内容有多少，他都会独占一整行。 块元素：p h1 h2 h3... div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式 span是一个内联元素(行内元素) 所谓的行内元素，指的是只占自身大小的元素，不会占用一行 常见的内联元素: a img iframe span span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式 块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式， 一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素 a元素可以包含任意元素，除了它本身 p元素不可以包含任何其他的块元素 --> <!--浏览器会自动帮这个语句变成两个语句，见网页--> <a href="#"><a href="#">我是一个超链接</a></a> <p> <div>我是一个span</div> </p> <a href="#"> <div style="background-color: red; width:200px"> 我是一个div </div> </a> <div style="background-color: yellow;"> 我是一个div </div> <p>我是一个p标签</p> <p>我是一个p标签</p> <hr /> <span>我是一个span</span> <span>我是一个span</span> </body> </html>
demo.html
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>CSS</title> <!-- 内部样式表 也可以将css样式编写到head中的style标签里 将样式表编与的style标签中，然后通过css选择器选中指定元素 然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用 将样式表编写到style标签中，也可以使表现和结构进一步分离它也是我们推荐的使用方式 <style type="text/css"> /* css的注释，作用和HTM注释类似，只不过它必须编写在style标签中，或者是css文件中 */ p{ color: red; font-size: 40px; } </style> --> <!-- 还可以将样式表编写到外部的css文件中,然后通过link标签来将外部的css文件引入到当前页面中， 这样外部文件中的css样式表将会应用到当前页面中 将css样式统一编写到外部的样式表中，完全使结构和表现分离，可以是样式表可以在不同的页面中使用， 最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存 加快用户访问的速度提高了用户体验，所以在开发中我们最推荐使用的方式就是外部的css文件 --> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <!-- 可以将css样式编写到元素的style属性当中 将样式直接编写到style属性中，这种样式我们称为内联样式 内联样式 内联样式只对当前的元素中的内容起作用，内联样式不方便复用 内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用的 <p style="color: red;font-size: 40px;">锄禾日当午，汗滴禾下土</p> <p style="color: red;font-size: 40px;">谁知盘中餐，粒粒皆辛苦</p> --> <p>谁知盘中餐，粒粒皆辛苦</p> <p>谁知盘中餐，粒粒皆辛苦</p> <p>谁知盘中餐，粒粒皆辛苦</p> <p>谁知盘中餐，粒粒皆辛苦</p> <p>谁知盘中餐，粒粒皆辛苦</p> </body> </html>
style.css
/* css的语法: 选择器 声明块 选择器: 通过选择器可以选中页面中指定的元素, 并且将声明块中的样式应用到选择器对应的元素上 声明块: 声明块紧跟在选择器的后边，使用一对{}括起来， 声明块中实际上就是一组一组的“名值对”结构， 这一组一组的“名值对”我们称为声明， 在一个声明块中可以写多个声明，多个声明之间使用;隔开， 声明的样式名和样式值之间使用:来连接 */ p{ color: red; font-size: 40px; }
转载请注明出处：https://www.cnblogs.com/stu-jyj3621
浙公网安备 33010602011771号