一、 HTML学习总结

1.HTML是什么

HTML（HyperText Markup Language）是一种用来告知浏览器如何组织页面的标记语言，它由一系列的元素组成，一般我们用它来构建 Web 页面

2.HTML结构

1. 创建一个HTML实例

打开vscode，新建一个文件夹，在该文件夹下新建一个 后缀名为html 的文件并输入如下内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

2. HTML结构解析

HTML的大体结构如下图所示

标签名 定义
<html></html> 标签
<head></head> 头部
<title></title> 标题
<body></body> 主体

3. HTML标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的,语法如下

  • <h1>这是一级标题</h1>
  • <h2>这是二级标题</h2>
  • <h3>这是三级标题</h3>

4. HTML段落

HTML 段落是通过标签<p>来定义的,语法如下

  • <p>这是一个段落。</p>
  • <p>这是另外一个段落。</p>

5. HTML链接

HTML 链接是通过标签 <a> 来定义的,可分为三种，分别是外部链接、锚链接、邮件链接，这里我们简单介绍一下外部链接和锚链接

1.外部链接：即可以连接到外部文件如跳转到百度搜索界面

  • <a href="https://www.baidu.com/" target="_blank">百度一下</a>

2.锚链接：是在本页面或者其他页面的的不同位置进行跳转

首先我们要创建一个锚点，使用name属性或者id属性给那个特定的位置起个名字

  • <a name=hhh>底部</a>

然后在底部设置超链接,点击即可跳转到底部

  • <a href="#hhh">跳转到底部</a>

6. HTML图像

HTML 图像是通过标签 <img> 来定义的,语法如下

  • <img src="图像路径" width="200" height="200">

文件路径有相对路径和绝对路径两种。

绝对路径：

1.本地路径

  • <img src="D:\images\1.jpg">

2.网络路径路径

  • <img src="图片的地址">

相对路径：

通常用 . 和 .. 分表代表当前目录和上一层目录

当前目录

  • <img src="1.jpg">
  • <img src="./1.jpg">

上一层目录

  • <img src="../1.jpg">

二、CSS学习总结

1.CSS是什么

网页的内容是由 HTML的元素构建的，我们通常用CSS来呈现这些元素

2.CSS基础语法

CSS 由两个主要的部分构成：选择器，以及一条或多条声明

  • 选择器 {声明1; 声明2; }

3.CSS生效方法

让CSS样式生效一般有三种方法：外部样式表，内部样式表，内联样式

1.外部样式表

首先我么们新建一个HTML文件，在<head></head>中添加下列代码,然后在同目录新建一个样式表文件mycss.css

  <link rel="stylesheet" type="text/css" href="mycss.css">

2.内部样式表

可直接将样式放在HTML文件中的<style></style>中

3.内联样式表

直接把样式规则直接写到要应用的元素中

4.CSS颜色、尺寸、对齐

1.颜色

通常用 background-color 属性为元素设置背景色

<h1 style="color:Tomato;">Hello World</h1>

2.尺寸

通常用 height 和 width 设定元素内容占据的尺寸

例如设置<div class="test1">的尺寸

.test1 {

  width: 100%;

  height: 200px;

}

3.对齐

通常用text-align设置对齐，它的属性有left, center, right

5.CSS盒子模型

盒子模型：指的是一个HTML元素，由内容content, 内边距 padding, 边框 border, 外边距 margin构成

1.内边距：元素的内边距在边框和内容区之间，控制该区域最简单的属性是 padding 属性，可以使用长度值或百分比值

2.边框：元素的边框就是围绕元素内容和内边据的一条或多条线，每个边框包括宽度、样式，以及颜色

3.外边距：围绕在元素边框的空白区域是外边距，设置外边距会在元素外创建额外的空白，我们通常用 margin 属性来设置外边距

6.CSS选择器

CSS有很多选择器，如通用选择器、元素选择器、类选择器、ID 选择器、组合选择器等等，这里简单介绍一下组合选择器的后代选择器和子选择器。

1.后代选择器

后代选择器以空格作为分隔，我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用

例如，如果只对 h1 元素中的em元素应用样式：

  • h1 em {color:blue;}

因此只有h1元素后代的em元素的文本为蓝色，其他的em元素不会变成蓝色

2.子选择器

子选择器以>作为分隔，如果不希望选择任意的后代元素，而是选择某个元素的子元素的话，我们可以用子选择器

例如，如果选择只作为 h1 元素子元素的 em 元素：

  • h1 > em {color:blue;}

因此只有第一个h1下面的两个 em 元素变为蓝色，但是第二个 h1 中的 em 不受影响

HTML&CSS学习总结的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  3. css学习归纳总结（二） 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结（一） 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  5. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  6. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  7. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  8. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  10. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. docker命令之docker build

    docker命令之docker build 明天要讲docker file的公开课,正好借此机会,整理下docker 命令的专题 语法 docker build [OPTIONS] PATH | UR ...

  2. ASP.NET Core 系列总结

    <ASP.NET Core> 系列文章基于 .NET 3.1 和 .NET 6,主要是系统总结自己日常工作和学习中的知识点,之前是自己在 OneNote 上自己写,作为学习.总结笔记,逐渐 ...

  3. windows10环境下的RabbitMQ安装步骤

    RabbitMQ是一个在AMQP协议标准基础上完整的,可复用的企业消息系统.它遵循Mozilla Public License开源协议,采用 Erlang 实现的工业级的消息队列(MQ)服务器,Rab ...

  4. CSP-J2022游寄

    本人资料 地区:河北-衡水 洛谷账号:xinao2186182144 洛谷ID:747196 前言 这次比赛本来是信心满满,认为自己这半年来的努力与付出都不会付诸东流(还想表个白?算是吧).到了考场的 ...

  5. JavaScript的闭包和作用域

    作用域相关 作用域的概念: 作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性.换句话说,作用域决定了代码区块中变量和其他资源的可见性: 作用域的类型: 全局作用域: 最外层函数和在最外 ...

  6. FPS 逆向 CS.起源 绘制 教程（下周完成笔记）

    1.找到人物坐标X YZ2.找到鼠标X Y3.易语言读取人物坐标4.读取敌人坐标打开控制台服务器与客户端尽量找客户端 找到XYZ5.实时读取敌人坐标6.三角函数转换屏幕坐标FOV 视场角狙击枪找FOV ...

  7. C语言小程序-天天酷跑类游戏 26号完成

    1.创建游戏内背景 2.实现人物 奔跑 跳跃 优化帧 3.障碍物 出现 https://kxd.lanzoul.com/iKXU20elmtah 开源地址 半成品

  8. adb简记

    ADB Android Debug Bridge(安卓调试桥) tools.它就是一个命令行窗口,用于通过电脑端与模拟器或者真实设备交互.在某些特殊的情况下进入不了系统,adb就派上用场啦! 前提条件 ...

  9. JDK、JRE、JVM三者之间的关系

    JDK.JRE.JVM 以下内容转载自JDK.JRE和JVM三者之间关系_geyouchao的博客-CSDN博客 侵删,谢谢 JDK:Java Development Kit (Java开发工具包) ...

  10. Docker安装配置Oracle详细教程（以作持久化处理）

    Docker安装Oracle 1,拉取Oracle镜像,拉取成功后查看  docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11 ...