html基本的框架
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我利用vscode创建的第一个页面</title>
</head>
<body>
写代码是一件非常快乐的事情 happy
</body>
</html><!DOCTYPE html> 声明了当前页面采取的是HTML5版本来显示网页 注意要在文档中最前面
<html lang="zh-CN"> 里面的设定语言版本 en为英语 最直接的影响就是用Chrome打开会翻译成对于语言
<meta charset="UTF-8"> 统一字符集的格式 UTF-8是万国码 没有它就会乱码的情况
简单一点来看<head></head>标签里面就是关于设置的东西而<body></body>里面就是主要显示在网页里面的内容
html基本常用标签
h标签
<h1>我是一级标题</h1>
h是单词head的缩写 可以作为标题使用 并且根据重要性递减p标签
<p>单词paragraph的缩写</p> 可以把html文档分为若干段落 会自动换行 并且留有足够的空隙br标签
单词break的缩写 换行标签 下面的文字会强制换行<br /> 但没有p标签换行的空隙大文本格式化标签
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>div和span标签
div独占一行为块元素 span是行内元素会自动挨在一起在一行显示 在后面会有详细笔记img标签
为了显示图片在网页里面
<img src="" alt="" title="" width="" height="" border=""/>
src为图片存放的路径
title为当用户鼠标悬放在图片上会显示的小标题
alt为当图片加载不出来 显示的文字
width height为宽和高
border为图像设定的边框
需要注意的是:
在开发中最好把图片全部放入项目文件的一个新文件夹里 便于调用
src有相对路径和绝对路径
相对路径: 以饮用文件所在位置为参考基础 而建立的目录路径
绝对路径: 是指目录下的绝对位置 直接到达目标位置 通常是从盘符开始的路径
下一级路径/
上一级路径../
a标签
<a href="" target="">文本或图像</a>
单词anchor的缩写
href为指定链接目标的url地址
target为打开指定链接的方式一般默认_self在此页面显示 但_blank为打开新的页面
href还可以为下载链接 文件是压缩包形式的 点击之后下载文件
如果还没确定链接目标时可以先把href设为#
锚点链接
把目标位置标签 加入一个id属性然后href里写上#和属性的名字就可以实现跳转
<a href="#background">
...
<p id="background">因为他们的背景特殊所以不得不...</p>
这样 当点击a 就可以无论隔了多远跳过来了HTML中的特殊字符
像如果有很多个空格 它会自动变为一个 这个时候就可以用  与之相似的还有 < 为&it > 为>table标签
为了展示数据 让数据更规范
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
tr为每一行的分界 td为表格数据 单元格里面的内容 th为第一行的表格标题
table row table data table head
为了让表格更加清晰 可以用thead tbody 他们可以叠起来让代码更清晰
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>table合并表格
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
只需用到colspan和rowspan
column是列的意思 会左右扩张
row是行的意思 会上下扩张列表标签:
列表最大的特点就是整洁自由
1. 无序列表（最常用）
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul只能嵌套li 但li可以容纳所有元素
2. 有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
ol只能嵌套li 但li可以容纳所有元素
3. 自定义列表
<dl>
<dt>关注我们</dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
dl只能嵌套dt dd 但dt dd可以容纳所有元素form和input标签
form为表单 即像填好的表格一样递交信息
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" > <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> 人妖 <input type="radio" name="sex" value="人妖"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file" >
</form>
checked属性为提前选中默认那个选项label标签
它有个特殊的作用和input结合之后
<label for="text"> 用户名:</label> <input type="text" id="text" >
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label>
用了它的for属性之后 当你点击文字之后 他就可以自动聚焦到inputselect标签
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
form标签
<textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>CSS语法规范
<style>
/* 选择器 {样式} */
/* 给谁改样式 { 改什么样式} */
p {
color: red;
/* 修改了文字大小为12像素 */
font-size: 12px;
}
</style>
<p>有点意思</p>标签选择器:
选中的全部标签会变成css里面的样式
p {
color: green;
}
div {
color: pink;
}
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
注意css目前得写在style标签里面类选择器
当有标签调用其中的class的时候 会让被调用的标签使用其中的样式
/* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用*/
.red {
color: red;
}
.star-sing {
color: green;
}
.memeda {
color: pink;
}
<ul>
<li class="red">冰雨</li>
<li class="red">来生缘</li>
<li>李香兰</li>
<li class="memeda">生僻字</li>
<li class="star-sing">江南style</li>
</ul>
<div class="red">我也想变红色</div>
注意style里写css的时候 得加上 . 不然不会生效
多类名选择器
顾名思义即为叠加类选择器使用
.red {
color: red;
}
.font35 {
font-size: 35px;
}
<div class="red font35">刘德华</div>id选择器
/* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
就像身份证号码 和上面的名字一样 名字可能很多人重复 但id不会
#pink {
color: pink;
}
<div id="pink">迈克尔·杰克逊</div>
<div>pink老师</div>
通配符选择器
它可以把所有标签属性统一改变
* {
color: red;
}
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>字体属性
可以在font-family设置字体 设置三个的目的是 如果第一个失效了 就会启用第二个 再不行就会第三个 直到浏览器默认字体
p {
font-family: 'Times New Roman', Times, serif;
}
字体大小
直接使用font-size就可以完成设置
p {
font-size: 16px;
}
字体粗细
700 和bold 是加粗 400和normal是正常
.bold {
/* font-weight: bold; */
/* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
/* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal; */
}
字体斜体
italic 是斜体 normal是正常
p {
font-style: italic;
}
h2 {
/* 让倾斜的字体不倾斜 就是赶紧脉动回来 */
font-style: normal;
}
复合属性
font: font-style font-weight font-size/line-height font-family;
这样就可以节约代码
字体颜色
div {
/* color: deeppink; */
/* color: #cc00ff; */
color: rgb(255, 0, 255);
}
字体对齐
h1 {
/* 本质是让h1盒子里面的文字水平居中对齐 */
/* text-align: center; */
text-align: right;
}
字体装饰
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
color: #333;
}
文本缩进
用1em就是一个文字大小的距离
p {
text-indent: 20px;
text-indent: 2em;
}
行间距
行间距是字体上面有一块部分和下面一块部分和字体本身组成的高度
div {
line-height: 26px
}
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它,</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>内部样式表
<style>
div {
color: pink;
}
</style>
<div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>行内样式表
<p>不能忘记你心里想的还是你</p>
<p>浪漫的夏季还有浪漫的一个你</p>
<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>外部样式表
通常有一个css文件写好了文档之后 倒入到html文档进行使用
<link rel="stylesheet" href="style.css">
<div> Hello World </div>emmet语法使用
在用vscode时 如果想要生成
10个div标签 只需要用
div*10 然后回车
对于这样
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
也只需要使用
.demo$*5 即可快速生成
还有这样
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
也可以用
div{$}*5 回车快速生成
总结一下 $ 这个符号就是递增符后代选择器
可以快速让“子孙”增加样式
ol li {
color: pink;
}
ol li a {
color: red;
}
.nav li a {
color: yellow;
}
<ol>
变态写法
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
<ul>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li><a href="#">不会变化的</a></li>
</ul>
<ul class="nav">
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
</ul>子元素选择器
顾名思义 只会选“子类”
.nav>a {
color: red;
}
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
这个时候孙子就没办法被选中 不会产生变化并集选择器
div,
p,
.pig li {
color: pink;
}
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
/* 约定的语法规范,我们并集选择器喜欢竖着写 */
/* 一定要注意,最后一个选择器 不需要加逗号 */链接伪类选择器
a:link {
color: #333;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
<a href="#">小猪佩奇</a>
<a href="http://www.xxxxxxxx.com">未知的网站</a>
hover非常的常用focus选择器
input:focus {
background-color: pink;
color: red;
}
<input type="text">
<input type="text">
<input type="text">
当点击了鼠标到输入框后 会自动加上设置的样式块级元素
特点为 独占一行 可以改变宽高 像男生一样
div {
/* width: 200px; */
height: 200px;
background-color: pink;
}
<div>比较霸道,自己独占一行</div> 瑟瑟发抖
<p>
<div>这里有问题</div>
</p>
注意 文字类的标签不能再嵌套块级元素了 比如p标签和h1～h6行内元素
高宽设置无效 文字的宽高就是他们的宽高 像女生一样
相邻行内元素在一行上 一行可以显示多个
其中 常见的行内标签有 a strong b em i del ins u span
span为最典型之一行内块元素
像人妖一样 既有“男人”的特点 也有女人的特点
比如
img input td 标签
行内块元素的特点：
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以品示多个（行内元素特点）。
2.默认完度就是它本身内容的宽度（行内元素特点）。
3. 高度，行高、外边距以及内边距都可以控制（块级元素特点）。元素显示模式转换
a {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素 a 转换为 块级元素 */
display: block;
}
div {
width: 300px;
height: 100px;
background-color: purple;
/* 把 div 块级元素转换为行内元素 */
display: inline;
}
这样div就可以在一排了 设置的宽度高度就无效了
span {
width: 300px;
height: 30px;
background-color: skyblue;
display: inline-block;
}
<a href="#">金星阿姨</a>
<a href="#">金星阿姨</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>单行文字垂直居中
div {
width: 200px;
height: 40px;
background-color: pink;
line-height: 40px;
}
<div>我要居中</div>
当height 和line-height一样的时候 文字会被挤在中间 就有了居中效果背景颜色
div {
width: 200px;
height: 200px;
/* background-color: transparent; 透明的 清澈的 */
/* background-color: red; */
background-color: pink;
}
<div></div>背景图片
div {
width: 200px;
height: 200px;
/* background-color: transparent; 透明的 清澈的 */
/* background-color: red; */
background-color: pink;
}
<div></div>超大背景图片
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
如果不设置这一步 就会默认重复显示
/* background-position: center top; */
background-position: center 40px;
}
背景图片平铺
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url(images/logo.png);
/* 1.背景图片不平铺 */
/* background-repeat: no-repeat; */
/* 2.默认的情况下,背景图片是平铺的 */
/* background-repeat: repeat; */
/* 3. 沿着x轴平铺 */
/* background-repeat: repeat-x; */
/* 4. 沿着Y轴平铺 */
background-repeat: repeat-y;
/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
}
背景方位名词
/* background-position: 方位名词; */
/* background-position: center top; */
/* background-position: right center; */
/* 如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系 */
/* background-position: center right; */
/* 此时 水平一定是靠右侧对齐 第二个参数省略 y 轴是 垂直居中显示的 */
/* background-position: right; */
/* 此时 第一个参数一定是 top y轴 顶部对齐 第二个参数省略x 轴是 水平居中显示的 */
精确单位
/* 20px 50px; x轴一定是 20 y轴一定是 50 */
/* background-position: 20px 50px; */
/* background-position: 50px 20px; */
混合单位
/* 20px center 一定是x 为 20 y 是 center 等价于 background-position: 20px */
/* background-position: 20px center; */
/* 水平是居中对齐 垂直是 20 */
背景固定
/* 把背景图片固定住 */
background-attachment: fixed;
复合写法
/* background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top; */
/* 把背景图片固定住 */
/* background-attachment: fixed;
background-color: black; */
background: black url(images/bg.jpg) no-repeat fixed center top;
背景半透明写法
/* background-color: black; */
/* background: rgba(0, 0, 0, 0.3); */
background: rgba(0, 0, 0, .3);
