HTML &&CSSmd

最新推荐文章于 2024-04-13 09:55:08 发布

CodePigChen

最新推荐文章于 2024-04-13 09:55:08 发布

阅读量513

点赞数

分类专栏： HtmlCss.1 学习

本文链接：https://blog.csdn.net/weixin_44022891/article/details/104998214

版权

学习同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HtmlCss.1

5 篇文章 0 订阅

订阅专栏

文章目录

HTML 学习
1.HTML 简介
- 1.1定义：
- 1.2 基本语法概述
- 1.3 标签关系
- 1.4 html基本骨架
2. 常用标签
- 1. 基本标签
- 2.格式标签
- 3.图像标签和路径
- 4.链接标签 a
- 5. 表格标签
3.列表标签
- 1.无序列表 ul
- - - ul中只能包含li，不能包含其他任何东西。
- 2.自定义列表：很多东西属于一个
4.表单标签
- 1. 作用
- 2. input
- 3. 下拉标点元素 select
- 4. textarea 文本域
CSS学习
1. 简介
2.选择器
- 1、选择器的分类
- - 1.1 基础选择器
  - - - 标签可以使用多类名，类名间用空格分隔（去除重复的操作）
      - 总结：修改样式类选择器最多，id选择器用于页面唯一的元素，经常和JavaScript配合使用
3. 字体属性
- ## 1. font 字体可以继承
- 2, font 字体全属性命名
3. 文本属性
- 1. 概要
- 2. 文本属性
- - 2.1 line-height
4.css的引入方式
- 1. 行内样式表
- 2.内部样式表
- 3. 外部样式表
5.复合选择器
- 1. 后代选择器
- 2.子代选择器
- 3. 并集选择器
- 4. 伪类选择器
- 1.a链接选择器
- 类选择器一个点，伪类两个点
- - 链接伪类选择器的注意事项
- 2. ：focus 伪类选择器
6. css的元素显示模式
- 1. HTML 标签分为两类
- - 1.1 块元素
- 注意
- 1.2行内元素
经典总结
- 命名规则：声明的命名规则
- 1.属性：值1 ,值2，值3，'MicSoft Yahei'----》
- 多个值之间用逗号隔开
- 如果有空格隔开的多个单词组成的值，加单引号
- 2. 全属性声明：font：值1 值2 多个值用空格隔开
- 3. text-indent:2em;
- em 是一个相对的单位，就是当前元素一个文字的大小
- 4. class="value1 value2";
- 5.若想元素在网页居中显示，则设置块元素的text-align:center ，块元素的内容则居中显示。
经典总结
- 命名规则：声明的命名规则
- 1.属性：值1 ,值2，值3，'MicSoft Yahei'----》
- 多个值之间用逗号隔开
- 如果有空格隔开的多个单词组成的值，加单引号
- 2. 全属性声明：font：值1 值2 多个值用空格隔开
- 3. text-indent:2em;
- em 是一个相对的单位，就是当前元素一个文字的大小
- 4. class="value1 value2";
- 5.若想元素在网页居中显示，则设置块元素的text-align:center ，块元素的内容则居中显示。

HTML 学习

1.HTML 简介

1.1定义：

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等

1.2 基本语法概述

HTML 尖括号包围关键词
通常成对出现
也有部分单标签

1.3 标签关系

包含关系----》父子关系
并列关系———》兄弟关系

1.4 html基本骨架

<!DOCTYPE html>
<html lang="zh" >
    <head>
        <meta charset="UTF-8" >
        <title>
        </title>
    </head>
    <body>
        
    </body>
</html>

2. 常用标签

1. 基本标签

/
to
标题标签 文字加粗一行显
段落标签
段落之间有空行
换行标签：br /
段落标签有一段间距，换行标签没间距

2.格式标签

加粗、斜体

布局标签：没有语义，就是布局
1. div ：块元素，独占一行
2. span ：行内元素

3.图像标签和路径

img

4.链接标签 a

a：默认打开方式 target=_self

外连接

内连接：访问同一项目内的网页

 <a href="demo01.html">自我介绍</a>

空连接：#
下载连接

总结：href指向网址，就是访问网址; 指向资源就是访问资源，指向exe、zip等格式文件就是下载文件
锚点作用
1. href中填写 #锚点位置的id名字
2. 锚点位置设置id名字
  href中填写的#值，其实就是访问的id=值的位置处

5. 表格标签

th：单元格

thead：表头区域

3.列表标签

表格用来显示数据，列表用来布局的

列表最大的特点是整齐、整洁、有序

1.无序列表 ul

ul中只能包含li，不能包含其他任何东西。

2.自定义列表：很多东西属于一个

4.表单标签

1. 作用

实现用户信息的收集和传递

2. input

type：radio、checkbox 时，使用name属性成组。

页面中元素input元素多，name区别
radio或checkbox 分组，相同的name

3. 下拉标点元素 select

4. textarea 文本域

CSS学习

1. 简介

样式表：

2.选择器

1、选择器的分类

基础选择器和复合选择器

1.1 基础选择器

基础选择器由单个选择器组成
包括：标签选择器，类选择器，id选择器，通配符选择器
- #id 选择器（id名唯一）
- .class 类选择器
- p 标签选择器
- （*通配符选择器）；选择页面中的所有标签
标签可以使用多类名，类名间用空格分隔（去除重复的操作）

总结：修改样式类选择器最多，id选择器用于页面唯一的元素，经常和JavaScript配合使用

3. 字体属性

## 1. font 字体可以继承

字体大小设置：像素为单位px

p {
font-size:16px;
}

2, font 字体全属性命名

格式；
```
font-style
font-variant
font-weight
font-size/line-height
font-family
```
- 全属性的时候必须按照此顺序书写
- 可以省略但是必须保留，fontsize 和fontfamily 属性

3. 文本属性

1. 概要

文本属性可以定义文本的外观、ex：文本的颜色、对其文本、装饰文本、文本缩进、行间距等。

2. 文本属性

2.1 line-height

行高：一块区域的文字，每行之间的距离

文本的行高组成为：

文本高度（默认为16px）
上间距
下间距

当修改行高的时候，修改的是同时上下间距。

4.css的引入方式

1. 行内样式表

2.内部样式表

<head>
<style>
css代码
</style>
</head>
<body style="color :red; font-size:20px;">
</body>

3. 外部样式表

书写css文件

<link  rel="stylesheet" href="css文件路径">

5.复合选择器

1. 后代选择器

后代选择器** ul li a,选取的是所有后代
后代选择器就是空格 backpace

2.子代选择器

3. 并集选择器

约定：竖着写

4. 伪类选择器

：

1.a链接选择器

类选择器一个点，伪类两个点

ex：

a:hover

链接伪类选择器的注意事项

为了确保生效，按照lvha顺序声明：link，visited，hover、active
1. love hate
2. lv hao
连接 a在浏览器中有默认的样式，在工作中药指定样式

2. ：focus 伪类选择器

用于选取获得焦点的表单元素

6. css的元素显示模式

1. HTML 标签分为两类

块元素和行内元素

1.1 块元素

独占一行
高度、宽度、外边距、内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器即盒子，里面可以放行内或者块级元素

注意

文字类元素 p h1 to h6,不能放块级元素

1.2行内元素

经典总结

命名规则：声明的命名规则

1.属性：值1 ,值2，值3，‘MicSoft Yahei’----》

多个值之间用逗号隔开
如果有空格隔开的多个单词组成的值，加单引号

2. 全属性声明：font：值1 值2 多个值用空格隔开

3. text-indent:2em;

em 是一个相对的单位，就是当前元素一个文字的大小

4. class=“value1 value2”;

5.若想元素在网页居中显示，则设置块元素的text-align:center ，块元素的内容则居中显示。