1.HTML入门
-
学会去看浏览器的HMTL源码：右键---审查元素（检查）
-
html:超文本标记语言：把图片、文字、音频、视频等等用标签的形式来展示。
-
网页：
-
网页骨架：html标签
-
css样式： 页面渲染（颜色、大小、字体、布局。。。）
-
js动态：页面动态和交互。（轮播图、请求。。。）
-
-
一个基本网页：hello.html文件
<!--html根标签--> <html> <!--头部标签--> <head> <!--注释快捷键Ctrl+shift+/--> <!--标题标签--> <title>this is title</title> </head> <!--内容体标签：--> <body> hello world! </body> </html>
2.html标签
2.1基本标签
<!--html5标识--> <!DOCTYPE html> <html lang="en"> <head> <!--这个标签解决中文乱码问题--> <meta charset="UTF-8"> <title>Title标题</title> </head> <body> hello world! <!--标题标签中 h1最大，h6最小。标签结束后会自动换行--> <h1>我是H1我是最大的</h1> <h2>我是H2 我是老二</h2> <h3>我是H3 我是老三</h3> <h4>我是H4 我是老四</h4> <h5>我是H5 我是老五</h5> <h6>我是H6 我是老六</h6> <!--hr标签，定义一个分割杠--> <hr> <!--字体标签 过时的。有新的技术代替它--> <!-- face:字体样式 --> <!-- color:字体颜色--> <!-- size: 字体大小 单位是px--> <font face="宋体" color="red" size="20" >我是一个字体</font> <!--换行标签--> <!--html代码中的换行，浏览器解析不会换行。只有换行标签和自带换行的标签才会换行--> <br> 商品名称：小米Redmi K50Pro商品编号：100035246652商品毛重：0.63kg商品产地： 中国大陆CPU型号：其他运行内存：8GB存储卡：不支持存储卡后摄主摄像素： 1亿像素前摄主摄像素：其他分辨率：WQHD充电器：其他特征特质：NFC，5G， 其他游戏性能：其他游戏配置：X轴线性马达系统：其他机身内存：256GB <br> <!--段落标签--> <p>商品名称：小米Redmi K50Pro</p> <p>商品编号：100035246652</p> <!--* b：加粗标签 * i：斜体标签 * u：下划线标签，在文字的下方有一条横线--> <b>商品毛重：0.63kg</b> <i>商品产地：中国大陆</i> <u>CPU型号：其他运行内存：8GB</u> <hr> <!--居中标签--> <center>我是最棒的</center> <!--标签可以嵌套--> <center><font color="green" face="楷体">我是最棒的</font></center> </body> </html>
基本标签练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>传智播客</title> </head> <body> <h3>企业简介</h3> <hr color="red"> <p><font face="楷体" color="red">山东</font> ......</p> <p>..... 我们的使命是：<b>为中华民族伟大复兴而讲课，为千万学生少走弯路而著书</b>。</p> <p>.... <b>....</b>....</p> <hr color="red"> <!--0-9 abcdef 十六进制--> <center><font size="2" color="#dcdcdc">xxxx有限公司</font></center> <center><font size="2" color="#dcdcdc">xxx</font></center> </body> </html>
补充：
注意：在上图页面中版权所有里有特殊字符，需要使用转义字符。有如下转义字符：
2.2图片标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片、音频、视频标签</title> </head> <body> <!--图片--> <!--src：图片的路径--> <!--height:高度 width：宽度 单位是像素px h--> <!--hidden 隐藏--> <!--alt: 图片走丢以后展示的效果--> <!--路径可以： 1、相对路径.相对自己 2. 绝对路径 盘符 不常用 3. 网络路径 --> <img src="img/a.jpg1" alt="图片走丢了"/> <!--可能展示不出来你要去文件夹中打开--> <img src="E:\maven-project002\htmldemo2\src\main\webapp\img\a.jpg"/> <img width="285" height="339" src="https://img2.baidu.com/it/u=2468362699,2612376962&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"/> <hr> <!--音频--> <!--src:音频路径 controls 展示音频的进度条这些信息 --> <audio src="img/b.mp3" controls></audio> <!--视频--> <!--src：视频的路径--> <!--controls 展示音频控制条--> <!--width：视频的宽度 height:视频 的高度--> <video src="img/c.mp4" controls width="500" height="400"></video> </body> </html>
2.3 超链接标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接</title> </head> <body> <!--超链接 <a></a>--> <!--href: 网址地址--> <a href="http://www.baidu.com">点击一下，有惊喜</a> <!--target: 指定打开方式 _blank:新窗口打开 _self：在当前窗口打开（默认 --> <a href="http://www.baidu.com" target="_blank">新窗口打开</a> <a href="http://www.baidu.com" target="_self">在当前窗口打开（默认）</a> </body> </html>
-
返回顶部案例（参考随堂代码）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部案例</title> </head> <body> <!--id:一个标签只能有一个id --> <p id="top">顶部</p> <p>第一行1</p> <p>第一行2</p> <p>第一行3</p> <p>第一行4</p> <p>第一行5</p> <p>第一行6</p> <p>第一行7</p> <p>第一行8</p> <p>第一行9</p> <p id="top10">第一行10</p> <p>第一行11</p> <p>第一行1</p> <p>第一行1</p> <p>第一行1</p> <p>第一行1</p> <p>第一行1</p> <p>第一行1</p> <!--通过#id名 跳转到那一行--> <p><a href="#top">返回顶部</a></p> <p><a href="#top10">返回顶部top10</a></p> </body> </html>
2.4列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!--列表特点： 每一项会自动换行 每一行前面加东西--> <!--有序列表 ol--> <ol> <li>咖啡</li> <li>牛奶</li> <li>红糖水</li> </ol> <!--无序列表--> <ul> <li>咖啡</li> <li>牛奶</li> <li>红糖水</li> </ul> <!--自定义序号样式--> <!-- type 自定义序号 后面会学习CSS样式更花里胡哨 --> <ol type="a"> <li>咖啡</li> <li>牛奶</li> <li>红糖水</li> </ol> </body> </html>
2.5表格标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--定义一个4*4的表格--> <!--<table> 定义一个表格--> <!--border: 表格边框 px--> <!--width: 表格宽度 px--> <!--cellspacing: 单元格之间的空隙--> <!--<tr> 定义一行--> <!--align: left center right 单元格内容的对齐规则--> <!--<td> 定义一个格--> <!--<th> 定义一个标题格 : 格内居中字体加粗--> <!--rowspan: 横跨合并 多行行级 向下合并几个格子--> <!--colspan: 列跨合并 一行上 向右合并几个格子--> <!--合并之后要包多余的删掉--> <table border="1" width="400" cellspacing="0"> <tr > <th>序号</th> <th>品牌logo</th> <th>名称</th> <th>企业名称</th> </tr> <tr align="center"> <td>010</td> <td>三只松鼠</td> <td rowspan="2">松鼠</td> <td>松鼠有限公司</td> </tr> <tr> <td colspan="2">010</td> <td>松鼠有限公司</td> </tr> </table> </body> </html>
2.6布局元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局元素</title>
</head>
<body>
<!--块级元素div-->
<!--内容布局-->
<!--块级元素会占用一行-->
<!--可以设置宽度和高度-->
<div style="width: 20%;height: 200px; border: 1px solid red;">我是一个块级元素1</div>
<div>我是一个块级元素2</div>
<div>我是一个块级元素3</div>
<!--行内元素span--><!--文本内容容器-->
<!--内容多大它多大，但是不可以设置宽高-->
<span style="width: 200px;height: 200px;">111111</span>
<span>222222</span>
<span>333333</span>
</body>
</html>
2.7表单元素
| 请求方式 | get | post |
|---|---|---|
| 可见 | 可见url挂参数 | 封装成数据包 |
| 数据量的大小 | 最大4K | 没有上线 |
| 安全线 | 没有安全性可言 | 相对安全 |
| 性能（速度） | 速度快 | 速度较慢 |
| 文件上传下载 | 不支持 | 支持 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<!--form 定义一个表单-->
<!-- action：表单提交的地址 #测试的时候用 自己-->
<!-- method:get/post 提交方式：get (默认)/post-->
<form action="#" method="post">
<!--input 输入框-->
<!-- type: 输入框类型 name: 提交以后键的名字 value:默认值 -->
<label for="user-name-label">用户名信息:</label>
<input id="user-name-label" type="text" value="张三" name="username">
<br>
<label for="password-label">密码信息:</label>
<input id="password-label" type="password" value="123456" name="password">
<br>
<label for="hoppy-label">爱好:</label>
<!--select 提供一个下拉选项卡 name = 键的值和选项里键的名字一样-->
<select id="hoppy-label" name="hoppy">
<!--多个选项option -->
<!-- value:提交的值 name:提交的键的名字 标签里面的内容是展示的数据-->
<option value="1">打篮球</option>
<option value="2">踢足球</option>
</select>
<br>
个人简介：<textarea cols="20" rows="4" name="t"></textarea>
<br>
<input type="submit" value="提交表单">
</form>
</body>
</html>
input类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单2</title>
</head>
<body>
<form action="#" method="post">
用户名：<input type="text" value="zhangsan" name="username"><br>
密码：<input type="password" value="123456" name="pass"><br>
<!--单选框 name一致 value:提交的值 checked:预选-->
性别：<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0">女
<br>
<!--checkbox name 一致 value:提交的值 checked:预选-->
兴趣爱好：
<input type="checkbox" name="hoppy" value="1" checked>旅游
<input type="checkbox" name="hoppy" value="2">电影
<input type="checkbox" name="hoppy" value="3">游戏
<br>
<!--上传文件： file name:提交的键的名字-->
上传头像：
<input type="file" name="file">
<br>
<!--隐藏字段：修改表单的时候-->
隐藏字段:
<input type="hidden" name="id" value="123">
<br>
<!--重置按钮-->
<input type="reset">
<!--普通按钮-->
<input type="button" value="按钮">
<br><input type="submit" value="提交">
</form>
</body>
</html>
3CSS样式
3.1css入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css入门</title>
</head>
<!--在style标签里面写样式 <style>一般出现在head里面或者是body和head中间 -->
<style>
/*这里的样式会对所有的div生效*/
div{
font-size: 40px;/*字体大小设置为20px*/
text-align: center;/*文本居中*/
color:red;/*字体颜色*/
border:1px solid green;/*边框：1px 实线 绿色*/
width: 90%;/*宽度 % 相对于浏览器宽度的百分比*/
height: 500px; /*高度设置为100px*/
/*background: darkred;!*背景颜色*!*/
background-image: url("img/a.jpg");
border-radius: 25px;/*圆角*/
}
</style>
<body>
<div>我是最棒的，你看帅不帅！！</div>
</body>
</html>
3.2选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<!--3.外联式 引入css样式 rel指定css文件 href:指定文件路径 -->
<link rel="stylesheet" href="css/style.css">
</head>
<!--2行外样式-->
<style>
/*标签选中 当前标签都会生效*/
div{
color: green;
font-size: 30px;
}
</style>
<body>
<!--小结1：行内与行外冲突样式的时候：行内优先级》行外 》外联的
没有冲突的就互补过来。
-->
<!--1行内样式-->
<div style="color: red;">我是最帅的。</div>
<div>我是最帅的。</div>
<div>我是最帅的。</div>
<p>你要不赖</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器2</title>
</head>
<link rel="stylesheet" href="css/style.css">
<style>
/*标签引入*/
div{
color: green;
}
/*class选择器*/
/* 特点：1. 一个标签可以有多个class 多个之间' '
2. 他会选中名字都是这个名字的class*/
.c1{
color: darkred;
font-size: 30px;
}
.c2{
background: darkgray;
}
/*ID选择器 #*/
/*一个标签只能有一个ID 一个页面上的id名字不可重复*/
#div1{
color: aqua;
}
</style>
<body>
<!--
小结：ID选择器优先级》class选择器》标签选择器
补充突就是互补
-->
<div style="color: red;">我是最帅的。</div>
<div>我是最帅的。</div>
<div class="c1">我是最帅的。</div>
<div class="c2 c1" id="div2">我是最帅的。</div>
<div class="c1" id="div1">我是最帅的。</div>
<p class="c1">你不赖</p>
</body>
</html>
重点：
行内》行外ID》外联选择器ID》行外class》外联选择器class》行外标签》外联选择器标签
ID》class》标签----就近原则
能力目标：
-
CSS去写定位案例
-
a标签实现返回顶部案例
-
文本案例、表单
-
百度首页
3133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
