WEB——HTML、CSS、javascript

最新推荐文章于 2024-02-22 17:26:01 发布

庸人阿九

最新推荐文章于 2024-02-22 17:26:01 发布

阅读量404

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/SansaHome/article/details/128025890

版权

一、HTML

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页。

(一)骨架

（二）标题

（三）段落

（四）图片
在 HTML 中，图像由 <img> 标签定义，它是单标签，意思是说，它只包含属性，并且没有闭合标签。src 指 “source”。源属性的值是图像的 URL 地址。
Format：<img src="url" alt=”” width=”” height=”” title=”” />

（五）超文本链接
HTML 使用<a>设置超文本链接。想跳哪里跳哪里！！！
<a href="url">Link text</a>
（六）列表

（七）表格
（八）表单
（九）属性
（十）样式
（十一）内联元素和块级元素

二、CSS

CSS(Cascading Stytle Sheet)：层叠样式表，简称样式表。是用户增强控制页面样式并允许将样式信息与页面内容分离的标记性语言。可以控制页面中的HTML元素的背景与颜色、元素框的样式、定位、文字字体等属性的设置。

（一）CSS的优势和作用：
表现的统一，可以使网页的表现非常统一，并且容易修改。
减少重复的代码的编写。
增加网页的浏览速度。
减少硬盘容量。
（二）语法
css规则由两个主要的部分组成：选择器，一条或多条声明

（三）引入方式：
1、内联样式（行内样式）：行内样式表是在元素标签内部的style属性中设定CSS样式，适用于修改简单的样式。控制当前的标签设置样式。<div style="color:red font-size:12px;">
2、内部样式表：是写到HTML页面内部的，将所有的CSS代码抽离出来，单独放到一个<style>标签中，理论上可以放到HTML文档的任何地方，但是一般会放在文档的<head>标签中。控制当前整个页面中。<style></style>
3、外部样式表（链接式）：<link rel="stylesheet" href="css文件路径">
引入外部样式表分为两步：
a.新建一个后缀名为.css样式文件，把所有css代码都放到此文件中
b.在HTML页面中，使用link标签引入这个标签

外部样式（.css 文件）< 内部样式（<style>样式块）< 标签内样式（inline）

（四）选择器：
语法：css规则由两个主要的部分组成：选择器，一条或多条声明。
1.全局选择器：可以与任何元素匹配，优先级最低，一般做样式初始化。
*{
margin:0;
padding:0;
}
2.元素选择器：HTML文档中的元素，p，b，div，a，img，body等。标签选择器，选择的是页面上所有这种类型的标签，所以经常表述的“共性”，无法描述某一个元素的“个性”。
p {
color:red;
}
3.类选择器：规定用圆点 . 来定义，针对你想要的所有标签使用。优点：灵活。应用广泛。类名：字母、数字、_ 。一般就是字母，不能以数字开头。同一个标签可以使用多个类选择器，用空格隔开。
<h2 class=”content size”>标题为研究类型</h2>
.size{
color:green;
}
4.ID选择器：针对某一个特定的标签来使用，只能使用一次。CSS中的ID选择器以#来定义。
<h2 id=”mytitle”>内容</h2>
#mytitle{
color:red;
}
ID是唯一的。不能以数字开头。
5.合并选择器：提取共同样式，减少重复代码。
语法：选择器1，选择器2，…{ }
.header, .footer {
height:200px;
}
优先级：自上而下
css中，权重用数字衡量。1000/100/10/1
6.关系选择器：
6.1后代选择器：选择所有被E元素包含的F元素，中间用空格隔开。
E F{
}
ul li{ } 后代选择器
6.2子代选择器：选择所有作为E元素直接子元素F，对更深一层的元素不起作用。用>隔开。
E>F{
}
ul li{ } 子代选择器
6.3相邻兄弟选择器：选择紧跟E元素后的F元素，用+表示，选择相邻的第一个元素，只能向下选择。
E+F{ }
6.4通用兄弟选择器：选择E元素之后的所有F元素，作用于多个元素，用~表示。常用
E~F{ }

ID选择器100>类选择器10>元素选择器1

盒子模型
所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。(两个值，第一个是上下，第二个是左右)
Content(内容) - 盒子的内容，显示文本和图像。