基础知识

1.在 Sublime 中,可以通过 Sublime-snippet 来快速补全代码。

基础知识

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

4.<h></h> 是标题标签,<p></p>是段落标签,<img src="">是图片标签
除了<h1>标签外,还有<h2>、<h3>、<h4>、<h5>、<h6>,数字越大字越小,<br />相当于敲了一个回车。

5.<!--注释文字 -->

6.在 html 中是忽略回车和空格的,你输入的再多回车和空格也是显示不出来的,<pre> </pre>可以保留文本中的空格和回车.(注意:<pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。)

7.<ul></ul>无序列表,<ol></ol>有序列表

8.使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

语法:

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

例如:

<a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>

上面例子作用是单击click here!文字,网页链接到http://www.imooc.com这个网页。

title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)

9.语法:<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

讲解 1、src:标识图像的位置;

     2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

     3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

     4、图像可以是GIF,PNG,JPEG格式的图像文件。

10.语法:<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

       1、type:当 type="radio" 时,控件为单选框,当 type="checkbox" 时,控件为复选框,当type=“submit”按钮才有提交作用,type=reset按钮具有重置作用

       2、value:提交数据到服务器的值(后台程序PHP使用)

       3、name:为控件命名,以备后台程序 ASP、PHP 使用

       4、checked:当设置 checked="checked" 时,该选项被默认选中

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

10.<option value=’提交值(向服务器提交的值)’>选项</option>

  设置selected="selected"属性,则该选项就被默认选中。

  下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击)

11.小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

<form>

  <label for="male">男</label>

  <input type="radio" name="gender" id="male" />

  <br />

  <label for="female">女</label>

  <input type="radio" name="gender" id="female" />

  <label for="email">输入你的邮箱地址</label>

  <input type="email" id="email" placeholder="Enter email">

</form>

标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。(label意思就是你点击女就会默认把女旁边的小圆点选中了)   

11.

      css 样式由选择符和声明组成,而声明又由属性和值组成

      选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。

 

      声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔

12.内联式 > 嵌入式 > 外部式

 

但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)。

 

13.类和ID选择器的区别

学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点:

 

相同点:可以应用于任何元素

不同点:

 

1ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

 

下面代码是正确的:

 

 <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

而下面代码是错误的:

 

 <p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

 

下面的代码是正确的(完整代码见右侧代码编辑器)

 

.stress{

    color:red;

}

.bigsize{

    font-size:25px;

}

<p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>

上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px

 

下面的代码是不正确的(完整代码见右侧代码编辑器)

 

#stressid{

    color:red;

}

#bigsizeid{

    font-size:25px;

}

<p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>

上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

 

 

14.<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>测试就近原则</title>

<style type="text/css">

p{color:red;}

.first{color:green;}/*因为权值高显示为绿色*/

 

span{color:pink;}/*设置为粉色,1*/

p span{

    color:red;

}/*权值2*/

p span{

    color:blue;

}/*权值2*/

</style>

</head>

<body>

    <h1>测试</h1>

    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

    <p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>

</body>

</html>

(css样式优先高权值,权值相同的情况经我测试应该是就近原则,.first里面的span标签因继承性和.first一个颜色但是权值最低,一旦有新的指令则span颜色改变)

15.

16.css布局模型

清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。 
CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值