HTML、CSS学习总结
目录
一、HTML简介
二、HTML标签
2.1标题标签
2.2图像标签
2.3超链接标签
2.4表格标签
2.5列表标签
2.6锚点标签
三、CSS简介
四、CSS的使用
4.1语法规范
4.2CSS基础选择器
4.2.1标签选择器
4.2.2类选择器
4.2.3id选择器
4.3CSS实现方法
4.3.1外部样式表
4.3.2内部样式表
一、HTML简介
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本有两层含义：
- 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)；
- 还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)。
二、HTML标签
2.1标题标签
HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>
<h1>a</h1><h2>b</h2><h3>c</h3><h4>d</h4><h5>e</h5><h6>f</h6>标题标签语义： 作为标题使用，并且依据重要性递减。
2.2图像标签
在html设计中往往会需要现有图片作为设计成分，而引用图片资源则需要用到图像标签image，image标签有个很重要的属性src，其作用是用于指定图像文件的路径和文件名，他是img标签的必需属性。
具体使用如下：
<img src="../***" />2.3超链接标签
网页设计当中通常都需要有跳转其他网址的需求，例如详细信息查询，相关软件说明等等，html中提供了超链接标签a来实现这一需求。
超链接标签语法为：
<a href="baidu.com">百度一下</a>超链接标签有以下两个重要属性：
1.href：表明你想要跳转的目标网址。
2.target：_blank表示在新的页面打开超链接，_self是在当前页面打开即
2.4表格标签
表格标签一般用来处理和显示数据，创建表格的语法如下
<table><tr><td>具体显示文字内容</td>...</tr>...</table>其中主要标签说明如下
1.<table>标签表明定义一张表格
2.<tr>标签对应表格中的每一行
3.<td>标签对应表格中的单元格
应该注意tr标签必须嵌套在table表格中，而td标签必须在tr标签中使用。
2.5列表标签
html提供了无序列表（ul），有序列表（ol）和自定义列表（dl）三种列表标签，其中使用最多的为ul。
列表定义方法如下：
<ul type = ""><li>路飞</li><li>鸣人</li><li>黑崎一护</li>
</ul>
无序列表可以用type属性定义标志属性（默认为实心圆点）
circle：以空心圆做为标志
square：以方块做为标志
<ol type=""><li>路飞</li><li>鸣人</li><li>纳兹</li>
</ol>
有序列表可以用type属性定义顺序标志属性（默认为数字）
a：以空小写字母做为顺序标志
A：以大写字母做为顺序标志
i：以罗马字母做为顺序标志
2.6锚点标签
锚点，也称为书签，用于标记页面的某个元素或位置。
当我们设计html时，如果页面过长，为了提高浏览效率，可以使用锚点标签进行快速的页面跳转
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
<h2 id="ld">1000年后</h2>
<!-- 中间部分内容 -->
<a href="#ld">跳转至1000年后</a>
...
需要注意：
1.每个元素的id值必须唯一
2.超链接获得跳转地址时在id前要接#符号
2.7文本格式标签
在网页设计中，对于一些关键字段往往需要使其与其他普通字段不同，html提供了几种文本格式标签：
1.加粗标签
<strong></strong> 或 <b></b>2.斜体标签
<em></em> 或 <i></i>
3.删除线标签
<del></del> 或 <s></s>三、CSS简介
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS。即结构(HTML)与样式(CSS)相分离。
四、CSS的使用
4.1语法规范
css使用规则主要有两个重要部分组成:选择器以及声明。
.nav{padding-right: 50px ;}
nav：选择器
padding-right: 50px ：声明
需要注意
- 选择权是用于指定CSS样式的HTML标签，花括号是对该对象设置的具体样式；
- 属性与属性值以“键值对”的形式出现；
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色；
- 属性和属性值之间用英文“:”分开；
- 多个“键值对”之间用英文“;”进行区分。
4.2CSS基础选择器
基础选择器分为标签选择器、类选择器、id选择器。
4.2.1标签选择器
使用语法：
标签名称{属性1:属性值1;属性2:属性值2;属性3:属性值3;...
}
标签选择器作用：快速选择网页中的元素。
4.2.2类选择器
使用语法：
.类名{属性1:属性值1;属性2:属性值2;...
}
类选择器作用：允许以一种独立于文档元素的方式来指定样式。
需要注意
每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名。
不要使用纯数字、中文等命名，尽量使用英文字母来表示
类选择器使用“.”(英文点号)进行标识，后面紧跟类名(自定义)
在同一个界面中class的名称是可以重复的。
多类选择器使用：
在一个属性中使用多个类进行内容样式修饰。
<div class="red font20">变红色</div>
注意
- 在标签class属性中写多个类名
- 多个类名中间必须用空格分开
4.2.3id选择器
使用语法：
#id名{属性1:属性值1;属性2:属性值2;...
}
该语句说明将id名为此名的元素内容以定义的样式进行展示。
id选择器和类选择器区别
与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次
可以使用类选择器词列表方法为一个元素同时设置多个样式，即类选择器可以使用多次
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常搭配JavaScript
4.3CSS实现方法
我们通常使用三种方法实现CSS作用效果：外部样式表，内部样式表，内联样式
4.3.1外部样式表
在写一个HTML文件的同时，在外部同时写一个CSS文件修饰HTML文件内容的样式，在HTML页面中，使用<link>标签引入这个文件。
具体如下：
<a href="./content.html" class="box"> <img src="./img/毛笔 (2).png" alt="" class="cartoon_1"><span>传统文学</span></a>
<a href="./meishi.html" class="box"> <img src="./img/美食.png" alt="" class="cartoon_1"><span> 传统美食</span></a>
<a href="./gongyi.html" class="box"> <img src="./img/油纸伞 (1).png" alt="" class="cartoon_1"><span>传统工艺</span></a>
<a href="./jieri.html" class="box"> <img src="./img/鞭炮.png" alt="" class="cartoon_1"><span>传统节日</span></a>/* 侧边导航栏a标签样式 */.box{display:flex;height: 100px;width: 75%;margin: 19px;border-radius: 5px;transition: .3s;color: rgb(216, 216, 233);}
/* 侧边导航栏展开后的模块 */.box span{position: relative;padding-top: 20px;padding-left: 8px;font: 400 20px '';opacity: 0;transition: .1s;}4.3.2内部样式表
在HTML文件内部通过定义style标签，进行相应元素内容的修饰。
body {background-color: linen;text-align: center;}h1 {color: red;}.haha {margin-top: 100px;color: chocolate;font-size: 50px;}<body><h1>aaa</h1>
</body>4.3.2内联样式
在元素标签中内部的style属性中设定css样式
<div style="color:red;font-size:12px;">****</div>
HTML、CSS学习总结相关推荐
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
- 11个实用的CSS学习工具
为什么80%的码农都做不了架构师?>>> 1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner ...
- CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- CSS学习之外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
- div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
最新文章
- Smarty的配置与高级缓存技术
- 深度优先搜索 和问题 简单函数递归 “加 还是不加”
- 在“3_人民日报语料”中统计“日语借词”的词频;
- 《算法：C语言实现》—— 第二部分 —— 第3章 —— 基本数据结构
- 基于 LiteSpeed 的一站式 PHP 网站解决方案 LLStack V1.0-1 发布
- matlab命令 脑电波,基于Matlab的脑电波信号处理
- Maven工作笔记-jar包打入本地仓库并打包
- 我参与的一个项目的继续总结：牢骚篇
- Nginx实战｜Nginx健康检查
- easyui---layout实战
- 24_多易教育之《yiee数据运营系统》OLAP平台-运营分析篇
- Sqlserver2008数据库可疑文件
- 帝搜软件新功能发布：知乎关键词seo排名优化上线
- EasyUI filebox 限制文件上传的类型
- Python基础---List（列表）
- Ubuntu ssh-keygen远程登录
- 暴力更改hex文件实现自动烧写stm32程序
- 三重缓冲：为什么我们爱它
- 不同网段间访问共享文件
- pd.DataFrame.melt()函数