黑马程序员技术交流社区

标题: 技术贴 [打印本页]

作者: 吴晨曦 时间: 2019-6-8 23:18
标题: 技术贴
                           技术贴
  经过十来天的黑马学习生涯，使我获益良多，以下就是我今日学习的一些心得和知识点，本人小白一枚，若有何有误之处，还望海涵。
  首先，是关于html的一些心得与知识点，关于html的部分其实非常的简单，只要能够掌握好其中各项标签的正确使用方法，便算是较好得掌握这一块的内容了。以下是我关于html标签的一些笔记：
1）标题标签h
其基本语法格式如下：
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
2）段落标签p
可以把 HTML 文档分割为若干段落

3）水平线标签hr
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。
4）换行标签br
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
5）div 和 span标签
div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。
span 跨度，跨距；范围
6）图像标签img
<img src="图像URL" />
7）链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
8）注释标签
HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签
    快捷键是： ctrl + /    或者 ctrl +shift + /
9）路径
路径其实很好理解，只要根据文件夹一层层的写就行了，不过要注意顺序和父子关系。
以上就是关于html的一些标签用法，接下来是关于css的一些要点和标签用法，其实css相较于之前的标签而言也没多大区别，只是涵盖的范围更广了，能做的是更多了，可以增加网页款式的多样性和精美度，而关于网页的许多排版布局，也只有css的帮忙才能做到。
以下就是一些关于css的笔记与心得要点：
  1、Css的作用
Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；
2、使用css的原理
能够将结构html和样式css分离书写，简化代码，提高可阅读性；
3、css的书写位置
分为3类：行内式、内嵌式（内部样式）、外部链接式
Css属性书写语法
属性：属性值；
行内式
直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可、。
注意：行内样式没有实现结构和样式分离，尽量不用：
例如：<div style=“color:pink; font-size:16px;”>我是行内样式</div>;
内部样式（内嵌式）：
书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；
外部链接
使用外部链接的好处：实现了结构和样式的完全分离，代码简介，可读性强；
使用外部链接的步骤
01 新建：.css格式的css文件，直接书写选择器以及css样式；
02 引用：利用link标签引入新建的css文件，要配合link的三个属性  rel关系，type文件类型（可以省略），href文件路径；

外部链接的好处
一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；
4、Css选择器
Css选择器的分类
Css选择器分为两类：基础选择器和高级选择器（复合选择器）
基础选择器：标签选择器（html选择器）、类选择器、ID选择器
复合选择器：后代选择器、并集选择器、指定标签选择器
CSS选择器作用
选择标签的，把想要选择的元素标签选择出来。
标签选择器：
以标签名称命名的选择器，可以把将页面中所有的同类元素全部选中，所以实际工作中标签选择器不推荐大家使用；
类选择器（重点）
类选择器定义
类选择器使用有一个过程：
01 定义：在css里面用点“  .  ” +  类名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
类选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
但是可以用数字结束。
类选择器特殊用法（多类名）
一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
例如：<div class=“red  font100”>一个元素调用多个类名</div>
ID选择器（了解）
id选择器的定义使用
id选择器使用有一个过程：
01 定义：在css里面用 “  #  ” +  id名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用；
id选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
通配符选择器*
一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
以上就是关于css的书写样式以及选择器的一些内容，虽然不多却十分的重要，能否正确书写关乎着之后的样式能否正常的在网页上显示。
前端的学习是一件很考验人毅力的东西，许多代码看着差不多，其实其效果却天差地别，能否正确的书写与使用代码即考验你对于代码的掌握性，也十分考验你的细心程度，有一句话说得好，细节决定成败！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2