一、初识HTML&CSS
一)概括
1.HTML(HyperText Markup Language)
中文:超文本标记语言
用于定义文档的内容和结构
2.CSS(Cascading Style Sheets)
中文:层叠样式表
用于定义HTML文档的样式(页面表现的基础,可控制布局,控制元素的渲染)(渲染:人类语言转换成计算机语言)
3.两者之间的关系:
文档里面有什么样的内容由HTML负责,内容长什么样(样式)由CSS负责。
4.JavaScript 交互
点击后出现的效果
二)html相关
1.visual
第一步 新建文件夹,用visual打开;
第二步 左侧资源管理器中新建文件,名字后缀格式“.html”;
第三步 右侧输入“!”(英文感叹号)套入格式;
第四步 在和中输入内容;
第五步 保存(打开文件--勾选自动保存;
第六步 点击右键在浏览器中打开(阅览);
2.注释内容(阅览中不会显示)
显示:<!-- -->
快捷键:ctrl +?
描述代码的功能,浏览器解析的时候会忽略掉不做显示
常见用处:理清逻辑,索览,理清结构。
3.HTML元素
在页面中一切可以看见的内容,包括图片,标题、段落、文字,视频等。。
例子:<h3> ******** ******</h3>
起始标记、元素内容,结束标记
快捷方式:输入起始标记后按回车键
h3代表三级标题,共六级改数字即可,h1的字号最大,h6的字号最小,每个元素占一行。\
4.标题
在<head>
中的<title> ******** </title>
部分,修改****,保存阅览后网页名称会变。
head 元素是文档头,是html的第一个子元素,包含所有元数据(页面有关的附加信息)
5.a元素(行内元素,都在一行之中显示)超链接\
起始标记 内容 结束标记
<a href="******">&&&&</a>
标记名 属性名 属性值 标记名
属性(元素的额外信息附加信息)
意思为,单击&&&&可以跳转到*界面,是超链接的意思
一般来说添加同一个文件夹中的页面时可直接复制,
如果要跳转到百度或者其他网页中时,需填写完整域名如:www.baidu.com/
<标记名 属性><标记名 属性/>
例:<img src="" alt="">
(插入图片)
src代表图片路径(图片保存在本地的位置),也可以用网络图片,需填写完整域名
alt代表图片路径错误时所显示的文字(图片的替代文字)
\
7.元素的层次结构关系
前提:元素的嵌套
三种:父子关系、兄弟关系、祖先后代关系
兄弟关系(两个元素有同一个父级元素)
祖先后代关系(直接或间接包含)\
html
head body
meta title h3 a img
8.还原UI设计师的稿子时的思路
第一步 划分区域(将一个页面中的内容分成几个大的区域,再将大的区域细分成小的板块
第二步 填充内容(将每个板块中的内容转换成html元素)
9.div元素(非语义化结构元素)
用于包含其他的元素,用于网站布局划分,代表块
10.html5 语义化结构元素
可以将无注释的div板块元素赋予意义,使页面结构变得更加清晰
<header>
面或某一区域的头部;
<footer>
页面或某个区域的底部;
<nav>
导航栏;
<section>
表示一个整体的一部分主题(独立的部分);
<article>
表示文章或其他可独立页面存在的内容;(文章)
<aside>
表示与周围主题各相关的附加信息。(相关文章))
\
11.页面拆分
先根据六个语义化结构分出大板块,
再在不同的大板块下面加入不同的元素,
每一个从头开始的段落,文字,链接都可以用<p></p>
或<div></div>
div可以和语义化结构元素一起使用。\
三)CSS相关
1.CSS注释内容书写格式:/注释内容/
作用同html一样,
快捷键同为ctrl+?。
\
2.将.html和.css产生关联
在<head></head>
之间最后部分加入元素 <link rel="stylesheet" href="*****">
<*****>
代表css文件的位置
关联后点击右边按钮可以分屏同时预览。\
3.css代码
由一个一个的规则组成,每个规则指定了:对那些元素应用什么样式 \
例:
选择器 声明块
h1{ color:red;text-align:center}
属性名 属性值 ; 属性名 属性值
声明(属性); 声明(属性)
选择器:负责选择页面中的哪些元素(0-很多)
声明块:对选中的元素指定样式(颜色大小等)
\
4.颜色、字号等基础属性:
1)字体颜色
例:
选择器{color: brown}
在更改颜色时,输入color后会自动显示可选颜色,选择可选颜色后,点击颜色单词,可弹出调色盘选择其他颜色\
2)段落颜色(字体背景颜色)
例:
选择器{background-color:red}\
3)背景颜色的大小(高和宽)
/ 宽 /(单位是像素)
选择器{width: 200px}\
/ 高/
选择器{height: 200px}
\
4)文本对齐方式
{text-align: right} (靠右
{text-align: left} (靠左)
{text-align: center}(居中)\
\
5)字体大小
例:
选择器{font-size: 200px}\
5.自动检查:
在网页浏览中按f12键
每一个区域会显示相对的每一条指令,有错误的会出现提示\
6.选择器:
1)元素选择器
选中页面中所有与该标记名相匹配的元素,并运用统一样式\
格式:元素名{声明块(属性)}
代表:选中页面中所有h3元素,应用样式
例:h3{color:red}(页面中所有h3标题 都变成红色)
\
2)类选择器
选择页面上所有与该类名相匹配的元素,并运用统一样式
格式:.类名{声明块} (类名就是html中的clsss属性的元素)
注意:(后期补充)规范:
a、英文的小圆点开始,小圆点后面一定是英文字母,
b、可添加符号“-”、“_”\
c、大小写很敏感,如:Sp、sp 是两个不同的类名
d、类名尽量见名知意,避免出现aaa、bbb之类的,可以用英文、拼音等
e、不能是数字开头或是纯数字\
\
驼峰命名法footerTop
蛇形命名法footer_top
其他名法 footer-top
例子:.one{color: blue}\
在html中写作<原有标记 class="类名">(原有标记后有一个空格,类名可以自己取,双引号是英文的)
如:原:
头部 加入后:头部在css中写作.类名{声明块(属性)} .one{color: blue}
意为将html中标注了class="one"的部分的内容改为蓝色。
\
3)子代选择器
格式:父元素>子元素{声明块(属性)}
注意:一定要有嵌套关系的层级结构,不能跳级。
\
例子:
在html中写:
<div>
<section>**********</section>
<footer>**********</footer>
</div>
在css中写: div>footer{color: blue}
意为将<div>
中的<footer>
部分元素的字体颜色改为蓝色;
div>section{color:red}
意为将<div>
中的<section>
部分元素的字体颜色改为红色。
\
补充4)id选择器(很少用):
写作#id名{声明块}一个元素只能有一个id名,在页面上如果id名出现了一次,就不能再出现第二次。例:
在html中:
<pid="snak">1008611
在css中:
#snak {font-size: 16px;color: rgb(231, 39, 39)}
7.盒模型及其组成
html中每一个元素都是一个盒子。
组成:
Margin 外边距,与其他盒子之间的距离
Border 边框
Padding 内边距,边框与内容之间的距离
content 内容,内容的宽度和高度
\
1)conter内容
内容的高度和宽度
例子:
.hemox{color: blue;width: 150px;height: 85px;background-color: brown}
/字体颜色// 宽度 // 高度 // 背景颜色 /
\
2)boeder边框
边框样式:solid 实线、dashed 虚线、dotted点线边框、hidden 隐藏边框、none 无边框
方位值:上 top 下bottom 右right 左 left
上边框border-top
右边框border-right
左边框border-left
下边框border-bottom
\
例:h2{ / 文字背景颜色 / / h2的高宽大小 /
background-color: aquamarine; width: 150px;height: 150px;
\
/ 上边框 粗细 实线 颜色 / / 右边框 粗细 虚线 颜色 /
border-top: 5px solid blue; border-right: 15px dashed rgb(24, 173, 231);
\
/ 左边框 粗细 实线 颜色 / / 下边框 粗细 虚线 颜色 /
border-left: 20px solid rgb(0, 255, 149); border-bottom: 5px dashed rgb(187, 255, 0) }
\
3)paddin和margin: (内外边距)
取值:
输入四个值时每个数字代表的方位:上、右、下、左
三个值:上、左右、下
两个值:上下、左右
一个值:四个方向统一大小
单一方向:padding-方位值:一个方向的值。
如:padding-top: 100px;(表示上面的内边距为100px)
上 top 下bottom 右right 左 left
\
*让某个元素左右居中:margin:auto(整个板块居中,不包括其中的内容图文)
8.计算元素的真实尺寸
宽度 = 内容宽度 + 左边框粗细 + 左内边距 + 左外边距 + 右边框粗细 + 右内边距 + 右外边距
高度 = 内容高度 + 上边框粗细 + 上内边距 + 上外边距 + 下边框粗细 + 下内边距 + 下外边距
\
9.容器和项目
容器:装东西(元素)
如:A 元素装了一个 B 元素
A:容器(父元素)
B:项目(子元素)
10.创建弹性布局
针对某个元素添加 display:flex; 过后,这个元素就是容器(父元素),里面的子元素就是项目,所有的项目都默认在一行显示。
\
11.内容换行
当项目的宽度之和超过容器的宽度,所有的项目都在一行显示,但每个项目都自动缩小。
如果需要换行显示则加 flex-wrap
取值:(意思)
flex-wrap: nowrap 不换行(默认)
flex-wrap: wrap 换行
flex-wrap:wrap-revevrse 换行,且第一行在最下方(倒序)
\
12.主轴左右对齐的方式 justify-content(左右水平方向)
justify-content:flex-start (左对齐 )
justify-content:flex-end(右对齐)
justify-content:center(居中对齐)
\
主轴内容平均分散的三种方式
space-between、space-aroud、space-evenly的同异点
justify-content: space-between 项目和容器之间的距离为0=项目和项目之间的距离0
justify-content: space-around 项目和容器之间的距离=项目和项目之间的距离0.5
justify-content: space-evenly 项目和容器之间的距离=项目和项目之间的距离1
\
13.交叉轴对齐方式:Align-items(上下垂直方向)
Align-items:flex-star 为上对齐
Align-items:flex-end 为下对齐
Align-items:center 为垂直居中`