一、初识HTML&CSS

131

一、初识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 为垂直居中`