学习web第一天html
从今天开始学习web前端了，第一堂课讲的是html
老师告诉了我们两个网站，一个是w3c一个是菜鸟教程之前偶尔也去看感觉挺好的
w3c的网站是:https://www.w3school.com.cn/
菜鸟教程的网站是:https://www.runoob.com/
开始内容:
html的默认首页可以是index或者default
html是超文本标记语言而不是编程语言
html5中
</!DOCTYPE html>
必须放在文档的首行，放在<html>标签的前面
作用是告诉电脑用的是html语言
</!DOCTYPE html>只是声明不属于标签
<meta charset=”UTF-8”/>
是表示字符编码集是用的utf-8 代表国标编码的意思
一般通用的字符编码还有gb2312和gb2313
一般utf-8是给外国人看的 gb2312是给中国人看的
但是通用都是用utf-8
字符编码集必须和浏览器的编码集一样
浏览器也是可以改编码集的
可以按菜单栏的查看(v) 有一个编码 选择要改变成什么样的编码格式
如果没有找到可以鼠标右击浏览器页面的空白处，菜单中选中编码，改变编码格式
网页内容：
html基本骨架
<html>
<head>
<meta charset=”UTF-8”/>
<title>文档标题</title>
</head>
<body>主体【页面所有可视部分】</body>
</html>
html标签是最外层标签是表示用的html语言
一般标签都是成对出现的但是个别标签后结束删除后不影响显示结果，
比如head可以删除结束符,body,html都可以title不可以省略但是如果删除的话会显的不够严谨,建议全都写上.。
标签可以嵌套，但是不允许交叉
<head><title></title></head>【标签嵌套】对
<head><title></head></title>【标签交叉】错
要对应好每一对标记符
html标签不区分大小写，大写和小写无区别
w3c标准包括:html、css样式、JavaScript脚本
html网页中默认字体大小为:12px、14px
px为像素
**常见的html标签及其属性**
HTML基本语法：<标签名 属性=“属性值”>内容</标签名>
属性的概念：用来表示标签的特征
属性值的概念：为属性赋的值被称为属性值
HTML标签分类：单标签、双标签
单标签：<br/>换行标签、<img/>图片标签、<hr/>线、<meta/>编码格式、<input/>表单标签
双标签：<div></div>布局、<p></p>段落、<a></a>可以弄超链接等
样式标签：【都属于行内元素】
倾斜：<i></i>
倾斜强调：<em></em>
加粗：<b></b>
强调加粗：<strong></strong>
下划线：<u></u>
HTML特殊符号：
空格： 【英文半角空格】
大于号：>
小于号：<
版权符号：©
双引号："
注册符号：®
连接符号&：&
标题标签：<h1>~<h6>【块级元素】
h1级别最高、字体最大，依次递减，h6级别最低，字体最小
段落标签：<p>内容</p>【块级元素】
图片标签：<img/>
标签属性：
（1）宽度属性：width=“数值”【不带单位，默认单位是px】
（2）高度属性：height=“数值”【不带单位，默认单位是px】
（3）图片路径属性：src=“图片路径”
（4）鼠标滑过显示提示文字属性：title=“提示文字”
（5）图片非正常显示时显示提示文字：alt=“提示文字”
注意：所有的标签都具有title属性，除了<br/>标签没有title属性
水平线标签：<hr/>
标签属性：
（1）宽度属性：width=“数值”
（2）颜色属性：color=“颜色名称/十六进制颜色/rgb()颜色”
1）颜色名称：red（红色）、green（绿色）、blue（蓝色）
2）十六进制颜色：#ff0000(或#f00)（红色）、#00ff00(#0f0)（绿色）
#0000ff(#00f)（蓝色）、#000000(#000)（黑色）、#ffffff(#fff)（白 色）
3）rgb()颜色：值得范围是（0-255）
rgb(255,0,0)（红色）、rgb(0,255,0)（绿色）、rgb(0,0,255)（蓝色）
rgb(255,255,255)（白色）、rgb(0,0,0)（黑色）
（3）水平线粗细：size=“数值”
（4）水平对其方式：align=“left左对齐/center居中对齐/right右对齐”
路径：相对路径、绝对路径
（1）相对路径：自己相对于目标文件的路径
Web/html/index.html
.
./index.html【添加../用于路径不在同一目录下，返回上一级】
（2）绝对路径：完整的描述文件路径，精确到盘符或服务器
例如：http://www.baidu.com【精确到服务器】
C://Web/imgs/01.jpg【精确到盘符】
**元素分类，列表标签，超链接**
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【默认情况】
``<b>hello</b>
<strong>world</strong>
<i>斜体字</i>
<em>强调文本</em>
<small>小号文本</small>
<big>大写 不推荐使用</big>
<sub>下标文本</sub>
<sup>上标文本</sup>
h<sub>2</sub>o 水
m<sup>2</sup> m的平方
<bdo dir="rtl">hello 从右到左输出</bdo>
无序列表标签：<ul><li>列表项</li></ul>
标签属性：type=“circle（空心圆）/square（实心方块）/disc（实心圆）【默认值】”
<ul type=“circle”>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
有序列表标签：<ol><li>列表项</li></ol>
标签属性：type=“A（大写字母）/a（小写字母）/i（小写罗马数字）/I（大写罗马数字）/1（阿拉伯数字）【默认值】”
reversed=“reversed”：设置有序列表的倒叙显示（项目符号倒叙）
自定义列表标签：<dl>、<dt>、<dd>
<dl>
<dt>自定义项</dt>
<dd>自定义描述项</dd>
<dt>自定义项</dt>
<dd>自定义描述项</dd>
</dl>
超链接标签：<a>内容</a>
标签属性：<br>
（1）路径属性：href=“跳转链接的路径”<br>
（2）打开方式属性：target=“_self/_blank/_top/_parent”<br>
_self：当前窗口（原窗口）<br>
_blank：新窗口打开<br>
_top：主框架打开、_parent：父级框架打开<br>
注意：1）超链接是一对一的关系（一次只能连接一个文件）<br>
2）不仅仅可连接到网页，还可以连接到图片
3）超链接可以为用户提供链接下载文件
2)超链接标签
<a href="链接到的目标地址">内容：文本或者图片</a>
我们可以通过绝对路径和相对路径来回跳转
绝对路径：
相对路径：
<meta http-equiv="refresh" content="7;url=http://www.sina.com.cn" />
描述：行级标签 超链接标签 <a href="" target="_self/_blank"></a>
-->
<a href="链接到的目标地址">内容：文本或者图片 有些网站防盗链 所以不让跳转</a>
<a href="http://www.sina.com.cn" target="_blank">新浪网</a>
<a href="yolanda1.html">相对路径</a>
<a href="yolanda\yolanda.html" target="_blank">绝对路径</a>
yolanda:
<body>
绝对路径lalala
<a href="../index.html">index.html</a>
</body>
3）图像标签
<img src="图像资源路径" alt="提示文字"/>
<!--
图像标签
-->
<img src="img/logo.JPG" title="我的鼠标" alt="程序员专用" />
<!--当图片不存在的时候 会提示alt后面的文字 提示缺少那张图片 title悬停文字-->
图片跳转 把图片嵌套在超链接里面
<a href="http://www.sina.com.cn" target="_blank">
<img src="img/logo.JPG" title="我的鼠标" alt="程序员专用" />
</a>
菜鸟：图像标签下的map
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
rect:矩形 左上0,0 右下82,126
circle圆形 圆心：90,59 半径3
4）span强调凸显标签
今天打折，只要7折起 ：凸显7折 <p>展现不了凸显
<p>今天打折，只要<span style="color: red;font-size: 36px;">7折</span>起</p>
5）<br/>换行标签：换行间距不大 <p>标签间距大
最后老师还讲了一个老式框架(已被淘汰的frameset)
就是分三部分，一个大的主页面上面放一个图片
下面分两部分 左面放目录 右面放显示的内容
主页面代码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主页面</title>
</head>
<!--
描述：这是一个框架页 不能有body 老式框架 先上下切，下面的再左右切
可以自动调动大小 可以设置固定 norsize="norsize"
滚动条去掉 scrolling="no"
边框去掉 frameborder="0"-->
<frameset rows="50%,*" frameborder="10">
<frame src="top.html" noresize="noresize" scrolling="no" name="to"/>
<frameset cols="25%,*">
<frame src="left.html" />
<frame src="right1.html" name="rightFrame"/>
</frameset>
<noframes>
<body>
此浏览器不支持frameSet
</body>
</noframes>
</frameset>
</html>
左面目录代码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left.html</title>
</head>
<body>
<p><a href="http://www.baidu.com" target="rightFrame">链接1</a></p>
<p><a href="right2.html" target="rightFrame">链接2</a></p>
<p><a href="right3.html" target="rightFrame">链接3</a></p>
</body>
</html>
右面代码的其中一个为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
我是链接1中显示的内容
</body>
</html>
其他的都几个链接和上面都相似
顶部代码为:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
顶部内容<img src="../img/logo1.jpg" />
</body>
</html>
最后还给我们讲了没淘汰的iframe
代码实现为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动框架的实现 ==内嵌框架的学习</title>
</head>
<!--
<body style="background: url(../img/meinv.jpg) no-repeat" >
<iframe src="../img/meinv.jpg" width="100px"
frameborder="10px" scrolling="10">
</iframe>
</body>
-->
<body>
<a href="http://www.sina.com.cn" target="content">新浪</a>
<a href="http://www.baidu.com" target="content">百度</a>
<a href="http://www.sohu.com" target="content">搜狐</a>
<iframe name="content" width="1200px" height="400px"></iframe>
</body>
</html>
我第一天的所有收获就是这些了,明天继续。
3051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
