HTML&CSS

最新推荐文章于 2024-09-10 00:44:46 发布

ckx0703

最新推荐文章于 2024-09-10 00:44:46 发布

阅读量1.1k

点赞数 22

文章标签： html css 前端笔记

本文链接：https://blog.csdn.net/ckx0703/article/details/140963843

版权

一、Html、css、js

html：超文本标记语言——负责网页的结构
css：层叠样式表——页面显示的样式、排版
js：JavaScript——界面交互（动态交互、逻辑）

二、Html

div和span

1. div division：div里面所有的元素都在div区域里面，div里面可以嵌套别的标签
div独占一行
2. span：功能类似于div但是不能独占一行

注

1. 块级元素block：单独成为一行。h、ul、ol、div
2. 行内元素inline：不能独占一行，可以和其他元素并排。img、a、span、input

u（underline）：下划线
i（italic）：斜体
b（bold）：粗体

空间折叠以及特殊符号

空格折叠：普通空格在html中如果有多个连续出现会被当做一个空格，如果想要显示多个连续空格需要特殊符号 
<    less than    <
>     gteat than >
©    ©
<h1> 在html页面输出：<h1>

table表格

th：table head
tr：table row
td：table data单元格

rowspan：合并行
colspan：合并列

form表单

css：cascading style sheet 层叠样式表
语法格式：

选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    属性名3:属性值3;
}

三、CSS

css使用：

1.通过选择器选择上标签
2.在选择的标签上设置样式

选择器分类：

1.标签选择器：

p{
    ……
}

2.类选择器：

.className{
    ……
}

3.id选择器：

#id{
    ……
}

一些常见的样式：
color:red; //文字颜色
font-size:40px;
background-color:blue;
text-decoration:underline;
text-decoration:none; //去掉下划线

css使用思想：

1. 不要试图用一个类名，把某个标签的所有样式写完。要让这个标签多携带几个类，共同造成这个标签的样式。
2. 每一个类要尽可能小，要能够做到让更多的标签使用。

css高级选择器：

s1 s2       后代选择器，选择自己所有的后代
s1,s2       并集选择器（选择器组）||
属性选择器
s1s2       交集选择器（既要满足s1也要满足s2）&&
s1>s2   直接儿子选择器，与后代选择器不同，只选择自己直属的后代
s1+s2   下一个兄弟选择器，选择自己后面紧挨着的第一个兄弟