HTML学习笔记
来源：互联网 发布：广电网络与电信网络 编辑：程序博客网 时间：2024/06/06 05:57
HTML
Hyper Text Markup Language，超文本标记语言
不是一种编程语言，而是一种标记语言
思想：网页中有很多数据，不同的数据可能需要不同的显示效果，一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
语言结构介绍：
<!-- 声明文档页面使用的html版本，当前是html5 --><!DOCTYPE html><!-- html文档的根元素标签，表示html文档的开始和结束 --><html> <!-- html文档的头部标签 --> <head> <!-- 定义文档标题 --> <title>html学习</title> <!-- 用于html页面的元信息 http-equiv：指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容。 name：指定元信息名称，该名称可以随意指定 content：指定元信息的值 --> <!-- 指定文档的字符编码 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <!-- 3s后会自动跳转到baidu主页 --> <meta http-equiv="refresh" content="3;url=http://www.baidu.com"/> <!-- 指定作者 --> <meta name="author" content="author_name"/> <!-- 指定关键字，用逗号隔开（便于搜索引擎进行搜索） --> <meta name="keywords" content="关键字1，关键字2，关键字3"/> <!-- 对关键字进行描述 --> <meta name="description" content="对关键字的描述..."> <!-- 链接外部js资源文件 --> <script src="theme.js"></script> <!-- 包含js脚本 --> <script type="text/javascript"> // js代码 </script> <!-- 链接外部css资源文件 --> <link rel="stypesheet" type="text/css" href="theme.css"/> <!-- 定义内部css样式 --> <style type="text/css"> /* css代码 */ </style> </head> <!-- html文档主体标签 --> <body> </body></html>块级标签
显示为”块”状，浏览器会在其前后显示折行。常用的块级元素包括：<p>, <h1>~<h6>, <div>, <ul>等
标题标签
<!-- 标题标签，从h1到h6依次文字减小 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>段落标签
<p>同一个世界，同一个梦想</p><p>梦想还是要有的，万一实现了呢？</p>水平线标签
<!-- <hr/> size从1-7，越来越粗 --><hr/>列表
<!-- ol：有序列表 type设置排序方式 1默认，还有a,i.. --><ol type="a"> <li>中国</li> <li>日本</li> <li>韩国</li></ol><!-- ul：无序列表 type：circle（空心圆）,disc（实心圆）,square（实心方块），默认desc --><ul type="circle"> <li>苹果</li> <li>香蕉</li> <li>橘子</li></ul><!-- dl：definition list，定义列表，最常用 --><!-- dl, dt, dd, 可以将or和ul放在dd里面 --><dl> <dt>亚洲</dt> <dd>中国</dd> <dd>日本</dd> <dd>朝鲜</dd> <dt>欧洲</dt> <dd>英国</dd> <dd>法国</dd> <dd>德国</dd> </dl>分区标签
<!-- div标签一般当作结构化块状元素使用，一般最常用的用途是对网页进行整体分块布局，即当容器来使用 --><div id="fruit"> <p>苹果</p> <p>香蕉</p> <p>橘子</p></div><div id="country"> <p>中国</p> <p>日本</p> <p>朝鲜</p></div>行级标签
按行逐一显示，前后不会自动换行，常用的行级标签包括：<b>, <i>, <sub>, <sup>等
<!-- 定义粗体文本 --><b>粗体文本</b><!-- 定义倾斜文本 --><i>倾斜文本</i><!-- 效果和b类似，语气较强 --><strong>粗体文本</strong><!-- 效果和i类似，语气较强 --><em>倾斜文本</em><!-- 定义小号文本 --><small>小号文本</small><!-- 定义下标文本 -->H<sub>2</sub>o<!-- 定义上标文本 -->10<sup>2</sup><!-- 定义文本显示方向，内有dir属性，只能取值ltr从左到右或rtl从右到左 --><bdo dir="rtl">文本内容</bdo><!-- 超链接标签href：指定超链接所关联的另一个资源target：指定框架集中的哪个框架来装载另一个资源，该属性值有_self, _blank, _top, _parent四个值，分别代表使用自身、新窗口、顶层框架、父框架来装载新资源 --><a href="超链接地址" target="目标窗口">点击</a><!-- 图像标签 --><img src="图片地址" alt="提示文字"/><!-- span标签：内部放文本或者行级标签 --><span>文本等行级内容</span><!-- 换行标签 --><br/><!-- 常用的特殊符号 --> <!-- 空格 -->> <!-- 大于号(>) -->< <!-- 小于号(<) -->" <!-- 引号(") -->© <!-- 版权符号(©) -->框架
frameset框架集
创建框架页面的步骤：
创建各个子窗口对应的html文件
创建整个框架文件，分别引用子窗口文件
框架的使用
<!-- frameset：框架集标签，不能与body标签同时使用，除非与noframes标签联合使用时将浏览器分割成多个框架页，来加载多个html页面frame：框架标签cols：pixels, %, * 定义框架集中列的数目和尺寸rows：pixels, %, * 定义框架集中行的数目和尺寸noresize：设置框架尺寸不可调整border：设置框架边框宽度--><frameset rows="25%,*" border="1" noresize="noresize"> <frame src="top.html">上边/frame> <frameset cols="25%,*"> <!-- 如果希望点击左边框架的超链接，右边框架显示超链接内容，可以将左边超链接a标签的target设置成右边框架的名称即可 --> <frame src="left.html" name="leftFrame">左边</frame> <frame src="right.html" name="rightFrame">右边</frame> </frameset> <!-- noframe标签为那些不支持框架的浏览器显示文本，noframes元素位于frameset内部 --> <noframes> <body> 您的浏览器无法处理框架！ </body> </noframes></frameset>iframe内嵌框架
<!-- iframe：内嵌框架，在body标签内部frameborder：0, 1 规定是否显示框架周围的边框name：规定iframe的名称scrolling：yes(显示), no(不显示), auto(内容超过框架则显示，否则不显示) 规定是否在iframe中显示滚动条scr：规定在iframe中显示的文档的urlwidth：框架宽度height：框架高度 --><body> <!-- <iframe src="引用页面地址" name="框架标识名" frameborder="边框" scrolling="是否显示滚动条"> --> <!-- 和frameset类似，如果希望点击iframe外的超链接，iframe中显示相应的网页，可以将超链接a标签的target设置成iframe的名称即可 --> <iframe src="http://www.baidu.com" name="contentFrame" width="100%" height="400px"></iframe> <p><a href="http://www.sina.com.cn/" target="contentFrame">新浪</a></p> <p><a href="http://www.baidu.com/" target="contentFrame">百度</a></p> </iframe></body>阅读全文
