web前端几个小型概念分析

最新推荐文章于 2024-06-06 10:11:10 发布

༺༂♥水༒影♥༂༻

最新推荐文章于 2024-06-06 10:11:10 发布

阅读量192

点赞数

本文链接：https://blog.csdn.net/wpb74521wrf/article/details/80647421

版权

1. 前端三种典型的核心技术:

(1) Html: 将元素进行定义

超文本标记语言,已经发展到5.0版了, 即HTML5。

(2) Css: 对展示的元素进行定位

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的

(3) JavaScript: 实现相应的效果和交互

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型

2. html

(1) 定义: 用尖括号括起来的语言为 HTML,是一种用来制作网页的语言
(2) 特点: 由一个个的标签组成, 用这种语言制作的文件保存的是一个文本文件, 文件的扩展名为 .html 或者 .htm

3. html文档的基本结构

(1) <!DOCTYPE html> 
      <html> 
                </html> 
         <head> 
                 </head> 
(2) head的主要作用
- 网页的设置
- 资源的引用
        (3) 注意点1:
head标签中的内容一般不会显示在网页上.
<body> 
</body> 
      注意点2:
body中的内容通常用于网页显示
注意点3:
        html语言中注释的写法

快捷键: ctrl + / 取消注释: ctrl + /
4. 快速创建html文档
第一步
新建一个.html文件, 在文件中快速创建基本标签
第二步
快速创建: 文件中敲一个 " ! " 然后按 tab 键
如果是中文则为: lang="zh-CN"
5. 标签的分类
(1) 注意点
在前端中, 元素指的就是标签, 所以我们有时候说: xx元素, 即指的是 xx标签
(2) 分类
块元素 (行元素)
特点
- 单个块元素在浏览器中默认独占一行
- 两个块元素不能够在一行显示, 他们会自动换成两行显示
- 块元素可以设置宽高等属性.
常用的块元素标签

1>标题标签

表示文档的标题, 除了具有块元素基本特征之外, 还含有默认的外边距和字体大小
<h1>一级标题</h1>
                                        <h2>二级标题</h2>
                                        <h3>三级标题</h3>
                                        <h4>四级标题</h4>
                                        <h5>五级标题</h5>
                                        <h6>六级标题</h6>
2>段落标签
表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距
<p> </p>
强制换行
<br>标签
在html中, 如果想要写大于号, 小于号, 或者空格
代码实现大于号: &gt ;
代码实现小于号: &lt ;
代码实现空格:  
3>通用块容器标签 div
表示文档中一块内容, 具有块元素基本特性, 没有其他默认样式
内联元素 (行内元素)
(1) 特点
- 多个内联元素可以在一行显示
- 内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果
- 内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.
(2) 常用内联元素标签

超链接标签 a

1>特点
链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线
2>格式
<a href="http://www.baidu.com">百度网站</a>
3>注意点
a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址
例如
<a href="#">默认链接</a>

不确定地址时, 我们可以临时使用 # 来占位
如果想要跳转到当前页面的最上方时, 可以使用 #
a 标签有 target 属性
- - 如果不设置该属性, 在当前页面打开新页面
例如
<a href="http://www.itcast.cn">原来的窗口打开界面</a>
- 如果设置该属性, 则会在新窗口中打开新页面
例如
<a href="www.baidu.com" target="_blank">新窗口打开界面</a>
(3) 通用内联容器标签 span
具有内联元素基本特性, 没有其他默认样式,在文字段落的中间部分强调某一部分的时候调用span
(4) 图片标签 img
在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置
<img src="images/pic.png" alt="图片">
特点说明
1>src属性主要是添加要展示的图片地址
2>alt属性的作用
- 图片加载失败时, 显示的提示信息
- 搜索引擎在收录图片时, 根据这个属性值来收录图片
- 制作无障碍网页, 方便盲人的读屏软件读取.
注意点: 特殊的一些标签
空格
 
换行
<br>
小于号
<
大于号
>
删除
del 或者 ( s )
倾斜
em 或者 ( i )
下划线

ins 或者 ( u )

6. css

(1) 基本格式:

选择器 {
属性 : 值;
属性 : 值;
...

}

(2) css样式导入html文件的三种方式:

内联式

通过标签的 style 属性, 在标签上直接写样式

嵌入式

通过 style 标签, 在网页上创建嵌入的样式表.

外联式

(3) css选择器:

    基础选择器
- 通用选择器 ( * )
通用选择器, 匹配任何元素:
- 标签选择器 ( 标签名 )
一般用来做一些通用设置, 或用在层级选择器中
注意点
一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式
- 类选择器 ( class )
通过    类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类
- id 选择器 ( id )
通过 id 名来选择元素，元素的 id 名称不能重复
特点
一个样式设置项只能对应于页面上一个元素，不能复用
    组合选择器
- 多元素选择器
同时匹配所有 E元素和 F元素, E和F之间用逗号分隔:
- 后代(层级)选择器
主要应用在标签嵌套的结构中
按照标签的层级来匹配对应的标签
- 子元素选择器
E > F 匹配所有 E元素的子元素F
- 毗邻选择器
匹配所有紧随 E元素之后的同级元素F (向下寻找)
    属性选择器
1. [attr] { 属性名: 值;...}
2. E[attr=val] {属性名: 值; ...}
    伪类选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态

(4) css进阶

浮动(float)

༺༂♥水༒影♥༂༻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端几个小型概念分析

1. 前端三种典型的核心技术: (1) Html: 将元素进行定义超文本标记语言,已经发展到5.0版了, 即HTML5。 (2) Css: 对展示的元素进行定位级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的 (3) JavaScript: 实现相应的效果和交互...
复制链接

扫一扫