HTML是什么
HTML是超文本标记语言（HyperText Markup Language）的缩写，定义了网页内容的含义和结构，是一种用于定义内容结构的标记语言。
在浏览器的任意一个网页上按F12就能看到该网页对应的HTML文档。
HTML的元素
<p>xxx</p>
上述为一个展示段落的元素。
开始标签：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。
内容：元素的内容，本例中就是xxx。
元素：开始标签、结束标签与内容相结合，便是一个完整的元素。
除了<p>元素，HTML还规定了一些元素比如<head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>等等。
将一段HTML的内容设为注释需要将其用<!-->和<-->包括起来，如下：
标题
标题有6个级别，为<h1>~<h6>,一级标题最醒目，如下：
文本格式标签
以下是一些比较常见的文本格式标签及实际效果：
超链接
超链接语法：<a href="https://www.baidu.com/" target="_self">百度一下</a>
href即为要跳转去的地址 URL。
target属性为_blank表示在新的页面打开超链接，_self为在当前页面打开。
超链接标签包含的内容"百度一下"就是显示在页面上供用户点击的。
图片及文件路径
在页面上插入一张图片：
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="ErrorMDB" width="200" height="200">
src属性为图片文件的位置 URL。
alt属性当获取图片出现问题时显示的文字。
width和height可为图片指定高宽度，但可能导致图片变形，以下为实际效果：
表格
<table>标签可以创建一个表格，<tr>表示行，<td>表示行中的单元，<th>表示表头的单元。示例如下：
列表
列表分为有序和无序列表。
无序列表：
无序列表使用<ul>标签，默认使用实心圆点为每项的标志。
有序列表：
有序列表使用<ol>标签，默认使用数字作为每项的标志。
表单
当网站需要获取一些我们的信息时，比如名字，性别，年龄等等的时候，就可以用表单让用户去填写，下图为一个表单示例：
其中，没有name属性的元素不会提交，有name属性的元素会提交其value值。
CSS是什么
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现，比如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等。
CSS语法
一条CSS样式规则主要由两个部分组成，即选择器和一条或者多条声明。
选择器是您需要改变样式的对象。
每条声明由一个属性和一个值组成，其中声明用{}包裹，用;分割。
属性是希望设置的样式属性比如color或者font。
每个属性有一个值。
属性和值用冒号分开，如下：
选择器分为id选择器和class选择器。
id选择器：
注意选择器前有#号。
class选择器：
可以看出元素的class值可以有多个。
CSS生效方式
三种方法：外部样式表，内部样式表，内联样式
外部样式示例：
内部样式表：
内联样式：
样式的优先级：1.内联样式 2.内部样式表或外部样式表 3.浏览器缺省样式
颜色
可以使用颜色名称或者RGB16进制值来设定前景或背景的颜色，如下图分别使用颜色名称，RGB16进制值来设定颜色：
尺寸
用height和width设定元素所占内容的尺寸，常用的有像素：px，百分比%等。
盒子模型
指一个html元素可以看成一个盒子模型，从内到外分别是内容content，内边距padding，边框border，外边距margin，如下图
我们使用width设置宽度时，实际上设置的是内容的宽度
边框与边距
无论边框还是边距都有上下左右四个方向
以下为边框示例：
定位
position属性用于对元素进行定位，该属性有以下值：
static 静态
relative 相对
fixed 固定
absolute 绝对
只有在设置了元素的position后，才能使用 top,bottom,left,right 属性
默认static就是不变
relative使元素偏移，示例：
fixed使元素固定，示例：
溢出
元素内容超过其指定的区域时，可以用overflow属性来处理溢出的部分。
visible 溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条
浮动
在一个区域或者容器内，可以使用float让一个元素进行左右移动。示例：
不透明度
可以用opacity对任意元素设置不透明度，值在[0.0~1.0]之间，值越高，越不透明。
组合选择器
后代选择器：以空格为分隔，比如 .haha p 代表在div元素内有.haha这种类的所有元素。
子选择器：以>为分隔，比如 .haha > p代表在有.haha类的元素内的直接<p>元素，要注意是.haha 的直接后代。
伪类和伪元素
用来定义元素某种特定的状态或者位置。
语法为：选择器：xxx类/xxx元素
selector：xxx-class/xxx-element
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
