这简直就是一个打字的课，枯燥，乏味，一个html几行代码，剩下的都是注释，美名其曰记笔记—-而且没有什么练习，只有不停的“抄完笔记了吗~”。而且要求必须全都背下来，第二天要去提问，这简直了了了了，辛亏还有点基础，不至于跟不上，不说了所有上课的东西都是笔记，背下来。。。。
所有的知识点都在注释里。
<!doctype html>
<html><!--这是注释-->
<head>
<meta charset="utf-8" />
<title>my first web page</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
li{background: pink;margin-top: 5px;}
p{color: yellow;}
/* span,.link{color: red;}
分组式写法,可以让不同的选择器,在设置相同的样式的时候
能够用一句样式统一实现;它代表span和.link同时添加相同
的样式clolor:red; */
</style>
</head>
<body>
<!--标签的主要作用是：给计算机描述，文件里面的内容是什么-->
<a href="http://www.baidu.com" target="_blank">
<img src="image/001.jpg" alt="this is a long"/>
</a><!--告诉计算机我们的内容是一个图片，不去管图片的内容是什么-->
<!--
src就是图片存放路径，标签内被标红的单词被称为标签的属性
alt属性是给搜索引擎提示图片的内荣，方便搜索引擎按照相关内容存储图片
链接标签a它的跳转是通过href属性设置出现，如果要跳转到外网网站：
地址：http://url地址;target:页面的打开方式："_blank"是以新页面打开
-->
<!--首页出现的标题类型内容，我们主要使用h标签表示-->
<h1>标题1</h1><!--在一个页面只允许出现一次。一旦出现多个，百度将会把该网站流量减半-->
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--在网页中，一般默认的字体尺寸是16px大小，
但是h5，h6的字号比默认的还要小，所以起不到提示作用，我们一般不使用，常用的：h2-h4
一般网页的导航，呈现一列排的文章标题，这样的内容一般我们使用无序列表表示 ul
-->
<ul id="nav">
<li><a href="#">首页</a></li><!--加#跳转自身-->
<li><a href="#">新闻中心</a></li>
<li><a href="#">产品类别</a>
<ul id="subnav">
<li><a href="#">产品A</a></li>
<li><a href="#">产品B</a></li>
<li><a href="#">产品C</a>
<ul id="sublist">
<li><a href="#">产品C1</a></li>
<li><a href="#">产品C2</a></li>
<li><a href="#">产品C3</a></li>
<li><a href="#">产品C4</a></li>
</ul>
</li>
<li><a href="#">产品D</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<!--段落标签P，将一段内容形成一个独立的段落，跟别的内容区分开；-->
<p>长期KPI导向造成了企业价值观缺失，从机票无脑搭售+无视场景卖大米卖红酒可窥一端倪。</p>
<p>我的文字</p>
<div>我们是社会主义</div><!--容器标签，主要作用就是将表示内容的标签打包称为一个整体
如果一个标签内包含的内容是独占一行的，这样的标签我们称为：块标签；
特性：标签的宽度默认为父级的标签宽度，可以直接设置宽高，英文称为：block
块标签：li,ul,p,h,div
-->
<div>abcdefghijklmnopqresuvwxyz</div>
<a href="#">你好</a>
<a href="#">hello</a>
<span>我是行标签，我主要的作用就是包含内容</span>
<!--多个标签包含的内容，最终都排在一行输出，这样的标签我们称为 行标签：
典型的行标签有两个：a,span
行标签不能直接设置宽高；
img标签就是典型的行内块标签，具有排列一行的特性，也有块标签设置宽高的特性
常规的HTML页面内容会按照标签的特性进行排列：
上下排列靠左对齐，这样的内容形态，我们称为：传统文档流输出状态
-->
<!--刚写好的HTML界面，其实没有任何外观，我们需要根据自己的设计来
设置内容的表现，这样一种设置外观的技术，我们称之为css：
选择器{样式声明}：样式声明包含：样式属性名称：样式属性的值；
p{color:red;}
css:使用的位置：在head区域设置一对style标签；
在style内写入我们的css样式即可；
css的选择器：
主要作用：将css内容和我们的HTML内容之间建立一种绑定关系
第一种：通用选择器："*";代表的意思是：一次性选择所有元素;
*{color:red;}
权重系数：最低
权重系数代表样式实现的优先级，权重越高，样式优先实现。
第二种：标签选择器/元素选择器
权重系数：1；
实现原理：直接将标签名作为选择器来使用；
应用场所：如果该页面只有一个这样的标签我们才可以使用标签选择器。
第三种：id属性选择器：通过id的方式给标签起名；
例如：<div id = "box"></div>
如何使用id属性名称作为选择器；
#box{width:200px;} id属性选择器的权重系数：100；
规定：一个页面中，id的名称只能出现一次；
第四种：class类选择器；
例如：<div class="nav"></div>
使用class名称做选择器的方法；
.nav{height:500px;}
class的名称可以出现多次；权重系数：10；
-->
<div>
<p>
<a href="#1"></a>
</p>
</div>
<!--a嵌套在p里面，那么a就是p的相邻子级标签；
p嵌套在div里面，那么div就是a标签的隔代父级标签；
第五种：派生元素选择器：div p a
派生元素选择器是无视子级的所在层级，一次性选择父级下所有的子级标签
第六种：相邻子代选择器: div>p>a
相邻子代选择器是一级一级往下选，每一个大于号都代表该父级下紧邻的子级标签
-->
<!--css样式属性：
height:高度,width:宽度;
display:显示;
display:inline:以行标签形态显示,inline-block以行内块形态显示,
block以块标签形态显示,none不显示；
border：边框；
border-width:线的粗细；
border-color:边框颜色；
border-style:边框样式：实线:solid,虚线:dashed,双线：double;
border边框可以设置单一方向的边框：top,left,right,bottom.
简化的边框写法：
border:width stytle color;
border:1px solid red;
border-top:1px solid red;//上边线写法
border-left:1px solid red;//左边线写法
border-bottom:1px solid red;//底边线写法
border-right:1px solid red;//右边线写法
每个元素盒子都有四条边，四个方向，
方向的表达顺序是：上，右，下，左;
css样式在实现的时候有优先级别；
1.如果我们对同一个标签进行相同属性但是值不相同的样式设定时，
这时候以（写在下面的）新样式为准；
2.对同一个标签使用不同选择器进行相同属性设置时，
按照权重值高的优先实现。
权重的叠加：
如果我们使用派生或者相邻子代选择器：
那么我们需要将所有的选择器权重加起来，算出总权重值。
-->
</body>
</html>少年，不要停，开始记吧！！！
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
