HTML:超文本标记语言----决定页面上显示什么内容
CSS:页面上内容显示的风格
JavaScript:页面特效
1.HTML
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8">
</head>
<body>
hello world!<br/>你好,HTML!
<p>段落1<p>
<p>段落2<p>
<img src="imgs/001_1_1.bmp" alt="这是一张图片"/>
<h1>标题1</h1>
<!-- <h2>标题2</h2>-->
<!-- <h3>标题2</h3>-->
<!-- <h4>标题2</h4>-->
<!-- <h5>标题2</h5>-->
<!-- <h6>标题2</h6>-->
武林高手排行榜:
<!-- 有序列表-->
<ol type="A" start="2">
<li>扫地僧</li>
<li>萧远山</li>
<li>虚竹</li>
</ol>
<!-- 无序列表-->
<ul>
<li>扫地僧</li>
<li>萧远山</li>
<li>虚竹</li>
</ul>
<!-- u下划线 b粗体 i斜体-->
你是<b><i><u>喜欢</u></i></b>舔月饼还是咸月饼?<br/>
水分子化学式:H<sub>2</sub>O<br/>
<span>赵又廷</span>
<!-- 超链接标签,a表示超链接 href表示连接地址-->
<!-- target:
_blank:在新窗口打开
_self:在本窗口打开(没有声明则默认为此)
_parent:在父窗口打开
_top:在顶层窗口打开
-->
<a href="https://www.baidu.com" target="_blank">百度一下</a><br/>
</body>
</html>
- 一个网页代码由< html>开始,在<\html>结束。< html>为开始标签,<\html>为结束标签
- title表示网页的标题
- < meta charset=“UTF-8”>表示该网页使用UTF-8进行编码
- body中包含的是网页的内容
- < br/> 表示换行,br标签是一个单标签。单标签:开始标签和结束标签是同一个,斜杠放在单词后面
- p表示段落标签
- img表示图片标签
src 属性表示图片文件的路径
width 和 hight表示图片的大小
alt表示图片提示 - < h> <\h>,h1~h6 :表示标题标签
- 列表标签
ol:有序列表
ul:无序列表
<html>
<head>
<meta charset="UTF-8">
<title>表格学习标签</title>
</head>
<body>
<!--表格标签 table
行 tr
列 td
table中如下属性已淘汰:border表格边框
width 表格宽度
cellspacing 单元格间距
cellpadding 单元格填充
align 表格内容格式
-->
<table border="1" width="600" cellspacing="0" cellpadding="4">
<tr align="center">
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>lyy</td>
<td>001</td>
<td>23</td>
</tr>
<tr align="center">
<td>sss</td>
<td>002</td>
<td>34</td>
</tr>
</table>
<!--分割线-->
<hr/>
<table border="1" width="600" cellspacing="0" cellpadding="4">
<tr align="center">
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>删除 </th>
</tr>
<tr align="center">
<td>lyy</td>
<td>001</td>
<td>23</td>
<td><img src="imgs/001_1_1.bmp" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>sss</td>
<td>002</td>
<td>34</td>
<td><img src="imgs/001_1_1.bmp" width="24" height="24"/></td>
</tr>
</table>
</body>
</html>
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4add06230ad37fd8395e4a66f4514126.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签的学习</title>
</head>
<!-- 表单是一个容器,承载发送给服务器的数据-->
<body>
<!-- <form style="border:1px solid red;">
</form>
-->
<!--action="demo04.html" 表示提交的地址;method="post"表示表单的发送方式为post(一般使用post),还有一种get方式-->
<form action="demo04.html" method="post">
<!--
input type="text"表示文本框,其中name属性必须要指定,否则文本框数据将来是不会发送给服务器的
input type="password"表示密码框输入不显示,也必须指定name属性
input type="radio"表示单选按钮,name属性值需要保持一致才会有互斥的效果
input type="checkbox"表示复选框,name属性值建议保持一致
select name="star"表示下拉列表 option表示一个选项,其中value是发送给服务器的值,selected表示默认选中的项
textarea name="remark"表示多行文本框,它的value值就是开始结束标签之间的内容
input type="submit"表示提交按钮
input type="reset"表示重置按钮
input type="button表示普通按钮
-->
昵称:<input type="text" name="nickName"/><br/>
密码:<input type="password" name="pwd"/><br/>
性别:<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女<br/>
爱好:<input type="checkbox" name="hobby" value="basketbal">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="pinpang">乒乓球<br/>
星座:<select name="star">
<option value="1">白羊座</option>
<option value="2">处女座</option>
<option value="3" selected>天蝎座</option>
<option value="4">天秤座</option>
<option value="5">摩羯座</option>
</select><br/>
备注:<textarea name="remark" rows="4" cols="50"></textarea><br/>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="这是一个普通按钮"/>
</form>
</body>
</html>
提交地址的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1><font color="red">注册成功</font> </h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
这里是demo05的内容<br/>
<!-- iframe 在一个页面嵌入嵌入一个子页面-->
<iframe src="demo3.html"/>
</body>
</html>
总结:
- HTML是解释型的文本标记语言,不区分大小写
- 学到的标签:html,head,title,meta,body,br,p,hr,div,table,from,u,i,b,sup,sub, ,ul,ol,li,tr,td,th,h1-h6,a,input,select,textarea,img
2.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Style标签包裹的成为内部样式表-->
<style type="text/css">
/* 被style包围的范围是CSS环境,可以写CSS代码*/
/*标签样式表*/
p{
color: red;
}/* .表示类样式 后面使用class="f20"可以调用*/
.f20{
font-size: 20px;
}
/* #表示ID样式 使用id="p4"调用*/
</style>
<!-- 引用外部的样式表-->
<link rel="stylesheet" href="css/demo01.css">
</head>
<body>
<!-- <p><font color="red">这里是段落1</font></p>-->
<!-- <p><font color="red">这里是段落2</font></p>-->
<p>这里是段落1</p>
<p>这里是段落2</p>
<p class="f20">这里是段落3</p>
<p id="p4">这里是段落4</p> <!--id属性在整个HTML文档中,尽量保持唯一(虽然重复也不会报错) -->
<div>
<!--嵌入样式表,卸载标签的内部,以一个属性存在-->
<p><span style="font-size: 60px;font-weight: bolder;color: yellow">HELLO</span></p>
<span class="f32">World</span>
<p class="f32">!!!!</p>
</div>
</body>
</html>
外部样式表CSS
#p4{
background-color: pink;
font-size: 24px;
font-weight: bolder;
font-style: italic;
font-family: "华文彩云";
}
/*组合样式 div内部的p标签内容为蓝颜色;div中的f32类标签定义32像素字体为宋体*/
div p{
color: blue;
}
div .f32{
font-size: 32px;
font-family: 宋体;
}
- CSS的基本语法分类:标签样式表、类样式表、ID样式表
- CSS从位置上的分类:嵌入式样式表(嵌入样式表,卸载标签的内部,以一个属性存在)、内部样式表(Style标签包裹的成为内部样式表)、外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{
width: 400px;
height: 400px;
background-color: greenyellow;
/*border边框样式*/
/*border-width: 1px; */
/*border-style: solid;*/
/*border-color: blue;*/
/* 合并*/
border: 1px solid blue;
}
#div2{
width: 150px;
height: 150px;
background-color: green;
margin-left: 100px;
margin-top: 100px;
/* 填充 padding*/
padding-top: 50px;
padding-left: 50px;
}
#div3{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"> </div>
</div>
</div>
</body>
</html>
CSS盒子模型:1、border边框 2、margin间距 3、padding填充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{
width: 200px;
height: 50px;
background-color: green;
/*绝对定位,左上角为0,0*/
position: absolute;
left: 100px;
top: 100px;
}
#div2{
width: 200px;
height: 50px;
background-color: pink;
/*相对定位*/
position: relative;
float: left;
margin-left: 20px;
}
#div3{
height: 50px;
background-color: yellow;
}
body{
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
</body>
</html>
position:
- absoulte:绝对定位,需要配合left,top
- relative:相对定位。一般会和float,margin,padding 等一起使用
float:
3.Javascript
Javascript:是客户端的一个脚本语言
JS是一门弱类型的语言,变量的数据类型由后面赋的值的类型绝对