HTML，CSS学习总结
前言
1.HTML和CSS的关系
- HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
- CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
- 换句话说：HTML结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。 CSS是装饰材料，是油漆，是用来装饰房子的。
HTML总结
1.HTML基础结构
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type=" ./XXX">
<title>页面标题</title>
</head>
<body>
<h1>一个Web页面</h1>
<p>页面页面页面</p>
</body>
</html>
2.HTML的基本标签
1.HTML基本结构中包含了很多HTML标签，这些标签是由尖括号<>包围的关键词
2. HTML标签通常是成对出现的，通常形式是< > 和</ >,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
3. 有些特殊标签必须是单个标签（很少），例如< />,我们称为单标签
<head></head>
标签用于定义网页文档的头部，一般内容不显示给读者
<title> </title>
定义文件标题，将显示在浏览器顶端
<body>与</body>
之间的文本是可见的页面内容
<p> </p>
用来分段段落，最多只识别一个空格
<h1> </h1>
写标题
<br/>
换行
<!-- -->
注释标记符
<hr/>
标签定义水平线
<pre> </pre>
是预格式文本，保留空格和换行
<a href=“链接目标”>链接</a>
<table> </table>
创建表格
<tr> </tr>
表格行
<td> </td.>
3.HTML元素属性
HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。
| 属性名称 | 属性描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
| hidden | hidden 属性规定对元素进行隐藏 |
4.HTML 链接
HTML使用标签 < a >来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
<a href="https://www.baidu.com/">访问百度</a>
5.HTML表单
表单是网页交互的基本工具， 一般网站都借助表单实现用户与服务器之间的信息交流，但是web页面也可以自己拦截它并使用它。
HTML表单是由一个或多个小部件组成的，这些小部件可以是输入框、选择框和按钮。而且为了更好地实现无障碍HTML与更好的交互，大多数情况下，这些小部件还需要与描述其目的的标签配对。
<form action="/formhandle" post="post">
...
</form>
<div>
<label for="name">Name:</label>
<input type="text" id="name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
CSS总结
1.CSS语法
CSS是级联样式表（Cascading Style Sheets）的缩写。正如前言所说，HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
<head>
<style>
选择器{
属性名：属性值;
属性名：属性值;
}
</style>
</head>
2.CSS选择器
CSS中的选择器包括基础选择器和复合选择器
基础选择器：
1.1 标签选择器：找到body中对应的多有标签，必须知道标签的名称，会定义所有文档中对应标记的样式。
1.2 类选择器：
设置对应标记的class属性，通过“.class属性名称”设置对应的选择器样式，可以给任意元素特定的样式，当class属性值比较长，可以采用“-”进行断句。
1.3 id选择器：
是以#开头的标记属性，id选择器需要在标记中设置id属性，id选择器只能有一个标签对应，id选择器和JS配合使用。
1.4 通配符选择器：
会选择body标签下的所有标签，通配符基本都在配置全局标签属性中使用，HTML后期就有“消除默认样式”需要通配符。复合选择器 复合选择器 ：将基础选择器进行多个组合。
h1{
color: blue;
text-align: center;
}
3.CSS引入方式
CSS引入方式有三种：行内样式、内部样式、外部样式。
- 行内样式
<!-- 行内样式 样式和标记在一起 -->
<!-- 行内样式需要在标记中设置style属性 -->
<!-- style中定义CSS中的样式键值对 -->
<!-- 优点：部署快 缺点：复杂情况下使用困难，不便于修改维护 -->
<h1 style="color:red;font-size: 30px;">这是一个h1的标签</h1>
<img src=""/>
- 内部样式
<!-- 内部样式：在head标签中定义style标签 -->
<!-- style标签中放入选择器以及对应的CSS代码 -->
<!-- 优点: 网页中可以即写标签，又写样式，非常方便-->
<!-- 缺点：网页代码冗余复杂，不适合维护，style标签定义的样式不能被其它网页使用 -->
<style>
h1{
color:red;
font-size: 30px;
}
</style>
- 外部样式
<!-- 外部样式，希望将style中代码放置到一个单独的文件中管理 .css 文件 -->
<!-- 一般会将这些.css文件放入一个定义为css的文件夹 -->
<!-- 如何引入外部的.css文件: 用link标签 -->
<!-- rel 引入方式 stylesheet 外部样式 （这是引入文件必须定义的内容） -->
<!-- type 引入内容的类型 text/css -->
<!-- href 引入的外部文件的相对路径 -->
<link rel="stylesheet" type="text/css" href="./css/a.css" />
4.CSS常用属性
颜色：
一般有3种方式实现。
1.颜色名称 -如Tomato。 2.十六进制 - 如：“#ff0000”。 3.RGB - 如：“rgb(255,0,0)”。
rgb(255,0,0)----->红
rgb(0,255,0)----->绿
rgba(255,0,0,1)----->纯红
rgba(255,0,0,0.5)---->红色半透明
尺寸：
用wight和height实现，有相对 - 如80%和绝对 -68px 的两种写法
width: 111
height: 222
对齐：
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right；
要水平居中对齐一个元素(如 < div >), 可以使用 margin: auto;
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
垂直居中对齐 - 使用 padding如padding :70px 0;
.center {
text-align: center;
border: 3px solid green;
}
5.盒子模型
盒子模型是指：html中的各个元素都类似一个一个的盒子里面的物品，把各种html元素包起来，将html元素进行封装，以便于网页布局与排版。
<body>
<h1 style="padding: 10px;border: 5px solid blue; width: 10%;margin: 50px;background-color: aqua;">标题1</h1>
<h1 style="padding: 10px;border: 5px solid blue; width: 10%;margin: 50px;background-color: aqua;">标题2</h1>
</body>
1729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
