HTML概述
HTML：超文本标记语言，其实就是用来开发网页的一门语言
CSS：层叠样式表，可以用于渲染网页、美化网页
做网页 建房子
HTML标签搭建网页的结构 砖块：搭建房子的结构
CSS样式：对网页进行美化 石灰、油漆：对房子进行美化
HTML：超文本标记语言
超文本：超过文本、超级文本
不仅可以包含文本，还可以包含例如图片、音频、视频等各种格式
标记：标签、元素，指的是用尖括号括起来的一组内容，例如：<div>,<img>,<h1>,<table>
<div></div>
其实就是用于开发网页的一门语言
关于HTML:
1)HTML开发的网页文档,通常是以 .htm、.html 为后缀
2)HTML开发的网页文档,可以通过浏览器打开并显示(浏览器就是一个HTML解析器)
3)HTML本质就是一个文档(html/txt/word/ppt等)
2、HTML结构
HBuilderX快捷键:
ctrl+鼠标滚轮, 可以放大或缩小字体
ctrl+insert, 可以将鼠标所在的行，或者将鼠标选中的行快速赋值到下方
ctrl+/ 或 ctrl+shift+/, 可以快速生成注释符号
<!DOCTYPE html>: 用于声明当前文档是一个html格式的网页,并且版本是html5.0版本。
<html>: 根标签,所有的html内容都应该放在根标签内部
<head>: 头部分,用于存放网页的基本属性信息(例如:网页标题,网页的编码,引入的css文件,或JS文件)
<body>: 体部分,用于存放网页的可视化内容
<title>我的第一个网页</title>: 指定网页标签的标题
<h1>~<h6>: 指定网页内容的标题,例如文章/新闻等标题
<meta charset="utf-8">: 通知浏览器当前网页使用的编码,如果不指定这一行,网页文件保存使用utf-8,浏览器在打开这个网页时,
如果不使用utf-8,就可能会出现乱码问题。
CSS
1、什么是CSS
CSS：层叠样式表，是用于美化、渲染网页的一门语言
和传统的html标签属性设置样式相比，使用CSS设置样式可以实现：将展示数据的html代码和设置样式的CSS代码进行分离，可以增强网页的展示能力。
2、如何在html中引入CSS
2.1.在标签上的style属性内部添加css样式
<div style="border:2px solid #FF0000;font-size:26px;background:pink;">
这是一个div...
</div>
这种方式是将css样式直接写在标签上的style属性内部,只对当前标签有效,无法实现代码的复用,而且容易造成页面结构的混乱,不利于后期的扩展和维护。所以不建议大量使用。
2.2.在head标签内的style标签内部添加css样式
<style type="text/css">
span{
border:2px solid green;
/* 设置字体大小 */
font-size:30px;
/* 设置字体粗细 */
font-weight:bolder;
}
</style>
这种方式是将所有的css样式在一个style标签内部统一管理,没有将css代码写在标签上,因此不会造成页面结构的混乱,而且可以实现代码的复用
2.3.通过link标签引入外部的css文件
<!-- 引入外部的demo.css文件 -->
<link rel="stylesheet" href="demo.css"/>
这种方式是将所有的css代码写在一个css文件中统一管理,真正的实现了: 将html代码和CSS代码进行分离。可以实现代码的复用，也不会造成页面结构的混乱。
推荐使用这种方式(特别是在企业开发中)
二、CSS常用选择器
所谓的选择器,就是可以帮我们在html中选中元素进行修饰的一门技术
1、元素名/标签名选择器
通过元素的名字或者标签的名字选中指定名称的所有标签
格式: 元素名/标签名{ css样式.. }
span{} -- 选中所有的span元素
div{} -- 选中所有的div元素
2、class类选择器
可以在标签上添加一个通用的属性--class,为元素设置所属的分组,class值相同的则为一组, 通过class值可以选中这一组的元素。
格式: .class值{ css样式.. }
.s1{} -- 选中所有class值为s1的元素
另外，一个元素可以同时设置多个class值，例如：
<span class="s1 s2">span111</span>
表示当前这个span元素同时属于s1分组和s2分组，如果s1和s2给这个span设置背景（但值不同），写在后面的会覆盖前面的（针对同一类选择器）。
如果是不同类的选择器，例如：使用元素名、类选择器、id选择器选中同一个元素，设置相同的属性，但值不同，优先级顺序是：
id选择器(100)>类选择器(10)>元素名选择器(1)
如果一个选择器中包含多个选择器类别,可以通过权重值相加,权重值大的优先级高
如果权重值相同,书写在后面的会覆盖前面的!
3、id选择器
在标签上可以添加一个通用的属性--id,id是编号,要求在整个网页中是独一无二的。通过id值，可以唯一的选中一个元素。
格式：#id值{ css样式.. }
4、后代选择器
在父选择器选中的元素内部,选中指定的后代元素
格式: 父选择器 后代选择器{ css样式... }
div span{} -- 选中所有div内部的span元素
#d1 p{} -- 选中id值为d1元素内部的p元素
5、属性选择器
可以通过元素的属性或属性值匹配元素
格式: 选择器[属性条件][属性条件]..{ css样式 }
input[type="password"]{} -- 选中所有的密码输入框
input[type="checkbox"]{} -- 选中所有的复选框
div[id]{} -- 选中所有具有id属性的div元素
三、CSS常用属性总结
1、文本、字体相关属性
text-align：设置文本水平排列方式
left（居左,默认）、center（居中）、right（居右）
text-indent：设置文本首行缩进，百分比或像素值
text-shadow：设置字体阴影
letter-spacing：设置字符间隔/间距
font-siz：设置字体大小
font-weight：设置字体粗细，
100~900，bold，bolder，normal
font-family：设置字体，"微软雅黑","宋体","楷体"等
color：设置字体颜色
备注一般用 /**/
2、背景相关属性
background是一个综合属性,可以同时设置背景颜色/背景图片/背景图片是否重复/背景图片的位置等
background-color: 设置背景颜色
background-image: 设置背景图片
background-repeat: 设置背景图片是否以及如何重复排列
backgronnd-position: 设置背景图片的位置
backgournd-size: 设置背景图片的大小
3、边框属性
border: 2px solid red; -- 同时设置边框的宽度、样式、颜色
border-width: 2px;
border-style: solid;
border-color: red;
border-radius: 设置圆角边框
4、其他属性
width: 设置元素的宽度
height: 设置元素的高度
--------------------------------
margin: 设置元素的外边距
margin-top: 设置元素的上外边距
margin-left: 设置元素的左外边距
margin-right: 设置元素的右外边距
margin-bottom: 设置元素的下外边距
margin: 10px 20px 30px 40px; /* 上 右 下 左 */
margin: 10px 20px 30px; /* 上 左右 下 */
margin: 10px 20px; /* 上下 左右 */
margin: 10px; /* 上下左右 */
--------------------------------
5、补充内容：颜色取值方式
方式一: 使用颜色的名称(英文单词)
red green blue black yellow pink
方式二: #六位十六进制数(AABBCC==ABC)
#FF0000 #00FF00 #0000FF #000000 #FFFF00 #FFFFFF
#F00 #0F0 #00F #000 #FF0 #FFF
方式三: rgb(255,255,255)
rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)
补充
块元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
ul 无序列表
ol 有序列表
li 定义列表项目
dl 定义列表
margin：外边距
padding：内边距
border：边框
text-transform:capitalize是首字母大写
text-transfrom:lowercase是全部字母为小写
text-transfrom:uppercase是全部字母为大写
font-weight: bold;字体为粗体
