一、基础认识
网页由什么构成？
一般网页由HTML、CSS、JavaScript构成
| 语言 | 构成 | 说明 |
|---|---|---|
| HTML | 结构 | 页面元素和内容 |
| CSS | 表现 | 网页元素的外观和位置等页面样式 |
| JavaScript | 行为 | 页面交互动作 |
记忆窍门：
HTML是骨架
CSS是肉体与外貌
JavaScript是行为动作
二、HTML
一、HTML的概念
HTML的全称为超文本标记语言，是一种标记语言。
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
二、网页的基本结构
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的内容
</body>
</html>
html标签:网页的整体
head标签:网页的头部
body标签:网页的身体
title标签:网页的标题
三、HTML基本标签
HTML中是使用标签来区分文档中的不同内容的。
HTML标签分为双标签和单标签
标签的语法结构：
双标签:<标签名></标签名>
单标签:<标签名/>
1、标题标签 h1-h6
特点:自动加粗，依次减小。h1是最大标题 h6是最小标题
属性:就是用于描述标签的特征的。
语法:
双标签: <标签名 属性="属性值" 属性="属性值"></标签名>
单标签: <标签名 属性="属性值" 属性="属性值”/>
水平对齐方式属性:align 【属性值是 left right center】
代码：
<h1>标题1</h1>
<h2>标题1</h2>
<!-- 水平对齐方式属性 -->
<h3 align="left">标题1
<h4 align="center">标题1</h4>
<h5 align="right">标题1</h5>
<!-- 单标签 -->
<h6 align="left">标题1 运行展示：
2. 一些描述性的简单标签
换行 br
加粗 b
倾斜 i
下划线 u
删除线 s
文字 font
代码：
<b>加粗</b>
<br />
<i>倾斜</i>
<br />
<u>下划线</u>
<br />
<s>删除线</s>
<br />
<font>文字</font> 运行展示：
3.水平线标签 hr
属性：color 颜色
width 宽度
size 粗细、高度
align 水平对齐【默认居中对齐】
代码：
<hr color="green" width="1000" size="36" align="" />运行展示：
4.段落标签 p
网页中部分字符是不识别的，需要使用转义字符。语法上以&开头，以结尾
一个英文空格
  半个字空格
&emsp, 一个字空格
> 大于号>
< 小于号<
© 版权
® 注册
段落有水平对齐方式属性align【属性值是left right center】
代码：
<p>
  中华人民共和国（the People's Republic of China），简称“中国”，成立于1949年10月1日
</p> 代码：
5.图像标签 img
src 路径【绝对路径和相对路径】
alt 图片非正常加载时，显示提示文字
width 宽度
heigh 高度
border 边框
title 鼠标划过时显示文字
代码：
<body>
<img src="de.jpeg" height="2560" width="1440" alt="图片" />
</body>6.列表标签ul ol dl
6.1无序列表ul
无序列表是一个整体，里面包含若干个列表项
快捷键: ul>li(写文字内容}*10
可以使用type属性修改项目符号类型
属性值有: disc默认实心圆 circle空心圆 square小方块 none无
代码：
<ul>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>结果：
6.2有序列表ol
有序列表是一个整体，里面包含若干个列表项快捷键: 0l>l文字内容}*10
可以使用type属性修改默认符号类型
属性值有:1默认值 aAil
可以使用star属性修改起始值
可以使用reversed属性设置倒序
代码：
<ol>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ol>运行展示：
6.3自定义列表dl
自定义列表多用于图文混排，包含两部分内容:dt定义项 dd描述项
快捷键:dl > dt + dd
代码：
<dl>
<dt><img src="images/fendi.jpg" alt="" /></dt>
<dd>粉底优惠,国庆价格限时599</dd>
</dl>运行展示：
6.7超链接a
超链接(hyperlink)是Web页面中用于连接不同资源的一种机制。它允许用户点击文子邮件地址或执行其他操作从而跳转到另一个页面、文件、电子邮件地址或执行其他操作
链接源:文字、图片
链接目标:网页、网址、文件、邮箱、应用程序exe、锚点、空链接【#】等等等
属性:1》 href 路径
2》target 设置窗口打开方式 _self 原窗口 _blank新窗口
快捷键:ul>i*10>a[#]{粉底}*3
锚点链接:【跳转到当前页面任意位置】
第一步：设置锚点 id属性设置 属性名必须符合命名规范
第二步：跳转到锚点 #锚点名
链接的语法：
<a href="跳转目标" 文本或图像</a>
6.8表格标签 table
表格是一个整体，里面包含行tr 列td 或者 th
快捷键: table > tr*2 >td{内容}*3
<table>
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
</table>制作细线表格有这样几步：
1》给table设置width height bgcolor=red
2》给tr设置bgcolor=white 【tr的背景色 覆盖掉 table的背景色】
3》给table设置 cellspacing = 1 【调整边框的粗细】
部分属性： table【width height bgcolor background align border cellspacing cellpadding】
tr【height bgcolor background align valign垂直对齐方式】
td【width bgcolor background align valign colspan水平合并 rowspan垂直合并】
合并单元格方式:
垂直合并:rowspan="合并单元格的个数” 竖着
水平合并: colspan="合并单元格的个数” 横着
合并的步骤：
1.设置rowspan=数字，合几为一，就等于几
2.删除掉被合并的单元格
代码：
<table>
<tr>
<td rowspan="2">表格1</td>
<td colspan="2" align="center">表格2</td>
<!-- <td>表格3</td> -->
</tr>
<tr>
<!-- <td>表格4</td> -->
<td>表格5</td>
<td>表格6</td>
</tr>
</table>运行展示：
6.9表单标签form
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器.
表单是一个整体，其中包含：
6.9.1输入框input
使用type属性，修改输入框的类型
1》在radio单选框中，必须使用name设置同一组，才能实现单选
2》在单选框radio和复选框CheckBox中使用checked设置初始选中
3》在文本框 密码框中使用 placeholder 设置模糊提示文字
4》有三种按钮形式reset重置 submit提交 button普通
6.9.2下拉列表select
下拉列表选择是一个整体，里面要包含选项选项option
代码：
<select name="city" id="">
<option value="c1">城市1</option>
<option value="c2">城市2</option>
<option value="c3">城市3</option>
<option value="c4">城市4</option>
<option value="c5">城市5</option>
</select>
<br />
<input type="submit" name{} value="提交" />结果展示：
6.9.3文本域textarea
cols 控制列数/宽度
rows 行控制行数/高度
maxlength 控制最大长度/限制字数
<textarea maxlength="10" name="" id="" cols="30" rows="10"></textarea>6.10 HTML5新增语义化标签
eg:
time【时间日期】
nav【导航】
header【头部】
footer【底部】
main【主体】
aside【侧边栏】
三、CSS样式表
网页组成=HTML+CSS+Js
HTML:超文本标记语言，控制网页的结构
CSS:层叠样式表，控制网页的外观
/*CSS语法格式：*/
选择器{
属性：属性值;
属性：属性值;
}
1. CSS的注释是 /* */
2. 选择器--用于选择的工具
3. {}不能省略
4. 属性与属性之间以：相邻，以;为结尾【注意:;都是英文的】一、1.CSS基本选择器
| 全局选择器 * | *{color:颜色;} 选择所有的标签 |
| 标签选择器 标签名 | p{color:颜色;} 选择所有的p标签 |
| class类选择器 .类名 | .name_li{color:red} |
| id选择器 #id名 | #tel{color:red;} 选择唯一的id名为tel的标签，文字颜色为红色 |
| 伪类选择器 :状态名 | :link{} 初始状态 :visited{} 点击后的状态 :hover{} 鼠标悬停/滑过状态 :active{} 鼠标点击状态 :focus{} 获取光标状态 |
| 包含选择器 以空格隔开 | ul li{} 选择ul里面的li ol li{} 选择ol里面的li .nav .a2{} .nav a:hover{} ul li a:hover{} |
| 群组选择器 以,隔开 | h1,h2,h3{} |
2.文字样式修改
color:#0ff;
font-size:2em;
/*文字大小*/
font-family:"楷体";
/*文字字体*/
font-weight: bold;
/*文字加粗*/
font-style: italic;3.文本样式修改
p{
/*首行缩进*/
text-indent:2em;
/*行高*/
line-height:3.5 ;
/*文本居中*/
text-align: center;
/*下滑线*/
text-decoration: underline;
/*上划线*/
text-decoration: overline;
}4.列表样式修改
ul li{
list-style-type: square;
list-style-type: disc;
list-style-type: circle;
list-style-type: none;
list-style-image:url(images/logo_03.png);
/*list-style: none;*/
}5.背景样式修改
p{
width:500px;
height:3000px;
background-color:#0ff;
/*背景颜色*/
background-image: url(images/sc_07.gif);
/*背景图片*/
background-repeat: no-repeat ;
/*background-position: 100px 30px;*/
/*背景位置*/
background-attachment: scroll;
/*background-attachment: fixed;*/
/*复合属性*/
background:#f0f url(images/car 09.png)0 0 no-repeat;
/*背景图可以设置大小*/
background-size:50px 50px;
}二.1.css新增属性元素显示/转换
标签有分类——单标签、双标签
元素有分类——块元素、行内元素、行内块元素
块元素：独占一行、设置宽高生效、默认宽度占父元素100%
display: block;
行内元素：在一行之内显示、设置宽高不生效、默认宽度是内容撑开的
display: inline;
行内块元素：既在一行之内显示、宽高还生效
display: inline-block;
2.圆角边框
border-radius: 50% ;
border-radius: 10% 50% ;
border-radius: 0% 25% 50% ;
border-radius: 0% 15% 25% 50%;可以设置1到4个属性值，遵循“顺指针、对角线”原则
3.背景色渐变
background:linear-gradient(to bottom,red,orange,yellow);4.文字阴影
text-shadow:1px 1px 2px red;
/*文字阴影 横向偏移 竖向偏移 模糊程度*/5.盒子阴影
box-shadow:0px 2px 8px 10px #CCC inset;6.过渡动画
只能从一个状态过渡到另一个状态
.d1{
width: 10px;
height: 150px;
overflow: hidden;
/*隐藏多余部分*/
transition: width 1s ease;
/*过渡动画*/
}
/*过渡动画需要触发条件，这里是鼠标划过时才显示动画这也是过渡动画的一个缺点*/
.d1:hover{
width: 1190px;
}7.帧动画
.zdh{
width: 150px;
height: 300px;
background-color: #fff;
/*animation:name[帧动画名称] durration[时长] timing-function[速度曲线] delay[延时]*/
/*animation:iteration-count[重复次数] direction[方向] fill-mode[开始和结尾的填充状态]*/
animation: WK 3s ease 10;
/*帧动画*/
}
@keyframes WK
{
0% { background-color:#ff0;}
10% { background-color:#abc;}
20%{ background-color:#abf;}
30%{ background-color:#ff0;
40%background-color:#f12;}
50%{ background-color:#fef;
60%{ background-color: #12f;
70%{ background-color:#0ff;}
80%{ background-color:#0f0;}
90% { background-color:#ffe;}
100%{ background-color:#fef;}
}8.溢出
/*盒子内容溢出*/
overflow: visible;/*默认显示*/
overflow: hidden;/*隐藏*/
overflow: scroll;/*溢出与否，都显示滚动条*/
overflow: auto;/*自动检测,溢出显示滚动条，不溢出不显示*/
四.布局
1.静态布局
从上往下逐一摆放
缺点：会造成空间浪费
2.浮动布局 float
float可以在页面中进行分页
float：left；
float：right；3.定位布局position
| position:static; | 静态定位，没有定位，默认值 |
| position:relative; | 相对定位，相对于自身进行定位【位移时，自身原位置不消失】 |
| position:absolute; | 绝对定位，相对于body或者带有定位的父元素进行定位【位移时，自身原位置消失】 |
| position:fixed; | 固定定位，相对于浏览器窗口进行定位【滚动时也是固定的】 |
其中注意一点：因为相对定位自身位置不消失，所以一般不会使用相对定位进行位移。
我们通常采用父相子绝来进行定位处理。
位移必须配合方向词：left right top bottom，单位有px em % 等，正负值都可以。
使用定位时，盒子会产生层叠效果，可以通过z-index属性进行层叠顺序调整。
z-index属性是不带单位的数字，正负都可以，值越大越显示在上方。
——————————————————————————————————————
扫一扫
2130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
