基础之Day01

蒙面价肥猫 2019-09-02 09:42:58

今天学习了HTML5的基础之基础的基础部分，所以我来跟小白白们分享一下。 1，HTML中文名字叫做“超文本标记语言” 2，HTML5版本声明：〈！DOCTYPE html〉作用：告知浏览器使用哪个版本的HTML或XHTML规范 3，字符集声明标签：<meta charset=”UTF-8”/> 该标签放置于<head>标签内 4，<html> <head>//头部 <meta charset=”UTF-8”/> <title>文档标题</title>//标题 </head> <body>主体【页面所有可视部分】</body>//内容 </html> 注意：html标签是head和body的父级元素，head和body标签是html标签的子元素 5，HTML标签不区分大小写：即<html>与<HTML>与<Html>并无区别 6，HTML注释一段内容时使用“"结束（Ctrl+？）常见的HTML标签 7，（1）单标签： 、<img/>、<hr/>、<meta/>、<input/> （2）双标签：<div></div>、、<a></a>等 8，样式标签：【都属于行内元素】倾斜： 倾斜强调： 加粗： 强调加粗： 下划线： 9，HTML特殊符号：空格：【英文半角空格】大于号：> 小于号：< 版权符号：© 双引号：" 注册符号：® 连接符号&：& 10，图片标签：<img/> 标签属性：（1）宽度属性：width=“数值”【不带单位，默认单位是px】（2）高度属性：height=“数值”【不带单位，默认单位是px】（3）图片路径属性：src=“图片路径” （4）鼠标滑过显示提示文字属性：title=“提示文字” （5）图片非正常显示时显示提示文字：alt=“提示文字” 注意：所有的标签都具有title属性，除了 标签没有title属性 11，水平线标签：<hr/> 标签属性：（1）宽度属性：width=“数值” （2）颜色属性：color=“颜色名称/十六进制颜色/rgb()颜色” 12，HTML元素分类：行内元素、块级元素、行内块级元素【可变元素】（1）行内元素（display：inline）：行内元素在同一行显示，只能包含文本或其他的行内元素注意：默认情况下行内元素不具有宽高属性，也不具有：margin-top和margin-bottom【上下外间距】举例：a、i、span、img、time、em、strong、label、b、textarea、input、select（img和input可以设置宽高）（2）块级元素（display：block）：块级元素独占一行，可以包含行内元素或其他块级元素【注意：块级元素具有宽高属性】举例：div、p、hr、ul、li、ol、dl、dt、dd、table、form、h1-h6 （3）行内块级元素（display：inline-block）：既有宽高属性，同时还有同行特性【能设置宽度，并且在同一行显示】举例：img、input【默认情况】 hello world 斜体字 强调文本 小号文本 <big>大写不推荐使用</big> 下标文本 上标文本 h2o 水 m2 m的平方 <bdo dir="rtl">hello 从右到左输出</bdo> 13，无序列表标签：<ul><li>列表项</li></ul> 标签属性：type=“circle（空心圆）/square（实心方块）/disc（实心圆）【默认值】” 14，有序列表标签：<ol><li>列表项</li></ol> 标签属性：type=“A（大写字母）/a（小写字母）/i（小写罗马数字）/I（大写罗马数字）/1（阿拉伯数字）【默认值】” 15，老式框架思路〈frameset，frame〉 rows 设置整个屏幕顶部和底部的比例 cols 设置底部的左部右部比例例如：以下是新版的iframe的用法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>首页</title> </head> <body> <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a> 注意： 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。 </body> </html> 〈2〉以下是frameset，frame的用法首先建立一个首页index.html〈注意：用frameset的时候不能与body一起使用〉 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>首页</title> </head> <frameset rows=“25%，* ”> <frame src=“top.html”/> </frameset> <frameset rows=“25%，* ”> <frame src=“left.html” name=“frameA”/> <frame src=“right.html” name=“frameA”/> </frameset> </html> 其次在建立一个top.html在里面放一个图片〈比较简单我就不写了〉然后就是在建立一个left.html，在里面建立三个超链接 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <a href=“right1.html” target=”frameA” >第一个</a> <a href=“right2.html” target=”frameA” >第二个</a> <a href=“right3.html” target=”frameA” >第三个</a> </body> </html> 然后再建立三个right1.html，right2.html，right3.html网页，里面写上不同的内容，保存好以后打开首页，就可以看见在一个网页上面，显示三块内容，顶部是图片，左边是三个超链接，右边是内容，点击超链接，内容就会在右边显示出来。今天就总结到这里啦～明天见～晚安～

...全文