本文详细介绍了HTML11.06版本的基本结构、网页标签、CSS样式（包括选择器、盒子模型、颜色、布局）、JavaScript（如变量、数据类型、运算符、控制结构和DOM操作）等内容，以及如何在网页中实现功能如表单、计算器等。
HTML
11.06
一、网页开发准备
HTML 超文本标记语言
HTTP/HTTPS 超文本传输协议
网页制作编写工具：hbuildx
HbuilderX 下载网址：httpS://dcloud.lo/
谷歌浏览器网址：http://www.google.cn/chrome/ 64位
二、网页标签
html：网页的声明
head:网页的头部
title:网页的名称
body：网页的主体部分
三、网页标签
1.标题标签
<h> </h>
2.水平线标签
<hr/> 单标签
- 换行标签
<br/> 单标签
4.段落标签
<p> </p>
5.文本标签
<em> </em> 倾斜
<strong> </strong> 加粗
<span></span> 正常
6.超链接
<a href=“”>政策“真金白银”加力稳就业</a>
href = “链接的目标网址路径”
herf = “https://www.baidu.com/”站外链接
href = “index4.html” 站内链接
href = “#” 空连接
target = “blank” 新开一个窗口
target = "_self" 默认
7.图片标签
< img src=“” alt=“” width=“1000”heigth=“50”/>
scr：图片的路径
alt：图片的名称
width：宽度
height：高度
一般来说，网页的图片只需要设置宽度即可，高度会随着宽度进行等比缩放
图片的类别：jpg（jpeg），png（透明背景），gif（动画），webp，bmp
8.列表标签
无序列表
<ul><li></li><li></li><li></li></ul>
有序列表
<ol><li></li><li></li><li></li></ol>
<ol type="a"><ol>
11.07
定义列表
<dl><dt>一级列表项<dt/> <dd>二级列表项</dd></dl>
例：<dl>
<dt>柚子</dt> <dt>一级列表
<dt>草莓</dt>
<dd>冰箱</dd> <dd>二级列表
<dd>电视</dd>
<dt>苹果</dt>
<dt>葡萄</dt>
</dl>
9.表格标签
table 表格
tr 行
th 表头单元格 默认加粗 居中
td 单元格
border: 表格的属性
cellpadding : 内填充，值越大，内容距离单元格越远
cellspacing: 外边距，单元格距离表格边框的距离，一般设为0
colspan=“2”合并列
rowspan=“3”合并行
align=“right”居右
align=“left”居左
align=“center”居中
例：单格
<table border="1" cellpadding="30" cellspacing="0">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
例：合并格
<table border="1" cellpadding="30" cellspacing="0">
<tr>
<td rowspan="2">1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td colspan="2">7</td>
</tr>
</table>
10.表单标签
form：表单标签
text：普通文本框
password：密码框
radio：单选框
checkbox：多选框
select：下拉列表 option：下拉列表项
textarea：多行文本框
例：账号和密码
<h2>用户注册</h2>
<form action="#">
账号：<input type="text" /><br/>
密码：<input type="password" /><br/>
性别：<input type="radio"name="xb"/>男<input type="radio"name="xb"/>女<br/>
爱好：<input type="checkbox"/>打游戏<input type="checkbox"/>跳舞<input type="checkbox"/>唱歌
住址：<select>
<option>山西省</option>
<option>陕西省</option>
<option>河北省</option>
</select>
<select>
<option>临汾市</option>
<option>太原市</option>
<option>大同市</option>
</select><br/>
简介：<textarea cols="30" rows="10"></textarea>
<input type="submit" value="提交"/>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置"/>
</form>
CSS
11.08
css 层叠式样式表
html标签 负责布局，轮廓
css样式 负责表现
javascript脚本 负责行为，动态
鸟
html：一只扒光羽毛的死鸟
css：鸟的羽毛
javascript：活的，行为，飞，叫
CSS概念：层叠式样式表，用于装饰html文档，用于网页的展现
一、网页中引入css的三种方式
1.内部样式：在head之间在title之下定义的。
<title></title>
<style>
p{
color: blue;
}
</style>
2.外部样式
在网页中引用外部样式文件 快捷键：link+回车
引入外部的样式
<link rel="stylesheet" href="c1.css"/>
3.行内样式
直接把样式插入到标签里面，把style当做标签的属性
直接插入行内之间
<p style="color:yellow;"> </p>
三种方式的优先级：行内样式>(外部样式,内部样式，取决于哪个后执行，就是用后面的样式)
二、css样式选择器
1.标签选择器
p，span，h1
2.类选择器
定义的名称为title的类型
<style>
.title{
color: red;
}
</style>
使用：
<h1 class="title">标题</h1>
<p class="title">加沙记者4个孩子和3个兄弟姐妹空袭中丧生</p>
<span class="title">法院——法官</span>
<h1 class="title">后者</h1>
3.ID选择器
定义的名称为id的类样式
<style>
#title{
color: blue;
}
</style>
使用：
<h1 id="title">标题</h1>
ID选择器在页面只能出现一次，优先级最高
选择器三种方式的优先级：
ID选择器>类选择器>标签选择器
4.其他选择器
后代选择器：p span，p.title
例：
<style>
.title{
color: blue;
}
.title span{
color: red;
}
</style>
<body>
<p class="title">俄内务部决定<span>通缉国际刑事法院</span>一法官，后者曾对普京发出逮捕令</p >
</body>
三、css样式
1.字体样式（常用的字体样式）
font-size: 20px; 字体大小为20个像素
font-family: “楷体”; 字体类型为楷体
font-weight: bold; 字体加粗
font-weight: normal;去除加粗效果
font-style: italic; 字体为斜体字
font-style:normal; 字体为正常
2.文本样式
color:red; 文本的颜色值
line-height: 50px; 段落文本行高
text-align: center/left/right; 文本的对齐方式
text-decoration:line-through;文本装饰为删除线
text-decoration: underline; 文本装饰为下划线
text-decoration:none；文本装饰去掉下划线
11.09
四、盒子模型
里面可以装内容的各种标签容器都可以称作为盒子
width: 300px;盒子的宽度
height: 300px;盒子的高度
line-height: 300px;行高
border: 1px solid orange;盒子的边框线1像素 实线 橙色
text-align: center;对齐方式
list-style:none;去掉小圆点
 ：空格
标签的分类：
1.块级元素
p，div，ul，li，h1-h6
特征：独占一行，可以自定义宽度和高度
2.行内元素
span，em，strong，a
特征：不会独占一行，不可以自定义宽度和高度
3.行内快元素
img，input
特征：不独占一行，可以自定义宽度和高度
块级元素与行内元素的转换
块级元素转换为行内元素：display: inline;
行内元素转换为块级元素：display: block;
标签的嵌套规则:
1.块级元素可以嵌套任意的元素，p标签除外，p标签只能嵌套行内元素及行内块元素及行内块元素
2、行内元素只可以嵌套行内元素及行内块元素，不可以嵌套块级元素
快速生成列表的快捷键: ul>li*8 +tab键
五、超链接的样式(伪类)
例：<style>
a:link{
color: black;
text-decoration: none;
}
a:hover{
color: blue;
text-decoration: underline;
}
a:visited{
color:red;/* 访问过的状态 */
}
a:active{
color: blue;/* 鼠标单机未释放时的状态 */
}
</style>
a:link样式
a:hover划过样式
六、颜色值的表示形式
1.单词
red
2.十六进制
#ff0000
二进制 0 1
十进制
十六进制 0 1 2 3 4 5 6 7 8 9 A B C D E F
3.RGB
color: rgb(red,green, blue); 取值: 0-255
11.10
七、盒子的外边距
margin：在网页里面，盒子距离盒子的距离就叫做外边距
margin-top: 0; 上
margin-bottom: 0; 下
margin-left: 0; 左
margin-right: 0; 右
margin: 0; —>直接代表上下左右
*—>是通配符，匹配所有的网页标签
*{
margin: 0;
} 所有标签上的外边距都被清除
margin: 50px 30px 40px 29px;—>4个值代表上右下左
2个值代表上下 左右
3个值代表 上 左右 下
八、盒子的内边距
内容距离盒子的距离，通俗说就是填充
填充可以清楚，也可以自定义设置
padding-top 上
padding-bottom 下
padding-left 左
padding-right 右
padding：0；
1个值代表上下左右
4个值代表上右下左
2个值代表上下 左右
3个值代表 上 左右 下
九、盒子的边框
border：1px solid #ff0000;
border-top: 10px solid #ff0000;
border-bottom: 10px solid #ff0000;
border-left: 10px solid #ff0000;
border-right: 10px solid #ff0000;
border-right-color：#ff0000
border-right-width：1px
border-right-style：soild（实线）
border-top:上
border-bottom:下
border-left:左
border-right:右
dashed：虚线
dotted：小圆点
soild：实线
十、背景颜色和背景图片
1.背景颜色
background-color：red
2.背景图片
background-image: url(img/b.png);背景图片
background-repeat: no-repeat; 背景不重复
background-position:135px 120px;背景图片的位置
background-size: 25px; 背景图片的大小
11.13
十一、浮动
float:left;把元素设置为浮动元素，向左浮动
float：right;向右浮动
特征:加上浮动属性后，元素就脱离了标准文档流
clear:both; 在此元素的两侧清除浮动元素
clear:left;元素被向下移动以清除左浮动
clear:right;元素被向下移动以清除右浮动
一个盒子要在其父级容器中居中显示，则使用margin:0 auto;
十二、定位
1.相对定位
position: relative;
left: 50px;从左往右位移50像素
相对定位的元素没有脱离标准文档流，虽然位移走了，但之前的文档位置还存在。
2.绝对定位
position: absolute:
添加了绝对定位的元素会脱离标准文档流。
绝对定位的元素的偏移，如果父级盒子为定位元素，则会参考父级盒子的位置做偏移。如果父级盒子不是定位元素，则会参考body做偏移
3.固定定位
position:fixed;
脱离了标准文档流
text-indent:10px; 一般用于p标记中，用于首行缩进
块级在父级盒子中居中显示一般可以使用margin:0 auto;
行内元素或行内块级元素在父级盒子中居中显示一般可以使用text-align:center
JavaScript
11.16
定义：简称js，它是基于对象的，事件驱动的，具有安全性能的脚本语言
引擎：会自动解释执行脚本语言，执行的顺序是自上而下，按照顺序执行，，边解释边执行document 文档对象
一、网页引入jis的三种方式
1.内部
<script>
document.write("我要好好学习javascript!");
</script>
2.外部
<script src="js/index.js"> </script>
3.行内
<input type="button”οnclick=“javascript:alert(‘ok’)” value="点击我” />
二、变量
var num=10;
var name=“张三”;
js是一种弱类型语言
三、数据类型
js的基本数据类型共有五种
1.number 数字类型
例：var num=10;
2.string 字符类型
例：var name=“张三”;
3.boolean 布尔类型
例：var bool=true;
4.object或null类型
例：var add=null;
5.undefined类型，代表变量未赋值，未定义
例：var age;
引用数据类型
对象，数组…
四、运算符
1.算数运算符
+ - * / % ++ –
2.比较运算符
= < <= ==(比较的是值是否一样) != ===(全等于，比较的是变量的数据类型和值，如果两个都一致则为true) ! ===
3.逻辑运算符
&& 与
|| 或
！ 非
五、选择结构
1.if…else…
2.switch
六、循环结构
1.while
2.do…while
3.for
例：<script>
for(var i=0;i<1000;i++){
document.write("写代码"+i+"<br>")
}
</script>
七、document对象
document.getElementByld(“title”); 得到id为title的节点对象
例：<body>
<div id="title">
我爱学习
</div>
</body>
<script>
//获取节点的文本内容
var node=document.getElementBvld("title"):
var title=node.innerText;
alert(title)
//设置节点的文本内容
document.getElementByld("title")innerText="我爱玩游戏"
</script>
七、自定义函数
onclick 单击事件
例：<body>
<input type="button" value="计算两数之和" onclick="sum(11,22)" />
</body>
<script>
//自定义函数（无参的）
function sum(){
var num1=10;
var num2=20;
document.write(num1+num2)
}
</script>
//自定义函数（有参的）
function sum(num1,num2){
document.write(num1+num2)
}
11.17
八、js中的事件
onclick 单击事件
display: none;元素的显示状态为不显示
onmouseover 鼠标移入
onmouseout 鼠标移出
var node=document.getElementByld(“info”);
节点对象.style.样式名称="属性值”node.style.display=“block”;
九、计算器
//计算
function jisuan(){
var node = document.getElementById(“txt”);
var title = node.innerText;
var jg = eval(title);
node.innerText = jg;
}
//归零
function qingchu(){
document.getElementById(“txt”).innerText = 0;
}
//退格删除
function shanchu(){
var node = document.getElementById(“txt”);
var title = node.innerText;
var t=title.slice(0,-1)
node.innerText = t;
}
扫一扫
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
